From 9b5076fb2ee9d899126ae3936129d74897770d54 Mon Sep 17 00:00:00 2001 From: Leon van Kammen Date: Wed, 29 May 2024 10:22:35 +0000 Subject: [PATCH] main: work in progress [might break] --- com/example/helloworld-window.js | 13 +++++-- com/launcher.js | 2 +- com/paste.js | 35 +++++++++++------ com/require.js | 65 ++++++++++++++++++++++++++++++++ com/save.js | 6 +-- 5 files changed, 101 insertions(+), 20 deletions(-) create mode 100644 com/require.js diff --git a/com/example/helloworld-window.js b/com/example/helloworld-window.js index 2f1a353..8a2e237 100644 --- a/com/example/helloworld-window.js +++ b/com/example/helloworld-window.js @@ -5,8 +5,9 @@ AFRAME.registerComponent('helloworld-window', { dependencies: ['dom'], - init: function(){ + init: async function(){ this.el.object3D.visible = false + }, dom: { @@ -29,16 +30,20 @@ AFRAME.registerComponent('helloworld-window', { myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue }, launcher: async function(){ - this.el.dom.style.display = 'none' - await AFRAME.utils.require({ + let s = await AFRAME.utils.require({ dom: "./com/dom.js", // interpret .dom object html: "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js", // html to AFRAME winboxjs: "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js", // deadsimple windows: https://nextapps-de.github.io/winbox winboxcss: "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css", // }) + console.dir(s) + this.el.setAttribute("dom","") + this.el.setAttribute("data2event","") + this.el.setAttribute("html","") + this.el.dom.style.display = 'none' this.data.myvalue = 1 + return setInterval( () => this.data.myvalue++, 100 ) - console.log("this.el.dom has been added to DOM") new WinBox("Hello World",{ width: 250, height: 150, diff --git a/com/launcher.js b/com/launcher.js index 7d2b7b2..3db743d 100644 --- a/com/launcher.js +++ b/com/launcher.js @@ -45,7 +45,7 @@ AFRAME.registerComponent('launcher', { await AFRAME.utils.require({ html: "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js", // html to AFRAME dom: "./com/dom.js", - data_events: "./com/data2event.js" + data2events: "./com/data2event.js" }) this.el.setAttribute("dom","") diff --git a/com/paste.js b/com/paste.js index 6eadce9..4e8a053 100644 --- a/com/paste.js +++ b/com/paste.js @@ -19,17 +19,28 @@ AFRAME.registerComponent('paste', { ready: function(e){ console.log("requires are loaded") }, launcher: function(e){ - navigator.clipboard.readText() - .then( (base64) => { - let mimetype = base64.replace(/;base64,.*/,'') - let data = base64.replace(/.*;base64,/,'') - let type = this.textHeuristic(data) - console.log("type="+type) - switch( this.textHeuristic(data) ){ - case "aframe": this.insertAFRAME(data); break; - default: this.insertText(data); break; - } - this.count += 1 + const paste = () => { + navigator.clipboard.readText() + .then( (base64) => { + let mimetype = base64.replace(/;base64,.*/,'') + let data = base64.replace(/.*;base64,/,'') + let type = this.textHeuristic(data) + console.log("type="+type) + switch( this.textHeuristic(data) ){ + case "aframe": this.insertAFRAME(data); break; + default: this.insertText(data); break; + } + this.count += 1 + }) + } + + navigator.permissions.query({ name: 'clipboard-read' }) + .then( (permission) => { + if( permission.state != 'granted' ){ + this.el.sceneEl.exitVR() + setTimeout( () => paste(), 500 ) + return + }else paste() }) }, @@ -144,7 +155,7 @@ AFRAME.registerComponent('paste', { "icons": [{ "src": "/images/today.png", "sizes": "192x192" }] } ], - "description": "Hello world information", + "description": "Paste the clipboard", "screenshots": [ { "src": "/images/screenshot1.png", diff --git a/com/require.js b/com/require.js new file mode 100644 index 0000000..fd90741 --- /dev/null +++ b/com/require.js @@ -0,0 +1,65 @@ +// usage: +// +// await AFRAME.utils.require( this.dependencies ) (*) autoload missing components +// await AFRAME.utils.require( this.el.getAttributeNames() ) (*) autoload missing components +// await AFRAME.utils.require({foo: "https://foo.com/aframe/components/foo.js"},this) +// await AFRAME.utils.require(["./app/foo.js","foo.css"],this) +// +// (*) = prefixes baseURL AFRAME.utils.require.baseURL ('./com/' e.g.) +// +AFRAME.utils.require = function(arr_or_obj,opts){ + opts = opts || {} + let i = 0 + let deps = [] + AFRAME.required = AFRAME.required || {} + let packagesArr = arr_or_obj.map ? arr_or_obj : Object.values(arr_or_obj) + + const parseURI = function(uri){ + return { + id: String(uri).split("/").pop(), // 'a/b/c/mycom.js' => 'mycom.js' + component: String(uri).split("/").pop().replace(/\..*/,''), // 'mycom.js' => 'mycom' + type: String(uri).split(".").pop() // 'mycom.js' => 'js' + } + } + + packagesArr.map( (package) => { + try{ + package = package.match(/\./) ? package : AFRAME.utils.require.baseURL+package+".js" + let id = Object.keys(arr_or_obj)[i] + if( id == i ) id = parseURI(package).component + // prevent duplicate requests + if( AFRAME.required[id] ) return // already loaded before + AFRAME.required[id] = true + + if( !document.head.querySelector(`script#${id}`) ){ + let {type} = parseURI(package) + let p = new Promise( (resolve,reject) => { + switch(type){ + case "js": let script = document.createElement("script") + script.id = id + script.onload = () => setTimeout( () => resolve(id), 50 ) + script.onerror = (e) => reject(e) + script.src = package + document.head.appendChild(script) + break; + case "css": let link = document.createElement("link") + link.id = id + link.href = package + link.rel = 'stylesheet' + document.head.appendChild(link) + resolve(id) + break; + } + }) + deps.push(p) + } + }catch(e){ + console.error(`package ${package} could not be retrieved..aborting :(`); + if( opts.halt ) throw e; + } + i++ + }) + return Promise.all(deps) +} + +AFRAME.utils.require.baseURL = './com/' diff --git a/com/save.js b/com/save.js index 445fcca..04ef6b1 100644 --- a/com/save.js +++ b/com/save.js @@ -75,8 +75,8 @@ AFRAME.registerComponent('save', { }, manifest: { // HTML5 manifest to identify app to xrsh - "short_name": "Hello world", - "name": "Hello world", + "short_name": "Save", + "name": "Save", "icons": [ { "src": "https://css.gg/arrow-down-r.svg", @@ -106,7 +106,7 @@ AFRAME.registerComponent('save', { "icons": [{ "src": "/images/today.png", "sizes": "192x192" }] } ], - "description": "Hello world information", + "description": "Export the current XRSH(ell) as a standalone HTML file", "screenshots": [ { "src": "/images/screenshot1.png",