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 ''
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 := $('👁')
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()