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>
This commit is contained in:
parent
285554137d
commit
a55342ae95
|
|
@ -33,12 +33,12 @@
|
|||
url: 'https://code.studioinfinity.org/glen/archematics.git',
|
||||
},
|
||||
devDependencies: {
|
||||
'@danielx/civet': '^0.6.36',
|
||||
'@types/jquery': '^3.5.18',
|
||||
'@danielx/civet': '^0.6.38',
|
||||
'@types/jquery': '^3.5.19',
|
||||
'http-server': '^14.1.1',
|
||||
typescript: '^5.2.2',
|
||||
},
|
||||
dependencies: {
|
||||
vrml1to97: '^0.2.0',
|
||||
vrml1to97: '^0.2.2',
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ settings:
|
|||
|
||||
dependencies:
|
||||
vrml1to97:
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0
|
||||
specifier: ^0.2.2
|
||||
version: 0.2.2
|
||||
|
||||
devDependencies:
|
||||
'@danielx/civet':
|
||||
specifier: ^0.6.36
|
||||
version: 0.6.36(typescript@5.2.2)
|
||||
specifier: ^0.6.38
|
||||
version: 0.6.38(typescript@5.2.2)
|
||||
'@types/jquery':
|
||||
specifier: ^3.5.18
|
||||
version: 3.5.18
|
||||
specifier: ^3.5.19
|
||||
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):
|
||||
resolution: {integrity: sha512-ApMaq2YyXfiM0xpcFWRZffVLgqxrYu3UWS5A0sWViK+RMeamVp6J0iGUeUsQFCF2Gd9+ldEPzWgUThzUcfQKnA==}
|
||||
/@danielx/civet@0.6.38(typescript@5.2.2):
|
||||
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:
|
||||
resolution: {integrity: sha512-sNm7O6LECFhHmF+3KYo6QIl2fIbjlPYa0PDgDQwfOaEJzwpK20Eub9Ke7VKkGsSJ2K0HUR50S266qYzRX4GlSw==}
|
||||
/@types/jquery@3.5.19:
|
||||
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:
|
||||
resolution: {integrity: sha512-RO5M/R9wqmLHbNm866Jz6Iax5BpL4BtqePM/arulHZZsC2rBmFmP4g00lvW/HUFQ6GT7I0/VHv/DPru272S3JA==}
|
||||
/vrml1to97@0.2.2:
|
||||
resolution: {integrity: sha512-zLraKyuCtb2/Db4eygDimKAh4qweSKzBusDFrCxZ8RKextNSTEhda6pzxjoNTfPx/MnfrLISTEL+fwTiDILSZg==}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
Loading…
Reference in New Issue