wip: feat/remotestorage

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 

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 )
+})