106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
|
// this demonstrates the remotestorage aframe component
|
||
|
|
|
||
|
|
// reactive component for displaying the menu
|
||
|
|
remoteStorageComponent = (el) => new Proxy({
|
||
|
|
|
||
|
|
html: `
|
||
|
|
<style type="text/css">
|
||
|
|
body div#remotestorage-widget .rs-button{
|
||
|
|
background: #AAA;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div id="remoteFilesTab">
|
||
|
|
<div id="rswidget"></div>
|
||
|
|
<br><br>
|
||
|
|
<button id="uploadFile" ><i class="gg-software-upload"></i> upload</button>
|
||
|
|
<button id="downloadfile"><i class="gg-software-download"></i> download</button>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
show: false,
|
||
|
|
|
||
|
|
toggle(state){
|
||
|
|
this.show = state !== undefined ? state : !this.show
|
||
|
|
},
|
||
|
|
|
||
|
|
init(opts){
|
||
|
|
// create HTML element
|
||
|
|
$files.tabs = $files.tabs.concat({id:"remoteFiles", name: "remote files"})
|
||
|
|
el.innerHTML = this.html
|
||
|
|
el.className = "tab"
|
||
|
|
this.toggle(this.show) // trigger visibility
|
||
|
|
document.querySelector("#files .tab-frame").appendChild(el);
|
||
|
|
|
||
|
|
// setup input listeners
|
||
|
|
(['click']).map( (e) => el.addEventListener(e, (ev) => typeof this[e] == 'function' && this[e](ev.target.id,ev) ) )
|
||
|
|
|
||
|
|
// signal ready
|
||
|
|
setTimeout( () => {
|
||
|
|
document.dispatchEvent( new CustomEvent("remotestorage:ready", {detail: {$files:this,xrf}}) )
|
||
|
|
},100)
|
||
|
|
|
||
|
|
this.loadScript( () => this.initRemoteStorage() )
|
||
|
|
|
||
|
|
return this
|
||
|
|
},
|
||
|
|
|
||
|
|
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)
|
||
|
|
},
|
||
|
|
|
||
|
|
initRemoteStorage(){
|
||
|
|
let apis = {
|
||
|
|
dropbox: "4jc8nx1lbarp472"
|
||
|
|
}
|
||
|
|
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
|
||
|
|
|
||
|
|
// create widget
|
||
|
|
let opts = {}
|
||
|
|
opts.modalBackdrop = false
|
||
|
|
widget = new window.Widget(window.remoteStorage, opts)
|
||
|
|
widget.attach( "rswidget" );
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
click(id,e){
|
||
|
|
switch(id){
|
||
|
|
case "icon":
|
||
|
|
case "more": return this.toggle(); break;
|
||
|
|
}
|
||
|
|
this.toggle(false)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
|
||
|
|
get(me,k,v){ return me[k] },
|
||
|
|
|
||
|
|
set(me,k,v){
|
||
|
|
me[k] = v
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
// reactify component!
|
||
|
|
document.addEventListener('$files:ready', (e) => {
|
||
|
|
window.$remotestorage = remoteStorageComponent( document.createElement('div') ).init(e.detail)
|
||
|
|
})
|