archematics/src/giveAwrl.civet

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

knownExtensions := /[.](?:wrl|x3d|gltf|glb|obj|stl|ply)$/
certainlyHandled :=
   knownExtensions.source.slice(0, -2).split('wrl|')[1].split '|'

function makeBrowser(url: string)
   canvas := X3D.createBrowser()

   // 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'

   // Now get the browser and load the requested VRML, converting if need be
   browser := X3D.getBrowser canvas
   browser.setBrowserOption 'StraightenHorizon', false

   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 -> knownExtensions.test @.getAttribute('href') ?? ''
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()