glen/archematics
1
0
Fork 0
Code Issues 17 Pull Requests Packages Projects 1 Releases 2 Wiki Activity

feat: Add a separate browser and toggle control for each link

Browse Source
This commit is contained in:
Glen Whitney 2023-09-18 21:07:49 -07:00
parent 285554137d
commit 9fdf43a165
1 changed files with 63 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/giveAwrl.civet
View File

@ -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 X3D from https://create3000.github.io/code/x_ite/latest/x_ite.mjs
{convert} from ./deps/vrml1to97/index.js {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 '|'
canvas := X3D.createBrowser()
// Fix up the css so the browser is a nice size and we can see the world info function makeBrowser(url: string)
$(canvas).css width: '150px', height: '150px', overflow: 'visible' canvas := X3D.createBrowser()
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 // Fix up css: smaller browser, but we can see the world info
browser := X3D.getBrowser canvas $(canvas).css
browser.setBrowserOption 'StraightenHorizon', false width: '150px'
site := $('a[href^="http"]') height: '150px'
url := site.attr('href') ?? '' 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) // Now get the browser and load the requested VRML, converting if need be
canvas.setAttribute 'src', url browser := X3D.getBrowser canvas
else if url.includes '.wrl' browser.setBrowserOption 'StraightenHorizon', false
// 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
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()