diff --git a/make b/make index 9f25e0f..970ab19 100755 --- a/make +++ b/make @@ -123,7 +123,7 @@ build(){ cp src/3rd/js/plugin/frontend/\$editor.js dist/xrfragment.plugin.editor.js cp src/3rd/js/plugin/frontend/css.js dist/xrfragment.plugin.frontend.css.js - jscat src/3rd/js/plugin/frontend/{snackbar,accessibility,\$menu,frontend,chatcommand/*,joystick,tab-to-href}.js > dist/xrfragment.plugin.frontend.js + jscat src/3rd/js/plugin/frontend/{snackbar,accessibility,\$menu,frontend,chatcommand/*,joystick,tab-to-href,remotestorage}.js > dist/xrfragment.plugin.frontend.js jscat src/3rd/js/plugin/matrix/{matrix-crdt,matrix}.js > dist/xrfragment.plugin.matrix.js jscat src/3rd/js/plugin/p2p/{trystero-torrent.min,trystero}.js > dist/xrfragment.plugin.p2p.js diff --git a/src/3rd/js/plugin/frontend/remotestorage.js b/src/3rd/js/plugin/frontend/remotestorage.js new file mode 100644 index 0000000..5176db6 --- /dev/null +++ b/src/3rd/js/plugin/frontend/remotestorage.js @@ -0,0 +1,84 @@ +// this demonstrates the remotestorage aframe component + + +document.addEventListener('frontend:ready', (e) => { + + function loadScript(cb){ + let el = document.createElement("script") + el.setAttribute("defer","") + el.src = "https://unpkg.com/remotestoragejs@2.0.0-beta.7/release/remotestorage.js" + document.head.appendChild(el) + + el = document.createElement("script") + el.src = "https://unpkg.com/remotestorage-widget@1.6.0/build/widget.js" + el.addEventListener('load', () => setTimeout(cb,2000) ) + document.head.appendChild(el) + } + + function addStyles(){ + let el = document.createElement('style') + el.type = 'text/css' + el.innerHTML = ` + + #remotestorage-widget { + left: 0; + position: fixed; + display:block; + } + body.menu #remotestorage-widget{ + top: 50px; + } + body #remotestorage-widget { + top: 0px; + } + ` + document.head.appendChild(el) + } + + function addButtons(){ + const $widget = document.querySelector(".rs-widget") + debugger + + const $btnLoad = document.createElement('button') + const $btnSave = document.createElement('button') + $btnLoad.innerText = 'load' + $btnSave.innerText = 'save' + $widget.appendChild($btnLoad) + $widget.appendChild($btnSave) + } + + function init(){ + let apis = {} + window.remoteStorage = new RemoteStorage({logging: true }) + if( Object.keys(apis).length ) remoteStorage.setApiKeys(apis) + + remoteStorage.on('connected', (e) => { console.log("connected") } ) + //remoteStorage.on('network-offline', (e) => this.el.sceneEl.emit('remoteStorage.network-offline',e) ) + //remoteStorage.on('network-online', (e) => this.el.sceneEl.emit('remoteStorage.network-online',e) ) + //remoteStorage.on('error', (e) => this.el.sceneEl.emit('remoteStorage.error',e) ) + //remoteStorage.on('ready', (e) => { } ) + + remoteStorage.access.claim( `webxr`, 'rw'); // our data dir + remoteStorage.caching.enable( `/webxr/` ) // local-first, remotestorage-second + + } + + addStyles() + loadScript(init) + + // decorate fileLoaders + window.frontend.fileLoaders = (function(fileLoaders){ + return function(){ + // show rs widgets + if( !document.querySelector("#remotestorage-widget") ){ + let opts = {} + opts.modalBackdrop = false + widget = new window.Widget(window.remoteStorage, opts) + widget.attach(); + addButtons() + } + + //fileLoaders() + } + })( window.frontend.fileLoaders ) +})