diff --git a/bower.json b/bower.json index 15d805a..0f46742 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "rs-widget", - "version": "1.5.3", + "version": "1.5.4", "description": "Connect widget for remoteStorage.js", "main": [ "./build/widget.js" diff --git a/build/widget.js b/build/widget.js index 163024d..e48987a 100644 --- a/build/widget.js +++ b/build/widget.js @@ -1,2 +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()}(self,(function(){return(()=>{"use strict";var t={d:(e,n)=>{for(var l in n)t.o(n,l)&&!t.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:n[l]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>l});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,n=new Array(e),l=0;l

Connect your storage

To sync data with your account
';var e=document.createElement("style");return e.innerHTML='#remotestorage-widget {\n z-index: 21000000;\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.6em 0.7em;\n margin-left: 0.2em;\n transition: border-color 300ms ease-out;\n}\n.rs-button-small svg {\n vertical-align: top;\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 button.rs-connect {\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\n.rs-sign-in-form button.rs-connect: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\n.rs-sign-in-form button.rs-connect:active {\n background-color: #3fb34f;\n}\n\n.rs-sign-in-form button.rs-connect:disabled,\n.rs-sign-in-form button.rs-connect:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-form button.rs-connecting svg {\n height: 1em;\n width: auto;\n vertical-align: middle;\n margin-left: 0.5em;\n animation: rs-spin 1s linear infinite;\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\n/* Floating widget styles (top right corner) */\n.rs-floating {\n position: fixed;\n top: 0;\n right: 0;\n}\n\n@keyframes rs-spin {\n 100% {\n transform: rotate(360deg);\n transform: rotate(360deg);\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 border:0;\n}\n\n/* prevent rounded buttons on mobile Safari */\n.rs-widget button,\n.rs-widget input[type="button"] {\n -webkit-appearance: none;\n}\n\n.remotestorage-widget-modal-backdrop {\n display: none;\n position: fixed;\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',t.appendChild(e),t},setModalClass:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}},setupElements:function(){this.rsWidget=document.querySelector(".rs-widget"),this.rsBackdrop=document.querySelector(".remotestorage-widget-modal-backdrop"),this.rsInitial=document.querySelector(".rs-box-initial"),this.rsChoose=document.querySelector(".rs-box-choose"),this.rsConnected=document.querySelector(".rs-box-connected"),this.rsSignIn=document.querySelector(".rs-box-sign-in"),this.rsConnectedLabel=document.querySelector(".rs-box-connected .rs-sub-headline"),this.rsChooseRemoteStorageButton=document.querySelector("button.rs-choose-rs"),this.rsChooseDropboxButton=document.querySelector("button.rs-choose-dropbox"),this.rsChooseGoogleDriveButton=document.querySelector("button.rs-choose-googledrive"),this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.rsSignInForm=document.querySelector(".rs-sign-in-form"),this.rsAddressInput=this.rsSignInForm.querySelector("input[name=rs-user-address]"),this.rsConnectButton=document.querySelector(".rs-connect"),this.rsDisconnectButton=document.querySelector(".rs-disconnect"),this.rsSyncButton=document.querySelector(".rs-sync"),this.rsLogo=document.querySelector(".rs-widget-icon"),this.rsErrorReconnectLink=document.querySelector(".rs-box-error a.rs-reconnect"),this.rsErrorDisconnectButton=document.querySelector(".rs-box-error button.rs-disconnect"),this.rsConnectedUser=document.querySelector(".rs-connected-text h1.rs-user")},setupHandlers:function(){var t=this;this.rs.on("connected",(function(){return t.eventHandler("connected")})),this.rs.on("ready",(function(){return t.eventHandler("ready")})),this.rs.on("disconnected",(function(){return t.eventHandler("disconnected")})),this.rs.on("network-online",(function(){return t.eventHandler("network-online")})),this.rs.on("network-offline",(function(){return t.eventHandler("network-offline")})),this.rs.on("error",(function(e){return t.eventHandler("error",e)})),this.setEventListeners(),this.setClickHandlers()},attach:function(t){var e,n=this.createHtmlTemplate();if(t){if(e=document.getElementById(t),!parent)throw'Failed to find target DOM element with id="'+t+'"'}else e=document.body;e.appendChild(n),this.setupElements(),this.setupHandlers(),this.setInitialState(),this.setModalClass()},setEventListeners:function(){var t=this;this.rsSignInForm.addEventListener("submit",(function(e){e.preventDefault();var n=document.querySelector("input[name=rs-user-address]").value;t.disableConnectButton(),t.rs.connect(n)}))},showChooseOrSignIn:function(){this.rsWidget.classList.contains("rs-modal")&&(this.rsBackdrop.style.display="block",this.rsBackdrop.classList.add("visible")),this.rs.apiKeys&&Object.keys(this.rs.apiKeys).length>0?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(){t.setState("sign-in"),t.rsAddressInput.focus()})),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.rsConnectedLabel.textContent="Synchronizing",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;var t=document.querySelector(".rs-box.rs-selected");t&&t.setAttribute("aria-hidden","false")},close:function(){var t=this;if("error"!==this.state){if(!this.leaveOpen&&this.active){this.closed=!0,this.rsWidget.classList.add("rs-closed");var e=document.querySelector(".rs-box.rs-selected");e&&e.setAttribute("aria-hidden","true")}else 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))}},disableConnectButton:function(){this.rsConnectButton.disabled=!0,this.rsConnectButton.classList.add("rs-connecting"),this.rsConnectButton.innerHTML="Connecting ".concat('\n \n \n \n \n \n \n\n')},enableConnectButton:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")},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-".concat(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.enableConnectButton()},handleSyncError:function(t){console.debug("Encountered SyncError",t),this.setOffline()},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);document.querySelector(".rs-box-connected .rs-sub-headline").innerHTML="Synced ".concat(e," seconds ago")}},isSmallScreen:function(){return window.innerWidth<421}};const l=n;return e.default})()})); +!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()}(self,(function(){return(()=>{"use strict";var t={d:(e,n)=>{for(var l in n)t.o(n,l)&&!t.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:n[l]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>l});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,n=new Array(e),l=0;l

Connect your storage

To sync data with your account
';var e=document.createElement("style");return e.innerHTML='#remotestorage-widget {\n z-index: 21000000;\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.6em 0.7em;\n margin-left: 0.2em;\n transition: border-color 300ms ease-out;\n}\n.rs-button-small svg {\n vertical-align: top;\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 button.rs-connect {\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\n.rs-sign-in-form button.rs-connect: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\n.rs-sign-in-form button.rs-connect:active {\n background-color: #3fb34f;\n}\n\n.rs-sign-in-form button.rs-connect:disabled,\n.rs-sign-in-form button.rs-connect:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-form button.rs-connecting svg {\n height: 1em;\n width: auto;\n vertical-align: middle;\n margin-left: 0.5em;\n animation: rs-spin 1s linear infinite;\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\n/* Floating widget styles (top right corner) */\n.rs-floating {\n position: fixed;\n top: 0;\n right: 0;\n}\n\n@keyframes rs-spin {\n 100% {\n transform: rotate(360deg);\n transform: rotate(360deg);\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 border:0;\n}\n\n/* prevent rounded buttons on mobile Safari */\n.rs-widget button,\n.rs-widget input[type="button"] {\n -webkit-appearance: none;\n}\n\n.remotestorage-widget-modal-backdrop {\n display: none;\n position: fixed;\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',t.appendChild(e),t},setModalClass:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}},setupElements:function(){this.rsWidget=document.querySelector(".rs-widget"),this.rsBackdrop=document.querySelector(".remotestorage-widget-modal-backdrop"),this.rsInitial=document.querySelector(".rs-box-initial"),this.rsChoose=document.querySelector(".rs-box-choose"),this.rsConnected=document.querySelector(".rs-box-connected"),this.rsSignIn=document.querySelector(".rs-box-sign-in"),this.rsConnectedLabel=document.querySelector(".rs-box-connected .rs-sub-headline"),this.rsChooseRemoteStorageButton=document.querySelector("button.rs-choose-rs"),this.rsChooseDropboxButton=document.querySelector("button.rs-choose-dropbox"),this.rsChooseGoogleDriveButton=document.querySelector("button.rs-choose-googledrive"),this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.rsSignInForm=document.querySelector(".rs-sign-in-form"),this.rsAddressInput=this.rsSignInForm.querySelector("input[name=rs-user-address]"),this.rsConnectButton=document.querySelector(".rs-connect"),this.rsDisconnectButton=document.querySelector(".rs-disconnect"),this.rsSyncButton=document.querySelector(".rs-sync"),this.rsLogo=document.querySelector(".rs-widget-icon"),this.rsErrorReconnectLink=document.querySelector(".rs-box-error a.rs-reconnect"),this.rsErrorDisconnectButton=document.querySelector(".rs-box-error button.rs-disconnect"),this.rsConnectedUser=document.querySelector(".rs-connected-text h1.rs-user")},setupHandlers:function(){var t=this;this.rs.on("connected",(function(){return t.eventHandler("connected")})),this.rs.on("ready",(function(){return t.eventHandler("ready")})),this.rs.on("disconnected",(function(){return t.eventHandler("disconnected")})),this.rs.on("network-online",(function(){return t.eventHandler("network-online")})),this.rs.on("network-offline",(function(){return t.eventHandler("network-offline")})),this.rs.on("error",(function(e){return t.eventHandler("error",e)})),this.setEventListeners(),this.setClickHandlers()},attach:function(t){var e,n=this.createHtmlTemplate();if(t){if(e=document.getElementById(t),!parent)throw'Failed to find target DOM element with id="'+t+'"'}else e=document.body;e.appendChild(n),this.setupElements(),this.setupHandlers(),this.setInitialState(),this.setModalClass()},setEventListeners:function(){var t=this;this.rsSignInForm.addEventListener("submit",(function(e){e.preventDefault();var n=document.querySelector("input[name=rs-user-address]").value;t.disableConnectButton(),t.rs.connect(n)}))},showChooseOrSignIn:function(){this.rsWidget.classList.contains("rs-modal")&&(this.rsBackdrop.style.display="block",this.rsBackdrop.classList.add("visible")),this.rs.apiKeys&&Object.keys(this.rs.apiKeys).length>0?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(){t.setState("sign-in"),t.rsAddressInput.focus()})),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.rsConnectedLabel.textContent="Synchronizing",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;var t=document.querySelector(".rs-box.rs-selected");t&&t.setAttribute("aria-hidden","false")},close:function(){var t=this;if("error"!==this.state){if(!this.leaveOpen&&this.active){this.closed=!0,this.rsWidget.classList.add("rs-closed");var e=document.querySelector(".rs-box.rs-selected");e&&e.setAttribute("aria-hidden","true")}else 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))}},disableConnectButton:function(){this.rsConnectButton.disabled=!0,this.rsConnectButton.classList.add("rs-connecting"),this.rsConnectButton.innerHTML="Connecting ".concat('\n \n \n \n \n \n \n\n')},enableConnectButton:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")},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-".concat(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.enableConnectButton()},handleSyncError:function(t){console.debug("Encountered SyncError",t),this.setOffline()},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);document.querySelector(".rs-box-connected .rs-sub-headline").innerHTML="Synced ".concat(e," seconds ago")}},isSmallScreen:function(){return window.innerWidth<421}};const l=n;return e.default})()})); //# sourceMappingURL=widget.js.map \ No newline at end of file diff --git a/build/widget.js.map b/build/widget.js.map index 06c6dfa..12e0f5c 100644 --- a/build/widget.js.map +++ b/build/widget.js.map @@ -1 +1 @@ -{"version":3,"file":"widget.js","mappings":"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","sources":["webpack://Widget/webpack/universalModuleDefinition","webpack://Widget/webpack/bootstrap","webpack://Widget/webpack/runtime/define property getters","webpack://Widget/webpack/runtime/hasOwnProperty shorthand","webpack://Widget/./src/widget.js","webpack://Widget/./src/assets/widget.html","webpack://Widget/./src/assets/styles.css","webpack://Widget/./src/assets/circle-open.svg"],"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})(self, function() {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","import widgetHtml from './assets/widget.html';\nimport widgetCss from './assets/styles.css';\nimport circleOpenSvg from './assets/circle-open.svg';\n\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 */\nconst 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.syncInProgress = true;\n this.rsSyncButton.classList.add(\"rs-rotate\");\n setTimeout(() => {\n if (!this.syncInProgress) return;\n this.rsConnectedLabel.textContent = 'Synchronizing';\n }, 1000);\n break;\n case 'sync-done':\n this.syncInProgress = false;\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 this.rsConnectedLabel.textContent = '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) return;\n this.log('Setting state ', state);\n\n let lastSelected = document.querySelector('.rs-box.rs-selected');\n if (lastSelected) {\n lastSelected.classList.remove('rs-selected');\n lastSelected.setAttribute('aria-hidden', 'true');\n }\n\n let toSelect = document.querySelector('.rs-box.rs-box-'+state);\n if (toSelect) {\n toSelect.classList.add('rs-selected');\n toSelect.setAttribute('aria-hidden', 'false');\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 * 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 element.id = \"remotestorage-widget\";\n element.innerHTML = widgetHtml;\n\n const style = document.createElement('style');\n style.innerHTML = widgetCss;\n element.appendChild(style);\n\n return element;\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.rsAddressInput = this.rsSignInForm.querySelector('input[name=rs-user-address]');\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 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 this.rsSignInForm.addEventListener('submit', (e) => {\n e.preventDefault();\n let userAddress = document.querySelector('input[name=rs-user-address]').value;\n this.disableConnectButton();\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', () => {\n this.setState('sign-in');\n this.rsAddressInput.focus();\n });\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.rsConnectedLabel.textContent = 'Synchronizing';\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 let selected = document.querySelector('.rs-box.rs-selected');\n if (selected) {\n selected.setAttribute('aria-hidden', 'false');\n }\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 let selected = document.querySelector('.rs-box.rs-selected');\n if (selected) {\n selected.setAttribute('aria-hidden', 'true');\n }\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 * Disable the connect button and indicate connect activity\n *\n * @private\n */\n disableConnectButton () {\n this.rsConnectButton.disabled = true;\n this.rsConnectButton.classList.add('rs-connecting');\n const circleSpinner = circleOpenSvg;\n this.rsConnectButton.innerHTML = `Connecting ${circleSpinner}`;\n },\n\n /**\n * (Re)enable the connect button and reset to original state\n *\n * @private\n */\n enableConnectButton () {\n this.rsConnectButton.disabled = false;\n this.rsConnectButton.textContent = 'Connect';\n this.rsConnectButton.classList.remove('rs-connecting');\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.enableConnectButton();\n },\n\n handleSyncError (error) {\n console.debug('Encountered SyncError', error);\n this.setOffline();\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\nexport default Widget;\n","// Module\nvar code = \"

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// Exports\nexport default code;","export default \"#remotestorage-widget {\\n z-index: 21000000;\\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.6em 0.7em;\\n margin-left: 0.2em;\\n transition: border-color 300ms ease-out;\\n}\\n.rs-button-small svg {\\n vertical-align: top;\\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 button.rs-connect {\\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\\n.rs-sign-in-form button.rs-connect: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\\n.rs-sign-in-form button.rs-connect:active {\\n background-color: #3fb34f;\\n}\\n\\n.rs-sign-in-form button.rs-connect:disabled,\\n.rs-sign-in-form button.rs-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg {\\n height: 1em;\\n width: auto;\\n vertical-align: middle;\\n margin-left: 0.5em;\\n animation: rs-spin 1s linear infinite;\\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\\n/* Floating widget styles (top right corner) */\\n.rs-floating {\\n position: fixed;\\n top: 0;\\n right: 0;\\n}\\n\\n@keyframes rs-spin {\\n 100% {\\n transform: rotate(360deg);\\n transform: rotate(360deg);\\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 border:0;\\n}\\n\\n/* prevent rounded buttons on mobile Safari */\\n.rs-widget button,\\n.rs-widget input[type=\\\"button\\\"] {\\n -webkit-appearance: none;\\n}\\n\\n.remotestorage-widget-modal-backdrop {\\n display: none;\\n position: fixed;\\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\";","export default \"\\n \\n \\n \\n \\n \\n \\n\\n\";"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Widget","remoteStorage","options","this","rs","leaveOpen","autoCloseAfter","skipInitial","logging","modalBackdrop","active","online","closed","lastSynced","lastSyncedUpdateLoop","log","msg","console","debug","eventHandler","event","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","createHtmlTemplate","element","createElement","id","style","appendChild","setModalClass","isSmallScreen","setupElements","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsErrorBox","apiKeys","parentNode","removeChild","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","setupHandlers","error","setEventListeners","setClickHandlers","attach","elementId","parentContainerEl","domElement","getElementById","parent","body","addEventListener","e","preventDefault","value","disableConnectButton","connect","display","keys","length","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","enableConnectButton","showErrorBox","errorMsg","hideErrorBox","msgContainer","message","code","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth"],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"widget.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIH,GACe,iBAAZC,QACdA,QAAgB,OAAID,IAEpBD,EAAa,OAAIC,IARnB,CASGK,MAAM,WACT,M,mBCTA,IAAIC,EAAsB,CCA1B,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,MCJ3E,EAAwB,CAACM,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,I,4BCgBlF,IAAMI,EAAS,SAASC,GAA2B,IAAZC,EAAY,uDAAJ,GAQ7C,GAPAC,KAAKC,GAAKH,EAEVE,KAAKE,YAAiBH,EAAQG,WAAYH,EAAQG,UAClDF,KAAKG,eAAiBJ,EAAQI,eAAiBJ,EAAQI,eAAiB,KACxEH,KAAKI,cAAiBL,EAAQK,aAAcL,EAAQK,YACpDJ,KAAKK,UAAiBN,EAAQM,SAAUN,EAAQM,QAE5CN,EAAQJ,eAAe,iBAAkB,CAC3C,GAAqC,kBAA1BI,EAAQO,eAAyD,qBAA1BP,EAAQO,cACxD,KAAM,mEAERN,KAAKM,cAAiBP,EAAQO,mBAE9BN,KAAKM,cAAiB,mBAIxBN,KAAKO,QAAS,EAGdP,KAAKQ,QAAS,EAGdR,KAAKS,QAAS,EAEdT,KAAKU,WAAa,KAClBV,KAAKW,qBAAuB,MAG9Bd,EAAOH,UAAY,CAEjBkB,IAFiB,WAGf,GAAIZ,KAAKK,QAAS,8BADZQ,EACY,yBADZA,EACY,iBAChB,EAAAC,SAAQC,MAAR,SAAc,gBAAd,OAAiCF,MAKrCG,aATiB,SASHC,EAAOJ,GAAK,WAExB,OADAb,KAAKY,IAAI,UAAWK,GACZA,GACN,IAAK,QACHjB,KAAKkB,SAASlB,KAAKmB,OACnB,MACF,IAAK,gBACHnB,KAAKoB,gBAAiB,EACtBpB,KAAKqB,aAAaC,UAAUC,IAAI,aAChCC,YAAW,WACJ,EAAKJ,iBACV,EAAKK,iBAAiBC,YAAc,mBACnC,KACH,MACF,IAAK,YACH1B,KAAKoB,gBAAiB,EACtBpB,KAAKqB,aAAaC,UAAUK,OAAO,aAE/B3B,KAAK4B,SAASN,UAAUO,SAAS,2BAChC7B,KAAKC,GAAG6B,OAAOtB,OAClBR,KAAK+B,yBACI/B,KAAKC,GAAG6B,OAAOtB,SACxBR,KAAKU,WAAa,IAAIsB,KACtBhC,KAAKyB,iBAAiBC,YAAc,oBAGjC1B,KAAKS,QAAUT,KAAKiC,yBACvBT,WAAWxB,KAAKkC,MAAMC,KAAKnC,MAAOA,KAAKG,gBAEzC,MACF,IAAK,eACHH,KAAKO,QAAS,EACdP,KAAKoC,YACLpC,KAAKqC,kBACLrC,KAAKsC,OACLtC,KAAKuC,kBACL,MACF,IAAK,YACHvC,KAAKO,QAAS,EACdP,KAAKQ,QAAS,EACVR,KAAKC,GAAGuC,WAAW,SACrBxC,KAAKiC,yBAA0B,EAC/BjC,KAAKC,GAAGwC,GAAG,iBAAiB,kBAAM,EAAKzB,aAAa,oBACpDhB,KAAKC,GAAGwC,GAAG,aAAa,kBAAM,EAAKzB,aAAa,kBAEhDhB,KAAKqB,aAAaC,UAAUC,IAAI,aAChCC,WAAWxB,KAAKkC,MAAMC,KAAKnC,MAAOA,KAAKG,iBAEzC,IAAIuC,EAAgB1C,KAAKC,GAAG6B,OAAOa,YACnC3C,KAAK4C,gBAAgBC,UAAYH,EACjC1C,KAAKqC,gBAAgBrC,KAAKC,GAAG6C,SAC7B9C,KAAKyB,iBAAiBC,YAAc,YACpC1B,KAAKkB,SAAS,aACd,MACF,IAAK,kBACHlB,KAAK+C,aACL,MACF,IAAK,iBACH/C,KAAKoC,YACL,MACF,IAAK,QACHpC,KAAKqC,gBAAgBrC,KAAKC,GAAG6C,SAEZ,mBAAbjC,EAAImC,KACNhD,KAAKiD,qBAAqBpC,GACJ,cAAbA,EAAImC,KACbhD,KAAKkD,gBAAgBrC,GACC,iBAAbA,EAAImC,KACbhD,KAAKmD,mBAAmBtC,GAExBC,QAAQC,MAAM,8BAA+BF,KAMrDK,SArFiB,SAqFPC,GACR,GAAKA,EAAL,CACAnB,KAAKY,IAAI,iBAAkBO,GAE3B,IAAIiC,EAAeC,SAASC,cAAc,uBACtCF,IACFA,EAAa9B,UAAUK,OAAO,eAC9ByB,EAAaG,aAAa,cAAe,SAG3C,IAAIC,EAAWH,SAASC,cAAc,kBAAkBnC,GACpDqC,IACFA,EAASlC,UAAUC,IAAI,eACvBiC,EAASD,aAAa,cAAe,UAGvC,IAAIE,EAAoBzD,KAAK4B,SAAS8B,UAAUC,MAAM,iBAAiB,GACvE3D,KAAK4B,SAASN,UAAUK,OAAO8B,GAC/BzD,KAAK4B,SAASN,UAAUC,IAAxB,mBAAwCJ,GAASnB,KAAKmB,QAEtDnB,KAAKmB,MAAQA,IAQfoB,gBAjHiB,WAkHXvC,KAAKI,YACPJ,KAAK4D,qBAEL5D,KAAKkB,SAAS,YAWlB2C,mBAhIiB,WAiIf,IAAMC,EAAUT,SAASU,cAAc,OACvCD,EAAQE,GAAK,uBACbF,EAAQjB,UChLD,y00DDkLP,IAAMoB,EAAQZ,SAASU,cAAc,SAIrC,OAHAE,EAAMpB,UEpLV,m8PFqLIiB,EAAQI,YAAYD,GAEbH,GASTK,cAlJiB,WAmJf,GAAInE,KAAKM,cAAe,CACtB,GAA2B,qBAAvBN,KAAKM,gBACDN,KAAKoE,gBACX,OAEFpE,KAAK4B,SAASN,UAAUC,IAAI,cAShC8C,cAjKiB,WAkKfrE,KAAK4B,SAAWyB,SAASC,cAAc,cACvCtD,KAAKsE,WAAajB,SAASC,cAAc,wCACzCtD,KAAKuE,UAAYlB,SAASC,cAAc,mBACxCtD,KAAKwE,SAAWnB,SAASC,cAAc,kBACvCtD,KAAKyE,YAAcpB,SAASC,cAAc,qBAC1CtD,KAAK0E,SAAWrB,SAASC,cAAc,mBAEvCtD,KAAKyB,iBAAmB4B,SAASC,cAAc,sCAC/CtD,KAAK2E,4BAA8BtB,SAASC,cAAc,uBAC1DtD,KAAK4E,sBAAwBvB,SAASC,cAAc,4BACpDtD,KAAK6E,0BAA4BxB,SAASC,cAAc,gCACxDtD,KAAK8E,WAAazB,SAASC,cAAc,mCAInCtD,KAAKC,GAAG8E,QAAQpF,eAAe,gBACnCK,KAAK6E,0BAA0BG,WAAWC,YAAYjF,KAAK6E,2BAGvD7E,KAAKC,GAAG8E,QAAQpF,eAAe,YACnCK,KAAK4E,sBAAsBI,WAAWC,YAAYjF,KAAK4E,uBAGzD5E,KAAKkF,aAAe7B,SAASC,cAAc,oBAC3CtD,KAAKmF,eAAiBnF,KAAKkF,aAAa5B,cAAc,+BACtDtD,KAAKoF,gBAAkB/B,SAASC,cAAc,eAE9CtD,KAAKqF,mBAAqBhC,SAASC,cAAc,kBACjDtD,KAAKqB,aAAegC,SAASC,cAAc,YAC3CtD,KAAKsF,OAASjC,SAASC,cAAc,mBAErCtD,KAAKuF,qBAAuBlC,SAASC,cAAc,gCACnDtD,KAAKwF,wBAA0BnC,SAASC,cAAc,sCAEtDtD,KAAK4C,gBAAkBS,SAASC,cAAc,kCAQhDmC,cA5MiB,WA4MA,WACfzF,KAAKC,GAAGwC,GAAG,aAAa,kBAAM,EAAKzB,aAAa,gBAChDhB,KAAKC,GAAGwC,GAAG,SAAS,kBAAM,EAAKzB,aAAa,YAC5ChB,KAAKC,GAAGwC,GAAG,gBAAgB,kBAAM,EAAKzB,aAAa,mBACnDhB,KAAKC,GAAGwC,GAAG,kBAAkB,kBAAM,EAAKzB,aAAa,qBACrDhB,KAAKC,GAAGwC,GAAG,mBAAmB,kBAAM,EAAKzB,aAAa,sBACtDhB,KAAKC,GAAGwC,GAAG,SAAS,SAACiD,GAAD,OAAW,EAAK1E,aAAa,QAAS0E,MAE1D1F,KAAK2F,oBACL3F,KAAK4F,oBAWPC,OAhOiB,SAgOTC,GACN,IAEIC,EAFEC,EAAahG,KAAK6D,qBAIxB,GAAIiC,GAEF,GADAC,EAAoB1C,SAAS4C,eAAeH,IACvCI,OACH,KAAM,8CAAiDJ,EAAY,SAGrEC,EAAoB1C,SAAS8C,KAE/BJ,EAAkB7B,YAAY8B,GAE9BhG,KAAKqE,gBACLrE,KAAKyF,gBACLzF,KAAKuC,kBACLvC,KAAKmE,iBAGPwB,kBArPiB,WAqPI,WACnB3F,KAAKkF,aAAakB,iBAAiB,UAAU,SAACC,GAC5CA,EAAEC,iBACF,IAAI3D,EAAcU,SAASC,cAAc,+BAA+BiD,MACxE,EAAKC,uBACL,EAAKvG,GAAGwG,QAAQ9D,OAWpBiB,mBArQiB,WAsQX5D,KAAK4B,SAASN,UAAUO,SAAS,cACnC7B,KAAKsE,WAAWL,MAAMyC,QAAU,QAChC1G,KAAKsE,WAAWhD,UAAUC,IAAI,YAG5BvB,KAAKC,GAAG8E,SAAW3F,OAAOuH,KAAK3G,KAAKC,GAAG8E,SAAS6B,OAAS,EAC3D5G,KAAKkB,SAAS,UAEdlB,KAAKkB,SAAS,YAIlB0E,iBAlRiB,WAkRG,WAElB5F,KAAKuE,UAAU6B,iBAAiB,SAAS,kBAAM,EAAKxC,wBAGpD5D,KAAK2E,4BAA4ByB,iBAAiB,SAAS,WACzD,EAAKlF,SAAS,WACd,EAAKiE,eAAe0B,WAItB7G,KAAK4E,sBAAsBwB,iBAAiB,SAAS,kBAAM,EAAKnG,GAAL,QAAmBwG,aAG9EzG,KAAK6E,0BAA0BuB,iBAAiB,SAAS,kBAAM,EAAKnG,GAAL,YAAuBwG,aAGtFzG,KAAKqF,mBAAmBe,iBAAiB,SAAS,kBAAM,EAAKnG,GAAG6G,gBAEhE9G,KAAKuF,qBAAqBa,iBAAiB,SAAS,kBAAM,EAAKnG,GAAG8G,eAClE/G,KAAKwF,wBAAwBY,iBAAiB,SAAS,kBAAM,EAAKnG,GAAG6G,gBAGjE9G,KAAKC,GAAGuC,WAAW,SACrBxC,KAAKqB,aAAa+E,iBAAiB,SAAS,WACtC,EAAK/E,aAAaC,UAAUO,SAAS,cACvC,EAAK5B,GAAG+G,WACR,EAAK3F,aAAaC,UAAUK,OAAO,eAEnC,EAAKF,iBAAiBC,YAAc,gBACpC,EAAKzB,GAAGgH,YACR,EAAK5F,aAAaC,UAAUC,IAAI,iBAMtC8B,SAAS+C,iBAAiB,SAAS,kBAAM,EAAKlE,WAG9ClC,KAAK4B,SAASwE,iBAAiB,SAAS,SAAAC,GAAC,OAAIA,EAAEa,qBAG/ClH,KAAKsF,OAAOc,iBAAiB,SAAS,kBAAM,EAAKe,aASnDA,OAtUiB,WAuUXnH,KAAKS,OACPT,KAAKsC,OAEc,YAAftC,KAAKmB,MACPnB,KAAK4D,qBAEL5D,KAAKkC,SAQXI,KArViB,WAsVftC,KAAKS,QAAS,EACdT,KAAK4B,SAASN,UAAUK,OAAO,aAC/B3B,KAAKiC,yBAA0B,EAE/B,IAAImF,EAAW/D,SAASC,cAAc,uBAClC8D,GACFA,EAAS7D,aAAa,cAAe,UAUzCrB,MAtWiB,WAsWR,WAEP,GAAmB,UAAflC,KAAKmB,MAAT,CAEA,IAAKnB,KAAKE,WAAaF,KAAKO,OAAQ,CAClCP,KAAKS,QAAS,EACdT,KAAK4B,SAASN,UAAUC,IAAI,aAC5B,IAAI6F,EAAW/D,SAASC,cAAc,uBAClC8D,GACFA,EAAS7D,aAAa,cAAe,aAE9BvD,KAAKO,OACdP,KAAKkB,SAAS,aAEdlB,KAAKuC,kBAGHvC,KAAK4B,SAASN,UAAUO,SAAS,cACnC7B,KAAKsE,WAAWhD,UAAUK,OAAO,WACjCH,YAAW,WACT,EAAK8C,WAAWL,MAAMyC,QAAU,SAC/B,QASPF,qBApYiB,WAqYfxG,KAAKoF,gBAAgBiC,UAAW,EAChCrH,KAAKoF,gBAAgB9D,UAAUC,IAAI,iBAEnCvB,KAAKoF,gBAAgBvC,UAArB,qBGtbJ,+UH8bEyE,oBAhZiB,WAiZftH,KAAKoF,gBAAgBiC,UAAW,EAChCrH,KAAKoF,gBAAgB1D,YAAc,UACnC1B,KAAKoF,gBAAgB9D,UAAUK,OAAO,kBAUxCoB,WA7ZiB,WA8ZX/C,KAAKQ,SACPR,KAAK4B,SAASN,UAAUC,IAAI,cAC5BvB,KAAKyB,iBAAiBC,YAAc,UACpC1B,KAAKQ,QAAS,IASlB4B,UA1aiB,WA2aVpC,KAAKQ,SACRR,KAAK4B,SAASN,UAAUK,OAAO,cAC3B3B,KAAKO,SACPP,KAAKyB,iBAAiBC,YAAc,cAGxC1B,KAAKQ,QAAS,GAWhB6B,gBA5biB,SA4bAS,GACf9C,KAAK4B,SAASN,UAAUK,OAAO,4BAC/B3B,KAAK4B,SAASN,UAAUK,OAAO,sBAC/B3B,KAAK4B,SAASN,UAAUK,OAAO,0BAE3BmB,GACF9C,KAAK4B,SAASN,UAAUC,IAAxB,qBAA0CuB,KAI9CyE,aAtciB,SAscHC,GACZxH,KAAK8E,WAAWjC,UAAY2E,EAC5BxH,KAAKkB,SAAS,UAGhBuG,aA3ciB,WA4cfzH,KAAK8E,WAAWjC,UAAY,GAC5B7C,KAAKkC,SAGPe,qBAhdiB,SAgdKyC,GACpB,IAAIgC,EAAerE,SAASC,cAAc,qBAC1CoE,EAAa7E,UAAY6C,EAAMiC,QAC/BD,EAAapG,UAAUK,OAAO,aAC9B+F,EAAapG,UAAUC,IAAI,cAC3BvB,KAAKsH,uBAGPpE,gBAxdiB,SAwdAwC,GACf5E,QAAQC,MAAM,wBAAyB2E,GACvC1F,KAAK+C,cAGPI,mBA7diB,SA6dGuC,GACdA,EAAMkC,MAAuB,kBAAflC,EAAMkC,KACtB5H,KAAKC,GAAG6G,cAER9G,KAAKsC,OACLtC,KAAKuH,aAAa7B,EAAMiC,QAAU,KAClC3H,KAAK8E,WAAWZ,YAAYlE,KAAKuF,sBACjCvF,KAAKuF,qBAAqBjE,UAAUK,OAAO,eAI/CI,uBAxeiB,WAyef,GAAK/B,KAAKU,WAAV,CACA,IAAImH,EAAM,IAAI7F,KACV8F,EAAuBC,KAAKC,OAAOH,EAAII,UAAYjI,KAAKU,WAAWuH,WAAW,KAC9D5E,SAASC,cAAc,sCAC7BT,UAAd,iBAAoCiF,EAApC,kBAGF1D,cAhfiB,WAiff,OAAO8D,OAAOC,WAAa,MAI/B,U","sources":["webpack://Widget/webpack/universalModuleDefinition","webpack://Widget/webpack/bootstrap","webpack://Widget/webpack/runtime/define property getters","webpack://Widget/webpack/runtime/hasOwnProperty shorthand","webpack://Widget/./src/widget.js","webpack://Widget/./src/assets/widget.html","webpack://Widget/./src/assets/styles.css","webpack://Widget/./src/assets/circle-open.svg"],"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})(self, function() {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","import widgetHtml from './assets/widget.html';\nimport widgetCss from './assets/styles.css';\nimport circleOpenSvg from './assets/circle-open.svg';\n\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 */\nconst 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.syncInProgress = true;\n this.rsSyncButton.classList.add(\"rs-rotate\");\n setTimeout(() => {\n if (!this.syncInProgress) return;\n this.rsConnectedLabel.textContent = 'Synchronizing';\n }, 1000);\n break;\n case 'sync-done':\n this.syncInProgress = false;\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 this.rsConnectedLabel.textContent = '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) return;\n this.log('Setting state ', state);\n\n let lastSelected = document.querySelector('.rs-box.rs-selected');\n if (lastSelected) {\n lastSelected.classList.remove('rs-selected');\n lastSelected.setAttribute('aria-hidden', 'true');\n }\n\n let toSelect = document.querySelector('.rs-box.rs-box-'+state);\n if (toSelect) {\n toSelect.classList.add('rs-selected');\n toSelect.setAttribute('aria-hidden', 'false');\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 * 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 element.id = \"remotestorage-widget\";\n element.innerHTML = widgetHtml;\n\n const style = document.createElement('style');\n style.innerHTML = widgetCss;\n element.appendChild(style);\n\n return element;\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.rsAddressInput = this.rsSignInForm.querySelector('input[name=rs-user-address]');\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 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 this.rsSignInForm.addEventListener('submit', (e) => {\n e.preventDefault();\n let userAddress = document.querySelector('input[name=rs-user-address]').value;\n this.disableConnectButton();\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', () => {\n this.setState('sign-in');\n this.rsAddressInput.focus();\n });\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.rsConnectedLabel.textContent = 'Synchronizing';\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 let selected = document.querySelector('.rs-box.rs-selected');\n if (selected) {\n selected.setAttribute('aria-hidden', 'false');\n }\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 let selected = document.querySelector('.rs-box.rs-selected');\n if (selected) {\n selected.setAttribute('aria-hidden', 'true');\n }\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 * Disable the connect button and indicate connect activity\n *\n * @private\n */\n disableConnectButton () {\n this.rsConnectButton.disabled = true;\n this.rsConnectButton.classList.add('rs-connecting');\n const circleSpinner = circleOpenSvg;\n this.rsConnectButton.innerHTML = `Connecting ${circleSpinner}`;\n },\n\n /**\n * (Re)enable the connect button and reset to original state\n *\n * @private\n */\n enableConnectButton () {\n this.rsConnectButton.disabled = false;\n this.rsConnectButton.textContent = 'Connect';\n this.rsConnectButton.classList.remove('rs-connecting');\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.enableConnectButton();\n },\n\n handleSyncError (error) {\n console.debug('Encountered SyncError', error);\n this.setOffline();\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\nexport default Widget;\n","// Module\nvar code = \"

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 provider of your choice.

\";\n// Exports\nexport default code;","export default \"#remotestorage-widget {\\n z-index: 21000000;\\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.6em 0.7em;\\n margin-left: 0.2em;\\n transition: border-color 300ms ease-out;\\n}\\n.rs-button-small svg {\\n vertical-align: top;\\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 button.rs-connect {\\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\\n.rs-sign-in-form button.rs-connect: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\\n.rs-sign-in-form button.rs-connect:active {\\n background-color: #3fb34f;\\n}\\n\\n.rs-sign-in-form button.rs-connect:disabled,\\n.rs-sign-in-form button.rs-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg {\\n height: 1em;\\n width: auto;\\n vertical-align: middle;\\n margin-left: 0.5em;\\n animation: rs-spin 1s linear infinite;\\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\\n/* Floating widget styles (top right corner) */\\n.rs-floating {\\n position: fixed;\\n top: 0;\\n right: 0;\\n}\\n\\n@keyframes rs-spin {\\n 100% {\\n transform: rotate(360deg);\\n transform: rotate(360deg);\\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 border:0;\\n}\\n\\n/* prevent rounded buttons on mobile Safari */\\n.rs-widget button,\\n.rs-widget input[type=\\\"button\\\"] {\\n -webkit-appearance: none;\\n}\\n\\n.remotestorage-widget-modal-backdrop {\\n display: none;\\n position: fixed;\\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\";","export default \"\\n \\n \\n \\n \\n \\n \\n\\n\";"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Widget","remoteStorage","options","this","rs","leaveOpen","autoCloseAfter","skipInitial","logging","modalBackdrop","active","online","closed","lastSynced","lastSyncedUpdateLoop","log","msg","console","debug","eventHandler","event","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","createHtmlTemplate","element","createElement","id","style","appendChild","setModalClass","isSmallScreen","setupElements","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsErrorBox","apiKeys","parentNode","removeChild","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","setupHandlers","error","setEventListeners","setClickHandlers","attach","elementId","parentContainerEl","domElement","getElementById","parent","body","addEventListener","e","preventDefault","value","disableConnectButton","connect","display","keys","length","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","enableConnectButton","showErrorBox","errorMsg","hideErrorBox","msgContainer","message","code","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth"],"sourceRoot":""} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 10dadaa..22b0130 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "remotestorage-widget", - "version": "1.5.3", + "version": "1.5.4", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index 46c2ce9..a0940a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "remotestorage-widget", - "version": "1.5.3", + "version": "1.5.4", "description": "remoteStorage.js connect widget", "main": "build/widget.js", "scripts": {