From 86d1102872fe125032fb2d2632a357dfc79e746e Mon Sep 17 00:00:00 2001 From: Leon van Kammen Date: Fri, 10 May 2024 08:38:24 +0000 Subject: [PATCH] work in progress [might break] --- app/example/helloworld-iframe.js | 10 ++- app/load.js | 111 +++++++++++++++++++++++++ app/save.js | 138 +++++++++++++++++++++++++++++++ app/spatialize.js | 4 +- 4 files changed, 257 insertions(+), 6 deletions(-) create mode 100644 app/load.js create mode 100644 app/save.js diff --git a/app/example/helloworld-iframe.js b/app/example/helloworld-iframe.js index 4a115af..4131713 100644 --- a/app/example/helloworld-iframe.js +++ b/app/example/helloworld-iframe.js @@ -1,6 +1,6 @@ AFRAME.registerComponent('helloworld-iframe', { schema: { - foo: { type:"string"} + url: { type:"string"} }, init: function(){}, @@ -36,16 +36,18 @@ AFRAME.registerComponent('helloworld-iframe', { // reactive events for this.data updates myvalue: function(e){ /*this.el.dom.querySelector('b').innerText = this.data.myvalue*/ }, + init: function(){ + alert("ja") + }, + ready: function( ){ this.el.dom.style.display = 'none' console.log("this.el.dom has been added to DOM") - this.data.myvalue = 1 - setInterval( () => this.data.myvalue++, 100 ) }, launcher: function(){ console.log("this.el.dom iframe has been added to DOM") - let URL = prompt('enter URL to display','https://fabien.benetou.fr/Wiki/Wiki') + let URL = this.data.url || prompt('enter URL to display','https://fabien.benetou.fr/Wiki/Wiki') if( !URL ) return this.el.dom.querySelector('iframe').src = URL new WinBox("Hello World",{ diff --git a/app/load.js b/app/load.js new file mode 100644 index 0000000..b0b61a0 --- /dev/null +++ b/app/load.js @@ -0,0 +1,111 @@ +AFRAME.registerComponent('load', { + schema: { + foo: { type:"string"} + }, + + init: function () { + this.el.object3D.visible = false + + //this.el.innerHTML = ` ` + }, + + requires:{ + // somecomponent: "https://unpkg.com/some-aframe-component/mycom.min.js" + }, + + events:{ + + // component events + somecomponent: function( ){ console.log("component requirement mounted") }, + ready: function(e){ console.log("requires are loaded") }, + + launcher: function(e){ + this.filedialog( (data) => { + if( data.match(/{ + var file = e.target.files[0]; + if (!file) { + return; + } + var reader = new FileReader(); + reader.onload = function(e) { + var contents = e.target.result; + onDone(contents) + }; + reader.readAsText(file); + }) + document.body.appendChild(el) + } + this.fileEl.click() + }, + + manifest: { // HTML5 manifest to identify app to xrsh + "short_name": "Hello world", + "name": "Hello world", + "icons": [ + { + "src": "https://css.gg/arrow-up-r.svg", + "type": "image/svg+xml", + "sizes": "512x512" + } + ], + "id": "/?source=pwa", + "start_url": "/?source=pwa", + "background_color": "#3367D6", + "display": "standalone", + "scope": "/", + "theme_color": "#3367D6", + "shortcuts": [ + { + "name": "What is the latest news?", + "cli":{ + "usage": "helloworld [options]", + "example": "helloworld news", + "args":{ + "--latest": {type:"string"} + } + }, + "short_name": "Today", + "description": "View weather information for today", + "url": "/today?source=pwa", + "icons": [{ "src": "/images/today.png", "sizes": "192x192" }] + } + ], + "description": "Hello world information", + "screenshots": [ + { + "src": "/images/screenshot1.png", + "type": "image/png", + "sizes": "540x720", + "form_factor": "narrow" + } + ], + "help":` +Helloworld application + +This is a help file which describes the application. +It will be rendered thru troika text, and will contain +headers based on non-punctualized lines separated by linebreaks, +in above's case "\nHelloworld application\n" will qualify as header. + ` + } + +}); + diff --git a/app/save.js b/app/save.js new file mode 100644 index 0000000..5067f68 --- /dev/null +++ b/app/save.js @@ -0,0 +1,138 @@ +AFRAME.registerComponent('save', { + schema: { + foo: { type:"string"} + }, + + init: function () { + this.el.object3D.visible = false + + //this.el.innerHTML = ` ` + }, + + requires:{ + // somecomponent: "https://unpkg.com/some-aframe-component/mycom.min.js" + }, + + events:{ + + // component events + somecomponent: function( ){ console.log("component requirement mounted") }, + ready: function(e){ console.log("requires are loaded") }, + + launcher: function(e){ + this.save() + }, + + + }, + + save: function(){ + let l = document.querySelector("#left-hand") + let r = document.querySelector("#right-hand") + l.remove() + r.remove() + // *TODO* dont crash on hands + + this.inlineFiles() + .then( () => this.download(document.documentElement.innerHTML,"xrsh.html") ) + .catch(console.error) + }, + + download: function(content, filename, contentType){ + const a = document.createElement('a'); + const file = new Blob([document.documentElement.innerHTML], {type: "text/html"}); + + a.href= URL.createObjectURL(file); + a.download = filename + a.click(); + URL.revokeObjectURL(a.href); + }, + + inlineFiles: function(){ + let p = [] + let tags = [ ...document.querySelectorAll('script'), + ...document.querySelectorAll('link') + ] + tags.map( (el) => { + let remoteFile = el.src || el.href + if( remoteFile ){ + p.push( new Promise((resolve,reject) => { + fetch( remoteFile ) + .then( (res) => res.text() ) + .then( (text) => { + switch( el.tagName ){ + case 'LINK': el2 = document.createElement('style') + el2.setAttribute("type","text/css") + el2.setAttribute("_href", el.href ) + el2.innerHTML = text + el.parentNode.appendChild(el2) + el.remove() + break; + + case 'SCRIPT': el.innerHTML = text + el.setAttribute("_src", el.src) + el.removeAttribute("src") + break; + } + resolve() + }) + .catch(reject) + })) + } + }) + return Promise.all(p) + }, + + manifest: { // HTML5 manifest to identify app to xrsh + "short_name": "Hello world", + "name": "Hello world", + "icons": [ + { + "src": "https://css.gg/arrow-down-r.svg", + "type": "image/svg+xml", + "sizes": "512x512" + } + ], + "id": "/?source=pwa", + "start_url": "/?source=pwa", + "background_color": "#3367D6", + "display": "standalone", + "scope": "/", + "theme_color": "#3367D6", + "shortcuts": [ + { + "name": "What is the latest news?", + "cli":{ + "usage": "helloworld [options]", + "example": "helloworld news", + "args":{ + "--latest": {type:"string"} + } + }, + "short_name": "Today", + "description": "View weather information for today", + "url": "/today?source=pwa", + "icons": [{ "src": "/images/today.png", "sizes": "192x192" }] + } + ], + "description": "Hello world information", + "screenshots": [ + { + "src": "/images/screenshot1.png", + "type": "image/png", + "sizes": "540x720", + "form_factor": "narrow" + } + ], + "help":` +Helloworld application + +This is a help file which describes the application. +It will be rendered thru troika text, and will contain +headers based on non-punctualized lines separated by linebreaks, +in above's case "\nHelloworld application\n" will qualify as header. + ` + } + +}); + diff --git a/app/spatialize.js b/app/spatialize.js index 2da2aec..f45a652 100644 --- a/app/spatialize.js +++ b/app/spatialize.js @@ -24,7 +24,7 @@ AFRAME.registerComponent('spatialize', { this.el.sceneEl.addEventListener('launched',(e) => { console.dir(e) let appEl = e.detail.el.dom - if( appEl.style.display != 'none' && appEl.innerHTML ){ + if( appEl.style && appEl.style.display != 'none' && appEl.innerHTML ){ this.btn.style.display = '' // show button } }) @@ -38,7 +38,7 @@ AFRAME.registerComponent('spatialize', { // component events ready: function(e){ - this.btn.style.display = 'none' + //this.btn.style.display = 'none' this.btn.style.background = 'var(--xrsh-primary)' this.btn.style.color = '#FFF' },