From 9fdf43a16522c43b28431e44bfaccd5b2507e2a2 Mon Sep 17 00:00:00 2001
From: Glen Whitney <glen@studioinfinity.org>
Date: Mon, 18 Sep 2023 21:07:49 -0700
Subject: [PATCH] feat: Add a separate browser and toggle control for each link

---
 src/giveAwrl.civet | 99 +++++++++++++++++++++++++++++-----------------
 1 file changed, 63 insertions(+), 36 deletions(-)

diff --git a/src/giveAwrl.civet b/src/giveAwrl.civet
index 8f94b84..8799121 100644
--- a/src/giveAwrl.civet
+++ b/src/giveAwrl.civet
@@ -2,43 +2,70 @@ import https://code.jquery.com/jquery-3.7.1.js
 X3D from https://create3000.github.io/code/x_ite/latest/x_ite.mjs
 {convert} from ./deps/vrml1to97/index.js
 
-certainlyHandled := '.x3d .gltf .glb .obj .stl .ply'.split ' '
-// The next line will need to change when we handle pages with more than
-// one link, since we will potentially need a canvas for each one.
-canvas := X3D.createBrowser()
+knownExtensions := /[.](?:wrl|x3d|gltf|glb|obj|stl|ply)$/
+certainlyHandled :=
+   knownExtensions.source.slice(0, -2).split('wrl|')[1].split '|'
 
-// Fix up the css so the browser is a nice size and we can see the world info
-$(canvas).css width: '150px', height: '150px', overflow: 'visible'
-x_ite_shadow := canvas.shadowRoot
-if x_ite_shadow
-   x_ite_style := x_ite_shadow.querySelector('link')
-   if x_ite_style
-      $(x_ite_style).after '<style type="text/css">
-         .x_ite-private-world-info-overlay {
-            inset: unset;
-            width: 300px;
-            height: 300px;
-         }</style>'
-   x_ite_browser := x_ite_shadow.querySelector '.x_ite-private-browser'
-   if x_ite_browser
-      $(x_ite_browser).css overflow: 'visible'
+function makeBrowser(url: string)
+   canvas := X3D.createBrowser()
 
-// Now get the browser and load the requested VRML, converting if need be
-browser := X3D.getBrowser canvas
-browser.setBrowserOption 'StraightenHorizon', false
-site := $('a[href^="http"]')
-url := site.attr('href') ?? ''
+   // Fix up css: smaller browser, but we can see the world info
+   $(canvas).css
+      width: '150px'
+      height: '150px'
+      overflow: 'visible'
+      'vertical-align': 'top'
+   x_ite_shadow := canvas.shadowRoot
+   if x_ite_shadow
+      x_ite_style := x_ite_shadow.querySelector 'link'
+      if x_ite_style
+         $(x_ite_style).after '<style type="text/css">
+            .x_ite-private-world-info-overlay {
+               inset: unset;
+               width: 300px;
+               height: 300px;
+            }</style>'
+      x_ite_browser := x_ite_shadow.querySelector '.x_ite-private-browser'
+      if x_ite_browser
+         $(x_ite_browser).css overflow: 'visible'
 
-if certainlyHandled.some((ext) => url.includes ext)
-   canvas.setAttribute 'src', url
-else if url.includes '.wrl'
-   // Need to obtain the text and check what level it is
-   response := await fetch url
-   text .= await response.text()
-   if /#\s*VRML\s*V?1[.]/i.test text
-      text = convert text
-   browser.baseURL = url
-   scene := await browser.createX3DFromString text
-   browser.replaceWorld scene
+   // Now get the browser and load the requested VRML, converting if need be
+   browser := X3D.getBrowser canvas
+   browser.setBrowserOption 'StraightenHorizon', false
 
-site.after(canvas)
+   if certainlyHandled.some((ext) => url.includes ext)
+      canvas.setAttribute 'src', url
+   else if url.includes '.wrl'
+      // Need to obtain the text and check what level it is
+      response := await fetch url
+      text .= await response.text()
+      if /#\s*VRML\s*V?1[.]/i.test text
+         text = convert text
+      browser.baseURL = url
+      scene := await browser.createX3DFromString text
+      browser.replaceWorld scene
+   canvas
+
+// Put eye icons after all of the eligible links
+links := $('a').filter -> !!@.getAttribute('href')?.match knownExtensions
+links.after ->
+   newSpan := $('<span>👁</span>')
+   newSpan.hover
+     (-> $(@).css 'background-color', 'lightblue'),
+     (-> $(@).css 'background-color', 'inherit')
+   newSpan.on 'click', @,
+   (e) =>
+      eye := e.target
+      state .= eye.getAttribute 'data'
+      unless state
+         state = 'off'
+         url := e.data.getAttribute('href') ?? ''
+         $(eye).after await makeBrowser url
+      if state is 'off'
+         eye.setAttribute 'data', 'on'
+         $(eye).css 'text-decoration', 'line-through 3px'
+         $(eye.nextSibling as Element).show()
+      else
+         eye.setAttribute 'data', 'off'
+         $(eye).css 'text-decoration', 'none'
+         $(eye.nextSibling as Element).hide()