From dbef381e2191b1628a41317d69cdf24f1bf39cbb Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Tue, 5 Feb 2019 21:35:40 +0700 Subject: [PATCH] 1.4.0 --- bower.json | 2 +- build/widget.js | 3 +-- build/widget.js.map | 2 +- package-lock.json | 2 +- package.json | 2 +- 5 files changed, 5 insertions(+), 6 deletions(-) diff --git a/bower.json b/bower.json index 553a84c..772ef0c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "rs-widget", - "version": "1.3.0", + "version": "1.4.0", "description": "Connect widget for remoteStorage.js", "main": [ "./build/widget.js" diff --git a/build/widget.js b/build/widget.js index 76269fb..471438b 100644 --- a/build/widget.js +++ b/build/widget.js @@ -1,3 +1,2 @@ -!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(n){if(l[n])return l[n].exports;var i=l[n]={exports:{},id:n,loaded:!1};return t[n].call(i.exports,i,i.exports,e),i.loaded=!0,i.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 n=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.rs=t,this.leaveOpen=!!e.leaveOpen&&e.leaveOpen,this.autoCloseAfter=e.autoCloseAfter?e.autoCloseAfter:1500,this.skipInitial=!!e.skipInitial&&e.skipInitial,this.logging=!!e.logging&&e.logging,e.hasOwnProperty("modalBackdrop")){if("boolean"!=typeof e.modalBackdrop&&"onlySmallScreens"!==e.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=e.modalBackdrop}else this.modalBackdrop="onlySmallScreens";this.active=!1,this.online=!1,this.closed=!1,this.lastSynced=null,this.lastSyncedUpdateLoop=null};n.prototype={log:function(){if(this.logging){for(var t,e=arguments.length,l=Array(e),n=0;n0?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.rsErrorReconnectLink.addEventListener("click",function(){return t.rs.reconnect()}),this.rsErrorDisconnectButton.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.close()}),this.rsWidget.addEventListener("click",function(t){return t.stopPropagation()}),this.rsLogo.addEventListener("click",function(){return t.toggle()})},toggle:function(){this.closed?this.open():"initial"===this.state?this.showChooseOrSignIn():this.close()},open:function(){this.closed=!1,this.rsWidget.classList.remove("rs-closed"),this.shouldCloseWhenSyncDone=!1},close:function(){var t=this;"error"!==this.state&&(!this.leaveOpen&&this.active?(this.closed=!0,this.rsWidget.classList.add("rs-closed")):this.active?this.setState("connected"):this.setInitialState(),this.rsWidget.classList.contains("rs-modal")&&(this.rsBackdrop.classList.remove("visible"),setTimeout(function(){t.rsBackdrop.style.display="none"},300)))},setOffline:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)},setOnline:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0},setBackendClass:function(t){this.rsWidget.classList.remove("rs-backend-remotestorage"),this.rsWidget.classList.remove("rs-backend-dropbox"),this.rsWidget.classList.remove("rs-backend-googledrive"),t&&this.rsWidget.classList.add("rs-backend-"+t)},showErrorBox:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")},hideErrorBox:function(){this.rsErrorBox.innerHTML="",this.close()},handleDiscoveryError:function(t){var e=document.querySelector(".rs-sign-in-error");e.innerHTML=t.message,e.classList.remove("rs-hidden"),e.classList.add("rs-visible"),this.rsConnectButton.disabled=!1},handleSyncError:function(){this.open(),this.showErrorBox("App sync error")},handleUnauthorized:function(t){t.code&&"access_denied"===t.code?this.rs.disconnect():(this.open(),this.showErrorBox(t.message+" "),this.rsErrorBox.appendChild(this.rsErrorReconnectLink),this.rsErrorReconnectLink.classList.remove("rs-hidden"))},updateLastSyncedOutput:function(){if(this.lastSynced){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"}},isSmallScreen:function(){return window.innerWidth<421}},t.exports=n},function(t,e){t.exports='

Connect your storage

To sync data with your account

user@provider.com

Connected
Renew

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 {\n z-index: 21000000;\n position: fixed;\n}\n\n.rs-widget {\n box-sizing: border-box;\n overflow: hidden;\n max-width: 350px;\n padding: 10px;\n margin: 10px;\n border-radius: 3px;\n background-color: #fff;\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\n font-family: arial, sans-serif;\n font-size: 16px;\n color: #333;\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-widget * {\n box-sizing: border-box;\n}\n\n.rs-widget .rs-hidden {\n display: none;\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.rs-selected {\n opacity: 1;\n max-height: 420px;\n}\n\n/* Main logo */\n.rs-main-logo {\n float: left;\n height: 36px;\n width: 36px;\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}\n\npolygon.rs-logo-shape,\n#rs-main-logo-dropbox path,\n#rs-main-logo-googledrive path {\n transition-property: fill;\n transition-duration: 0.5s;\n}\n\n.rs-offline polygon.rs-logo-shape,\n.rs-offline #rs-main-logo-dropbox path,\n.rs-offline #rs-main-logo-googledrive path {\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-closed {\n max-width: 56px;\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-closed:hover {\n cursor: pointer;\n opacity: 1;\n}\n\n.rs-box-initial {\n transition-duration: 0ms;\n}\n\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 line-height: 1em;\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.rs-sign-in-form input[type=text] {\n padding: 15px 10px;\n display: block;\n width: 100%;\n font: inherit;\n height: 52px;\n border: 1px solid #aaa;\n border-radius: 0;\n box-shadow: none;\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.rs-sign-in-form input[type=submit]:disabled,\n.rs-sign-in-form input[type=submit]:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-error.rs-hidden,\n.rs-box-error.rs-hidden {\n height: 0;\n}\n\n.rs-sign-in-error.rs-visible,\n.rs-box-error.rs-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.rs-box-error {\n display: flex;\n flex-direction: row;\n}\n\n.rs-box-error .rs-error-message {\n flex: auto;\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 line-height: 1.4em;\n}\n\n/*Connected box */\n.rs-box-connected {\n display: flex;\n flex-direction: row;\n height: 40px;\n transition: height 0s;\n}\n.rs-connected-text {\n flex: auto;\n min-width: 0;\n}\n.rs-box-connected .rs-user {\n font-weight: bold;\n text-overflow: ellipsis;\n overflow: hidden;\n word-break: keep-all;\n}\n.rs-connected-buttons, .rs-error-buttons {\n flex: none;\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: 420px) {\n .rs-widget {\n font-size: 100%;\n transition: all 300ms ease-out;\n max-width: 400px;\n }\n .rs-floating {\n position: relative;\n top: auto;\n right: auto\n }\n .rs-closed {\n max-width: 56px;\n }\n .rs-state-choose,\n .rs-state-sign-in {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\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/* prevent rounded buttons on mobile Safari */\n.rs-widget input[type="button"],\n.rs-widget input[type="submit"] {\n -webkit-appearance: none;\n}\n\n.remotestorage-widget-modal-backdrop {\n display: none;\n z-index: 20000000;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(0, 0, 0, 0.5);\n opacity: 0;\n transition: opacity 0.3s linear;\n}\n\n.remotestorage-widget-modal-backdrop.visible {\n opacity: 1;\n transition: opacity 0.3s linear;\n}\n'}])}); +!function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Widget=t():n.Widget=t()}(window,function(){return function(n){var t={};function e(l){if(t[l])return t[l].exports;var i=t[l]={i:l,l:!1,exports:{}};return n[l].call(i.exports,i,i.exports,e),i.l=!0,i.exports}return e.m=n,e.c=t,e.d=function(n,t,l){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:l})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var l=Object.create(null);if(e.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var i in n)e.d(l,i,function(t){return n[t]}.bind(null,i));return l},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=0)}([function(n,t,e){n.exports=e(1)},function(n,t,e){"use strict";var l=function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.rs=n,this.leaveOpen=!!t.leaveOpen&&t.leaveOpen,this.autoCloseAfter=t.autoCloseAfter?t.autoCloseAfter:1500,this.skipInitial=!!t.skipInitial&&t.skipInitial,this.logging=!!t.logging&&t.logging,t.hasOwnProperty("modalBackdrop")){if("boolean"!=typeof t.modalBackdrop&&"onlySmallScreens"!==t.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=t.modalBackdrop}else this.modalBackdrop="onlySmallScreens";this.active=!1,this.online=!1,this.closed=!1,this.lastSynced=null,this.lastSyncedUpdateLoop=null};l.prototype={log:function(){if(this.logging){for(var n,t=arguments.length,e=Array(t),l=0;l0?this.setState("choose"):this.setState("sign-in")},setClickHandlers:function(){var n=this;this.rsInitial.addEventListener("click",function(){return n.showChooseOrSignIn()}),this.rsChooseRemoteStorageButton.addEventListener("click",function(){return n.setState("sign-in")}),this.rsChooseDropboxButton.addEventListener("click",function(){return n.rs.dropbox.connect()}),this.rsChooseGoogleDriveButton.addEventListener("click",function(){return n.rs.googledrive.connect()}),this.rsDisconnectButton.addEventListener("click",function(){return n.rs.disconnect()}),this.rsErrorReconnectLink.addEventListener("click",function(){return n.rs.reconnect()}),this.rsErrorDisconnectButton.addEventListener("click",function(){return n.rs.disconnect()}),this.rs.hasFeature("Sync")&&this.rsSyncButton.addEventListener("click",function(){n.rsSyncButton.classList.contains("rs-rotate")?(n.rs.stopSync(),n.rsSyncButton.classList.remove("rs-rotate")):(n.rs.startSync(),n.rsSyncButton.classList.add("rs-rotate"))}),document.addEventListener("click",function(){return n.close()}),this.rsWidget.addEventListener("click",function(n){return n.stopPropagation()}),this.rsLogo.addEventListener("click",function(){return n.toggle()})},toggle:function(){this.closed?this.open():"initial"===this.state?this.showChooseOrSignIn():this.close()},open:function(){this.closed=!1,this.rsWidget.classList.remove("rs-closed"),this.shouldCloseWhenSyncDone=!1},close:function(){var n=this;"error"!==this.state&&(!this.leaveOpen&&this.active?(this.closed=!0,this.rsWidget.classList.add("rs-closed")):this.active?this.setState("connected"):this.setInitialState(),this.rsWidget.classList.contains("rs-modal")&&(this.rsBackdrop.classList.remove("visible"),setTimeout(function(){n.rsBackdrop.style.display="none"},300)))},setOffline:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)},setOnline:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0},setBackendClass:function(n){this.rsWidget.classList.remove("rs-backend-remotestorage"),this.rsWidget.classList.remove("rs-backend-dropbox"),this.rsWidget.classList.remove("rs-backend-googledrive"),n&&this.rsWidget.classList.add("rs-backend-"+n)},showErrorBox:function(n){this.rsErrorBox.innerHTML=n,this.setState("error")},hideErrorBox:function(){this.rsErrorBox.innerHTML="",this.close()},handleDiscoveryError:function(n){var t=document.querySelector(".rs-sign-in-error");t.innerHTML=n.message,t.classList.remove("rs-hidden"),t.classList.add("rs-visible"),this.rsConnectButton.disabled=!1},handleSyncError:function(){this.open(),this.showErrorBox("App sync error")},handleUnauthorized:function(n){n.code&&"access_denied"===n.code?this.rs.disconnect():(this.open(),this.showErrorBox(n.message+" "),this.rsErrorBox.appendChild(this.rsErrorReconnectLink),this.rsErrorReconnectLink.classList.remove("rs-hidden"))},updateLastSyncedOutput:function(){if(this.lastSynced){var n=new Date,t=Math.round((n.getTime()-this.lastSynced.getTime())/1e3);document.querySelector(".rs-box-connected .rs-sub-headline").innerHTML="Synced "+t+" seconds ago"}},isSmallScreen:function(){return window.innerWidth<421}},n.exports=l},function(n,t){n.exports='#remotestorage-widget {\n z-index: 21000000;\n position: fixed;\n}\n\n.rs-widget {\n box-sizing: border-box;\n overflow: hidden;\n max-width: 350px;\n padding: 10px;\n margin: 10px;\n border-radius: 3px;\n background-color: #fff;\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\n font-family: arial, sans-serif;\n font-size: 16px;\n color: #333;\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-widget * {\n box-sizing: border-box;\n}\n\n.rs-widget .rs-hidden {\n display: none;\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.rs-selected {\n opacity: 1;\n max-height: 420px;\n}\n\n/* Main logo */\n.rs-main-logo {\n float: left;\n height: 36px;\n width: 36px;\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}\n\npolygon.rs-logo-shape,\n#rs-main-logo-dropbox path,\n#rs-main-logo-googledrive path {\n transition-property: fill;\n transition-duration: 0.5s;\n}\n\n.rs-offline polygon.rs-logo-shape,\n.rs-offline #rs-main-logo-dropbox path,\n.rs-offline #rs-main-logo-googledrive path {\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-closed {\n max-width: 56px;\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-closed:hover {\n cursor: pointer;\n opacity: 1;\n}\n\n.rs-box-initial {\n transition-duration: 0ms;\n}\n\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 line-height: 1em;\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.rs-sign-in-form input[type=text] {\n padding: 15px 10px;\n display: block;\n width: 100%;\n font: inherit;\n height: 52px;\n border: 1px solid #aaa;\n border-radius: 0;\n box-shadow: none;\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.rs-sign-in-form input[type=submit]:disabled,\n.rs-sign-in-form input[type=submit]:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-error.rs-hidden,\n.rs-box-error.rs-hidden {\n height: 0;\n}\n\n.rs-sign-in-error.rs-visible,\n.rs-box-error.rs-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.rs-box-error {\n display: flex;\n flex-direction: row;\n}\n\n.rs-box-error .rs-error-message {\n flex: auto;\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 line-height: 1.4em;\n}\n\n/*Connected box */\n.rs-box-connected {\n display: flex;\n flex-direction: row;\n height: 40px;\n transition: height 0s;\n}\n.rs-connected-text {\n flex: auto;\n min-width: 0;\n}\n.rs-box-connected .rs-user {\n font-weight: bold;\n text-overflow: ellipsis;\n overflow: hidden;\n word-break: keep-all;\n}\n.rs-connected-buttons, .rs-error-buttons {\n flex: none;\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: 420px) {\n .rs-widget {\n font-size: 100%;\n transition: all 300ms ease-out;\n max-width: 400px;\n }\n .rs-floating {\n position: relative;\n top: auto;\n right: auto\n }\n .rs-closed {\n max-width: 56px;\n }\n .rs-state-choose,\n .rs-state-sign-in {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\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/* prevent rounded buttons on mobile Safari */\n.rs-widget input[type="button"],\n.rs-widget input[type="submit"] {\n -webkit-appearance: none;\n}\n\n.remotestorage-widget-modal-backdrop {\n display: none;\n z-index: 20000000;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(0, 0, 0, 0.5);\n opacity: 0;\n transition: opacity 0.3s linear;\n}\n\n.remotestorage-widget-modal-backdrop.visible {\n opacity: 1;\n transition: opacity 0.3s linear;\n}\n'},function(n,t){n.exports='\x3c!--\n rs-state-initial\n rs-state-choose\n rs-state-sign-in\n rs-state-connected\n rs-state-error\n\n rs-offline\n rs-closed\n rs-modal\n rs-floating - TODO - will make it fixed in the right corner\n--\x3e\n\n\x3c!-- RS WIDGET, a class named rs-state- indicate\n its current state --\x3e\n
\n\n
\n \n \n \n
\n\n
\n

Connect your storage

\n To sync data with your account\n
\n\n
\n
\n

user@provider.com

\n Connected\n
\n
\n \n \n
\n
\n\n
\n
\n
\n Renew\n \n
\n
\n\n
\n
\n

Connect your storage

\n

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

\n
\n \n \n \n
\n
\n
\n\n \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 1b4659d..7f6e396 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 f333530d880e9274c249","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","leaveOpen","autoCloseAfter","skipInitial","logging","hasOwnProperty","modalBackdrop","active","online","closed","lastSynced","lastSyncedUpdateLoop","prototype","log","_console","_len","msg","Array","_key","console","debug","apply","concat","eventHandler","event","_this","setState","state","rsSyncButton","classList","add","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","subHeadlineEl","document","querySelector","innerHTML","shouldCloseWhenSyncDone","setTimeout","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","connectedUser","userAddress","rsConnectedUser","backend","rsConnectedLabel","textContent","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","toSelect","currentStateClass","className","match","showChooseOrSignIn","createHtmlTemplate","element","createElement","style","appendChild","createBackdropHtml","backdropEl","body","setModalClass","isSmallScreen","setupElements","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsErrorBox","apiKeys","parentNode","removeChild","rsSignInForm","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","setupHandlers","_this2","error","setEventListeners","setClickHandlers","attach","elementId","domElement","parentContainerEl","getElementById","parent","_this3","addEventListener","e","preventDefault","value","disabled","connect","display","Object","keys","_this4","dropbox","googledrive","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","_this5","showErrorBox","errorMsg","hideErrorBox","msgContainer","message","code","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth"],"mappings":"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","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 * @param {number} options.autoCloseAfter - Time after which the widget closes\n\t * automatically in ms (default: 1500)\n\t * @param {boolean} options.skipInitial - Don't show the initial connect hint,\n\t * but show sign-in screen directly instead\n\t * (default: false)\n\t * @param {boolean} options.logging - Enable logging (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.leaveOpen = options.leaveOpen ? options.leaveOpen : false;\n\t this.autoCloseAfter = options.autoCloseAfter ? options.autoCloseAfter : 1500;\n\t this.skipInitial = options.skipInitial ? options.skipInitial : false;\n\t this.logging = options.logging ? options.logging : false;\n\t\n\t if (options.hasOwnProperty('modalBackdrop')) {\n\t if (typeof options.modalBackdrop !== 'boolean' && options.modalBackdrop !== 'onlySmallScreens') {\n\t throw 'options.modalBackdrop has to be true/false or \"onlySmallScreens\"';\n\t }\n\t this.modalBackdrop = options.modalBackdrop;\n\t } else {\n\t this.modalBackdrop = 'onlySmallScreens';\n\t }\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.lastSynced = null;\n\t this.lastSyncedUpdateLoop = null;\n\t};\n\t\n\tWidget.prototype = {\n\t log: function log() {\n\t if (this.logging) {\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\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 'sync-req-done':\n\t this.rsSyncButton.classList.add(\"rs-rotate\");\n\t break;\n\t case 'sync-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.close.bind(this), this.autoCloseAfter);\n\t }\n\t break;\n\t case 'disconnected':\n\t this.active = false;\n\t this.setOnline();\n\t this.setBackendClass(); // removes all backend CSS classes\n\t this.open();\n\t this.setInitialState();\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.shouldCloseWhenSyncDone = true;\n\t this.rs.on('sync-req-done', function () {\n\t return _this.eventHandler('sync-req-done');\n\t });\n\t this.rs.on('sync-done', function () {\n\t return _this.eventHandler('sync-done');\n\t });\n\t } else {\n\t this.rsSyncButton.classList.add('rs-hidden');\n\t setTimeout(this.close.bind(this), this.autoCloseAfter);\n\t }\n\t var connectedUser = this.rs.remote.userAddress;\n\t this.rsConnectedUser.innerHTML = connectedUser;\n\t this.setBackendClass(this.rs.backend);\n\t this.rsConnectedLabel.textContent = 'Connected';\n\t this.setState('connected');\n\t break;\n\t case 'network-offline':\n\t this.setOffline();\n\t break;\n\t case 'network-online':\n\t this.setOnline();\n\t break;\n\t case 'error':\n\t this.setBackendClass(this.rs.backend);\n\t\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.rs-selected');\n\t if (lastSelected) {\n\t lastSelected.classList.remove('rs-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('rs-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\n\t this.state = state;\n\t }\n\t },\n\t\n\t\n\t /**\n\t * Set widget to its inital state\n\t *\n\t * @private\n\t */\n\t setInitialState: function setInitialState() {\n\t if (this.skipInitial) {\n\t this.showChooseOrSignIn();\n\t } else {\n\t this.setState('initial');\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 * Create the widget's modal backdrop element, add\n\t * styling, and append to DOM\n\t *\n\t * @private\n\t */\n\t createBackdropHtml: function createBackdropHtml() {\n\t var backdropEl = document.createElement('div');\n\t backdropEl.classList.add('remotestorage-widget-modal-backdrop');\n\t document.body.appendChild(backdropEl);\n\t },\n\t\n\t\n\t /**\n\t * Sets the `rs-modal` class on the widget element.\n\t * Done by default for small screens (max-width 420px).\n\t *\n\t * @private\n\t */\n\t setModalClass: function setModalClass() {\n\t if (this.modalBackdrop) {\n\t if (this.modalBackdrop === 'onlySmallScreens' && !this.isSmallScreen()) {\n\t return;\n\t }\n\t this.rsWidget.classList.add('rs-modal');\n\t }\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.rsBackdrop = document.querySelector('.remotestorage-widget-modal-backdrop');\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 .rs-error-message');\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 this.rsConnectButton = document.querySelector('.rs-connect');\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.rsErrorReconnectLink = document.querySelector('.rs-box-error a.rs-reconnect');\n\t this.rsErrorDisconnectButton = document.querySelector('.rs-box-error button.rs-disconnect');\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 this.createBackdropHtml();\n\t var domElement = this.createHtmlTemplate();\n\t\n\t var parentContainerEl = void 0;\n\t\n\t if (elementId) {\n\t parentContainerEl = document.getElementById(elementId);\n\t if (!parent) {\n\t throw \"Failed to find target DOM element with id=\\\"\" + elementId + \"\\\"\";\n\t }\n\t } else {\n\t parentContainerEl = document.body;\n\t }\n\t parentContainerEl.appendChild(domElement);\n\t\n\t this.setupElements();\n\t this.setupHandlers();\n\t this.setInitialState();\n\t this.setModalClass();\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.rsConnectButton.disabled = true;\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 if (this.rsWidget.classList.contains('rs-modal')) {\n\t this.rsBackdrop.style.display = 'block';\n\t this.rsBackdrop.classList.add('visible');\n\t }\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 this.rsErrorReconnectLink.addEventListener('click', function () {\n\t return _this4.rs.reconnect();\n\t });\n\t this.rsErrorDisconnectButton.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.close();\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.toggle();\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 toggle: function toggle() {\n\t if (this.closed) {\n\t this.open();\n\t } else {\n\t if (this.state === 'initial') {\n\t this.showChooseOrSignIn();\n\t } else {\n\t this.close();\n\t }\n\t }\n\t },\n\t\n\t\n\t /**\n\t * Open the widget.\n\t */\n\t open: function open() {\n\t this.closed = false;\n\t this.rsWidget.classList.remove('rs-closed');\n\t this.shouldCloseWhenSyncDone = false; // prevent auto-closing when user opened the widget\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 close: function close() {\n\t var _this5 = this;\n\t\n\t // don't do anything when we have an error\n\t if (this.state === 'error') {\n\t return;\n\t }\n\t\n\t if (!this.leaveOpen && this.active) {\n\t this.closed = true;\n\t this.rsWidget.classList.add('rs-closed');\n\t } else if (this.active) {\n\t this.setState('connected');\n\t } else {\n\t this.setInitialState();\n\t }\n\t\n\t if (this.rsWidget.classList.contains('rs-modal')) {\n\t this.rsBackdrop.classList.remove('visible');\n\t setTimeout(function () {\n\t _this5.rsBackdrop.style.display = 'none';\n\t }, 300);\n\t }\n\t },\n\t\n\t\n\t /**\n\t * Mark the widget as offline.\n\t *\n\t * This will not do anything when no account is connected.\n\t *\n\t * @private\n\t */\n\t setOffline: function setOffline() {\n\t if (this.online) {\n\t this.rsWidget.classList.add('rs-offline');\n\t this.rsConnectedLabel.textContent = 'Offline';\n\t this.online = false;\n\t }\n\t },\n\t\n\t\n\t /**\n\t * Mark the widget as online.\n\t *\n\t * @private\n\t */\n\t setOnline: function setOnline() {\n\t if (!this.online) {\n\t this.rsWidget.classList.remove('rs-offline');\n\t if (this.active) {\n\t this.rsConnectedLabel.textContent = 'Connected';\n\t }\n\t }\n\t this.online = true;\n\t },\n\t\n\t\n\t /**\n\t * Set the remoteStorage backend type to show the appropriate icon.\n\t * If no backend is given, all existing backend CSS classes will be removed.\n\t *\n\t * @param {string} [backend]\n\t *\n\t * @private\n\t */\n\t setBackendClass: function setBackendClass(backend) {\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\n\t if (backend) {\n\t this.rsWidget.classList.add('rs-backend-' + backend);\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.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('rs-hidden');\n\t msgContainer.classList.add('rs-visible');\n\t this.rsConnectButton.disabled = false;\n\t },\n\t handleSyncError: function handleSyncError() /* error */{\n\t // console.debug('Encountered SyncError', error);\n\t this.open();\n\t this.showErrorBox('App sync error');\n\t },\n\t handleUnauthorized: function handleUnauthorized(error) {\n\t if (error.code && error.code === 'access_denied') {\n\t this.rs.disconnect();\n\t } else {\n\t this.open();\n\t this.showErrorBox(error.message + \" \");\n\t this.rsErrorBox.appendChild(this.rsErrorReconnectLink);\n\t this.rsErrorReconnectLink.classList.remove('rs-hidden');\n\t }\n\t },\n\t updateLastSyncedOutput: function updateLastSyncedOutput() {\n\t if (!this.lastSynced) {\n\t return;\n\t } // don't do anything when we've never synced yet\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 isSmallScreen: function isSmallScreen() {\n\t return window.innerWidth < 421;\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
Renew

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 {\\n z-index: 21000000;\\n position: fixed;\\n}\\n\\n.rs-widget {\\n box-sizing: border-box;\\n overflow: hidden;\\n max-width: 350px;\\n padding: 10px;\\n margin: 10px;\\n border-radius: 3px;\\n background-color: #fff;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n font-family: arial, sans-serif;\\n font-size: 16px;\\n color: #333;\\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-widget * {\\n box-sizing: border-box;\\n}\\n\\n.rs-widget .rs-hidden {\\n display: none;\\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.rs-selected {\\n opacity: 1;\\n max-height: 420px;\\n}\\n\\n/* Main logo */\\n.rs-main-logo {\\n float: left;\\n height: 36px;\\n width: 36px;\\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}\\n\\npolygon.rs-logo-shape,\\n#rs-main-logo-dropbox path,\\n#rs-main-logo-googledrive path {\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n.rs-offline polygon.rs-logo-shape,\\n.rs-offline #rs-main-logo-dropbox path,\\n.rs-offline #rs-main-logo-googledrive path {\\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-closed {\\n max-width: 56px;\\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-closed:hover {\\n cursor: pointer;\\n opacity: 1;\\n}\\n\\n.rs-box-initial {\\n transition-duration: 0ms;\\n}\\n\\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 line-height: 1em;\\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.rs-sign-in-form input[type=text] {\\n padding: 15px 10px;\\n display: block;\\n width: 100%;\\n font: inherit;\\n height: 52px;\\n border: 1px solid #aaa;\\n border-radius: 0;\\n box-shadow: none;\\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.rs-sign-in-form input[type=submit]:disabled,\\n.rs-sign-in-form input[type=submit]:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-error.rs-hidden,\\n.rs-box-error.rs-hidden {\\n height: 0;\\n}\\n\\n.rs-sign-in-error.rs-visible,\\n.rs-box-error.rs-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.rs-box-error {\\n display: flex;\\n flex-direction: row;\\n}\\n\\n.rs-box-error .rs-error-message {\\n flex: auto;\\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 line-height: 1.4em;\\n}\\n\\n/*Connected box */\\n.rs-box-connected {\\n display: flex;\\n flex-direction: row;\\n height: 40px;\\n transition: height 0s;\\n}\\n.rs-connected-text {\\n flex: auto;\\n min-width: 0;\\n}\\n.rs-box-connected .rs-user {\\n font-weight: bold;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n word-break: keep-all;\\n}\\n.rs-connected-buttons, .rs-error-buttons {\\n flex: none;\\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: 420px) {\\n .rs-widget {\\n font-size: 100%;\\n transition: all 300ms ease-out;\\n max-width: 400px;\\n }\\n .rs-floating {\\n position: relative;\\n top: auto;\\n right: auto\\n }\\n .rs-closed {\\n max-width: 56px;\\n }\\n .rs-state-choose,\\n .rs-state-sign-in {\\n position: fixed;\\n top: 0;\\n left: 0;\\n right: 0;\\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/* prevent rounded buttons on mobile Safari */\\n.rs-widget input[type=\\\"button\\\"],\\n.rs-widget input[type=\\\"submit\\\"] {\\n -webkit-appearance: none;\\n}\\n\\n.remotestorage-widget-modal-backdrop {\\n display: none;\\n z-index: 20000000;\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n left: 0;\\n right: 0;\\n background-color: rgba(0, 0, 0, 0.5);\\n opacity: 0;\\n transition: opacity 0.3s linear;\\n}\\n\\n.remotestorage-widget-modal-backdrop.visible {\\n opacity: 1;\\n transition: opacity 0.3s linear;\\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 f333530d880e9274c249","/**\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 * @param {number} options.autoCloseAfter - Time after which the widget closes\n * automatically in ms (default: 1500)\n * @param {boolean} options.skipInitial - Don't show the initial connect hint,\n * but show sign-in screen directly instead\n * (default: false)\n * @param {boolean} options.logging - Enable logging (default: false)\n */\nlet Widget = function(remoteStorage, options={}) {\n this.rs = remoteStorage;\n\n this.leaveOpen = options.leaveOpen ? options.leaveOpen : false;\n this.autoCloseAfter = options.autoCloseAfter ? options.autoCloseAfter : 1500;\n this.skipInitial = options.skipInitial ? options.skipInitial : false;\n this.logging = options.logging ? options.logging : false;\n\n if (options.hasOwnProperty('modalBackdrop')) {\n if (typeof options.modalBackdrop !== 'boolean' && options.modalBackdrop !== 'onlySmallScreens') {\n throw 'options.modalBackdrop has to be true/false or \"onlySmallScreens\"'\n }\n this.modalBackdrop = options.modalBackdrop;\n } else {\n this.modalBackdrop = 'onlySmallScreens';\n }\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.lastSynced = null;\n this.lastSyncedUpdateLoop = null;\n};\n\nWidget.prototype = {\n\n log (...msg) {\n if (this.logging) {\n console.debug('[RS-WIDGET] ', ...msg);\n }\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 'sync-req-done':\n this.rsSyncButton.classList.add(\"rs-rotate\");\n break;\n case 'sync-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.close.bind(this), this.autoCloseAfter);\n }\n break;\n case 'disconnected':\n this.active = false;\n this.setOnline();\n this.setBackendClass(); // removes all backend CSS classes\n this.open();\n this.setInitialState();\n break;\n case 'connected':\n this.active = true;\n this.online = true;\n if (this.rs.hasFeature('Sync')) {\n this.shouldCloseWhenSyncDone = true;\n this.rs.on('sync-req-done', () => this.eventHandler('sync-req-done'));\n this.rs.on('sync-done', () => this.eventHandler('sync-done'));\n } else {\n this.rsSyncButton.classList.add('rs-hidden');\n setTimeout(this.close.bind(this), this.autoCloseAfter);\n }\n let connectedUser = this.rs.remote.userAddress;\n this.rsConnectedUser.innerHTML = connectedUser;\n this.setBackendClass(this.rs.backend);\n this.rsConnectedLabel.textContent = 'Connected';\n this.setState('connected');\n break;\n case 'network-offline':\n this.setOffline();\n break;\n case 'network-online':\n this.setOnline();\n break;\n case 'error':\n this.setBackendClass(this.rs.backend);\n\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.rs-selected');\n if (lastSelected) {\n lastSelected.classList.remove('rs-selected');\n }\n\n let toSelect = document.querySelector('.rs-box.rs-box-'+state);\n if (toSelect) {\n toSelect.classList.add('rs-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\n this.state = state;\n }\n },\n\n\n /**\n * Set widget to its inital state\n *\n * @private\n */\n setInitialState () {\n if (this.skipInitial) {\n this.showChooseOrSignIn();\n } else {\n this.setState('initial');\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 * Create the widget's modal backdrop element, add\n * styling, and append to DOM\n *\n * @private\n */\n createBackdropHtml () {\n const backdropEl = document.createElement('div');\n backdropEl.classList.add('remotestorage-widget-modal-backdrop');\n document.body.appendChild(backdropEl);\n },\n\n /**\n * Sets the `rs-modal` class on the widget element.\n * Done by default for small screens (max-width 420px).\n *\n * @private\n */\n setModalClass () {\n if (this.modalBackdrop) {\n if (this.modalBackdrop === 'onlySmallScreens'\n && !this.isSmallScreen()) {\n return;\n }\n this.rsWidget.classList.add('rs-modal');\n }\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.rsBackdrop = document.querySelector('.remotestorage-widget-modal-backdrop');\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 .rs-error-message');\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 this.rsConnectButton = document.querySelector('.rs-connect');\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.rsErrorReconnectLink = document.querySelector('.rs-box-error a.rs-reconnect');\n this.rsErrorDisconnectButton = document.querySelector('.rs-box-error button.rs-disconnect');\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 this.createBackdropHtml()\n const domElement = this.createHtmlTemplate();\n\n let parentContainerEl;\n\n if (elementId) {\n parentContainerEl = document.getElementById(elementId);\n if (!parent) {\n throw \"Failed to find target DOM element with id=\\\"\" + elementId + \"\\\"\";\n }\n } else {\n parentContainerEl = document.body;\n }\n parentContainerEl.appendChild(domElement);\n\n this.setupElements();\n this.setupHandlers();\n this.setInitialState();\n this.setModalClass();\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.rsConnectButton.disabled = true;\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 if (this.rsWidget.classList.contains('rs-modal')) {\n this.rsBackdrop.style.display = 'block';\n this.rsBackdrop.classList.add('visible');\n }\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 this.rsErrorReconnectLink.addEventListener('click', () => this.rs.reconnect() );\n this.rsErrorDisconnectButton.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.close() );\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.toggle() );\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 toggle () {\n if (this.closed) {\n this.open();\n } else {\n if (this.state === 'initial') {\n this.showChooseOrSignIn();\n } else {\n this.close();\n }\n }\n },\n\n /**\n * Open the widget.\n */\n open () {\n this.closed = false;\n this.rsWidget.classList.remove('rs-closed');\n this.shouldCloseWhenSyncDone = false; // prevent auto-closing when user opened the widget\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 close () {\n // don't do anything when we have an error\n if (this.state === 'error') { return; }\n\n if (!this.leaveOpen && this.active) {\n this.closed = true;\n this.rsWidget.classList.add('rs-closed');\n } else if (this.active) {\n this.setState('connected');\n } else {\n this.setInitialState();\n }\n\n if (this.rsWidget.classList.contains('rs-modal')) {\n this.rsBackdrop.classList.remove('visible');\n setTimeout(() => {\n this.rsBackdrop.style.display = 'none';\n }, 300);\n }\n },\n\n /**\n * Mark the widget as offline.\n *\n * This will not do anything when no account is connected.\n *\n * @private\n */\n setOffline () {\n if (this.online) {\n this.rsWidget.classList.add('rs-offline');\n this.rsConnectedLabel.textContent = 'Offline';\n this.online = false;\n }\n },\n\n /**\n * Mark the widget as online.\n *\n * @private\n */\n setOnline () {\n if (!this.online) {\n this.rsWidget.classList.remove('rs-offline');\n if (this.active) {\n this.rsConnectedLabel.textContent = 'Connected';\n }\n }\n this.online = true;\n },\n\n /**\n * Set the remoteStorage backend type to show the appropriate icon.\n * If no backend is given, all existing backend CSS classes will be removed.\n *\n * @param {string} [backend]\n *\n * @private\n */\n setBackendClass (backend) {\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\n if (backend) {\n this.rsWidget.classList.add(`rs-backend-${backend}`);\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.close();\n },\n\n handleDiscoveryError (error) {\n let msgContainer = document.querySelector('.rs-sign-in-error');\n msgContainer.innerHTML = error.message;\n msgContainer.classList.remove('rs-hidden');\n msgContainer.classList.add('rs-visible');\n this.rsConnectButton.disabled = false;\n },\n\n handleSyncError (/* error */) {\n // console.debug('Encountered SyncError', error);\n this.open();\n this.showErrorBox('App sync error');\n },\n\n handleUnauthorized (error) {\n if (error.code && error.code === 'access_denied') {\n this.rs.disconnect();\n } else {\n this.open();\n this.showErrorBox(error.message + \" \");\n this.rsErrorBox.appendChild(this.rsErrorReconnectLink);\n this.rsErrorReconnectLink.classList.remove('rs-hidden');\n }\n },\n\n updateLastSyncedOutput () {\n if (!this.lastSynced) { return; } // don't do anything when we've never synced yet\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 isSmallScreen () {\n return window.innerWidth < 421;\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
Renew

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 {\\n z-index: 21000000;\\n position: fixed;\\n}\\n\\n.rs-widget {\\n box-sizing: border-box;\\n overflow: hidden;\\n max-width: 350px;\\n padding: 10px;\\n margin: 10px;\\n border-radius: 3px;\\n background-color: #fff;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n font-family: arial, sans-serif;\\n font-size: 16px;\\n color: #333;\\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-widget * {\\n box-sizing: border-box;\\n}\\n\\n.rs-widget .rs-hidden {\\n display: none;\\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.rs-selected {\\n opacity: 1;\\n max-height: 420px;\\n}\\n\\n/* Main logo */\\n.rs-main-logo {\\n float: left;\\n height: 36px;\\n width: 36px;\\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}\\n\\npolygon.rs-logo-shape,\\n#rs-main-logo-dropbox path,\\n#rs-main-logo-googledrive path {\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n.rs-offline polygon.rs-logo-shape,\\n.rs-offline #rs-main-logo-dropbox path,\\n.rs-offline #rs-main-logo-googledrive path {\\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-closed {\\n max-width: 56px;\\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-closed:hover {\\n cursor: pointer;\\n opacity: 1;\\n}\\n\\n.rs-box-initial {\\n transition-duration: 0ms;\\n}\\n\\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 line-height: 1em;\\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.rs-sign-in-form input[type=text] {\\n padding: 15px 10px;\\n display: block;\\n width: 100%;\\n font: inherit;\\n height: 52px;\\n border: 1px solid #aaa;\\n border-radius: 0;\\n box-shadow: none;\\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.rs-sign-in-form input[type=submit]:disabled,\\n.rs-sign-in-form input[type=submit]:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-error.rs-hidden,\\n.rs-box-error.rs-hidden {\\n height: 0;\\n}\\n\\n.rs-sign-in-error.rs-visible,\\n.rs-box-error.rs-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.rs-box-error {\\n display: flex;\\n flex-direction: row;\\n}\\n\\n.rs-box-error .rs-error-message {\\n flex: auto;\\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 line-height: 1.4em;\\n}\\n\\n/*Connected box */\\n.rs-box-connected {\\n display: flex;\\n flex-direction: row;\\n height: 40px;\\n transition: height 0s;\\n}\\n.rs-connected-text {\\n flex: auto;\\n min-width: 0;\\n}\\n.rs-box-connected .rs-user {\\n font-weight: bold;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n word-break: keep-all;\\n}\\n.rs-connected-buttons, .rs-error-buttons {\\n flex: none;\\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: 420px) {\\n .rs-widget {\\n font-size: 100%;\\n transition: all 300ms ease-out;\\n max-width: 400px;\\n }\\n .rs-floating {\\n position: relative;\\n top: auto;\\n right: auto\\n }\\n .rs-closed {\\n max-width: 56px;\\n }\\n .rs-state-choose,\\n .rs-state-sign-in {\\n position: fixed;\\n top: 0;\\n left: 0;\\n right: 0;\\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/* prevent rounded buttons on mobile Safari */\\n.rs-widget input[type=\\\"button\\\"],\\n.rs-widget input[type=\\\"submit\\\"] {\\n -webkit-appearance: none;\\n}\\n\\n.remotestorage-widget-modal-backdrop {\\n display: none;\\n z-index: 20000000;\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n left: 0;\\n right: 0;\\n background-color: rgba(0, 0, 0, 0.5);\\n opacity: 0;\\n transition: opacity 0.3s linear;\\n}\\n\\n.remotestorage-widget-modal-backdrop.visible {\\n opacity: 1;\\n transition: opacity 0.3s linear;\\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://Widget/webpack/universalModuleDefinition","webpack://Widget/webpack/bootstrap","webpack://Widget/./src/widget.js","webpack://Widget/./src/assets/styles.css","webpack://Widget/./src/assets/widget.html"],"names":["root","factory","exports","module","define","amd","Widget","window","n","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","default","object","property","prototype","hasOwnProperty","p","s","e","remoteStorage","options","arguments","length","this","rs","leaveOpen","autoCloseAfter","skipInitial","logging","modalBackdrop","active","online","closed","lastSynced","lastSyncedUpdateLoop","log","_console","_len","msg","Array","_key","console","debug","apply","concat","eventHandler","event","_this","setState","state","rsSyncButton","classList","add","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","document","querySelector","innerHTML","shouldCloseWhenSyncDone","setTimeout","close","setOnline","setBackendClass","open","setInitialState","hasFeature","on","connectedUser","userAddress","rsConnectedUser","backend","rsConnectedLabel","textContent","setOffline","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","toSelect","currentStateClass","className","match","showChooseOrSignIn","createHtmlTemplate","element","createElement","style","require","id","appendChild","createBackdropHtml","backdropEl","body","setModalClass","isSmallScreen","setupElements","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsErrorBox","apiKeys","parentNode","removeChild","rsSignInForm","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","setupHandlers","_this2","error","setEventListeners","setClickHandlers","attach","elementId","domElement","parentContainerEl","getElementById","parent","_this3","addEventListener","preventDefault","disabled","connect","display","keys","_this4","dropbox","googledrive","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","_this5","showErrorBox","errorMsg","hideErrorBox","msgContainer","message","code","now","secondsSinceLastSync","Math","round","getTime","innerWidth"],"mappings":"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","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})(window, function() {\nreturn "," \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 \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\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.l = 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// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","/**\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 outside of it (default: false)\n * @param {number} options.autoCloseAfter - Time after which the widget closes automatically in ms (default: 1500)\n * @param {boolean} options.skipInitial - Don't show the initial connect hint, but show sign-in screen directly instead (default: false)\n * @param {boolean} options.logging - Enable logging (default: false)\n * @param {boolean,string} options.modalBackdrop - Show a dark, transparent backdrop when opening the widget for connecting an account. (default 'onlySmallScreens')\n */\nlet Widget = function(remoteStorage, options={}) {\n this.rs = remoteStorage;\n\n this.leaveOpen = options.leaveOpen ? options.leaveOpen : false;\n this.autoCloseAfter = options.autoCloseAfter ? options.autoCloseAfter : 1500;\n this.skipInitial = options.skipInitial ? options.skipInitial : false;\n this.logging = options.logging ? options.logging : false;\n\n if (options.hasOwnProperty('modalBackdrop')) {\n if (typeof options.modalBackdrop !== 'boolean' && options.modalBackdrop !== 'onlySmallScreens') {\n throw 'options.modalBackdrop has to be true/false or \"onlySmallScreens\"'\n }\n this.modalBackdrop = options.modalBackdrop;\n } else {\n this.modalBackdrop = 'onlySmallScreens';\n }\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.lastSynced = null;\n this.lastSyncedUpdateLoop = null;\n};\n\nWidget.prototype = {\n\n log (...msg) {\n if (this.logging) {\n console.debug('[RS-WIDGET] ', ...msg);\n }\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 'sync-req-done':\n this.rsSyncButton.classList.add(\"rs-rotate\");\n break;\n case 'sync-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.close.bind(this), this.autoCloseAfter);\n }\n break;\n case 'disconnected':\n this.active = false;\n this.setOnline();\n this.setBackendClass(); // removes all backend CSS classes\n this.open();\n this.setInitialState();\n break;\n case 'connected':\n this.active = true;\n this.online = true;\n if (this.rs.hasFeature('Sync')) {\n this.shouldCloseWhenSyncDone = true;\n this.rs.on('sync-req-done', () => this.eventHandler('sync-req-done'));\n this.rs.on('sync-done', () => this.eventHandler('sync-done'));\n } else {\n this.rsSyncButton.classList.add('rs-hidden');\n setTimeout(this.close.bind(this), this.autoCloseAfter);\n }\n let connectedUser = this.rs.remote.userAddress;\n this.rsConnectedUser.innerHTML = connectedUser;\n this.setBackendClass(this.rs.backend);\n this.rsConnectedLabel.textContent = 'Connected';\n this.setState('connected');\n break;\n case 'network-offline':\n this.setOffline();\n break;\n case 'network-online':\n this.setOnline();\n break;\n case 'error':\n this.setBackendClass(this.rs.backend);\n\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.rs-selected');\n if (lastSelected) {\n lastSelected.classList.remove('rs-selected');\n }\n\n let toSelect = document.querySelector('.rs-box.rs-box-'+state);\n if (toSelect) {\n toSelect.classList.add('rs-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\n this.state = state;\n }\n },\n\n\n /**\n * Set widget to its inital state\n *\n * @private\n */\n setInitialState () {\n if (this.skipInitial) {\n this.showChooseOrSignIn();\n } else {\n this.setState('initial');\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-loader!./assets/styles.css');\n\n element.id = \"remotestorage-widget\";\n element.innerHTML = require('html-loader!./assets/widget.html');\n element.appendChild(style);\n\n return element;\n },\n\n /**\n * Create the widget's modal backdrop element, add\n * styling, and append to DOM\n *\n * @private\n */\n createBackdropHtml () {\n const backdropEl = document.createElement('div');\n backdropEl.classList.add('remotestorage-widget-modal-backdrop');\n document.body.appendChild(backdropEl);\n },\n\n /**\n * Sets the `rs-modal` class on the widget element.\n * Done by default for small screens (max-width 420px).\n *\n * @private\n */\n setModalClass () {\n if (this.modalBackdrop) {\n if (this.modalBackdrop === 'onlySmallScreens'\n && !this.isSmallScreen()) {\n return;\n }\n this.rsWidget.classList.add('rs-modal');\n }\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.rsBackdrop = document.querySelector('.remotestorage-widget-modal-backdrop');\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 .rs-error-message');\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 this.rsConnectButton = document.querySelector('.rs-connect');\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.rsErrorReconnectLink = document.querySelector('.rs-box-error a.rs-reconnect');\n this.rsErrorDisconnectButton = document.querySelector('.rs-box-error button.rs-disconnect');\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 this.createBackdropHtml()\n const domElement = this.createHtmlTemplate();\n\n let parentContainerEl;\n\n if (elementId) {\n parentContainerEl = document.getElementById(elementId);\n if (!parent) {\n throw \"Failed to find target DOM element with id=\\\"\" + elementId + \"\\\"\";\n }\n } else {\n parentContainerEl = document.body;\n }\n parentContainerEl.appendChild(domElement);\n\n this.setupElements();\n this.setupHandlers();\n this.setInitialState();\n this.setModalClass();\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.rsConnectButton.disabled = true;\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 if (this.rsWidget.classList.contains('rs-modal')) {\n this.rsBackdrop.style.display = 'block';\n this.rsBackdrop.classList.add('visible');\n }\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 this.rsErrorReconnectLink.addEventListener('click', () => this.rs.reconnect() );\n this.rsErrorDisconnectButton.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.close() );\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.toggle() );\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 toggle () {\n if (this.closed) {\n this.open();\n } else {\n if (this.state === 'initial') {\n this.showChooseOrSignIn();\n } else {\n this.close();\n }\n }\n },\n\n /**\n * Open the widget.\n */\n open () {\n this.closed = false;\n this.rsWidget.classList.remove('rs-closed');\n this.shouldCloseWhenSyncDone = false; // prevent auto-closing when user opened the widget\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 close () {\n // don't do anything when we have an error\n if (this.state === 'error') { return; }\n\n if (!this.leaveOpen && this.active) {\n this.closed = true;\n this.rsWidget.classList.add('rs-closed');\n } else if (this.active) {\n this.setState('connected');\n } else {\n this.setInitialState();\n }\n\n if (this.rsWidget.classList.contains('rs-modal')) {\n this.rsBackdrop.classList.remove('visible');\n setTimeout(() => {\n this.rsBackdrop.style.display = 'none';\n }, 300);\n }\n },\n\n /**\n * Mark the widget as offline.\n *\n * This will not do anything when no account is connected.\n *\n * @private\n */\n setOffline () {\n if (this.online) {\n this.rsWidget.classList.add('rs-offline');\n this.rsConnectedLabel.textContent = 'Offline';\n this.online = false;\n }\n },\n\n /**\n * Mark the widget as online.\n *\n * @private\n */\n setOnline () {\n if (!this.online) {\n this.rsWidget.classList.remove('rs-offline');\n if (this.active) {\n this.rsConnectedLabel.textContent = 'Connected';\n }\n }\n this.online = true;\n },\n\n /**\n * Set the remoteStorage backend type to show the appropriate icon.\n * If no backend is given, all existing backend CSS classes will be removed.\n *\n * @param {string} [backend]\n *\n * @private\n */\n setBackendClass (backend) {\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\n if (backend) {\n this.rsWidget.classList.add(`rs-backend-${backend}`);\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.close();\n },\n\n handleDiscoveryError (error) {\n let msgContainer = document.querySelector('.rs-sign-in-error');\n msgContainer.innerHTML = error.message;\n msgContainer.classList.remove('rs-hidden');\n msgContainer.classList.add('rs-visible');\n this.rsConnectButton.disabled = false;\n },\n\n handleSyncError (/* error */) {\n // console.debug('Encountered SyncError', error);\n this.open();\n this.showErrorBox('App sync error');\n },\n\n handleUnauthorized (error) {\n if (error.code && error.code === 'access_denied') {\n this.rs.disconnect();\n } else {\n this.open();\n this.showErrorBox(error.message + \" \");\n this.rsErrorBox.appendChild(this.rsErrorReconnectLink);\n this.rsErrorReconnectLink.classList.remove('rs-hidden');\n }\n },\n\n updateLastSyncedOutput () {\n if (!this.lastSynced) { return; } // don't do anything when we've never synced yet\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 isSmallScreen () {\n return window.innerWidth < 421;\n }\n};\n\nmodule.exports = Widget;\n","module.exports = \"#remotestorage-widget {\\n z-index: 21000000;\\n position: fixed;\\n}\\n\\n.rs-widget {\\n box-sizing: border-box;\\n overflow: hidden;\\n max-width: 350px;\\n padding: 10px;\\n margin: 10px;\\n border-radius: 3px;\\n background-color: #fff;\\n box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2);\\n font-family: arial, sans-serif;\\n font-size: 16px;\\n color: #333;\\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-widget * {\\n box-sizing: border-box;\\n}\\n\\n.rs-widget .rs-hidden {\\n display: none;\\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.rs-selected {\\n opacity: 1;\\n max-height: 420px;\\n}\\n\\n/* Main logo */\\n.rs-main-logo {\\n float: left;\\n height: 36px;\\n width: 36px;\\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}\\n\\npolygon.rs-logo-shape,\\n#rs-main-logo-dropbox path,\\n#rs-main-logo-googledrive path {\\n transition-property: fill;\\n transition-duration: 0.5s;\\n}\\n\\n.rs-offline polygon.rs-logo-shape,\\n.rs-offline #rs-main-logo-dropbox path,\\n.rs-offline #rs-main-logo-googledrive path {\\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-closed {\\n max-width: 56px;\\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-closed:hover {\\n cursor: pointer;\\n opacity: 1;\\n}\\n\\n.rs-box-initial {\\n transition-duration: 0ms;\\n}\\n\\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 line-height: 1em;\\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.rs-sign-in-form input[type=text] {\\n padding: 15px 10px;\\n display: block;\\n width: 100%;\\n font: inherit;\\n height: 52px;\\n border: 1px solid #aaa;\\n border-radius: 0;\\n box-shadow: none;\\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.rs-sign-in-form input[type=submit]:disabled,\\n.rs-sign-in-form input[type=submit]:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-error.rs-hidden,\\n.rs-box-error.rs-hidden {\\n height: 0;\\n}\\n\\n.rs-sign-in-error.rs-visible,\\n.rs-box-error.rs-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.rs-box-error {\\n display: flex;\\n flex-direction: row;\\n}\\n\\n.rs-box-error .rs-error-message {\\n flex: auto;\\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 line-height: 1.4em;\\n}\\n\\n/*Connected box */\\n.rs-box-connected {\\n display: flex;\\n flex-direction: row;\\n height: 40px;\\n transition: height 0s;\\n}\\n.rs-connected-text {\\n flex: auto;\\n min-width: 0;\\n}\\n.rs-box-connected .rs-user {\\n font-weight: bold;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n word-break: keep-all;\\n}\\n.rs-connected-buttons, .rs-error-buttons {\\n flex: none;\\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: 420px) {\\n .rs-widget {\\n font-size: 100%;\\n transition: all 300ms ease-out;\\n max-width: 400px;\\n }\\n .rs-floating {\\n position: relative;\\n top: auto;\\n right: auto\\n }\\n .rs-closed {\\n max-width: 56px;\\n }\\n .rs-state-choose,\\n .rs-state-sign-in {\\n position: fixed;\\n top: 0;\\n left: 0;\\n right: 0;\\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/* prevent rounded buttons on mobile Safari */\\n.rs-widget input[type=\\\"button\\\"],\\n.rs-widget input[type=\\\"submit\\\"] {\\n -webkit-appearance: none;\\n}\\n\\n.remotestorage-widget-modal-backdrop {\\n display: none;\\n z-index: 20000000;\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n left: 0;\\n right: 0;\\n background-color: rgba(0, 0, 0, 0.5);\\n opacity: 0;\\n transition: opacity 0.3s linear;\\n}\\n\\n.remotestorage-widget-modal-backdrop.visible {\\n opacity: 1;\\n transition: opacity 0.3s linear;\\n}\\n\"","module.exports = \"\\n\\n\\n
\\n\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n\\n
\\n

Connect your storage

\\n To sync data with your account\\n
\\n\\n
\\n
\\n

user@provider.com

\\n Connected\\n
\\n
\\n \\n \\n
\\n
\\n\\n
\\n
\\n
\\n Renew\\n \\n
\\n
\\n\\n
\\n
\\n

Connect your storage

\\n

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

\\n
\\n \\n \\n \\n
\\n
\\n
\\n\\n
\\n
\\n \\n
\\n
\\n
\\n\";"],"sourceRoot":""} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 377fe2e..af13ea3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "remotestorage-widget", - "version": "1.3.0", + "version": "1.4.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 4fecdde..9b03104 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "remotestorage-widget", - "version": "1.3.0", + "version": "1.4.0", "description": "remoteStorage.js connect widget", "main": "build/widget.js", "scripts": {