From 8fbcd79759747f09d72a8b820c04ba221ebeadba Mon Sep 17 00:00:00 2001 From: Leon van Kammen Date: Fri, 5 Apr 2024 11:56:46 +0000 Subject: [PATCH] clipboard test --- app/example/helloworld-iframe.js | 119 +++++++++++++++++++++++++++++++ app/paste.js | 87 ++++++++++++++++++++++ 2 files changed, 206 insertions(+) create mode 100644 app/example/helloworld-iframe.js create mode 100644 app/paste.js diff --git a/app/example/helloworld-iframe.js b/app/example/helloworld-iframe.js new file mode 100644 index 0000000..1384048 --- /dev/null +++ b/app/example/helloworld-iframe.js @@ -0,0 +1,119 @@ +AFRAME.registerComponent('helloworld-iframe', { + schema: { + foo: { type:"string"} + }, + + init: function(){}, + + requires:{ + 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", // + }, + + dom: { + scale: 1, + events: ['click','keydown'], + html: (me) => `
+ +
`, + + css: ` + .XR #overlay .winbox.iframe{ visibility: visible; } /* don't hide in XR mode */ + .winbox.iframe iframe { background:#FFF; } + ` + }, + + events:{ + + // component events + html: function( ){ console.log("html-mesh requirement mounted") }, + + // combined AFRAME+DOM reactive events + click: function(e){ }, // + keydown: function(e){ }, // + + // reactive events for this.data updates + myvalue: function(e){ /*this.el.dom.querySelector('b').innerText = this.data.myvalue*/ }, + + 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') + if( !URL ) return + this.el.dom.querySelector('iframe').src = URL + new WinBox("Hello World",{ + width: 250, + height: 150, + class:["iframe"], + x:"center", + y:"center", + id: this.el.uid, // important hint for html-mesh + root: document.querySelector("#overlay"), + mount: this.el.dom, + onclose: () => { this.el.dom.style.display = 'none'; return false; } + }); + this.el.dom.style.display = '' + }, + + }, + + manifest: { // HTML5 manifest to identify app to xrsh + "short_name": "Hello world", + "name": "Hello world", + "icons": [ + { + "src": "https://css.gg/browse.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/paste.js b/app/paste.js new file mode 100644 index 0000000..a082822 --- /dev/null +++ b/app/paste.js @@ -0,0 +1,87 @@ +AFRAME.registerComponent('paste', { + 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){ + navigator.clipboard.readText() + .then( (base64) => { + let mimetype = base64.replace(/;base64,.*/,'') + console.log(base64.substr(0,100)) + //let base64str = base64.replace(/.*;base64,/,'') + alert(`\nYES!\n\n${mimetype} file received!\n\n(TODO: render it)`) + }) + }, + + + }, + + manifest: { // HTML5 manifest to identify app to xrsh + "short_name": "Hello world", + "name": "Hello world", + "icons": [ + { + "src": "https://css.gg/clipboard.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. + ` + } + +}); +