diff --git a/build/widget.js b/build/widget.js index 81d209e..ec6db41 100644 --- a/build/widget.js +++ b/build/widget.js @@ -1,3 +1,3 @@ -!function(t,l){"object"==typeof exports&&"object"==typeof module?module.exports=l():"function"==typeof define&&define.amd?define([],l):"object"==typeof exports?exports.Widget=l():t.Widget=l()}(this,function(){return function(t){function l(i){if(e[i])return e[i].exports;var n=e[i]={exports:{},id:i,loaded:!1};return t[i].call(n.exports,n,n.exports,l),n.loaded=!0,n.exports}var e={};return l.m=t,l.c=e,l.p="",l(0)}([function(t,l,e){t.exports=e(1)},function(t,l,e){"use strict";var i=function(t){var l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.rs=t,this.state="initial",this.active=!1,this.online=!1,this.closed=!1,this.leaveOpen=!!l.leaveOpen&&l.leaveOpen,this.lastSynced=null,this.lastSyncedUpdateLoop=null};i.prototype={log:function(){for(var t,l=arguments.length,e=Array(l),i=0;i0?this.setState("choose"):this.setState("sign-in")},setClickHandlers:function(){var t=this;this.rsInitial.addEventListener("click",function(){return t.showChooseOrSignIn()}),this.rsChooseRemoteStorageButton.addEventListener("click",function(){return t.setState("sign-in")}),this.rsChooseDropboxButton.addEventListener("click",function(){return t.rs.dropbox.connect()}),this.rsChooseGoogleDriveButton.addEventListener("click",function(){return t.rs.googledrive.connect()}),this.rsDisconnectButton.addEventListener("click",function(){return t.rs.disconnect()}),this.rs.hasFeature("Sync")&&this.rsSyncButton.addEventListener("click",function(){t.rsSyncButton.classList.contains("rs-rotate")?(t.rs.stopSync(),t.rsSyncButton.classList.remove("rs-rotate")):(t.rs.startSync(),t.rsSyncButton.classList.add("rs-rotate"))}),document.addEventListener("click",function(){return t.closeWidget()}),this.rsWidget.addEventListener("click",function(t){return t.stopPropagation()}),this.rsLogo.addEventListener("click",function(){return t.toggleWidget()})},toggleWidget:function(){this.closed?this.openWidget():"initial"===this.state?this.showChooseOrSignIn():this.closeWidget()},openWidget:function(){this.closed=!1,this.setState(this.active?"connected":"initial")},closeWidget:function(){!this.leaveOpen&&this.active?(this.setState("close"),this.closed=!0):this.setState(this.active?"connected":"initial")},showErrorBox:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")},hideErrorBox:function(){this.rsErrorBox.innerHTML="",this.setState("close")},handleDiscoveryError:function(t){var l=document.querySelector(".rs-sign-in-error");l.innerHTML=t.message,l.classList.remove("hidden"),l.classList.add("visible")},handleSyncError:function(){this.showErrorBox("App sync error")},handleUnauthorized:function(){this.showErrorBox("App authorization expired or revoked")},updateLastSyncedOutput:function(){var t=new Date,l=Math.round((t.getTime()-this.lastSynced.getTime())/1e3),e=document.querySelector(".rs-box-connected .rs-sub-headline");e.innerHTML="Synced "+l+" seconds ago"}},t.exports=i},function(t,l){t.exports='

Connect your storage

To sync data with your account

user@provider.com

Connected

Connect your storage

This app allows you to sync data with a storage of your choice. Read more

'; -},function(t,l){t.exports='/* RemoteStorage widget styles */\n\n.rs-widget * {\n box-sizing: border-box;\n}\n\n.rs-widget {\n font-family: arial, sans-serif;\n max-width: 350px;\n color: #333;\n background-color: #fff;\n border-radius: 3px;\n padding: 10px;\n margin: 10px;\n overflow: hidden;\n z-index: 21000000; /* Make sure we\'re on a reasonably high visibility layer */\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\n will-change: max-height, height, width, opacity, max-width, background, box-shadow;\n transition-property: width, height, opacity, max-width, max-height, background, box-shadow;\n transition-duration: 300ms;\n}\n\n.rs-box {\n overflow: hidden;\n will-change: height;\n transition-property: height, width, max-height;\n transition-duration: 300ms;\n transition-timing-function: ease-in;\n opacity: 0;\n max-height: 0px;\n}\n\n.rs-box.selected {\n opacity: 1;\n max-height: 380px;\n}\n\n/* Main logo */\n.rs-main-logo {\n float: left;\n height: 36px;\n width: auto;\n margin-top: 1px;\n margin-right: 0.625em;\n transition: margin-left 300ms ease-out, transform 300ms ease-out;\n cursor: pointer;\n}\n.rs-widget .rs-backend-remotestorage svg#rs-main-logo-remotestorage,\n{\n display: normal;\n}\n.rs-widget[class*="rs-backend-"]:not(.rs-backend-remotestorage) svg#rs-main-logo-remotestorage {\n display: none;\n}\n.rs-widget .rs-backend-dropbox svg#rs-main-logo-dropbox {\n display: normal;\n}\n.rs-widget:not(.rs-backend-dropbox) svg#rs-main-logo-dropbox {\n display: none;\n}\n.rs-widget .rs-backend-gdrive svg#rs-main-logo-gdrive {\n display: normal;\n}\n.rs-widget:not(.rs-backend-gdrive) svg#rs-main-logo-gdrive {\n display: none;\n}\n\npolygon.rs-logo-shape {\n fill: #FF4B03;\n transition-property: fill;\n transition-duration: 0.5s;\n}\n\n.rs-state-offline polygon.rs-logo-shape {\n fill: #888;\n transition-property: fill;\n transition-duration: 0.5s;\n}\n\n/* Hide everything except logo when connected and clicked outside of box */\n.rs-state-close {\n max-width: 55px;\n background-color: transparent;\n box-shadow: none;\n opacity: 0.5;\n\n transition: max-height 100ms ease-out 0ms, max-width 300ms ease-out 300ms, background 300ms ease-in 200ms, opacity 300ms ease 200ms; \n}\n\n.rs-state-close:hover {\n cursor: pointer;\n opacity: 1;\n}\n\n/* Initial Connect remote storage box */\n.rs-box-initial:hover {\n cursor: pointer;\n}\n\n.rs-widget a {\n color: #0093cc;\n}\n\n/* HEADLINE */\n.rs-small-headline {\n font-size: 1em;\n font-weight: bold;\n margin: 0;\n margin-bottom: 2px;\n height: 1.2em;\n word-break: break-all;\n overflow: hidden;\n}\n\n.rs-sub-headline {\n word-break: break-all;\n overflow: hidden;\n color: #666;\n font-size: 0.92em;\n height: 1.2em;\n}\n.rs-big-headline {\n font-size: 1.625em;\n font-weight: normal;\n text-align: center;\n margin-top: 20px;\n margin-bottom: 20px;\n}\n\n/* BUTTONS */\n.rs-button {\n font: inherit;\n color: inherit;\n background-color: transparent;\n border: 1px solid #dcdcdc;\n border-radius: 3px;\n cursor: pointer;\n}\n.rs-button-small {\n padding: 0.5em 0.6em;\n margin-left: 0.3em;\n transition: border-color 300ms ease-out;\n}\n.rs-button-wrap {\n margin-top: 10px;\n}\n\n.rs-button-wrap img,\n.rs-button-wrap svg {\n float: left;\n margin-right: 0.6em;\n width: 40px;\n height: 40px;\n}\n\n.rs-button-big {\n padding: 15px 10px;\n margin-bottom: 10px;\n display: block;\n width: 100%;\n text-align: left;\n transition: box-shadow 200ms;\n}\n.rs-button-big > div {\n font-size: 1.125em;\n padding: 10px 0;\n}\n.rs-button-big:hover {\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\n}\n.rs-button-big:active {\n background-color: #eee;\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\n}\n.rs-button-big:last-child {\n margin-bottom: 0;\n}\n\n.rs-content {\n padding: 0 10px 10px 10px;\n}\n\n\n.rs-state-choose .rs-main-logo,\n.rs-state-sign-in .rs-main-logo {\n margin-left: 45%;\n float: none;\n}\n\n\n.rs-sign-in-form input[type=text] {\n padding: 15px 10px;\n display: block;\n width: 100%;\n font: inherit;\n border: 1px solid #aaa;\n}\n.rs-sign-in-form input[type=submit] {\n padding: 15px 10px;\n margin-top: 20px;\n margin-bottom: 15px;\n display: block;\n width: 100%;\n border: none;\n border-radius: 3px;\n background-color: #3fb34f;\n font: inherit;\n color: #fff;\n transition: box-shadow 200ms, background-color 200ms;\n}\n.rs-sign-in-form input[type=submit]:hover {\n cursor: pointer;\n background-color: #4BCB5D;\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\n}\n.rs-sign-in-form input[type=submit]:active {\n background-color: #3fb34f;\n}\n\n.rs-sign-in-error.hidden,\n.rs-box-error.hidden {\n height: 0;\n}\n\n.rs-sign-in-error.visible,\n.rs-box-error.visible {\n height: auto;\n border-radius: 3px;\n padding: 0.5em 0.5em;\n margin-top: 0.5em;\n text-align: center;\n background-color: rgba(255,0,0,0.1);\n color: darkred;\n}\n\n /*Choose provider box */\n.rs-box-choose {\n text-align: center;\n overflow: hidden;\n}\n\n.rs-box-choose p {\n margin-top: 0;\n margin-bottom: 20px;\n}\n\n/*Connected box */\n.rs-box-connected {\n height: 40px;\n}\n.rs-connected-text {\n float: left;\n}\n.rs-box-connected .rs-user {\n font-weight: bold;\n}\n.rs-connected-buttons {\n float: right;\n}\n.rs-disconnect:hover {\n border-color: #FF2D2D;\n}\n.rs-disconnect:hover .rs-icon{\n fill: #FF2D2D;\n}\n.rs-sync:hover {\n border-color: #FFBB0C;\n}\n.rs-sync:hover .rs-icon {\n fill: #FFBB0C;\n}\n.rs-sync.rs-rotate {\n border-color: #FFBB0C;\n}\n.rs-sync.rs-rotate .rs-icon {\n fill: #FFBB0C;\n animation: rs-spin 1s linear infinite;\n}\n@keyframes rs-spin { 100% { transform: rotate(360deg); transform:rotate(360deg); } }\n\n/* Floating widget styles (top right corner) */\n.rs-floating {\n position: fixed;\n top: 0;\n right: 0;\n}\n\n\n/* Small/mobile screens */\n@media screen and (max-width: 360px) {\n .rs-widget {\n font-size: 100%;\n padding: 10px;\n transition: all 300ms ease-out;\n }\n .rs-floating {\n position: relative;\n top: auto;\n right: auto\n }\n .rs-state-choose,\n .rs-state-sign-in {\n position: fixed;\n top: 0;\n margin: 0;\n border-radius: 0;\n height: 100%;\n max-width: 100%;\n }\n}\n\n/* remove dotted outline border on Firefox */\n.rs-widget a:focus,\n.rs-widget a:active,\n.rs-widget button:focus,\n.rs-widget input:focus {\n outline:none;\n}\n.rs-widget button::-moz-focus-inner, \n.rs-widget input[type="button"]::-moz-focus-inner,\n.rs-widget input[type="submit"]::-moz-focus-inner {\n border:0;\n}\n'}])}); +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Widget=e():t.Widget=e()}(this,function(){return function(t){function e(i){if(l[i])return l[i].exports;var n=l[i]={exports:{},id:i,loaded:!1};return t[i].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var l={};return e.m=t,e.c=l,e.p="",e(0)}([function(t,e,l){t.exports=l(1)},function(t,e,l){"use strict";var i=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.rs=t,this.state="initial",this.active=!1,this.online=!1,this.closed=!1,this.leaveOpen=!!e.leaveOpen&&e.leaveOpen,this.lastSynced=null,this.lastSyncedUpdateLoop=null};i.prototype={log:function(){for(var t,e=arguments.length,l=Array(e),i=0;i0?this.setState("choose"):this.setState("sign-in")},setClickHandlers:function(){var t=this;this.rsInitial.addEventListener("click",function(){return t.showChooseOrSignIn()}),this.rsChooseRemoteStorageButton.addEventListener("click",function(){return t.setState("sign-in")}),this.rsChooseDropboxButton.addEventListener("click",function(){return t.rs.dropbox.connect()}),this.rsChooseGoogleDriveButton.addEventListener("click",function(){return t.rs.googledrive.connect()}),this.rsDisconnectButton.addEventListener("click",function(){return t.rs.disconnect()}),this.rs.hasFeature("Sync")&&this.rsSyncButton.addEventListener("click",function(){t.rsSyncButton.classList.contains("rs-rotate")?(t.rs.stopSync(),t.rsSyncButton.classList.remove("rs-rotate")):(t.rs.startSync(),t.rsSyncButton.classList.add("rs-rotate"))}),document.addEventListener("click",function(){return t.closeWidget()}),this.rsWidget.addEventListener("click",function(t){return t.stopPropagation()}),this.rsLogo.addEventListener("click",function(){return t.toggleWidget()})},toggleWidget:function(){this.closed?this.openWidget():"initial"===this.state?this.showChooseOrSignIn():this.closeWidget()},openWidget:function(){this.closed=!1,this.setState(this.active?"connected":"initial"),this.shouldCloseWhenSyncDone=!1},closeWidget:function(){!this.leaveOpen&&this.active?(this.setState("close"),this.closed=!0):this.setState(this.active?"connected":"initial")},showErrorBox:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")},hideErrorBox:function(){this.rsErrorBox.innerHTML="",this.setState("close")},handleDiscoveryError:function(t){var e=document.querySelector(".rs-sign-in-error");e.innerHTML=t.message,e.classList.remove("hidden"),e.classList.add("visible")},handleSyncError:function(){this.showErrorBox("App sync error")},handleUnauthorized:function(){this.showErrorBox("App authorization expired or revoked")},updateLastSyncedOutput:function(){var t=new Date,e=Math.round((t.getTime()-this.lastSynced.getTime())/1e3),l=document.querySelector(".rs-box-connected .rs-sub-headline");l.innerHTML="Synced "+e+" seconds ago"}},t.exports=i},function(t,e){t.exports='

Connect your storage

To sync data with your account

user@provider.com

Connected

Connect your storage

This app allows you to sync data with a storage of your choice. Read more

'; +},function(t,e){t.exports='/* RemoteStorage widget styles */\n\n.rs-widget * {\n box-sizing: border-box;\n}\n\n.rs-widget {\n font-family: arial, sans-serif;\n max-width: 350px;\n color: #333;\n background-color: #fff;\n border-radius: 3px;\n padding: 10px;\n margin: 10px;\n overflow: hidden;\n z-index: 21000000; /* Make sure we\'re on a reasonably high visibility layer */\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\n will-change: max-height, height, width, opacity, max-width, background, box-shadow;\n transition-property: width, height, opacity, max-width, max-height, background, box-shadow;\n transition-duration: 300ms;\n}\n\n.rs-box {\n overflow: hidden;\n will-change: height;\n transition-property: height, width, max-height;\n transition-duration: 300ms;\n transition-timing-function: ease-in;\n opacity: 0;\n max-height: 0px;\n}\n\n.rs-box.selected {\n opacity: 1;\n max-height: 380px;\n}\n\n/* Main logo */\n.rs-main-logo {\n float: left;\n height: 36px;\n width: auto;\n margin-top: 1px;\n margin-right: 0.625em;\n transition: margin-left 300ms ease-out, transform 300ms ease-out;\n cursor: pointer;\n}\n.rs-widget .rs-backend-remotestorage svg#rs-main-logo-remotestorage,\n{\n display: normal;\n}\n.rs-widget[class*="rs-backend-"]:not(.rs-backend-remotestorage) svg#rs-main-logo-remotestorage {\n display: none;\n}\n.rs-widget .rs-backend-dropbox svg#rs-main-logo-dropbox {\n display: normal;\n}\n.rs-widget:not(.rs-backend-dropbox) svg#rs-main-logo-dropbox {\n display: none;\n}\n.rs-widget .rs-backend-googledrive svg#rs-main-logo-googledrive {\n display: normal;\n}\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\n display: none;\n}\n\npolygon.rs-logo-shape {\n fill: #FF4B03;\n transition-property: fill;\n transition-duration: 0.5s;\n}\n\n.rs-state-offline polygon.rs-logo-shape {\n fill: #888;\n transition-property: fill;\n transition-duration: 0.5s;\n}\n\n/* Hide everything except logo when connected and clicked outside of box */\n.rs-state-close {\n max-width: 55px;\n background-color: transparent;\n box-shadow: none;\n opacity: 0.5;\n\n transition: max-height 100ms ease-out 0ms, max-width 300ms ease-out 300ms, background 300ms ease-in 200ms, opacity 300ms ease 200ms; \n}\n\n.rs-state-close:hover {\n cursor: pointer;\n opacity: 1;\n}\n\n/* Initial Connect remote storage box */\n.rs-box-initial:hover {\n cursor: pointer;\n}\n\n.rs-widget a {\n color: #0093cc;\n}\n\n/* HEADLINE */\n.rs-small-headline {\n font-size: 1em;\n font-weight: bold;\n margin: 0;\n margin-bottom: 2px;\n height: 1.2em;\n word-break: break-all;\n overflow: hidden;\n}\n\n.rs-sub-headline {\n word-break: break-all;\n overflow: hidden;\n color: #666;\n font-size: 0.92em;\n height: 1.2em;\n}\n.rs-big-headline {\n font-size: 1.625em;\n font-weight: normal;\n text-align: center;\n margin-top: 20px;\n margin-bottom: 20px;\n}\n\n/* BUTTONS */\n.rs-button {\n font: inherit;\n color: inherit;\n background-color: transparent;\n border: 1px solid #dcdcdc;\n border-radius: 3px;\n cursor: pointer;\n}\n.rs-button-small {\n padding: 0.5em 0.6em;\n margin-left: 0.3em;\n transition: border-color 300ms ease-out;\n}\n.rs-button-wrap {\n margin-top: 10px;\n}\n\n.rs-button-wrap img,\n.rs-button-wrap svg {\n float: left;\n margin-right: 0.6em;\n width: 40px;\n height: 40px;\n}\n\n.rs-button-big {\n padding: 15px 10px;\n margin-bottom: 10px;\n display: block;\n width: 100%;\n text-align: left;\n transition: box-shadow 200ms;\n}\n.rs-button-big > div {\n font-size: 1.125em;\n padding: 10px 0;\n}\n.rs-button-big:hover {\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\n}\n.rs-button-big:active {\n background-color: #eee;\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\n}\n.rs-button-big:last-child {\n margin-bottom: 0;\n}\n\n.rs-content {\n padding: 0 10px 10px 10px;\n}\n\n\n.rs-state-choose .rs-main-logo,\n.rs-state-sign-in .rs-main-logo {\n margin-left: 45%;\n float: none;\n}\n\n\n.rs-sign-in-form input[type=text] {\n padding: 15px 10px;\n display: block;\n width: 100%;\n font: inherit;\n border: 1px solid #aaa;\n}\n.rs-sign-in-form input[type=submit] {\n padding: 15px 10px;\n margin-top: 20px;\n margin-bottom: 15px;\n display: block;\n width: 100%;\n border: none;\n border-radius: 3px;\n background-color: #3fb34f;\n font: inherit;\n color: #fff;\n transition: box-shadow 200ms, background-color 200ms;\n}\n.rs-sign-in-form input[type=submit]:hover {\n cursor: pointer;\n background-color: #4BCB5D;\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\n}\n.rs-sign-in-form input[type=submit]:active {\n background-color: #3fb34f;\n}\n\n.rs-sign-in-error.hidden,\n.rs-box-error.hidden {\n height: 0;\n}\n\n.rs-sign-in-error.visible,\n.rs-box-error.visible {\n height: auto;\n border-radius: 3px;\n padding: 0.5em 0.5em;\n margin-top: 0.5em;\n text-align: center;\n background-color: rgba(255,0,0,0.1);\n color: darkred;\n}\n\n /*Choose provider box */\n.rs-box-choose {\n text-align: center;\n overflow: hidden;\n}\n\n.rs-box-choose p {\n margin-top: 0;\n margin-bottom: 20px;\n}\n\n/*Connected box */\n.rs-box-connected {\n height: 40px;\n}\n.rs-connected-text {\n float: left;\n}\n.rs-box-connected .rs-user {\n font-weight: bold;\n max-width: 210px;\n text-overflow: ellipsis;\n overflow: hidden;\n word-break: keep-all;\n}\n.rs-connected-buttons {\n float: right;\n}\n.rs-disconnect:hover {\n border-color: #FF2D2D;\n}\n.rs-disconnect:hover .rs-icon{\n fill: #FF2D2D;\n}\n.rs-sync:hover {\n border-color: #FFBB0C;\n}\n.rs-sync:hover .rs-icon {\n fill: #FFBB0C;\n}\n.rs-sync.rs-rotate {\n border-color: #FFBB0C;\n}\n.rs-sync.rs-rotate .rs-icon {\n fill: #FFBB0C;\n animation: rs-spin 1s linear infinite;\n}\n@keyframes rs-spin { 100% { transform: rotate(360deg); transform:rotate(360deg); } }\n\n/* Floating widget styles (top right corner) */\n.rs-floating {\n position: fixed;\n top: 0;\n right: 0;\n}\n\n\n/* Small/mobile screens */\n@media screen and (max-width: 360px) {\n .rs-widget {\n font-size: 100%;\n padding: 10px;\n transition: all 300ms ease-out;\n }\n .rs-floating {\n position: relative;\n top: auto;\n right: auto\n }\n .rs-state-choose,\n .rs-state-sign-in {\n position: fixed;\n top: 0;\n margin: 0;\n border-radius: 0;\n height: 100%;\n max-width: 100%;\n }\n}\n\n/* remove dotted outline border on Firefox */\n.rs-widget a:focus,\n.rs-widget a:active,\n.rs-widget button:focus,\n.rs-widget input:focus {\n outline:none;\n}\n.rs-widget button::-moz-focus-inner, \n.rs-widget input[type="button"]::-moz-focus-inner,\n.rs-widget input[type="submit"]::-moz-focus-inner {\n border:0;\n}\n'}])}); //# sourceMappingURL=widget.js.map \ No newline at end of file diff --git a/build/widget.js.map b/build/widget.js.map index 7ae7e38..f6a891e 100644 --- a/build/widget.js.map +++ b/build/widget.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///widget.js","webpack:///webpack/bootstrap 955f44c9d410dd323ded","webpack:///./src/widget.js","webpack:///./src/assets/widget.html","webpack:///./src/assets/styles.css"],"names":["root","factory","exports","module","define","amd","Widget","this","modules","__webpack_require__","moduleId","installedModules","id","loaded","call","m","c","p","remoteStorage","options","arguments","length","undefined","rs","state","active","online","closed","leaveOpen","lastSynced","lastSyncedUpdateLoop","prototype","log","_console","_len","msg","Array","_key","console","debug","apply","concat","eventHandler","event","_this","setState","rsSyncButton","classList","add","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","subHeadlineEl","document","querySelector","innerHTML","hasFeature","sync","on","connectedUser","userAddress","rsConnectedUser","backend","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","toSelect","currentStateClass","className","match","rsConnectedLabel","textContent","createHtmlTemplate","element","createElement","style","appendChild","setupElements","rsInitial","rsChoose","rsConnected","rsSignIn","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsErrorBox","apiKeys","hasOwnProperty","parentNode","removeChild","rsSignInForm","rsDisconnectButton","rsLogo","setupHandlers","_this2","error","setEventListeners","setClickHandlers","attach","elementId","domElement","parent","getElementById","body","_this3","addEventListener","e","preventDefault","value","connect","showChooseOrSignIn","Object","keys","_this4","dropbox","googledrive","disconnect","stopSync","startSync","closeWidget","stopPropagation","toggleWidget","openWidget","showErrorBox","errorMsg","hideErrorBox","msgContainer","message","now","secondsSinceLastSync","Math","round","getTime"],"mappings":"CAAA,SAAAA,EAAAC,GACA,gBAAAC,UAAA,gBAAAC,QACAA,OAAAD,QAAAD,IACA,kBAAAG,gBAAAC,IACAD,UAAAH,GACA,gBAAAC,SACAA,QAAAI,OAAAL,IAEAD,EAAAM,OAAAL,KACCM,KAAA,WACD,MCAgB,UAAUC,GCN1B,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAR,OAGA,IAAAC,GAAAQ,EAAAD,IACAR,WACAU,GAAAF,EACAG,UAUA,OANAL,GAAAE,GAAAI,KAAAX,EAAAD,QAAAC,IAAAD,QAAAO,GAGAN,EAAAU,UAGAV,EAAAD,QAvBA,GAAAS,KAqCA,OATAF,GAAAM,EAAAP,EAGAC,EAAAO,EAAAL,EAGAF,EAAAQ,EAAA,GAGAR,EAAA,KDgBM,SAAUN,EAAQD,EAASO,GAEhCN,EAAOD,QAAUO,EAAoB,IAKhC,SAAUN,EAAQD,EAASO,GAEhC,YEtDD,IAAIH,GAAS,SAASY,GAA2B,GAAZC,GAAYC,UAAAC,OAAA,GAAAC,SAAAF,UAAA,GAAAA,UAAA,KAC/Cb,MAAKgB,GAAKL,EAEVX,KAAKiB,MAAQ,UAGbjB,KAAKkB,UAGLlB,KAAKmB,UAGLnB,KAAKoB,UAELpB,KAAKqB,YAAYT,EAAQS,WAAYT,EAAQS,UAE7CrB,KAAKsB,WAAa,KAClBtB,KAAKuB,qBAAuB,KAI9BxB,GAAOyB,WAELC,IAFiB,WAEJ,OAAAC,GAAAC,EAAAd,UAAAC,OAALc,EAAKC,MAAAF,GAAAG,EAAA,EAAAA,EAAAH,EAAAG,IAALF,EAAKE,GAAAjB,UAAAiB,IACXJ,EAAAK,SAAQC,MAARC,MAAAP,GAAc,gBAAdQ,OAAiCN,KAInCO,aAPiB,SAOHC,EAAOR,GAAK,GAAAS,GAAArC,IAExB,QADAA,KAAKyB,IAAI,UAAWW,GACZA,GACN,IAAK,QACHpC,KAAKsC,SAAStC,KAAKiB,MACnB,MACF,KAAK,WACHjB,KAAKuC,aAAaC,UAAUC,IAAI,YAChC,MACF,KAAK,OAGH,GAFAzC,KAAKuC,aAAaC,UAAUE,OAAO,aAE/B1C,KAAK2C,SAASH,UAAUI,SAAS,2BAChC5C,KAAKgB,GAAG6B,OAAO1B,OAClBnB,KAAK8C,6BACA,IAAI9C,KAAKgB,GAAG6B,OAAO1B,OAAQ,CAChCnB,KAAKsB,WAAa,GAAIyB,KACtB,IAAIC,GAAgBC,SAASC,cAAc,qCAC3CF,GAAcG,UAAY,kBAE5B,KACF,KAAK,eACHnD,KAAKkB,UACLlB,KAAKmB,UACLnB,KAAK2C,SAASH,UAAUE,OAAO,4BAC/B1C,KAAK2C,SAASH,UAAUE,OAAO,sBAC/B1C,KAAK2C,SAASH,UAAUE,OAAO,qBAC/B1C,KAAKsC,SAAS,UACd,MACF,KAAK,YACHtC,KAAKkB,UACLlB,KAAKmB,UACDnB,KAAKgB,GAAGoC,WAAW,SACrBpD,KAAKgB,GAAGqC,KAAKC,GAAG,WAAY,iBAAMjB,GAAKF,aAAa,cACpDnC,KAAKgB,GAAGqC,KAAKC,GAAG,OAAQ,iBAAMjB,GAAKF,aAAa,WAEhDnC,KAAKuC,aAAaC,UAAUC,IAAI,SAElC,IAAIc,GAAgBvD,KAAKgB,GAAG6B,OAAOW,WACnCxD,MAAKyD,gBAAgBN,UAAYI,EACjCvD,KAAK2C,SAASH,UAAUC,IAAxB,cAA0CzC,KAAKgB,GAAG0C,SAClD1D,KAAKsC,SAAS,YACd,MACF,KAAK,kBACHtC,KAAKmB,UAELnB,KAAKsC,UACL,MACF,KAAK,iBACHtC,KAAKmB,UACLnB,KAAKkB,UACLlB,KAAKsC,UACL,MACF,KAAK,QACc,mBAAbV,EAAI+B,KACN3D,KAAK4D,qBAAqBhC,GACJ,cAAbA,EAAI+B,KACb3D,KAAK6D,gBAAgBjC,GACC,iBAAbA,EAAI+B,KACb3D,KAAK8D,mBAAmBlC,GAExBG,QAAQC,MAAM,8BAA+BJ,KAMrDU,SA1EiB,SA0EPrB,GACR,GAAIA,EAAO,CACTjB,KAAKyB,IAAI,iBAAkBR,EAC3B,IAAI8C,GAAed,SAASC,cAAc,mBACtCa,IACFA,EAAavB,UAAUE,OAAO,WAGhC,IAAIsB,GAAWf,SAASC,cAAc,kBAAkBjC,EACpD+C,IACFA,EAASxB,UAAUC,IAAI,WAGzB,IAAIwB,GAAoBjE,KAAK2C,SAASuB,UAAUC,MAAM,iBAAiB,EACvEnE,MAAK2C,SAASH,UAAUE,OAAOuB,GAC/BjE,KAAK2C,SAASH,UAAUC,IAAxB,aAAwCxB,GAASjB,KAAKiB,QAClDjB,KAAKoB,QAAoB,UAAVH,GACjBjB,KAAK2C,SAASH,UAAUC,IAAI,kBAG9BzC,KAAKiB,MAAQA,GAGVjB,KAAKmB,QAAUnB,KAAKkB,QACvBlB,KAAK2C,SAASH,UAAUC,IAAI,oBAE5BzC,KAAKoE,iBAAiBC,YAAc,kBAEpCrE,KAAKoE,iBAAiBC,YAAc,YACpCrE,KAAK2C,SAASH,UAAUE,OAAO,sBAWnC4B,mBAlHiB,WAmHf,GAAMC,GAAUtB,SAASuB,cAAc,OACjCC,EAAQxB,SAASuB,cAAc,QAOrC,OANAC,GAAMtB,UAAYjD,EAAQ,GAE1BqE,EAAQlE,GAAK,uBACbkE,EAAQpB,UAAYjD,EAAQ,GAC5BqE,EAAQG,YAAYD,GAEbF,GAQTI,cAnIiB,WAoIf3E,KAAK2C,SAAWM,SAASC,cAAc,cACvClD,KAAK4E,UAAY3B,SAASC,cAAc,mBACxClD,KAAK6E,SAAW5B,SAASC,cAAc,kBACvClD,KAAK8E,YAAc7B,SAASC,cAAc,qBAC1ClD,KAAK+E,SAAW9B,SAASC,cAAc,mBAEvClD,KAAKoE,iBAAmBnB,SAASC,cAAc,sCAC/ClD,KAAKgF,4BAA8B/B,SAASC,cAAc,uBAC1DlD,KAAKiF,sBAAwBhC,SAASC,cAAc,4BACpDlD,KAAKkF,0BAA4BjC,SAASC,cAAc,2BACxDlD,KAAKmF,WAAalC,SAASC,cAAc,iBAInClD,KAAKgB,GAAGoE,QAAQC,eAAe,gBACnCrF,KAAKkF,0BAA0BI,WAAWC,YAAYvF,KAAKkF,2BAGvDlF,KAAKgB,GAAGoE,QAAQC,eAAe,YACnCrF,KAAKiF,sBAAsBK,WAAWC,YAAYvF,KAAKiF,uBAGzDjF,KAAKwF,aAAevC,SAASC,cAAc,oBAE3ClD,KAAKyF,mBAAqBxC,SAASC,cAAc,kBACjDlD,KAAKuC,aAAeU,SAASC,cAAc,YAC3ClD,KAAK0F,OAASzC,SAASC,cAAc,iBAErClD,KAAKyD,gBAAkBR,SAASC,cAAc,kCAQhDyC,cAxKiB,WAwKA,GAAAC,GAAA5F,IACfA,MAAKgB,GAAGsC,GAAG,YAAa,iBAAMsC,GAAKzD,aAAa,eAChDnC,KAAKgB,GAAGsC,GAAG,QAAS,iBAAMsC,GAAKzD,aAAa,WAC5CnC,KAAKgB,GAAGsC,GAAG,eAAgB,iBAAMsC,GAAKzD,aAAa,kBACnDnC,KAAKgB,GAAGsC,GAAG,iBAAkB,iBAAMsC,GAAKzD,aAAa,oBACrDnC,KAAKgB,GAAGsC,GAAG,kBAAmB,iBAAMsC,GAAKzD,aAAa,qBACtDnC,KAAKgB,GAAGsC,GAAG,QAAS,SAACuC,GAAD,MAAWD,GAAKzD,aAAa,QAAS0D,KAE1D7F,KAAK8F,oBACL9F,KAAK+F,oBAWPC,OA5LiB,SA4LTC,GACN,GAAMC,GAAalG,KAAKsE,oBAExB,IAAI2B,EAAW,CACb,GAAME,GAASlD,SAASmD,eAAeH,EACvC,KAAKE,EACH,KAAM,8CAAiDF,EAAY,GAErEE,GAAOzB,YAAYwB,OAEnBjD,UAASoD,KAAK3B,YAAYwB,EAG5BlG,MAAK2E,gBACL3E,KAAK2F,iBAGPG,kBA7MiB,WA6MI,GAAAQ,GAAAtG,IAEnBA,MAAKwF,aAAae,iBAAiB,SAAU,SAACC,GAC5CA,EAAEC,gBACF,IAAIjD,GAAcP,SAASC,cAAc,+BAA+BwD,KACxEJ,GAAKtF,GAAG2F,QAAQnD,MAWpBoD,mBA7NiB,WA+NX5G,KAAKgB,GAAGoE,SAAWyB,OAAOC,KAAK9G,KAAKgB,GAAGoE,SAAStE,OAAS,EAC3Dd,KAAKsC,SAAS,UAEdtC,KAAKsC,SAAS,YAIlByD,iBAtOiB,WAsOG,GAAAgB,GAAA/G,IAElBA,MAAK4E,UAAU2B,iBAAiB,QAAS,iBAAMQ,GAAKH,uBAGpD5G,KAAKgF,4BAA4BuB,iBAAiB,QAAS,iBAAMQ,GAAKzE,SAAS,aAG/EtC,KAAKiF,sBAAsBsB,iBAAiB,QAAS,iBAAMQ,GAAK/F,GAALgG,QAAmBL,YAG9E3G,KAAKkF,0BAA0BqB,iBAAiB,QAAS,iBAAMQ,GAAK/F,GAALiG,YAAuBN,YAGtF3G,KAAKyF,mBAAmBc,iBAAiB,QAAS,iBAAMQ,GAAK/F,GAAGkG,eAG5DlH,KAAKgB,GAAGoC,WAAW,SACrBpD,KAAKuC,aAAagE,iBAAiB,QAAS,WACtCQ,EAAKxE,aAAaC,UAAUI,SAAS,cACvCmE,EAAK/F,GAAGmG,WACRJ,EAAKxE,aAAaC,UAAUE,OAAO,eAEnCqE,EAAK/F,GAAGoG,YACRL,EAAKxE,aAAaC,UAAUC,IAAI,gBAMtCQ,SAASsD,iBAAiB,QAAS,iBAAMQ,GAAKM,gBAG9CrH,KAAK2C,SAAS4D,iBAAiB,QAAS,SAAAC,GAAA,MAAKA,GAAEc,oBAG/CtH,KAAK0F,OAAOa,iBAAiB,QAAS,iBAAMQ,GAAKQ,kBASnDA,aAnRiB,WAoRXvH,KAAKoB,OACPpB,KAAKwH,aAEc,YAAfxH,KAAKiB,MACPjB,KAAK4G,qBAEL5G,KAAKqH,eAKXG,WA/RiB,WAgSfxH,KAAKoB,UACLpB,KAAKsC,SAAStC,KAAKkB,OAAS,YAAc,YAS5CmG,YA1SiB,YA2SVrH,KAAKqB,WAAarB,KAAKkB,QAC1BlB,KAAKsC,SAAS,SACdtC,KAAKoB,WAELpB,KAAKsC,SAAStC,KAAKkB,OAAS,YAAc,YAI9CuG,aAnTiB,SAmTHC,GACZ1H,KAAKmF,WAAWhC,UAAYuE,EAC5B1H,KAAKsC,SAAS,UAGhBqF,aAxTiB,WAyTf3H,KAAKmF,WAAWhC,UAAY,GAC5BnD,KAAKsC,SAAS,UAGhBsB,qBA7TiB,SA6TKiC,GACpB,GAAI+B,GAAe3E,SAASC,cAAc,oBAC1C0E,GAAazE,UAAY0C,EAAMgC,QAC/BD,EAAapF,UAAUE,OAAO,UAC9BkF,EAAapF,UAAUC,IAAI,YAG7BoB,gBApUiB,WAsUf7D,KAAKyH,aAAa,mBAGpB3D,mBAzUiB,WA8Uf9D,KAAKyH,aAAa,yCAMpB3E,uBApViB,WAqVf,GAAIgF,GAAM,GAAI/E,MACVgF,EAAuBC,KAAKC,OAAOH,EAAII,UAAYlI,KAAKsB,WAAW4G,WAAW,KAC9ElF,EAAgBC,SAASC,cAAc,qCAC3CF,GAAcG,UAAd,UAAoC4E,EAApC,iBAIJnI,EAAOD,QAAUI,GFgHX,SAAUH,EAAQD,GG1exBC,EAAAD,QAAA;EHgfM,SAAUC,EAAQD,GIhfxBC,EAAAD,QAAA","file":"widget.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Widget\"] = factory();\n\telse\n\t\troot[\"Widget\"] = factory();\n})(this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Widget\"] = factory();\n\telse\n\t\troot[\"Widget\"] = factory();\n})(this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\tmodule.exports = __webpack_require__(1);\n\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\t/**\n\t * RemoteStorage connect widget\n\t * @constructor\n\t *\n\t * @param {object} remoteStorage - remoteStorage instance\n\t * @param {object} options - Widget options\n\t * @param {boolean} options.leaveOpen - Do not minimize widget when user clicks\n\t * outside of it (default: false)\n\t */\n\tvar Widget = function Widget(remoteStorage) {\n\t var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\t\n\t this.rs = remoteStorage;\n\t\n\t this.state = 'initial';\n\t\n\t // true if we have remoteStorage connection's info\n\t this.active = false;\n\t\n\t // remoteStorage is connected!\n\t this.online = false;\n\t\n\t // widget is minimized ?\n\t this.closed = false;\n\t\n\t this.leaveOpen = options.leaveOpen ? options.leaveOpen : false;\n\t\n\t this.lastSynced = null;\n\t this.lastSyncedUpdateLoop = null;\n\t};\n\t\n\tWidget.prototype = {\n\t log: function log() {\n\t var _console;\n\t\n\t for (var _len = arguments.length, msg = Array(_len), _key = 0; _key < _len; _key++) {\n\t msg[_key] = arguments[_key];\n\t }\n\t\n\t (_console = console).debug.apply(_console, ['[RS-WIDGET] '].concat(msg));\n\t },\n\t\n\t\n\t // handle events !\n\t eventHandler: function eventHandler(event, msg) {\n\t var _this = this;\n\t\n\t this.log('EVENT: ', event);\n\t switch (event) {\n\t case 'ready':\n\t this.setState(this.state);\n\t break;\n\t case 'req-done':\n\t this.rsSyncButton.classList.add(\"rs-rotate\");\n\t break;\n\t case 'done':\n\t this.rsSyncButton.classList.remove(\"rs-rotate\");\n\t\n\t if (this.rsWidget.classList.contains('rs-state-unauthorized') || !this.rs.remote.online) {\n\t this.updateLastSyncedOutput();\n\t } else if (this.rs.remote.online) {\n\t this.lastSynced = new Date();\n\t var subHeadlineEl = document.querySelector('.rs-box-connected .rs-sub-headline');\n\t subHeadlineEl.innerHTML = 'Synced just now';\n\t }\n\t break;\n\t case 'disconnected':\n\t this.active = false;\n\t this.online = false;\n\t this.rsWidget.classList.remove('rs-backend-remotestorage');\n\t this.rsWidget.classList.remove('rs-backend-dropbox');\n\t this.rsWidget.classList.remove('rs-backend-gdrive');\n\t this.setState('initial');\n\t break;\n\t case 'connected':\n\t this.active = true;\n\t this.online = true;\n\t if (this.rs.hasFeature('Sync')) {\n\t this.rs.sync.on('req-done', function () {\n\t return _this.eventHandler('req-done');\n\t });\n\t this.rs.sync.on('done', function () {\n\t return _this.eventHandler('done');\n\t });\n\t } else {\n\t this.rsSyncButton.classList.add('hidden');\n\t }\n\t var connectedUser = this.rs.remote.userAddress;\n\t this.rsConnectedUser.innerHTML = connectedUser;\n\t this.rsWidget.classList.add('rs-backend-' + this.rs.backend);\n\t this.setState('connected');\n\t break;\n\t case 'network-offline':\n\t this.online = false;\n\t // this.active = false;\n\t this.setState();\n\t break;\n\t case 'network-online':\n\t this.online = true;\n\t this.active = true;\n\t this.setState();\n\t break;\n\t case 'error':\n\t if (msg.name === 'DiscoveryError') {\n\t this.handleDiscoveryError(msg);\n\t } else if (msg.name === 'SyncError') {\n\t this.handleSyncError(msg);\n\t } else if (msg.name === 'Unauthorized') {\n\t this.handleUnauthorized(msg);\n\t } else {\n\t console.debug('Encountered unhandled error', msg);\n\t }\n\t break;\n\t }\n\t },\n\t setState: function setState(state) {\n\t if (state) {\n\t this.log('Setting state ', state);\n\t var lastSelected = document.querySelector('.rs-box.selected');\n\t if (lastSelected) {\n\t lastSelected.classList.remove('selected');\n\t }\n\t\n\t var toSelect = document.querySelector('.rs-box.rs-box-' + state);\n\t if (toSelect) {\n\t toSelect.classList.add('selected');\n\t }\n\t\n\t var currentStateClass = this.rsWidget.className.match(/rs-state-\\S+/g)[0];\n\t this.rsWidget.classList.remove(currentStateClass);\n\t this.rsWidget.classList.add('rs-state-' + (state || this.state));\n\t if (this.closed && state !== 'close') {\n\t this.rsWidget.classList.add('rs-state-close');\n\t }\n\t\n\t this.state = state;\n\t }\n\t\n\t if (!this.online && this.active) {\n\t this.rsWidget.classList.add('rs-state-offline');\n\t // TODO offline is not the same as \"not connected\"\n\t this.rsConnectedLabel.textContent = 'Not Connected';\n\t } else {\n\t this.rsConnectedLabel.textContent = 'Connected';\n\t this.rsWidget.classList.remove('rs-state-offline');\n\t }\n\t },\n\t\n\t\n\t /**\n\t * Create the widget element and add styling.\n\t *\n\t * @returns {object} The widget's DOM element\n\t *\n\t * @private\n\t */\n\t createHtmlTemplate: function createHtmlTemplate() {\n\t var element = document.createElement('div');\n\t var style = document.createElement('style');\n\t style.innerHTML = __webpack_require__(3);\n\t\n\t element.id = \"remotestorage-widget\";\n\t element.innerHTML = __webpack_require__(2);\n\t element.appendChild(style);\n\t\n\t return element;\n\t },\n\t\n\t\n\t /**\n\t * Save all interactive DOM elements as variables for later access.\n\t *\n\t * @private\n\t */\n\t setupElements: function setupElements() {\n\t this.rsWidget = document.querySelector('.rs-widget');\n\t this.rsInitial = document.querySelector('.rs-box-initial');\n\t this.rsChoose = document.querySelector('.rs-box-choose');\n\t this.rsConnected = document.querySelector('.rs-box-connected');\n\t this.rsSignIn = document.querySelector('.rs-box-sign-in');\n\t\n\t this.rsConnectedLabel = document.querySelector('.rs-box-connected .rs-sub-headline');\n\t this.rsChooseRemoteStorageButton = document.querySelector('button.rs-choose-rs');\n\t this.rsChooseDropboxButton = document.querySelector('button.rs-choose-dropbox');\n\t this.rsChooseGoogleDriveButton = document.querySelector('button.rs-choose-gdrive');\n\t this.rsErrorBox = document.querySelector('.rs-box-error');\n\t\n\t // check if apiKeys is set for Dropbox or Google [googledrive, dropbox]\n\t // to show/hide relative buttons only if needed\n\t if (!this.rs.apiKeys.hasOwnProperty('googledrive')) {\n\t this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton);\n\t }\n\t\n\t if (!this.rs.apiKeys.hasOwnProperty('dropbox')) {\n\t this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton);\n\t }\n\t\n\t this.rsSignInForm = document.querySelector('.rs-sign-in-form');\n\t\n\t this.rsDisconnectButton = document.querySelector('.rs-disconnect');\n\t this.rsSyncButton = document.querySelector('.rs-sync');\n\t this.rsLogo = document.querySelector('.rs-main-logo');\n\t\n\t this.rsConnectedUser = document.querySelector('.rs-connected-text h1.rs-user');\n\t },\n\t\n\t\n\t /**\n\t * Setup all event handlers\n\t *\n\t * @private\n\t */\n\t setupHandlers: function setupHandlers() {\n\t var _this2 = this;\n\t\n\t this.rs.on('connected', function () {\n\t return _this2.eventHandler('connected');\n\t });\n\t this.rs.on('ready', function () {\n\t return _this2.eventHandler('ready');\n\t });\n\t this.rs.on('disconnected', function () {\n\t return _this2.eventHandler('disconnected');\n\t });\n\t this.rs.on('network-online', function () {\n\t return _this2.eventHandler('network-online');\n\t });\n\t this.rs.on('network-offline', function () {\n\t return _this2.eventHandler('network-offline');\n\t });\n\t this.rs.on('error', function (error) {\n\t return _this2.eventHandler('error', error);\n\t });\n\t\n\t this.setEventListeners();\n\t this.setClickHandlers();\n\t },\n\t\n\t\n\t /**\n\t * Append widget to the DOM.\n\t *\n\t * If an elementId is specified, it will be appended to that element,\n\t * otherwise it will be appended to the document's body.\n\t *\n\t * @param {String} [elementId] - Widget's parent\n\t */\n\t attach: function attach(elementId) {\n\t var domElement = this.createHtmlTemplate();\n\t\n\t if (elementId) {\n\t var parent = document.getElementById(elementId);\n\t if (!parent) {\n\t throw \"Failed to find target DOM element with id=\\\"\" + elementId + \"\\\"\";\n\t }\n\t parent.appendChild(domElement);\n\t } else {\n\t document.body.appendChild(domElement);\n\t }\n\t\n\t this.setupElements();\n\t this.setupHandlers();\n\t },\n\t setEventListeners: function setEventListeners() {\n\t var _this3 = this;\n\t\n\t // Sign-in form\n\t this.rsSignInForm.addEventListener('submit', function (e) {\n\t e.preventDefault();\n\t var userAddress = document.querySelector('input[name=rs-user-address]').value;\n\t _this3.rs.connect(userAddress);\n\t });\n\t },\n\t\n\t\n\t /**\n\t * Show the screen for choosing a backend if there is more than one backend\n\t * to choose from. Otherwise it directly shows the remoteStorage connect\n\t * screen.\n\t *\n\t * @private\n\t */\n\t showChooseOrSignIn: function showChooseOrSignIn() {\n\t // choose backend only if some providers are declared\n\t if (this.rs.apiKeys && Object.keys(this.rs.apiKeys).length > 0) {\n\t this.setState('choose');\n\t } else {\n\t this.setState('sign-in');\n\t }\n\t },\n\t setClickHandlers: function setClickHandlers() {\n\t var _this4 = this;\n\t\n\t // Initial button\n\t this.rsInitial.addEventListener('click', function () {\n\t return _this4.showChooseOrSignIn();\n\t });\n\t\n\t // Choose RS button\n\t this.rsChooseRemoteStorageButton.addEventListener('click', function () {\n\t return _this4.setState('sign-in');\n\t });\n\t\n\t // Choose Dropbox button\n\t this.rsChooseDropboxButton.addEventListener('click', function () {\n\t return _this4.rs[\"dropbox\"].connect();\n\t });\n\t\n\t // Choose Google Drive button\n\t this.rsChooseGoogleDriveButton.addEventListener('click', function () {\n\t return _this4.rs[\"googledrive\"].connect();\n\t });\n\t\n\t // Disconnect button\n\t this.rsDisconnectButton.addEventListener('click', function () {\n\t return _this4.rs.disconnect();\n\t });\n\t\n\t // Sync button\n\t if (this.rs.hasFeature('Sync')) {\n\t this.rsSyncButton.addEventListener('click', function () {\n\t if (_this4.rsSyncButton.classList.contains('rs-rotate')) {\n\t _this4.rs.stopSync();\n\t _this4.rsSyncButton.classList.remove(\"rs-rotate\");\n\t } else {\n\t _this4.rs.startSync();\n\t _this4.rsSyncButton.classList.add(\"rs-rotate\");\n\t }\n\t });\n\t }\n\t\n\t // Reduce to icon only if connected and clicked outside of widget\n\t document.addEventListener('click', function () {\n\t return _this4.closeWidget();\n\t });\n\t\n\t // Clicks on the widget stop the above event\n\t this.rsWidget.addEventListener('click', function (e) {\n\t return e.stopPropagation();\n\t });\n\t\n\t // Click on the logo to toggle the widget's open/close state\n\t this.rsLogo.addEventListener('click', function () {\n\t return _this4.toggleWidget();\n\t });\n\t },\n\t\n\t\n\t /**\n\t * Toggle between the widget's open/close state.\n\t *\n\t * When then widget is open and in initial state, it will show the backend\n\t * chooser screen.\n\t */\n\t toggleWidget: function toggleWidget() {\n\t if (this.closed) {\n\t this.openWidget();\n\t } else {\n\t if (this.state === 'initial') {\n\t this.showChooseOrSignIn();\n\t } else {\n\t this.closeWidget();\n\t }\n\t }\n\t },\n\t openWidget: function openWidget() {\n\t this.closed = false;\n\t this.setState(this.active ? 'connected' : 'initial');\n\t },\n\t\n\t\n\t /**\n\t * Close the widget to only show the icon.\n\t *\n\t * If the ``leaveOpen`` config is true or there is no storage connected,\n\t * the widget will not close.\n\t */\n\t closeWidget: function closeWidget() {\n\t if (!this.leaveOpen && this.active) {\n\t this.setState('close');\n\t this.closed = true;\n\t } else {\n\t this.setState(this.active ? 'connected' : 'initial');\n\t }\n\t },\n\t showErrorBox: function showErrorBox(errorMsg) {\n\t this.rsErrorBox.innerHTML = errorMsg;\n\t this.setState('error');\n\t },\n\t hideErrorBox: function hideErrorBox() {\n\t this.rsErrorBox.innerHTML = '';\n\t this.setState('close');\n\t },\n\t handleDiscoveryError: function handleDiscoveryError(error) {\n\t var msgContainer = document.querySelector('.rs-sign-in-error');\n\t msgContainer.innerHTML = error.message;\n\t msgContainer.classList.remove('hidden');\n\t msgContainer.classList.add('visible');\n\t },\n\t handleSyncError: function handleSyncError() /* error */{\n\t // console.debug('Encountered SyncError', error);\n\t this.showErrorBox('App sync error');\n\t },\n\t handleUnauthorized: function handleUnauthorized() {\n\t // console.debug('RS UNAUTHORIZED');\n\t // console.debug('Bearer token not valid anymore');\n\t // this.rs.stopSync();\n\t // this.rsWidget.classList.add('rs-state-unauthorized');\n\t this.showErrorBox('App authorization expired or revoked');\n\t // this.lastSyncedUpdateLoop = setInterval(() => {\n\t // this.updateLastSyncedOutput();\n\t // }, 5000);\n\t },\n\t updateLastSyncedOutput: function updateLastSyncedOutput() {\n\t var now = new Date();\n\t var secondsSinceLastSync = Math.round((now.getTime() - this.lastSynced.getTime()) / 1000);\n\t var subHeadlineEl = document.querySelector('.rs-box-connected .rs-sub-headline');\n\t subHeadlineEl.innerHTML = 'Synced ' + secondsSinceLastSync + ' seconds ago';\n\t }\n\t};\n\t\n\tmodule.exports = Widget;\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports) {\n\n\tmodule.exports = \"

Connect your storage

To sync data with your account

user@provider.com

Connected

Connect your storage

This app allows you to sync data with a storage of your choice. Read more

\";\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports) {\n\n\tmodule.exports = \"/* RemoteStorage widget styles */\\n\\n.rs-widget * {\\n box-sizing: border-box;\\n}\\n\\n.rs-widget {\\n font-family: arial, sans-serif;\\n max-width: 350px;\\n color: #333;\\n background-color: #fff;\\n border-radius: 3px;\\n padding: 10px;\\n margin: 10px;\\n overflow: hidden;\\n z-index: 21000000; /* Make sure we're on a reasonably high visibility layer */\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n will-change: max-height, height, width, opacity, max-width, background, box-shadow;\\n transition-property: width, height, opacity, max-width, max-height, background, box-shadow;\\n transition-duration: 300ms;\\n}\\n\\n.rs-box {\\n overflow: hidden;\\n will-change: height;\\n transition-property: height, width, max-height;\\n transition-duration: 300ms;\\n transition-timing-function: ease-in;\\n opacity: 0;\\n max-height: 0px;\\n}\\n\\n.rs-box.selected {\\n opacity: 1;\\n max-height: 380px;\\n}\\n\\n/* Main logo */\\n.rs-main-logo {\\n float: left;\\n height: 36px;\\n width: auto;\\n margin-top: 1px;\\n margin-right: 0.625em;\\n transition: margin-left 300ms ease-out, transform 300ms ease-out;\\n cursor: pointer;\\n}\\n.rs-widget .rs-backend-remotestorage svg#rs-main-logo-remotestorage,\\n{\\n display: normal;\\n}\\n.rs-widget[class*=\\\"rs-backend-\\\"]:not(.rs-backend-remotestorage) svg#rs-main-logo-remotestorage {\\n display: none;\\n}\\n.rs-widget .rs-backend-dropbox svg#rs-main-logo-dropbox {\\n display: normal;\\n}\\n.rs-widget:not(.rs-backend-dropbox) svg#rs-main-logo-dropbox {\\n display: none;\\n}\\n.rs-widget .rs-backend-gdrive svg#rs-main-logo-gdrive {\\n display: normal;\\n}\\n.rs-widget:not(.rs-backend-gdrive) svg#rs-main-logo-gdrive {\\n display: none;\\n}\\n\\npolygon.rs-logo-shape {\\n fill: #FF4B03;\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n.rs-state-offline polygon.rs-logo-shape {\\n fill: #888;\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n/* Hide everything except logo when connected and clicked outside of box */\\n.rs-state-close {\\n max-width: 55px;\\n background-color: transparent;\\n box-shadow: none;\\n opacity: 0.5;\\n\\n transition: max-height 100ms ease-out 0ms, max-width 300ms ease-out 300ms, background 300ms ease-in 200ms, opacity 300ms ease 200ms; \\n}\\n\\n.rs-state-close:hover {\\n cursor: pointer;\\n opacity: 1;\\n}\\n\\n/* Initial Connect remote storage box */\\n.rs-box-initial:hover {\\n cursor: pointer;\\n}\\n\\n.rs-widget a {\\n color: #0093cc;\\n}\\n\\n/* HEADLINE */\\n.rs-small-headline {\\n font-size: 1em;\\n font-weight: bold;\\n margin: 0;\\n margin-bottom: 2px;\\n height: 1.2em;\\n word-break: break-all;\\n overflow: hidden;\\n}\\n\\n.rs-sub-headline {\\n word-break: break-all;\\n overflow: hidden;\\n color: #666;\\n font-size: 0.92em;\\n height: 1.2em;\\n}\\n.rs-big-headline {\\n font-size: 1.625em;\\n font-weight: normal;\\n text-align: center;\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n/* BUTTONS */\\n.rs-button {\\n font: inherit;\\n color: inherit;\\n background-color: transparent;\\n border: 1px solid #dcdcdc;\\n border-radius: 3px;\\n cursor: pointer;\\n}\\n.rs-button-small {\\n padding: 0.5em 0.6em;\\n margin-left: 0.3em;\\n transition: border-color 300ms ease-out;\\n}\\n.rs-button-wrap {\\n margin-top: 10px;\\n}\\n\\n.rs-button-wrap img,\\n.rs-button-wrap svg {\\n float: left;\\n margin-right: 0.6em;\\n width: 40px;\\n height: 40px;\\n}\\n\\n.rs-button-big {\\n padding: 15px 10px;\\n margin-bottom: 10px;\\n display: block;\\n width: 100%;\\n text-align: left;\\n transition: box-shadow 200ms;\\n}\\n.rs-button-big > div {\\n font-size: 1.125em;\\n padding: 10px 0;\\n}\\n.rs-button-big:hover {\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-button-big:active {\\n background-color: #eee;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-button-big:last-child {\\n margin-bottom: 0;\\n}\\n\\n.rs-content {\\n padding: 0 10px 10px 10px;\\n}\\n\\n\\n.rs-state-choose .rs-main-logo,\\n.rs-state-sign-in .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n\\n.rs-sign-in-form input[type=text] {\\n padding: 15px 10px;\\n display: block;\\n width: 100%;\\n font: inherit;\\n border: 1px solid #aaa;\\n}\\n.rs-sign-in-form input[type=submit] {\\n padding: 15px 10px;\\n margin-top: 20px;\\n margin-bottom: 15px;\\n display: block;\\n width: 100%;\\n border: none;\\n border-radius: 3px;\\n background-color: #3fb34f;\\n font: inherit;\\n color: #fff;\\n transition: box-shadow 200ms, background-color 200ms;\\n}\\n.rs-sign-in-form input[type=submit]:hover {\\n cursor: pointer;\\n background-color: #4BCB5D;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-sign-in-form input[type=submit]:active {\\n background-color: #3fb34f;\\n}\\n\\n.rs-sign-in-error.hidden,\\n.rs-box-error.hidden {\\n height: 0;\\n}\\n\\n.rs-sign-in-error.visible,\\n.rs-box-error.visible {\\n height: auto;\\n border-radius: 3px;\\n padding: 0.5em 0.5em;\\n margin-top: 0.5em;\\n text-align: center;\\n background-color: rgba(255,0,0,0.1);\\n color: darkred;\\n}\\n\\n /*Choose provider box */\\n.rs-box-choose {\\n text-align: center;\\n overflow: hidden;\\n}\\n\\n.rs-box-choose p {\\n margin-top: 0;\\n margin-bottom: 20px;\\n}\\n\\n/*Connected box */\\n.rs-box-connected {\\n height: 40px;\\n}\\n.rs-connected-text {\\n float: left;\\n}\\n.rs-box-connected .rs-user {\\n font-weight: bold;\\n}\\n.rs-connected-buttons {\\n float: right;\\n}\\n.rs-disconnect:hover {\\n border-color: #FF2D2D;\\n}\\n.rs-disconnect:hover .rs-icon{\\n fill: #FF2D2D;\\n}\\n.rs-sync:hover {\\n border-color: #FFBB0C;\\n}\\n.rs-sync:hover .rs-icon {\\n fill: #FFBB0C;\\n}\\n.rs-sync.rs-rotate {\\n border-color: #FFBB0C;\\n}\\n.rs-sync.rs-rotate .rs-icon {\\n fill: #FFBB0C;\\n animation: rs-spin 1s linear infinite;\\n}\\n@keyframes rs-spin { 100% { transform: rotate(360deg); transform:rotate(360deg); } }\\n\\n/* Floating widget styles (top right corner) */\\n.rs-floating {\\n position: fixed;\\n top: 0;\\n right: 0;\\n}\\n\\n\\n/* Small/mobile screens */\\n@media screen and (max-width: 360px) {\\n .rs-widget {\\n font-size: 100%;\\n padding: 10px;\\n transition: all 300ms ease-out;\\n }\\n .rs-floating {\\n position: relative;\\n top: auto;\\n right: auto\\n }\\n .rs-state-choose,\\n .rs-state-sign-in {\\n position: fixed;\\n top: 0;\\n margin: 0;\\n border-radius: 0;\\n height: 100%;\\n max-width: 100%;\\n }\\n}\\n\\n/* remove dotted outline border on Firefox */\\n.rs-widget a:focus,\\n.rs-widget a:active,\\n.rs-widget button:focus,\\n.rs-widget input:focus {\\n outline:none;\\n}\\n.rs-widget button::-moz-focus-inner, \\n.rs-widget input[type=\\\"button\\\"]::-moz-focus-inner,\\n.rs-widget input[type=\\\"submit\\\"]::-moz-focus-inner {\\n border:0;\\n}\\n\"\n\n/***/ })\n/******/ ])\n});\n;\n\n\n// WEBPACK FOOTER //\n// widget.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 955f44c9d410dd323ded","/**\n * RemoteStorage connect widget\n * @constructor\n *\n * @param {object} remoteStorage - remoteStorage instance\n * @param {object} options - Widget options\n * @param {boolean} options.leaveOpen - Do not minimize widget when user clicks\n * outside of it (default: false)\n */\nlet Widget = function(remoteStorage, options={}) {\n this.rs = remoteStorage;\n\n this.state = 'initial';\n\n // true if we have remoteStorage connection's info\n this.active = false;\n\n // remoteStorage is connected!\n this.online = false;\n\n // widget is minimized ?\n this.closed = false;\n\n this.leaveOpen = options.leaveOpen ? options.leaveOpen : false;\n\n this.lastSynced = null;\n this.lastSyncedUpdateLoop = null;\n};\n\n\nWidget.prototype = {\n\n log (...msg) {\n console.debug('[RS-WIDGET] ', ...msg);\n },\n\n // handle events !\n eventHandler (event, msg) {\n this.log('EVENT: ', event);\n switch (event) {\n case 'ready':\n this.setState(this.state);\n break;\n case 'req-done':\n this.rsSyncButton.classList.add(\"rs-rotate\");\n break;\n case 'done':\n this.rsSyncButton.classList.remove(\"rs-rotate\");\n\n if (this.rsWidget.classList.contains('rs-state-unauthorized') ||\n !this.rs.remote.online) {\n this.updateLastSyncedOutput();\n } else if (this.rs.remote.online) {\n this.lastSynced = new Date();\n let subHeadlineEl = document.querySelector('.rs-box-connected .rs-sub-headline');\n subHeadlineEl.innerHTML = 'Synced just now';\n }\n break;\n case 'disconnected':\n this.active = false;\n this.online = false;\n this.rsWidget.classList.remove('rs-backend-remotestorage');\n this.rsWidget.classList.remove('rs-backend-dropbox');\n this.rsWidget.classList.remove('rs-backend-gdrive');\n this.setState('initial');\n break;\n case 'connected':\n this.active = true;\n this.online = true;\n if (this.rs.hasFeature('Sync')) {\n this.rs.sync.on('req-done', () => this.eventHandler('req-done'));\n this.rs.sync.on('done', () => this.eventHandler('done'));\n } else {\n this.rsSyncButton.classList.add('hidden');\n }\n let connectedUser = this.rs.remote.userAddress;\n this.rsConnectedUser.innerHTML = connectedUser;\n this.rsWidget.classList.add(`rs-backend-${this.rs.backend}`);\n this.setState('connected');\n break;\n case 'network-offline':\n this.online = false;\n // this.active = false;\n this.setState();\n break;\n case 'network-online':\n this.online = true;\n this.active = true;\n this.setState();\n break;\n case 'error':\n if (msg.name === 'DiscoveryError') {\n this.handleDiscoveryError(msg);\n } else if (msg.name === 'SyncError') {\n this.handleSyncError(msg);\n } else if (msg.name === 'Unauthorized') {\n this.handleUnauthorized(msg);\n } else {\n console.debug('Encountered unhandled error', msg);\n }\n break;\n }\n },\n\n setState (state) {\n if (state) {\n this.log('Setting state ', state);\n let lastSelected = document.querySelector('.rs-box.selected');\n if (lastSelected) {\n lastSelected.classList.remove('selected');\n }\n\n let toSelect = document.querySelector('.rs-box.rs-box-'+state);\n if (toSelect) {\n toSelect.classList.add('selected');\n }\n\n let currentStateClass = this.rsWidget.className.match(/rs-state-\\S+/g)[0];\n this.rsWidget.classList.remove(currentStateClass);\n this.rsWidget.classList.add(`rs-state-${state || this.state}`);\n if (this.closed && state !== 'close') {\n this.rsWidget.classList.add('rs-state-close');\n }\n\n this.state = state;\n }\n\n if (!this.online && this.active) {\n this.rsWidget.classList.add('rs-state-offline');\n // TODO offline is not the same as \"not connected\"\n this.rsConnectedLabel.textContent = 'Not Connected';\n } else {\n this.rsConnectedLabel.textContent = 'Connected';\n this.rsWidget.classList.remove('rs-state-offline');\n }\n },\n\n /**\n * Create the widget element and add styling.\n *\n * @returns {object} The widget's DOM element\n *\n * @private\n */\n createHtmlTemplate () {\n const element = document.createElement('div');\n const style = document.createElement('style');\n style.innerHTML = require('raw!./assets/styles.css');\n\n element.id = \"remotestorage-widget\";\n element.innerHTML = require('html!./assets/widget.html');\n element.appendChild(style);\n\n return element;\n },\n\n /**\n * Save all interactive DOM elements as variables for later access.\n *\n * @private\n */\n setupElements () {\n this.rsWidget = document.querySelector('.rs-widget');\n this.rsInitial = document.querySelector('.rs-box-initial');\n this.rsChoose = document.querySelector('.rs-box-choose');\n this.rsConnected = document.querySelector('.rs-box-connected');\n this.rsSignIn = document.querySelector('.rs-box-sign-in');\n\n this.rsConnectedLabel = document.querySelector('.rs-box-connected .rs-sub-headline')\n this.rsChooseRemoteStorageButton = document.querySelector('button.rs-choose-rs');\n this.rsChooseDropboxButton = document.querySelector('button.rs-choose-dropbox');\n this.rsChooseGoogleDriveButton = document.querySelector('button.rs-choose-gdrive');\n this.rsErrorBox = document.querySelector('.rs-box-error');\n\n // check if apiKeys is set for Dropbox or Google [googledrive, dropbox]\n // to show/hide relative buttons only if needed\n if (! this.rs.apiKeys.hasOwnProperty('googledrive')) {\n this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton);\n }\n\n if (! this.rs.apiKeys.hasOwnProperty('dropbox')) {\n this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton);\n }\n\n this.rsSignInForm = document.querySelector('.rs-sign-in-form');\n\n this.rsDisconnectButton = document.querySelector('.rs-disconnect');\n this.rsSyncButton = document.querySelector('.rs-sync');\n this.rsLogo = document.querySelector('.rs-main-logo');\n\n this.rsConnectedUser = document.querySelector('.rs-connected-text h1.rs-user');\n },\n\n /**\n * Setup all event handlers\n *\n * @private\n */\n setupHandlers () {\n this.rs.on('connected', () => this.eventHandler('connected'));\n this.rs.on('ready', () => this.eventHandler('ready'));\n this.rs.on('disconnected', () => this.eventHandler('disconnected'));\n this.rs.on('network-online', () => this.eventHandler('network-online'));\n this.rs.on('network-offline', () => this.eventHandler('network-offline'));\n this.rs.on('error', (error) => this.eventHandler('error', error));\n\n this.setEventListeners();\n this.setClickHandlers();\n },\n\n /**\n * Append widget to the DOM.\n *\n * If an elementId is specified, it will be appended to that element,\n * otherwise it will be appended to the document's body.\n *\n * @param {String} [elementId] - Widget's parent\n */\n attach (elementId) {\n const domElement = this.createHtmlTemplate();\n\n if (elementId) {\n const parent = document.getElementById(elementId);\n if (!parent) {\n throw \"Failed to find target DOM element with id=\\\"\" + elementId + \"\\\"\";\n }\n parent.appendChild(domElement);\n } else {\n document.body.appendChild(domElement);\n }\n\n this.setupElements();\n this.setupHandlers();\n },\n\n setEventListeners () {\n // Sign-in form\n this.rsSignInForm.addEventListener('submit', (e) => {\n e.preventDefault();\n let userAddress = document.querySelector('input[name=rs-user-address]').value;\n this.rs.connect(userAddress);\n });\n },\n\n /**\n * Show the screen for choosing a backend if there is more than one backend\n * to choose from. Otherwise it directly shows the remoteStorage connect\n * screen.\n *\n * @private\n */\n showChooseOrSignIn () {\n // choose backend only if some providers are declared\n if (this.rs.apiKeys && Object.keys(this.rs.apiKeys).length > 0) {\n this.setState('choose');\n } else {\n this.setState('sign-in');\n }\n },\n\n setClickHandlers () {\n // Initial button\n this.rsInitial.addEventListener('click', () => this.showChooseOrSignIn() );\n\n // Choose RS button\n this.rsChooseRemoteStorageButton.addEventListener('click', () => this.setState('sign-in') );\n\n // Choose Dropbox button\n this.rsChooseDropboxButton.addEventListener('click', () => this.rs[\"dropbox\"].connect() );\n\n // Choose Google Drive button\n this.rsChooseGoogleDriveButton.addEventListener('click', () => this.rs[\"googledrive\"].connect() );\n\n // Disconnect button\n this.rsDisconnectButton.addEventListener('click', () => this.rs.disconnect() );\n\n // Sync button\n if (this.rs.hasFeature('Sync')) {\n this.rsSyncButton.addEventListener('click', () => {\n if (this.rsSyncButton.classList.contains('rs-rotate')) {\n this.rs.stopSync();\n this.rsSyncButton.classList.remove(\"rs-rotate\");\n } else {\n this.rs.startSync();\n this.rsSyncButton.classList.add(\"rs-rotate\");\n }\n });\n }\n\n // Reduce to icon only if connected and clicked outside of widget\n document.addEventListener('click', () => this.closeWidget() );\n\n // Clicks on the widget stop the above event\n this.rsWidget.addEventListener('click', e => e.stopPropagation() );\n\n // Click on the logo to toggle the widget's open/close state\n this.rsLogo.addEventListener('click', () => this.toggleWidget() );\n },\n\n /**\n * Toggle between the widget's open/close state.\n *\n * When then widget is open and in initial state, it will show the backend\n * chooser screen.\n */\n toggleWidget () {\n if (this.closed) {\n this.openWidget();\n } else {\n if (this.state === 'initial') {\n this.showChooseOrSignIn();\n } else {\n this.closeWidget();\n }\n }\n },\n\n openWidget () {\n this.closed = false;\n this.setState(this.active ? 'connected' : 'initial');\n },\n\n /**\n * Close the widget to only show the icon.\n *\n * If the ``leaveOpen`` config is true or there is no storage connected,\n * the widget will not close.\n */\n closeWidget () {\n if (!this.leaveOpen && this.active) {\n this.setState('close');\n this.closed = true;\n } else {\n this.setState(this.active ? 'connected' : 'initial');\n }\n },\n\n showErrorBox (errorMsg) {\n this.rsErrorBox.innerHTML = errorMsg;\n this.setState('error');\n },\n\n hideErrorBox () {\n this.rsErrorBox.innerHTML = '';\n this.setState('close');\n },\n\n handleDiscoveryError (error) {\n let msgContainer = document.querySelector('.rs-sign-in-error');\n msgContainer.innerHTML = error.message;\n msgContainer.classList.remove('hidden');\n msgContainer.classList.add('visible');\n },\n\n handleSyncError (/* error */) {\n // console.debug('Encountered SyncError', error);\n this.showErrorBox('App sync error');\n },\n\n handleUnauthorized () {\n // console.debug('RS UNAUTHORIZED');\n // console.debug('Bearer token not valid anymore');\n // this.rs.stopSync();\n // this.rsWidget.classList.add('rs-state-unauthorized');\n this.showErrorBox('App authorization expired or revoked');\n // this.lastSyncedUpdateLoop = setInterval(() => {\n // this.updateLastSyncedOutput();\n // }, 5000);\n },\n\n updateLastSyncedOutput () {\n let now = new Date();\n let secondsSinceLastSync = Math.round((now.getTime() - this.lastSynced.getTime())/1000);\n let subHeadlineEl = document.querySelector('.rs-box-connected .rs-sub-headline');\n subHeadlineEl.innerHTML = `Synced ${secondsSinceLastSync} seconds ago`;\n }\n};\n\nmodule.exports = Widget;\n\n\n\n// WEBPACK FOOTER //\n// ./src/widget.js","module.exports = \"

Connect your storage

To sync data with your account

user@provider.com

Connected

Connect your storage

This app allows you to sync data with a storage of your choice. Read more

\";\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/html-loader!./src/assets/widget.html\n// module id = 2\n// module chunks = 0","module.exports = \"/* RemoteStorage widget styles */\\n\\n.rs-widget * {\\n box-sizing: border-box;\\n}\\n\\n.rs-widget {\\n font-family: arial, sans-serif;\\n max-width: 350px;\\n color: #333;\\n background-color: #fff;\\n border-radius: 3px;\\n padding: 10px;\\n margin: 10px;\\n overflow: hidden;\\n z-index: 21000000; /* Make sure we're on a reasonably high visibility layer */\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n will-change: max-height, height, width, opacity, max-width, background, box-shadow;\\n transition-property: width, height, opacity, max-width, max-height, background, box-shadow;\\n transition-duration: 300ms;\\n}\\n\\n.rs-box {\\n overflow: hidden;\\n will-change: height;\\n transition-property: height, width, max-height;\\n transition-duration: 300ms;\\n transition-timing-function: ease-in;\\n opacity: 0;\\n max-height: 0px;\\n}\\n\\n.rs-box.selected {\\n opacity: 1;\\n max-height: 380px;\\n}\\n\\n/* Main logo */\\n.rs-main-logo {\\n float: left;\\n height: 36px;\\n width: auto;\\n margin-top: 1px;\\n margin-right: 0.625em;\\n transition: margin-left 300ms ease-out, transform 300ms ease-out;\\n cursor: pointer;\\n}\\n.rs-widget .rs-backend-remotestorage svg#rs-main-logo-remotestorage,\\n{\\n display: normal;\\n}\\n.rs-widget[class*=\\\"rs-backend-\\\"]:not(.rs-backend-remotestorage) svg#rs-main-logo-remotestorage {\\n display: none;\\n}\\n.rs-widget .rs-backend-dropbox svg#rs-main-logo-dropbox {\\n display: normal;\\n}\\n.rs-widget:not(.rs-backend-dropbox) svg#rs-main-logo-dropbox {\\n display: none;\\n}\\n.rs-widget .rs-backend-gdrive svg#rs-main-logo-gdrive {\\n display: normal;\\n}\\n.rs-widget:not(.rs-backend-gdrive) svg#rs-main-logo-gdrive {\\n display: none;\\n}\\n\\npolygon.rs-logo-shape {\\n fill: #FF4B03;\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n.rs-state-offline polygon.rs-logo-shape {\\n fill: #888;\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n/* Hide everything except logo when connected and clicked outside of box */\\n.rs-state-close {\\n max-width: 55px;\\n background-color: transparent;\\n box-shadow: none;\\n opacity: 0.5;\\n\\n transition: max-height 100ms ease-out 0ms, max-width 300ms ease-out 300ms, background 300ms ease-in 200ms, opacity 300ms ease 200ms; \\n}\\n\\n.rs-state-close:hover {\\n cursor: pointer;\\n opacity: 1;\\n}\\n\\n/* Initial Connect remote storage box */\\n.rs-box-initial:hover {\\n cursor: pointer;\\n}\\n\\n.rs-widget a {\\n color: #0093cc;\\n}\\n\\n/* HEADLINE */\\n.rs-small-headline {\\n font-size: 1em;\\n font-weight: bold;\\n margin: 0;\\n margin-bottom: 2px;\\n height: 1.2em;\\n word-break: break-all;\\n overflow: hidden;\\n}\\n\\n.rs-sub-headline {\\n word-break: break-all;\\n overflow: hidden;\\n color: #666;\\n font-size: 0.92em;\\n height: 1.2em;\\n}\\n.rs-big-headline {\\n font-size: 1.625em;\\n font-weight: normal;\\n text-align: center;\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n/* BUTTONS */\\n.rs-button {\\n font: inherit;\\n color: inherit;\\n background-color: transparent;\\n border: 1px solid #dcdcdc;\\n border-radius: 3px;\\n cursor: pointer;\\n}\\n.rs-button-small {\\n padding: 0.5em 0.6em;\\n margin-left: 0.3em;\\n transition: border-color 300ms ease-out;\\n}\\n.rs-button-wrap {\\n margin-top: 10px;\\n}\\n\\n.rs-button-wrap img,\\n.rs-button-wrap svg {\\n float: left;\\n margin-right: 0.6em;\\n width: 40px;\\n height: 40px;\\n}\\n\\n.rs-button-big {\\n padding: 15px 10px;\\n margin-bottom: 10px;\\n display: block;\\n width: 100%;\\n text-align: left;\\n transition: box-shadow 200ms;\\n}\\n.rs-button-big > div {\\n font-size: 1.125em;\\n padding: 10px 0;\\n}\\n.rs-button-big:hover {\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-button-big:active {\\n background-color: #eee;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-button-big:last-child {\\n margin-bottom: 0;\\n}\\n\\n.rs-content {\\n padding: 0 10px 10px 10px;\\n}\\n\\n\\n.rs-state-choose .rs-main-logo,\\n.rs-state-sign-in .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n\\n.rs-sign-in-form input[type=text] {\\n padding: 15px 10px;\\n display: block;\\n width: 100%;\\n font: inherit;\\n border: 1px solid #aaa;\\n}\\n.rs-sign-in-form input[type=submit] {\\n padding: 15px 10px;\\n margin-top: 20px;\\n margin-bottom: 15px;\\n display: block;\\n width: 100%;\\n border: none;\\n border-radius: 3px;\\n background-color: #3fb34f;\\n font: inherit;\\n color: #fff;\\n transition: box-shadow 200ms, background-color 200ms;\\n}\\n.rs-sign-in-form input[type=submit]:hover {\\n cursor: pointer;\\n background-color: #4BCB5D;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-sign-in-form input[type=submit]:active {\\n background-color: #3fb34f;\\n}\\n\\n.rs-sign-in-error.hidden,\\n.rs-box-error.hidden {\\n height: 0;\\n}\\n\\n.rs-sign-in-error.visible,\\n.rs-box-error.visible {\\n height: auto;\\n border-radius: 3px;\\n padding: 0.5em 0.5em;\\n margin-top: 0.5em;\\n text-align: center;\\n background-color: rgba(255,0,0,0.1);\\n color: darkred;\\n}\\n\\n /*Choose provider box */\\n.rs-box-choose {\\n text-align: center;\\n overflow: hidden;\\n}\\n\\n.rs-box-choose p {\\n margin-top: 0;\\n margin-bottom: 20px;\\n}\\n\\n/*Connected box */\\n.rs-box-connected {\\n height: 40px;\\n}\\n.rs-connected-text {\\n float: left;\\n}\\n.rs-box-connected .rs-user {\\n font-weight: bold;\\n}\\n.rs-connected-buttons {\\n float: right;\\n}\\n.rs-disconnect:hover {\\n border-color: #FF2D2D;\\n}\\n.rs-disconnect:hover .rs-icon{\\n fill: #FF2D2D;\\n}\\n.rs-sync:hover {\\n border-color: #FFBB0C;\\n}\\n.rs-sync:hover .rs-icon {\\n fill: #FFBB0C;\\n}\\n.rs-sync.rs-rotate {\\n border-color: #FFBB0C;\\n}\\n.rs-sync.rs-rotate .rs-icon {\\n fill: #FFBB0C;\\n animation: rs-spin 1s linear infinite;\\n}\\n@keyframes rs-spin { 100% { transform: rotate(360deg); transform:rotate(360deg); } }\\n\\n/* Floating widget styles (top right corner) */\\n.rs-floating {\\n position: fixed;\\n top: 0;\\n right: 0;\\n}\\n\\n\\n/* Small/mobile screens */\\n@media screen and (max-width: 360px) {\\n .rs-widget {\\n font-size: 100%;\\n padding: 10px;\\n transition: all 300ms ease-out;\\n }\\n .rs-floating {\\n position: relative;\\n top: auto;\\n right: auto\\n }\\n .rs-state-choose,\\n .rs-state-sign-in {\\n position: fixed;\\n top: 0;\\n margin: 0;\\n border-radius: 0;\\n height: 100%;\\n max-width: 100%;\\n }\\n}\\n\\n/* remove dotted outline border on Firefox */\\n.rs-widget a:focus,\\n.rs-widget a:active,\\n.rs-widget button:focus,\\n.rs-widget input:focus {\\n outline:none;\\n}\\n.rs-widget button::-moz-focus-inner, \\n.rs-widget input[type=\\\"button\\\"]::-moz-focus-inner,\\n.rs-widget input[type=\\\"submit\\\"]::-moz-focus-inner {\\n border:0;\\n}\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/raw-loader!./src/assets/styles.css\n// module id = 3\n// module chunks = 0"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///widget.js","webpack:///webpack/bootstrap fde537f53ed0e20d9f3a","webpack:///./src/widget.js","webpack:///./src/assets/widget.html","webpack:///./src/assets/styles.css"],"names":["root","factory","exports","module","define","amd","Widget","this","modules","__webpack_require__","moduleId","installedModules","id","loaded","call","m","c","p","remoteStorage","options","arguments","length","undefined","rs","state","active","online","closed","leaveOpen","lastSynced","lastSyncedUpdateLoop","prototype","log","_console","_len","msg","Array","_key","console","debug","apply","concat","eventHandler","event","_this","setState","shouldCloseWhenSyncDone","rsSyncButton","classList","add","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","subHeadlineEl","document","querySelector","innerHTML","setTimeout","closeWidget","bind","hasFeature","sync","on","connectedUser","userAddress","rsConnectedUser","backend","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","toSelect","currentStateClass","className","match","rsConnectedLabel","textContent","createHtmlTemplate","element","createElement","style","appendChild","setupElements","rsInitial","rsChoose","rsConnected","rsSignIn","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsErrorBox","apiKeys","hasOwnProperty","parentNode","removeChild","rsSignInForm","rsDisconnectButton","rsLogo","setupHandlers","_this2","error","setEventListeners","setClickHandlers","attach","elementId","domElement","parent","getElementById","body","_this3","addEventListener","e","preventDefault","value","connect","showChooseOrSignIn","Object","keys","_this4","dropbox","googledrive","disconnect","stopSync","startSync","stopPropagation","toggleWidget","openWidget","showErrorBox","errorMsg","hideErrorBox","msgContainer","message","now","secondsSinceLastSync","Math","round","getTime"],"mappings":"CAAA,SAAAA,EAAAC,GACA,gBAAAC,UAAA,gBAAAC,QACAA,OAAAD,QAAAD,IACA,kBAAAG,gBAAAC,IACAD,UAAAH,GACA,gBAAAC,SACAA,QAAAI,OAAAL,IAEAD,EAAAM,OAAAL,KACCM,KAAA,WACD,MCAgB,UAAUC,GCN1B,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAR,OAGA,IAAAC,GAAAQ,EAAAD,IACAR,WACAU,GAAAF,EACAG,UAUA,OANAL,GAAAE,GAAAI,KAAAX,EAAAD,QAAAC,IAAAD,QAAAO,GAGAN,EAAAU,UAGAV,EAAAD,QAvBA,GAAAS,KAqCA,OATAF,GAAAM,EAAAP,EAGAC,EAAAO,EAAAL,EAGAF,EAAAQ,EAAA,GAGAR,EAAA,KDgBM,SAAUN,EAAQD,EAASO,GAEhCN,EAAOD,QAAUO,EAAoB,IAKhC,SAAUN,EAAQD,EAASO,GAEhC,YEtDD,IAAIH,GAAS,SAASY,GAA2B,GAAZC,GAAYC,UAAAC,OAAA,GAAAC,SAAAF,UAAA,GAAAA,UAAA,KAC/Cb,MAAKgB,GAAKL,EAEVX,KAAKiB,MAAQ,UAGbjB,KAAKkB,UAGLlB,KAAKmB,UAGLnB,KAAKoB,UAELpB,KAAKqB,YAAYT,EAAQS,WAAYT,EAAQS,UAE7CrB,KAAKsB,WAAa,KAClBtB,KAAKuB,qBAAuB,KAI9BxB,GAAOyB,WAELC,IAFiB,WAEJ,OAAAC,GAAAC,EAAAd,UAAAC,OAALc,EAAKC,MAAAF,GAAAG,EAAA,EAAAA,EAAAH,EAAAG,IAALF,EAAKE,GAAAjB,UAAAiB,IACXJ,EAAAK,SAAQC,MAARC,MAAAP,GAAc,gBAAdQ,OAAiCN,KAInCO,aAPiB,SAOHC,EAAOR,GAAK,GAAAS,GAAArC,IAExB,QADAA,KAAKyB,IAAI,UAAWW,GACZA,GACN,IAAK,QACHpC,KAAKsC,SAAStC,KAAKiB,OACnBjB,KAAKuC,0BACL,MACF,KAAK,WACHvC,KAAKwC,aAAaC,UAAUC,IAAI,YAChC,MACF,KAAK,OAGH,GAFA1C,KAAKwC,aAAaC,UAAUE,OAAO,aAE/B3C,KAAK4C,SAASH,UAAUI,SAAS,2BAChC7C,KAAKgB,GAAG8B,OAAO3B,OAClBnB,KAAK+C,6BACA,IAAI/C,KAAKgB,GAAG8B,OAAO3B,OAAQ,CAChCnB,KAAKsB,WAAa,GAAI0B,KACtB,IAAIC,GAAgBC,SAASC,cAAc,qCAC3CF,GAAcG,UAAY,mBAGvBpD,KAAKoB,QAAUpB,KAAKuC,yBACvBc,WAAWrD,KAAKsD,YAAYC,KAAKvD,MAAO,KAE1C,MACF,KAAK,eACHA,KAAKkB,UACLlB,KAAKmB,UACLnB,KAAK4C,SAASH,UAAUE,OAAO,4BAC/B3C,KAAK4C,SAASH,UAAUE,OAAO,sBAC/B3C,KAAK4C,SAASH,UAAUE,OAAO,0BAC/B3C,KAAKsC,SAAS,UACd,MACF,KAAK,YACHtC,KAAKkB,UACLlB,KAAKmB,UACDnB,KAAKgB,GAAGwC,WAAW,SACrBxD,KAAKgB,GAAGyC,KAAKC,GAAG,WAAY,iBAAMrB,GAAKF,aAAa,cACpDnC,KAAKgB,GAAGyC,KAAKC,GAAG,OAAQ,iBAAMrB,GAAKF,aAAa,WAEhDnC,KAAKwC,aAAaC,UAAUC,IAAI,SAElC,IAAIiB,GAAgB3D,KAAKgB,GAAG8B,OAAOc,WACnC5D,MAAK6D,gBAAgBT,UAAYO,EACjC3D,KAAK4C,SAASH,UAAUC,IAAxB,cAA0C1C,KAAKgB,GAAG8C,SAClD9D,KAAKsC,SAAS,YACd,MACF,KAAK,kBACHtC,KAAKmB,UAELnB,KAAKsC,UACL,MACF,KAAK,iBACHtC,KAAKmB,UACLnB,KAAKkB,UACLlB,KAAKsC,UACL,MACF,KAAK,QACc,mBAAbV,EAAImC,KACN/D,KAAKgE,qBAAqBpC,GACJ,cAAbA,EAAImC,KACb/D,KAAKiE,gBAAgBrC,GACC,iBAAbA,EAAImC,KACb/D,KAAKkE,mBAAmBtC,GAExBG,QAAQC,MAAM,8BAA+BJ,KAMrDU,SA/EiB,SA+EPrB,GACR,GAAIA,EAAO,CACTjB,KAAKyB,IAAI,iBAAkBR,EAC3B,IAAIkD,GAAejB,SAASC,cAAc,mBACtCgB,IACFA,EAAa1B,UAAUE,OAAO,WAGhC,IAAIyB,GAAWlB,SAASC,cAAc,kBAAkBlC,EACpDmD,IACFA,EAAS3B,UAAUC,IAAI,WAGzB,IAAI2B,GAAoBrE,KAAK4C,SAAS0B,UAAUC,MAAM,iBAAiB,EACvEvE,MAAK4C,SAASH,UAAUE,OAAO0B,GAC/BrE,KAAK4C,SAASH,UAAUC,IAAxB,aAAwCzB,GAASjB,KAAKiB,QAClDjB,KAAKoB,QAAoB,UAAVH,GACjBjB,KAAK4C,SAASH,UAAUC,IAAI,kBAG9B1C,KAAKiB,MAAQA,GAGVjB,KAAKmB,QAAUnB,KAAKkB,QACvBlB,KAAK4C,SAASH,UAAUC,IAAI,oBAE5B1C,KAAKwE,iBAAiBC,YAAc,kBAEpCzE,KAAKwE,iBAAiBC,YAAc,YACpCzE,KAAK4C,SAASH,UAAUE,OAAO,sBAWnC+B,mBAvHiB,WAwHf,GAAMC,GAAUzB,SAAS0B,cAAc,OACjCC,EAAQ3B,SAAS0B,cAAc,QAOrC,OANAC,GAAMzB,UAAYlD,EAAQ,GAE1ByE,EAAQtE,GAAK,uBACbsE,EAAQvB,UAAYlD,EAAQ,GAC5ByE,EAAQG,YAAYD,GAEbF,GAQTI,cAxIiB,WAyIf/E,KAAK4C,SAAWM,SAASC,cAAc,cACvCnD,KAAKgF,UAAY9B,SAASC,cAAc,mBACxCnD,KAAKiF,SAAW/B,SAASC,cAAc,kBACvCnD,KAAKkF,YAAchC,SAASC,cAAc,qBAC1CnD,KAAKmF,SAAWjC,SAASC,cAAc,mBAEvCnD,KAAKwE,iBAAmBtB,SAASC,cAAc,sCAC/CnD,KAAKoF,4BAA8BlC,SAASC,cAAc,uBAC1DnD,KAAKqF,sBAAwBnC,SAASC,cAAc,4BACpDnD,KAAKsF,0BAA4BpC,SAASC,cAAc,gCACxDnD,KAAKuF,WAAarC,SAASC,cAAc,iBAInCnD,KAAKgB,GAAGwE,QAAQC,eAAe,gBACnCzF,KAAKsF,0BAA0BI,WAAWC,YAAY3F,KAAKsF,2BAGvDtF,KAAKgB,GAAGwE,QAAQC,eAAe,YACnCzF,KAAKqF,sBAAsBK,WAAWC,YAAY3F,KAAKqF,uBAGzDrF,KAAK4F,aAAe1C,SAASC,cAAc,oBAE3CnD,KAAK6F,mBAAqB3C,SAASC,cAAc,kBACjDnD,KAAKwC,aAAeU,SAASC,cAAc,YAC3CnD,KAAK8F,OAAS5C,SAASC,cAAc,mBAErCnD,KAAK6D,gBAAkBX,SAASC,cAAc,kCAQhD4C,cA7KiB,WA6KA,GAAAC,GAAAhG,IACfA,MAAKgB,GAAG0C,GAAG,YAAa,iBAAMsC,GAAK7D,aAAa,eAChDnC,KAAKgB,GAAG0C,GAAG,QAAS,iBAAMsC,GAAK7D,aAAa,WAC5CnC,KAAKgB,GAAG0C,GAAG,eAAgB,iBAAMsC,GAAK7D,aAAa,kBACnDnC,KAAKgB,GAAG0C,GAAG,iBAAkB,iBAAMsC,GAAK7D,aAAa,oBACrDnC,KAAKgB,GAAG0C,GAAG,kBAAmB,iBAAMsC,GAAK7D,aAAa,qBACtDnC,KAAKgB,GAAG0C,GAAG,QAAS,SAACuC,GAAD,MAAWD,GAAK7D,aAAa,QAAS8D,KAE1DjG,KAAKkG,oBACLlG,KAAKmG,oBAWPC,OAjMiB,SAiMTC,GACN,GAAMC,GAAatG,KAAK0E,oBAExB,IAAI2B,EAAW,CACb,GAAME,GAASrD,SAASsD,eAAeH,EACvC,KAAKE,EACH,KAAM,8CAAiDF,EAAY,GAErEE,GAAOzB,YAAYwB,OAEnBpD,UAASuD,KAAK3B,YAAYwB,EAG5BtG,MAAK+E,gBACL/E,KAAK+F,iBAGPG,kBAlNiB,WAkNI,GAAAQ,GAAA1G,IAEnBA,MAAK4F,aAAae,iBAAiB,SAAU,SAACC,GAC5CA,EAAEC,gBACF,IAAIjD,GAAcV,SAASC,cAAc,+BAA+B2D,KACxEJ,GAAK1F,GAAG+F,QAAQnD,MAWpBoD,mBAlOiB,WAoOXhH,KAAKgB,GAAGwE,SAAWyB,OAAOC,KAAKlH,KAAKgB,GAAGwE,SAAS1E,OAAS,EAC3Dd,KAAKsC,SAAS,UAEdtC,KAAKsC,SAAS,YAIlB6D,iBA3OiB,WA2OG,GAAAgB,GAAAnH,IAElBA,MAAKgF,UAAU2B,iBAAiB,QAAS,iBAAMQ,GAAKH,uBAGpDhH,KAAKoF,4BAA4BuB,iBAAiB,QAAS,iBAAMQ,GAAK7E,SAAS,aAG/EtC,KAAKqF,sBAAsBsB,iBAAiB,QAAS,iBAAMQ,GAAKnG,GAALoG,QAAmBL,YAG9E/G,KAAKsF,0BAA0BqB,iBAAiB,QAAS,iBAAMQ,GAAKnG,GAALqG,YAAuBN,YAGtF/G,KAAK6F,mBAAmBc,iBAAiB,QAAS,iBAAMQ,GAAKnG,GAAGsG,eAG5DtH,KAAKgB,GAAGwC,WAAW,SACrBxD,KAAKwC,aAAamE,iBAAiB,QAAS,WACtCQ,EAAK3E,aAAaC,UAAUI,SAAS,cACvCsE,EAAKnG,GAAGuG,WACRJ,EAAK3E,aAAaC,UAAUE,OAAO,eAEnCwE,EAAKnG,GAAGwG,YACRL,EAAK3E,aAAaC,UAAUC,IAAI,gBAMtCQ,SAASyD,iBAAiB,QAAS,iBAAMQ,GAAK7D,gBAG9CtD,KAAK4C,SAAS+D,iBAAiB,QAAS,SAAAC,GAAA,MAAKA,GAAEa,oBAG/CzH,KAAK8F,OAAOa,iBAAiB,QAAS,iBAAMQ,GAAKO,kBASnDA,aAxRiB,WAyRX1H,KAAKoB,OACPpB,KAAK2H,aAEc,YAAf3H,KAAKiB,MACPjB,KAAKgH,qBAELhH,KAAKsD,eAKXqE,WApSiB,WAqSf3H,KAAKoB,UACLpB,KAAKsC,SAAStC,KAAKkB,OAAS,YAAc,WAC1ClB,KAAKuC,4BASPe,YAhTiB,YAiTVtD,KAAKqB,WAAarB,KAAKkB,QAC1BlB,KAAKsC,SAAS,SACdtC,KAAKoB,WAELpB,KAAKsC,SAAStC,KAAKkB,OAAS,YAAc,YAI9C0G,aAzTiB,SAyTHC,GACZ7H,KAAKuF,WAAWnC,UAAYyE,EAC5B7H,KAAKsC,SAAS,UAGhBwF,aA9TiB,WA+Tf9H,KAAKuF,WAAWnC,UAAY,GAC5BpD,KAAKsC,SAAS,UAGhB0B,qBAnUiB,SAmUKiC,GACpB,GAAI8B,GAAe7E,SAASC,cAAc,oBAC1C4E,GAAa3E,UAAY6C,EAAM+B,QAC/BD,EAAatF,UAAUE,OAAO,UAC9BoF,EAAatF,UAAUC,IAAI,YAG7BuB,gBA1UiB,WA4UfjE,KAAK4H,aAAa,mBAGpB1D,mBA/UiB,WAoVflE,KAAK4H,aAAa,yCAMpB7E,uBA1ViB,WA2Vf,GAAIkF,GAAM,GAAIjF,MACVkF,EAAuBC,KAAKC,OAAOH,EAAII,UAAYrI,KAAKsB,WAAW+G,WAAW,KAC9EpF,EAAgBC,SAASC,cAAc,qCAC3CF,GAAcG,UAAd,UAAoC8E,EAApC,iBAIJtI,EAAOD,QAAUI,GFgHX,SAAUH,EAAQD,GGhfxBC,EAAAD,QAAA;EHsfM,SAAUC,EAAQD,GItfxBC,EAAAD,QAAA","file":"widget.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Widget\"] = factory();\n\telse\n\t\troot[\"Widget\"] = factory();\n})(this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Widget\"] = factory();\n\telse\n\t\troot[\"Widget\"] = factory();\n})(this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\tmodule.exports = __webpack_require__(1);\n\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\t/**\n\t * RemoteStorage connect widget\n\t * @constructor\n\t *\n\t * @param {object} remoteStorage - remoteStorage instance\n\t * @param {object} options - Widget options\n\t * @param {boolean} options.leaveOpen - Do not minimize widget when user clicks\n\t * outside of it (default: false)\n\t */\n\tvar Widget = function Widget(remoteStorage) {\n\t var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\t\n\t this.rs = remoteStorage;\n\t\n\t this.state = 'initial';\n\t\n\t // true if we have remoteStorage connection's info\n\t this.active = false;\n\t\n\t // remoteStorage is connected!\n\t this.online = false;\n\t\n\t // widget is minimized ?\n\t this.closed = false;\n\t\n\t this.leaveOpen = options.leaveOpen ? options.leaveOpen : false;\n\t\n\t this.lastSynced = null;\n\t this.lastSyncedUpdateLoop = null;\n\t};\n\t\n\tWidget.prototype = {\n\t log: function log() {\n\t var _console;\n\t\n\t for (var _len = arguments.length, msg = Array(_len), _key = 0; _key < _len; _key++) {\n\t msg[_key] = arguments[_key];\n\t }\n\t\n\t (_console = console).debug.apply(_console, ['[RS-WIDGET] '].concat(msg));\n\t },\n\t\n\t\n\t // handle events !\n\t eventHandler: function eventHandler(event, msg) {\n\t var _this = this;\n\t\n\t this.log('EVENT: ', event);\n\t switch (event) {\n\t case 'ready':\n\t this.setState(this.state);\n\t this.shouldCloseWhenSyncDone = true;\n\t break;\n\t case 'req-done':\n\t this.rsSyncButton.classList.add(\"rs-rotate\");\n\t break;\n\t case 'done':\n\t this.rsSyncButton.classList.remove(\"rs-rotate\");\n\t\n\t if (this.rsWidget.classList.contains('rs-state-unauthorized') || !this.rs.remote.online) {\n\t this.updateLastSyncedOutput();\n\t } else if (this.rs.remote.online) {\n\t this.lastSynced = new Date();\n\t var subHeadlineEl = document.querySelector('.rs-box-connected .rs-sub-headline');\n\t subHeadlineEl.innerHTML = 'Synced just now';\n\t }\n\t\n\t if (!this.closed && this.shouldCloseWhenSyncDone) {\n\t setTimeout(this.closeWidget.bind(this), 1500);\n\t }\n\t break;\n\t case 'disconnected':\n\t this.active = false;\n\t this.online = false;\n\t this.rsWidget.classList.remove('rs-backend-remotestorage');\n\t this.rsWidget.classList.remove('rs-backend-dropbox');\n\t this.rsWidget.classList.remove('rs-backend-googledrive');\n\t this.setState('initial');\n\t break;\n\t case 'connected':\n\t this.active = true;\n\t this.online = true;\n\t if (this.rs.hasFeature('Sync')) {\n\t this.rs.sync.on('req-done', function () {\n\t return _this.eventHandler('req-done');\n\t });\n\t this.rs.sync.on('done', function () {\n\t return _this.eventHandler('done');\n\t });\n\t } else {\n\t this.rsSyncButton.classList.add('hidden');\n\t }\n\t var connectedUser = this.rs.remote.userAddress;\n\t this.rsConnectedUser.innerHTML = connectedUser;\n\t this.rsWidget.classList.add('rs-backend-' + this.rs.backend);\n\t this.setState('connected');\n\t break;\n\t case 'network-offline':\n\t this.online = false;\n\t // this.active = false;\n\t this.setState();\n\t break;\n\t case 'network-online':\n\t this.online = true;\n\t this.active = true;\n\t this.setState();\n\t break;\n\t case 'error':\n\t if (msg.name === 'DiscoveryError') {\n\t this.handleDiscoveryError(msg);\n\t } else if (msg.name === 'SyncError') {\n\t this.handleSyncError(msg);\n\t } else if (msg.name === 'Unauthorized') {\n\t this.handleUnauthorized(msg);\n\t } else {\n\t console.debug('Encountered unhandled error', msg);\n\t }\n\t break;\n\t }\n\t },\n\t setState: function setState(state) {\n\t if (state) {\n\t this.log('Setting state ', state);\n\t var lastSelected = document.querySelector('.rs-box.selected');\n\t if (lastSelected) {\n\t lastSelected.classList.remove('selected');\n\t }\n\t\n\t var toSelect = document.querySelector('.rs-box.rs-box-' + state);\n\t if (toSelect) {\n\t toSelect.classList.add('selected');\n\t }\n\t\n\t var currentStateClass = this.rsWidget.className.match(/rs-state-\\S+/g)[0];\n\t this.rsWidget.classList.remove(currentStateClass);\n\t this.rsWidget.classList.add('rs-state-' + (state || this.state));\n\t if (this.closed && state !== 'close') {\n\t this.rsWidget.classList.add('rs-state-close');\n\t }\n\t\n\t this.state = state;\n\t }\n\t\n\t if (!this.online && this.active) {\n\t this.rsWidget.classList.add('rs-state-offline');\n\t // TODO offline is not the same as \"not connected\"\n\t this.rsConnectedLabel.textContent = 'Not Connected';\n\t } else {\n\t this.rsConnectedLabel.textContent = 'Connected';\n\t this.rsWidget.classList.remove('rs-state-offline');\n\t }\n\t },\n\t\n\t\n\t /**\n\t * Create the widget element and add styling.\n\t *\n\t * @returns {object} The widget's DOM element\n\t *\n\t * @private\n\t */\n\t createHtmlTemplate: function createHtmlTemplate() {\n\t var element = document.createElement('div');\n\t var style = document.createElement('style');\n\t style.innerHTML = __webpack_require__(3);\n\t\n\t element.id = \"remotestorage-widget\";\n\t element.innerHTML = __webpack_require__(2);\n\t element.appendChild(style);\n\t\n\t return element;\n\t },\n\t\n\t\n\t /**\n\t * Save all interactive DOM elements as variables for later access.\n\t *\n\t * @private\n\t */\n\t setupElements: function setupElements() {\n\t this.rsWidget = document.querySelector('.rs-widget');\n\t this.rsInitial = document.querySelector('.rs-box-initial');\n\t this.rsChoose = document.querySelector('.rs-box-choose');\n\t this.rsConnected = document.querySelector('.rs-box-connected');\n\t this.rsSignIn = document.querySelector('.rs-box-sign-in');\n\t\n\t this.rsConnectedLabel = document.querySelector('.rs-box-connected .rs-sub-headline');\n\t this.rsChooseRemoteStorageButton = document.querySelector('button.rs-choose-rs');\n\t this.rsChooseDropboxButton = document.querySelector('button.rs-choose-dropbox');\n\t this.rsChooseGoogleDriveButton = document.querySelector('button.rs-choose-googledrive');\n\t this.rsErrorBox = document.querySelector('.rs-box-error');\n\t\n\t // check if apiKeys is set for Dropbox or Google [googledrive, dropbox]\n\t // to show/hide relative buttons only if needed\n\t if (!this.rs.apiKeys.hasOwnProperty('googledrive')) {\n\t this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton);\n\t }\n\t\n\t if (!this.rs.apiKeys.hasOwnProperty('dropbox')) {\n\t this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton);\n\t }\n\t\n\t this.rsSignInForm = document.querySelector('.rs-sign-in-form');\n\t\n\t this.rsDisconnectButton = document.querySelector('.rs-disconnect');\n\t this.rsSyncButton = document.querySelector('.rs-sync');\n\t this.rsLogo = document.querySelector('.rs-widget-icon');\n\t\n\t this.rsConnectedUser = document.querySelector('.rs-connected-text h1.rs-user');\n\t },\n\t\n\t\n\t /**\n\t * Setup all event handlers\n\t *\n\t * @private\n\t */\n\t setupHandlers: function setupHandlers() {\n\t var _this2 = this;\n\t\n\t this.rs.on('connected', function () {\n\t return _this2.eventHandler('connected');\n\t });\n\t this.rs.on('ready', function () {\n\t return _this2.eventHandler('ready');\n\t });\n\t this.rs.on('disconnected', function () {\n\t return _this2.eventHandler('disconnected');\n\t });\n\t this.rs.on('network-online', function () {\n\t return _this2.eventHandler('network-online');\n\t });\n\t this.rs.on('network-offline', function () {\n\t return _this2.eventHandler('network-offline');\n\t });\n\t this.rs.on('error', function (error) {\n\t return _this2.eventHandler('error', error);\n\t });\n\t\n\t this.setEventListeners();\n\t this.setClickHandlers();\n\t },\n\t\n\t\n\t /**\n\t * Append widget to the DOM.\n\t *\n\t * If an elementId is specified, it will be appended to that element,\n\t * otherwise it will be appended to the document's body.\n\t *\n\t * @param {String} [elementId] - Widget's parent\n\t */\n\t attach: function attach(elementId) {\n\t var domElement = this.createHtmlTemplate();\n\t\n\t if (elementId) {\n\t var parent = document.getElementById(elementId);\n\t if (!parent) {\n\t throw \"Failed to find target DOM element with id=\\\"\" + elementId + \"\\\"\";\n\t }\n\t parent.appendChild(domElement);\n\t } else {\n\t document.body.appendChild(domElement);\n\t }\n\t\n\t this.setupElements();\n\t this.setupHandlers();\n\t },\n\t setEventListeners: function setEventListeners() {\n\t var _this3 = this;\n\t\n\t // Sign-in form\n\t this.rsSignInForm.addEventListener('submit', function (e) {\n\t e.preventDefault();\n\t var userAddress = document.querySelector('input[name=rs-user-address]').value;\n\t _this3.rs.connect(userAddress);\n\t });\n\t },\n\t\n\t\n\t /**\n\t * Show the screen for choosing a backend if there is more than one backend\n\t * to choose from. Otherwise it directly shows the remoteStorage connect\n\t * screen.\n\t *\n\t * @private\n\t */\n\t showChooseOrSignIn: function showChooseOrSignIn() {\n\t // choose backend only if some providers are declared\n\t if (this.rs.apiKeys && Object.keys(this.rs.apiKeys).length > 0) {\n\t this.setState('choose');\n\t } else {\n\t this.setState('sign-in');\n\t }\n\t },\n\t setClickHandlers: function setClickHandlers() {\n\t var _this4 = this;\n\t\n\t // Initial button\n\t this.rsInitial.addEventListener('click', function () {\n\t return _this4.showChooseOrSignIn();\n\t });\n\t\n\t // Choose RS button\n\t this.rsChooseRemoteStorageButton.addEventListener('click', function () {\n\t return _this4.setState('sign-in');\n\t });\n\t\n\t // Choose Dropbox button\n\t this.rsChooseDropboxButton.addEventListener('click', function () {\n\t return _this4.rs[\"dropbox\"].connect();\n\t });\n\t\n\t // Choose Google Drive button\n\t this.rsChooseGoogleDriveButton.addEventListener('click', function () {\n\t return _this4.rs[\"googledrive\"].connect();\n\t });\n\t\n\t // Disconnect button\n\t this.rsDisconnectButton.addEventListener('click', function () {\n\t return _this4.rs.disconnect();\n\t });\n\t\n\t // Sync button\n\t if (this.rs.hasFeature('Sync')) {\n\t this.rsSyncButton.addEventListener('click', function () {\n\t if (_this4.rsSyncButton.classList.contains('rs-rotate')) {\n\t _this4.rs.stopSync();\n\t _this4.rsSyncButton.classList.remove(\"rs-rotate\");\n\t } else {\n\t _this4.rs.startSync();\n\t _this4.rsSyncButton.classList.add(\"rs-rotate\");\n\t }\n\t });\n\t }\n\t\n\t // Reduce to icon only if connected and clicked outside of widget\n\t document.addEventListener('click', function () {\n\t return _this4.closeWidget();\n\t });\n\t\n\t // Clicks on the widget stop the above event\n\t this.rsWidget.addEventListener('click', function (e) {\n\t return e.stopPropagation();\n\t });\n\t\n\t // Click on the logo to toggle the widget's open/close state\n\t this.rsLogo.addEventListener('click', function () {\n\t return _this4.toggleWidget();\n\t });\n\t },\n\t\n\t\n\t /**\n\t * Toggle between the widget's open/close state.\n\t *\n\t * When then widget is open and in initial state, it will show the backend\n\t * chooser screen.\n\t */\n\t toggleWidget: function toggleWidget() {\n\t if (this.closed) {\n\t this.openWidget();\n\t } else {\n\t if (this.state === 'initial') {\n\t this.showChooseOrSignIn();\n\t } else {\n\t this.closeWidget();\n\t }\n\t }\n\t },\n\t openWidget: function openWidget() {\n\t this.closed = false;\n\t this.setState(this.active ? 'connected' : 'initial');\n\t this.shouldCloseWhenSyncDone = false;\n\t },\n\t\n\t\n\t /**\n\t * Close the widget to only show the icon.\n\t *\n\t * If the ``leaveOpen`` config is true or there is no storage connected,\n\t * the widget will not close.\n\t */\n\t closeWidget: function closeWidget() {\n\t if (!this.leaveOpen && this.active) {\n\t this.setState('close');\n\t this.closed = true;\n\t } else {\n\t this.setState(this.active ? 'connected' : 'initial');\n\t }\n\t },\n\t showErrorBox: function showErrorBox(errorMsg) {\n\t this.rsErrorBox.innerHTML = errorMsg;\n\t this.setState('error');\n\t },\n\t hideErrorBox: function hideErrorBox() {\n\t this.rsErrorBox.innerHTML = '';\n\t this.setState('close');\n\t },\n\t handleDiscoveryError: function handleDiscoveryError(error) {\n\t var msgContainer = document.querySelector('.rs-sign-in-error');\n\t msgContainer.innerHTML = error.message;\n\t msgContainer.classList.remove('hidden');\n\t msgContainer.classList.add('visible');\n\t },\n\t handleSyncError: function handleSyncError() /* error */{\n\t // console.debug('Encountered SyncError', error);\n\t this.showErrorBox('App sync error');\n\t },\n\t handleUnauthorized: function handleUnauthorized() {\n\t // console.debug('RS UNAUTHORIZED');\n\t // console.debug('Bearer token not valid anymore');\n\t // this.rs.stopSync();\n\t // this.rsWidget.classList.add('rs-state-unauthorized');\n\t this.showErrorBox('App authorization expired or revoked');\n\t // this.lastSyncedUpdateLoop = setInterval(() => {\n\t // this.updateLastSyncedOutput();\n\t // }, 5000);\n\t },\n\t updateLastSyncedOutput: function updateLastSyncedOutput() {\n\t var now = new Date();\n\t var secondsSinceLastSync = Math.round((now.getTime() - this.lastSynced.getTime()) / 1000);\n\t var subHeadlineEl = document.querySelector('.rs-box-connected .rs-sub-headline');\n\t subHeadlineEl.innerHTML = 'Synced ' + secondsSinceLastSync + ' seconds ago';\n\t }\n\t};\n\t\n\tmodule.exports = Widget;\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports) {\n\n\tmodule.exports = \"

Connect your storage

To sync data with your account

user@provider.com

Connected

Connect your storage

This app allows you to sync data with a storage of your choice. Read more

\";\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports) {\n\n\tmodule.exports = \"/* RemoteStorage widget styles */\\n\\n.rs-widget * {\\n box-sizing: border-box;\\n}\\n\\n.rs-widget {\\n font-family: arial, sans-serif;\\n max-width: 350px;\\n color: #333;\\n background-color: #fff;\\n border-radius: 3px;\\n padding: 10px;\\n margin: 10px;\\n overflow: hidden;\\n z-index: 21000000; /* Make sure we're on a reasonably high visibility layer */\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n will-change: max-height, height, width, opacity, max-width, background, box-shadow;\\n transition-property: width, height, opacity, max-width, max-height, background, box-shadow;\\n transition-duration: 300ms;\\n}\\n\\n.rs-box {\\n overflow: hidden;\\n will-change: height;\\n transition-property: height, width, max-height;\\n transition-duration: 300ms;\\n transition-timing-function: ease-in;\\n opacity: 0;\\n max-height: 0px;\\n}\\n\\n.rs-box.selected {\\n opacity: 1;\\n max-height: 380px;\\n}\\n\\n/* Main logo */\\n.rs-main-logo {\\n float: left;\\n height: 36px;\\n width: auto;\\n margin-top: 1px;\\n margin-right: 0.625em;\\n transition: margin-left 300ms ease-out, transform 300ms ease-out;\\n cursor: pointer;\\n}\\n.rs-widget .rs-backend-remotestorage svg#rs-main-logo-remotestorage,\\n{\\n display: normal;\\n}\\n.rs-widget[class*=\\\"rs-backend-\\\"]:not(.rs-backend-remotestorage) svg#rs-main-logo-remotestorage {\\n display: none;\\n}\\n.rs-widget .rs-backend-dropbox svg#rs-main-logo-dropbox {\\n display: normal;\\n}\\n.rs-widget:not(.rs-backend-dropbox) svg#rs-main-logo-dropbox {\\n display: none;\\n}\\n.rs-widget .rs-backend-googledrive svg#rs-main-logo-googledrive {\\n display: normal;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n\\npolygon.rs-logo-shape {\\n fill: #FF4B03;\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n.rs-state-offline polygon.rs-logo-shape {\\n fill: #888;\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n/* Hide everything except logo when connected and clicked outside of box */\\n.rs-state-close {\\n max-width: 55px;\\n background-color: transparent;\\n box-shadow: none;\\n opacity: 0.5;\\n\\n transition: max-height 100ms ease-out 0ms, max-width 300ms ease-out 300ms, background 300ms ease-in 200ms, opacity 300ms ease 200ms; \\n}\\n\\n.rs-state-close:hover {\\n cursor: pointer;\\n opacity: 1;\\n}\\n\\n/* Initial Connect remote storage box */\\n.rs-box-initial:hover {\\n cursor: pointer;\\n}\\n\\n.rs-widget a {\\n color: #0093cc;\\n}\\n\\n/* HEADLINE */\\n.rs-small-headline {\\n font-size: 1em;\\n font-weight: bold;\\n margin: 0;\\n margin-bottom: 2px;\\n height: 1.2em;\\n word-break: break-all;\\n overflow: hidden;\\n}\\n\\n.rs-sub-headline {\\n word-break: break-all;\\n overflow: hidden;\\n color: #666;\\n font-size: 0.92em;\\n height: 1.2em;\\n}\\n.rs-big-headline {\\n font-size: 1.625em;\\n font-weight: normal;\\n text-align: center;\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n/* BUTTONS */\\n.rs-button {\\n font: inherit;\\n color: inherit;\\n background-color: transparent;\\n border: 1px solid #dcdcdc;\\n border-radius: 3px;\\n cursor: pointer;\\n}\\n.rs-button-small {\\n padding: 0.5em 0.6em;\\n margin-left: 0.3em;\\n transition: border-color 300ms ease-out;\\n}\\n.rs-button-wrap {\\n margin-top: 10px;\\n}\\n\\n.rs-button-wrap img,\\n.rs-button-wrap svg {\\n float: left;\\n margin-right: 0.6em;\\n width: 40px;\\n height: 40px;\\n}\\n\\n.rs-button-big {\\n padding: 15px 10px;\\n margin-bottom: 10px;\\n display: block;\\n width: 100%;\\n text-align: left;\\n transition: box-shadow 200ms;\\n}\\n.rs-button-big > div {\\n font-size: 1.125em;\\n padding: 10px 0;\\n}\\n.rs-button-big:hover {\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-button-big:active {\\n background-color: #eee;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-button-big:last-child {\\n margin-bottom: 0;\\n}\\n\\n.rs-content {\\n padding: 0 10px 10px 10px;\\n}\\n\\n\\n.rs-state-choose .rs-main-logo,\\n.rs-state-sign-in .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n\\n.rs-sign-in-form input[type=text] {\\n padding: 15px 10px;\\n display: block;\\n width: 100%;\\n font: inherit;\\n border: 1px solid #aaa;\\n}\\n.rs-sign-in-form input[type=submit] {\\n padding: 15px 10px;\\n margin-top: 20px;\\n margin-bottom: 15px;\\n display: block;\\n width: 100%;\\n border: none;\\n border-radius: 3px;\\n background-color: #3fb34f;\\n font: inherit;\\n color: #fff;\\n transition: box-shadow 200ms, background-color 200ms;\\n}\\n.rs-sign-in-form input[type=submit]:hover {\\n cursor: pointer;\\n background-color: #4BCB5D;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-sign-in-form input[type=submit]:active {\\n background-color: #3fb34f;\\n}\\n\\n.rs-sign-in-error.hidden,\\n.rs-box-error.hidden {\\n height: 0;\\n}\\n\\n.rs-sign-in-error.visible,\\n.rs-box-error.visible {\\n height: auto;\\n border-radius: 3px;\\n padding: 0.5em 0.5em;\\n margin-top: 0.5em;\\n text-align: center;\\n background-color: rgba(255,0,0,0.1);\\n color: darkred;\\n}\\n\\n /*Choose provider box */\\n.rs-box-choose {\\n text-align: center;\\n overflow: hidden;\\n}\\n\\n.rs-box-choose p {\\n margin-top: 0;\\n margin-bottom: 20px;\\n}\\n\\n/*Connected box */\\n.rs-box-connected {\\n height: 40px;\\n}\\n.rs-connected-text {\\n float: left;\\n}\\n.rs-box-connected .rs-user {\\n font-weight: bold;\\n max-width: 210px;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n word-break: keep-all;\\n}\\n.rs-connected-buttons {\\n float: right;\\n}\\n.rs-disconnect:hover {\\n border-color: #FF2D2D;\\n}\\n.rs-disconnect:hover .rs-icon{\\n fill: #FF2D2D;\\n}\\n.rs-sync:hover {\\n border-color: #FFBB0C;\\n}\\n.rs-sync:hover .rs-icon {\\n fill: #FFBB0C;\\n}\\n.rs-sync.rs-rotate {\\n border-color: #FFBB0C;\\n}\\n.rs-sync.rs-rotate .rs-icon {\\n fill: #FFBB0C;\\n animation: rs-spin 1s linear infinite;\\n}\\n@keyframes rs-spin { 100% { transform: rotate(360deg); transform:rotate(360deg); } }\\n\\n/* Floating widget styles (top right corner) */\\n.rs-floating {\\n position: fixed;\\n top: 0;\\n right: 0;\\n}\\n\\n\\n/* Small/mobile screens */\\n@media screen and (max-width: 360px) {\\n .rs-widget {\\n font-size: 100%;\\n padding: 10px;\\n transition: all 300ms ease-out;\\n }\\n .rs-floating {\\n position: relative;\\n top: auto;\\n right: auto\\n }\\n .rs-state-choose,\\n .rs-state-sign-in {\\n position: fixed;\\n top: 0;\\n margin: 0;\\n border-radius: 0;\\n height: 100%;\\n max-width: 100%;\\n }\\n}\\n\\n/* remove dotted outline border on Firefox */\\n.rs-widget a:focus,\\n.rs-widget a:active,\\n.rs-widget button:focus,\\n.rs-widget input:focus {\\n outline:none;\\n}\\n.rs-widget button::-moz-focus-inner, \\n.rs-widget input[type=\\\"button\\\"]::-moz-focus-inner,\\n.rs-widget input[type=\\\"submit\\\"]::-moz-focus-inner {\\n border:0;\\n}\\n\"\n\n/***/ })\n/******/ ])\n});\n;\n\n\n// WEBPACK FOOTER //\n// widget.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap fde537f53ed0e20d9f3a","/**\n * RemoteStorage connect widget\n * @constructor\n *\n * @param {object} remoteStorage - remoteStorage instance\n * @param {object} options - Widget options\n * @param {boolean} options.leaveOpen - Do not minimize widget when user clicks\n * outside of it (default: false)\n */\nlet Widget = function(remoteStorage, options={}) {\n this.rs = remoteStorage;\n\n this.state = 'initial';\n\n // true if we have remoteStorage connection's info\n this.active = false;\n\n // remoteStorage is connected!\n this.online = false;\n\n // widget is minimized ?\n this.closed = false;\n\n this.leaveOpen = options.leaveOpen ? options.leaveOpen : false;\n\n this.lastSynced = null;\n this.lastSyncedUpdateLoop = null;\n};\n\n\nWidget.prototype = {\n\n log (...msg) {\n console.debug('[RS-WIDGET] ', ...msg);\n },\n\n // handle events !\n eventHandler (event, msg) {\n this.log('EVENT: ', event);\n switch (event) {\n case 'ready':\n this.setState(this.state);\n this.shouldCloseWhenSyncDone = true;\n break;\n case 'req-done':\n this.rsSyncButton.classList.add(\"rs-rotate\");\n break;\n case 'done':\n this.rsSyncButton.classList.remove(\"rs-rotate\");\n\n if (this.rsWidget.classList.contains('rs-state-unauthorized') ||\n !this.rs.remote.online) {\n this.updateLastSyncedOutput();\n } else if (this.rs.remote.online) {\n this.lastSynced = new Date();\n let subHeadlineEl = document.querySelector('.rs-box-connected .rs-sub-headline');\n subHeadlineEl.innerHTML = 'Synced just now';\n }\n\n if (!this.closed && this.shouldCloseWhenSyncDone) {\n setTimeout(this.closeWidget.bind(this), 1500);\n }\n break;\n case 'disconnected':\n this.active = false;\n this.online = false;\n this.rsWidget.classList.remove('rs-backend-remotestorage');\n this.rsWidget.classList.remove('rs-backend-dropbox');\n this.rsWidget.classList.remove('rs-backend-googledrive');\n this.setState('initial');\n break;\n case 'connected':\n this.active = true;\n this.online = true;\n if (this.rs.hasFeature('Sync')) {\n this.rs.sync.on('req-done', () => this.eventHandler('req-done'));\n this.rs.sync.on('done', () => this.eventHandler('done'));\n } else {\n this.rsSyncButton.classList.add('hidden');\n }\n let connectedUser = this.rs.remote.userAddress;\n this.rsConnectedUser.innerHTML = connectedUser;\n this.rsWidget.classList.add(`rs-backend-${this.rs.backend}`);\n this.setState('connected');\n break;\n case 'network-offline':\n this.online = false;\n // this.active = false;\n this.setState();\n break;\n case 'network-online':\n this.online = true;\n this.active = true;\n this.setState();\n break;\n case 'error':\n if (msg.name === 'DiscoveryError') {\n this.handleDiscoveryError(msg);\n } else if (msg.name === 'SyncError') {\n this.handleSyncError(msg);\n } else if (msg.name === 'Unauthorized') {\n this.handleUnauthorized(msg);\n } else {\n console.debug('Encountered unhandled error', msg);\n }\n break;\n }\n },\n\n setState (state) {\n if (state) {\n this.log('Setting state ', state);\n let lastSelected = document.querySelector('.rs-box.selected');\n if (lastSelected) {\n lastSelected.classList.remove('selected');\n }\n\n let toSelect = document.querySelector('.rs-box.rs-box-'+state);\n if (toSelect) {\n toSelect.classList.add('selected');\n }\n\n let currentStateClass = this.rsWidget.className.match(/rs-state-\\S+/g)[0];\n this.rsWidget.classList.remove(currentStateClass);\n this.rsWidget.classList.add(`rs-state-${state || this.state}`);\n if (this.closed && state !== 'close') {\n this.rsWidget.classList.add('rs-state-close');\n }\n\n this.state = state;\n }\n\n if (!this.online && this.active) {\n this.rsWidget.classList.add('rs-state-offline');\n // TODO offline is not the same as \"not connected\"\n this.rsConnectedLabel.textContent = 'Not Connected';\n } else {\n this.rsConnectedLabel.textContent = 'Connected';\n this.rsWidget.classList.remove('rs-state-offline');\n }\n },\n\n /**\n * Create the widget element and add styling.\n *\n * @returns {object} The widget's DOM element\n *\n * @private\n */\n createHtmlTemplate () {\n const element = document.createElement('div');\n const style = document.createElement('style');\n style.innerHTML = require('raw!./assets/styles.css');\n\n element.id = \"remotestorage-widget\";\n element.innerHTML = require('html!./assets/widget.html');\n element.appendChild(style);\n\n return element;\n },\n\n /**\n * Save all interactive DOM elements as variables for later access.\n *\n * @private\n */\n setupElements () {\n this.rsWidget = document.querySelector('.rs-widget');\n this.rsInitial = document.querySelector('.rs-box-initial');\n this.rsChoose = document.querySelector('.rs-box-choose');\n this.rsConnected = document.querySelector('.rs-box-connected');\n this.rsSignIn = document.querySelector('.rs-box-sign-in');\n\n this.rsConnectedLabel = document.querySelector('.rs-box-connected .rs-sub-headline')\n this.rsChooseRemoteStorageButton = document.querySelector('button.rs-choose-rs');\n this.rsChooseDropboxButton = document.querySelector('button.rs-choose-dropbox');\n this.rsChooseGoogleDriveButton = document.querySelector('button.rs-choose-googledrive');\n this.rsErrorBox = document.querySelector('.rs-box-error');\n\n // check if apiKeys is set for Dropbox or Google [googledrive, dropbox]\n // to show/hide relative buttons only if needed\n if (! this.rs.apiKeys.hasOwnProperty('googledrive')) {\n this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton);\n }\n\n if (! this.rs.apiKeys.hasOwnProperty('dropbox')) {\n this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton);\n }\n\n this.rsSignInForm = document.querySelector('.rs-sign-in-form');\n\n this.rsDisconnectButton = document.querySelector('.rs-disconnect');\n this.rsSyncButton = document.querySelector('.rs-sync');\n this.rsLogo = document.querySelector('.rs-widget-icon');\n\n this.rsConnectedUser = document.querySelector('.rs-connected-text h1.rs-user');\n },\n\n /**\n * Setup all event handlers\n *\n * @private\n */\n setupHandlers () {\n this.rs.on('connected', () => this.eventHandler('connected'));\n this.rs.on('ready', () => this.eventHandler('ready'));\n this.rs.on('disconnected', () => this.eventHandler('disconnected'));\n this.rs.on('network-online', () => this.eventHandler('network-online'));\n this.rs.on('network-offline', () => this.eventHandler('network-offline'));\n this.rs.on('error', (error) => this.eventHandler('error', error));\n\n this.setEventListeners();\n this.setClickHandlers();\n },\n\n /**\n * Append widget to the DOM.\n *\n * If an elementId is specified, it will be appended to that element,\n * otherwise it will be appended to the document's body.\n *\n * @param {String} [elementId] - Widget's parent\n */\n attach (elementId) {\n const domElement = this.createHtmlTemplate();\n\n if (elementId) {\n const parent = document.getElementById(elementId);\n if (!parent) {\n throw \"Failed to find target DOM element with id=\\\"\" + elementId + \"\\\"\";\n }\n parent.appendChild(domElement);\n } else {\n document.body.appendChild(domElement);\n }\n\n this.setupElements();\n this.setupHandlers();\n },\n\n setEventListeners () {\n // Sign-in form\n this.rsSignInForm.addEventListener('submit', (e) => {\n e.preventDefault();\n let userAddress = document.querySelector('input[name=rs-user-address]').value;\n this.rs.connect(userAddress);\n });\n },\n\n /**\n * Show the screen for choosing a backend if there is more than one backend\n * to choose from. Otherwise it directly shows the remoteStorage connect\n * screen.\n *\n * @private\n */\n showChooseOrSignIn () {\n // choose backend only if some providers are declared\n if (this.rs.apiKeys && Object.keys(this.rs.apiKeys).length > 0) {\n this.setState('choose');\n } else {\n this.setState('sign-in');\n }\n },\n\n setClickHandlers () {\n // Initial button\n this.rsInitial.addEventListener('click', () => this.showChooseOrSignIn() );\n\n // Choose RS button\n this.rsChooseRemoteStorageButton.addEventListener('click', () => this.setState('sign-in') );\n\n // Choose Dropbox button\n this.rsChooseDropboxButton.addEventListener('click', () => this.rs[\"dropbox\"].connect() );\n\n // Choose Google Drive button\n this.rsChooseGoogleDriveButton.addEventListener('click', () => this.rs[\"googledrive\"].connect() );\n\n // Disconnect button\n this.rsDisconnectButton.addEventListener('click', () => this.rs.disconnect() );\n\n // Sync button\n if (this.rs.hasFeature('Sync')) {\n this.rsSyncButton.addEventListener('click', () => {\n if (this.rsSyncButton.classList.contains('rs-rotate')) {\n this.rs.stopSync();\n this.rsSyncButton.classList.remove(\"rs-rotate\");\n } else {\n this.rs.startSync();\n this.rsSyncButton.classList.add(\"rs-rotate\");\n }\n });\n }\n\n // Reduce to icon only if connected and clicked outside of widget\n document.addEventListener('click', () => this.closeWidget() );\n\n // Clicks on the widget stop the above event\n this.rsWidget.addEventListener('click', e => e.stopPropagation() );\n\n // Click on the logo to toggle the widget's open/close state\n this.rsLogo.addEventListener('click', () => this.toggleWidget() );\n },\n\n /**\n * Toggle between the widget's open/close state.\n *\n * When then widget is open and in initial state, it will show the backend\n * chooser screen.\n */\n toggleWidget () {\n if (this.closed) {\n this.openWidget();\n } else {\n if (this.state === 'initial') {\n this.showChooseOrSignIn();\n } else {\n this.closeWidget();\n }\n }\n },\n\n openWidget () {\n this.closed = false;\n this.setState(this.active ? 'connected' : 'initial');\n this.shouldCloseWhenSyncDone = false;\n },\n\n /**\n * Close the widget to only show the icon.\n *\n * If the ``leaveOpen`` config is true or there is no storage connected,\n * the widget will not close.\n */\n closeWidget () {\n if (!this.leaveOpen && this.active) {\n this.setState('close');\n this.closed = true;\n } else {\n this.setState(this.active ? 'connected' : 'initial');\n }\n },\n\n showErrorBox (errorMsg) {\n this.rsErrorBox.innerHTML = errorMsg;\n this.setState('error');\n },\n\n hideErrorBox () {\n this.rsErrorBox.innerHTML = '';\n this.setState('close');\n },\n\n handleDiscoveryError (error) {\n let msgContainer = document.querySelector('.rs-sign-in-error');\n msgContainer.innerHTML = error.message;\n msgContainer.classList.remove('hidden');\n msgContainer.classList.add('visible');\n },\n\n handleSyncError (/* error */) {\n // console.debug('Encountered SyncError', error);\n this.showErrorBox('App sync error');\n },\n\n handleUnauthorized () {\n // console.debug('RS UNAUTHORIZED');\n // console.debug('Bearer token not valid anymore');\n // this.rs.stopSync();\n // this.rsWidget.classList.add('rs-state-unauthorized');\n this.showErrorBox('App authorization expired or revoked');\n // this.lastSyncedUpdateLoop = setInterval(() => {\n // this.updateLastSyncedOutput();\n // }, 5000);\n },\n\n updateLastSyncedOutput () {\n let now = new Date();\n let secondsSinceLastSync = Math.round((now.getTime() - this.lastSynced.getTime())/1000);\n let subHeadlineEl = document.querySelector('.rs-box-connected .rs-sub-headline');\n subHeadlineEl.innerHTML = `Synced ${secondsSinceLastSync} seconds ago`;\n }\n};\n\nmodule.exports = Widget;\n\n\n\n// WEBPACK FOOTER //\n// ./src/widget.js","module.exports = \"

Connect your storage

To sync data with your account

user@provider.com

Connected

Connect your storage

This app allows you to sync data with a storage of your choice. Read more

\";\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/html-loader!./src/assets/widget.html\n// module id = 2\n// module chunks = 0","module.exports = \"/* RemoteStorage widget styles */\\n\\n.rs-widget * {\\n box-sizing: border-box;\\n}\\n\\n.rs-widget {\\n font-family: arial, sans-serif;\\n max-width: 350px;\\n color: #333;\\n background-color: #fff;\\n border-radius: 3px;\\n padding: 10px;\\n margin: 10px;\\n overflow: hidden;\\n z-index: 21000000; /* Make sure we're on a reasonably high visibility layer */\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n will-change: max-height, height, width, opacity, max-width, background, box-shadow;\\n transition-property: width, height, opacity, max-width, max-height, background, box-shadow;\\n transition-duration: 300ms;\\n}\\n\\n.rs-box {\\n overflow: hidden;\\n will-change: height;\\n transition-property: height, width, max-height;\\n transition-duration: 300ms;\\n transition-timing-function: ease-in;\\n opacity: 0;\\n max-height: 0px;\\n}\\n\\n.rs-box.selected {\\n opacity: 1;\\n max-height: 380px;\\n}\\n\\n/* Main logo */\\n.rs-main-logo {\\n float: left;\\n height: 36px;\\n width: auto;\\n margin-top: 1px;\\n margin-right: 0.625em;\\n transition: margin-left 300ms ease-out, transform 300ms ease-out;\\n cursor: pointer;\\n}\\n.rs-widget .rs-backend-remotestorage svg#rs-main-logo-remotestorage,\\n{\\n display: normal;\\n}\\n.rs-widget[class*=\\\"rs-backend-\\\"]:not(.rs-backend-remotestorage) svg#rs-main-logo-remotestorage {\\n display: none;\\n}\\n.rs-widget .rs-backend-dropbox svg#rs-main-logo-dropbox {\\n display: normal;\\n}\\n.rs-widget:not(.rs-backend-dropbox) svg#rs-main-logo-dropbox {\\n display: none;\\n}\\n.rs-widget .rs-backend-googledrive svg#rs-main-logo-googledrive {\\n display: normal;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n\\npolygon.rs-logo-shape {\\n fill: #FF4B03;\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n.rs-state-offline polygon.rs-logo-shape {\\n fill: #888;\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n/* Hide everything except logo when connected and clicked outside of box */\\n.rs-state-close {\\n max-width: 55px;\\n background-color: transparent;\\n box-shadow: none;\\n opacity: 0.5;\\n\\n transition: max-height 100ms ease-out 0ms, max-width 300ms ease-out 300ms, background 300ms ease-in 200ms, opacity 300ms ease 200ms; \\n}\\n\\n.rs-state-close:hover {\\n cursor: pointer;\\n opacity: 1;\\n}\\n\\n/* Initial Connect remote storage box */\\n.rs-box-initial:hover {\\n cursor: pointer;\\n}\\n\\n.rs-widget a {\\n color: #0093cc;\\n}\\n\\n/* HEADLINE */\\n.rs-small-headline {\\n font-size: 1em;\\n font-weight: bold;\\n margin: 0;\\n margin-bottom: 2px;\\n height: 1.2em;\\n word-break: break-all;\\n overflow: hidden;\\n}\\n\\n.rs-sub-headline {\\n word-break: break-all;\\n overflow: hidden;\\n color: #666;\\n font-size: 0.92em;\\n height: 1.2em;\\n}\\n.rs-big-headline {\\n font-size: 1.625em;\\n font-weight: normal;\\n text-align: center;\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n/* BUTTONS */\\n.rs-button {\\n font: inherit;\\n color: inherit;\\n background-color: transparent;\\n border: 1px solid #dcdcdc;\\n border-radius: 3px;\\n cursor: pointer;\\n}\\n.rs-button-small {\\n padding: 0.5em 0.6em;\\n margin-left: 0.3em;\\n transition: border-color 300ms ease-out;\\n}\\n.rs-button-wrap {\\n margin-top: 10px;\\n}\\n\\n.rs-button-wrap img,\\n.rs-button-wrap svg {\\n float: left;\\n margin-right: 0.6em;\\n width: 40px;\\n height: 40px;\\n}\\n\\n.rs-button-big {\\n padding: 15px 10px;\\n margin-bottom: 10px;\\n display: block;\\n width: 100%;\\n text-align: left;\\n transition: box-shadow 200ms;\\n}\\n.rs-button-big > div {\\n font-size: 1.125em;\\n padding: 10px 0;\\n}\\n.rs-button-big:hover {\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-button-big:active {\\n background-color: #eee;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-button-big:last-child {\\n margin-bottom: 0;\\n}\\n\\n.rs-content {\\n padding: 0 10px 10px 10px;\\n}\\n\\n\\n.rs-state-choose .rs-main-logo,\\n.rs-state-sign-in .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n\\n.rs-sign-in-form input[type=text] {\\n padding: 15px 10px;\\n display: block;\\n width: 100%;\\n font: inherit;\\n border: 1px solid #aaa;\\n}\\n.rs-sign-in-form input[type=submit] {\\n padding: 15px 10px;\\n margin-top: 20px;\\n margin-bottom: 15px;\\n display: block;\\n width: 100%;\\n border: none;\\n border-radius: 3px;\\n background-color: #3fb34f;\\n font: inherit;\\n color: #fff;\\n transition: box-shadow 200ms, background-color 200ms;\\n}\\n.rs-sign-in-form input[type=submit]:hover {\\n cursor: pointer;\\n background-color: #4BCB5D;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n}\\n.rs-sign-in-form input[type=submit]:active {\\n background-color: #3fb34f;\\n}\\n\\n.rs-sign-in-error.hidden,\\n.rs-box-error.hidden {\\n height: 0;\\n}\\n\\n.rs-sign-in-error.visible,\\n.rs-box-error.visible {\\n height: auto;\\n border-radius: 3px;\\n padding: 0.5em 0.5em;\\n margin-top: 0.5em;\\n text-align: center;\\n background-color: rgba(255,0,0,0.1);\\n color: darkred;\\n}\\n\\n /*Choose provider box */\\n.rs-box-choose {\\n text-align: center;\\n overflow: hidden;\\n}\\n\\n.rs-box-choose p {\\n margin-top: 0;\\n margin-bottom: 20px;\\n}\\n\\n/*Connected box */\\n.rs-box-connected {\\n height: 40px;\\n}\\n.rs-connected-text {\\n float: left;\\n}\\n.rs-box-connected .rs-user {\\n font-weight: bold;\\n max-width: 210px;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n word-break: keep-all;\\n}\\n.rs-connected-buttons {\\n float: right;\\n}\\n.rs-disconnect:hover {\\n border-color: #FF2D2D;\\n}\\n.rs-disconnect:hover .rs-icon{\\n fill: #FF2D2D;\\n}\\n.rs-sync:hover {\\n border-color: #FFBB0C;\\n}\\n.rs-sync:hover .rs-icon {\\n fill: #FFBB0C;\\n}\\n.rs-sync.rs-rotate {\\n border-color: #FFBB0C;\\n}\\n.rs-sync.rs-rotate .rs-icon {\\n fill: #FFBB0C;\\n animation: rs-spin 1s linear infinite;\\n}\\n@keyframes rs-spin { 100% { transform: rotate(360deg); transform:rotate(360deg); } }\\n\\n/* Floating widget styles (top right corner) */\\n.rs-floating {\\n position: fixed;\\n top: 0;\\n right: 0;\\n}\\n\\n\\n/* Small/mobile screens */\\n@media screen and (max-width: 360px) {\\n .rs-widget {\\n font-size: 100%;\\n padding: 10px;\\n transition: all 300ms ease-out;\\n }\\n .rs-floating {\\n position: relative;\\n top: auto;\\n right: auto\\n }\\n .rs-state-choose,\\n .rs-state-sign-in {\\n position: fixed;\\n top: 0;\\n margin: 0;\\n border-radius: 0;\\n height: 100%;\\n max-width: 100%;\\n }\\n}\\n\\n/* remove dotted outline border on Firefox */\\n.rs-widget a:focus,\\n.rs-widget a:active,\\n.rs-widget button:focus,\\n.rs-widget input:focus {\\n outline:none;\\n}\\n.rs-widget button::-moz-focus-inner, \\n.rs-widget input[type=\\\"button\\\"]::-moz-focus-inner,\\n.rs-widget input[type=\\\"submit\\\"]::-moz-focus-inner {\\n border:0;\\n}\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/raw-loader!./src/assets/styles.css\n// module id = 3\n// module chunks = 0"],"sourceRoot":""} \ No newline at end of file diff --git a/package.json b/package.json index ac4736d..52a93eb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "remotestorage-widget", - "version": "0.6.0", + "version": "0.7.0", "description": "remoteStorage.js connect widget", "main": "build/widget.js", "scripts": {