feat: Add a separate browser and toggle control for each link (#27)

Resolves #20.
Resolves #26.

Reviewed-on: #27
Co-authored-by: Glen Whitney <glen@studioinfinity.org>
Co-committed-by: Glen Whitney <glen@studioinfinity.org>

package.json5

@@ -33,12 +33,12 @@
     url: 'https://code.studioinfinity.org/glen/archematics.git',
   },
   devDependencies: {
-    '@danielx/civet': '^0.6.36',
+    '@danielx/civet': '^0.6.38',
-    '@types/jquery': '^3.5.18',
+    '@types/jquery': '^3.5.19',
     'http-server': '^14.1.1',
     typescript: '^5.2.2',
   },
   dependencies: {
-    vrml1to97: '^0.2.0',
+    vrml1to97: '^0.2.2',
   },
 }

pnpm-lock.yaml

@@ -6,16 +6,16 @@ settings:
 
 dependencies:
   vrml1to97:
-    specifier: ^0.2.0
+    specifier: ^0.2.2
-    version: 0.2.0
+    version: 0.2.2
 
 devDependencies:
   '@danielx/civet':
-    specifier: ^0.6.36
+    specifier: ^0.6.38
-    version: 0.6.36(typescript@5.2.2)
+    version: 0.6.38(typescript@5.2.2)
   '@types/jquery':
-    specifier: ^3.5.18
+    specifier: ^3.5.19
-    version: 3.5.18
+    version: 3.5.19
   http-server:
     specifier: ^14.1.1
     version: 14.1.1
@@ -32,8 +32,8 @@ packages:
       '@jridgewell/trace-mapping': 0.3.9
     dev: true
 
-  /@danielx/civet@0.6.36(typescript@5.2.2):
+  /@danielx/civet@0.6.38(typescript@5.2.2):
-    resolution: {integrity: sha512-ApMaq2YyXfiM0xpcFWRZffVLgqxrYu3UWS5A0sWViK+RMeamVp6J0iGUeUsQFCF2Gd9+ldEPzWgUThzUcfQKnA==}
+    resolution: {integrity: sha512-R63YGIfvV4DQianNPUfMfBX60ozlv5htnRXI1wK3Pg6+d4NZ2V3RifFRH0NkmXXoFkRcULzJ+9BzVeI2/yX+yA==}
     engines: {node: '>=19 || ^18.6.0 || ^16.17.0'}
     hasBin: true
     peerDependencies:
@@ -63,8 +63,8 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /@types/jquery@3.5.18:
+  /@types/jquery@3.5.19:
-    resolution: {integrity: sha512-sNm7O6LECFhHmF+3KYo6QIl2fIbjlPYa0PDgDQwfOaEJzwpK20Eub9Ke7VKkGsSJ2K0HUR50S266qYzRX4GlSw==}
+    resolution: {integrity: sha512-KFbmk+dXfphHGuVCmlopgcNRCegN/21mkeoD4BzuJhVH0SJW3Uo2mLuAwb6oqTNV79EsRp6J7yC1BbKymjpx/g==}
     dependencies:
       '@types/sizzle': 2.3.3
     dev: true
@@ -481,8 +481,8 @@ packages:
     resolution: {integrity: sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==}
     dev: true
 
-  /vrml1to97@0.2.0:
+  /vrml1to97@0.2.2:
-    resolution: {integrity: sha512-RO5M/R9wqmLHbNm866Jz6Iax5BpL4BtqePM/arulHZZsC2rBmFmP4g00lvW/HUFQ6GT7I0/VHv/DPru272S3JA==}
+    resolution: {integrity: sha512-zLraKyuCtb2/Db4eygDimKAh4qweSKzBusDFrCxZ8RKextNSTEhda6pzxjoNTfPx/MnfrLISTEL+fwTiDILSZg==}
     hasBin: true
     dev: false
 

src/giveAwrl.civet

@@ -2,16 +2,22 @@ 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 ' '
+knownExtensions := /[.](?:wrl|x3d|gltf|glb|obj|stl|ply)$/
-// The next line will need to change when we handle pages with more than
+certainlyHandled :=
-// one link, since we will potentially need a canvas for each one.
+   knownExtensions.source.slice(0, -2).split('wrl|')[1].split '|'
+
+function makeBrowser(url: string)
    canvas := X3D.createBrowser()
 
-// Fix up the css so the browser is a nice size and we can see the world info
+   // Fix up css: smaller browser, but we can see the world info
-$(canvas).css width: '150px', height: '150px', overflow: 'visible'
+   $(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')
+      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 {
@@ -26,8 +32,6 @@ if x_ite_shadow
    // 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') ?? ''
 
    if certainlyHandled.some((ext) => url.includes ext)
       canvas.setAttribute 'src', url
@@ -40,5 +44,28 @@ else if url.includes '.wrl'
       browser.baseURL = url
       scene := await browser.createX3DFromString text
       browser.replaceWorld scene
+   canvas
 
-site.after(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()