From 5e7d988136adba0250041898a963db3ea37efe99 Mon Sep 17 00:00:00 2001 From: Yashar PourMohammad Date: Tue, 24 Oct 2023 23:09:23 +0000 Subject: [PATCH 01/10] Implementing support for solid backend --- build/widget.js | 2 +- build/widget.js.map | 2 +- package-lock.json | 30 ++++++++---------------- src/assets/styles.css | 6 +++++ src/assets/widget.html | 48 ++++++++++++++++++++++++++++++++++++++ src/widget.js | 53 ++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 119 insertions(+), 22 deletions(-) diff --git a/build/widget.js b/build/widget.js index dea776e..197fe31 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={};function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function l(t,e){for(var n=0;ns});var i=function(){function t(e){var l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(n(this,t),this.rs=e,this.leaveOpen=!!l.leaveOpen&&l.leaveOpen,this.autoCloseAfter=l.autoCloseAfter?l.autoCloseAfter:1500,this.skipInitial=!!l.skipInitial&&l.skipInitial,this.logging=!!l.logging&&l.logging,l.hasOwnProperty("modalBackdrop")){if("boolean"!=typeof l.modalBackdrop&&"onlySmallScreens"!==l.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=l.modalBackdrop}else this.modalBackdrop="onlySmallScreens";this.active=!1,this.online=!1,this.closed=!1,this.lastSynced=null,this.lastSyncedUpdateLoop=null}var e,i;return e=t,i=[{key:"log",value: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:not([aria-hidden=true]) {\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 display: block;\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: block;\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: block;\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}},{key:"setModalClass",value:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}}},{key:"setupElements",value: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")}},{key:"setupHandlers",value: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()}},{key:"attach",value: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()}},{key:"setEventListeners",value: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)}))}},{key:"showChooseOrSignIn",value: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")}},{key:"setClickHandlers",value: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()}))}},{key:"toggle",value:function(){this.closed?this.open():"initial"===this.state?this.showChooseOrSignIn():this.close()}},{key:"open",value: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")}},{key:"close",value: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))}}},{key:"disableConnectButton",value:function(){this.rsConnectButton.disabled=!0,this.rsConnectButton.classList.add("rs-connecting"),this.rsConnectButton.innerHTML="Connecting ".concat('\n \n \n \n \n \n \n\n')}},{key:"enableConnectButton",value:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")}},{key:"setOffline",value:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)}},{key:"setOnline",value:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0}},{key:"setBackendClass",value: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))}},{key:"showErrorBox",value:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")}},{key:"hideErrorBox",value:function(){this.rsErrorBox.innerHTML="",this.close()}},{key:"handleDiscoveryError",value: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()}},{key:"handleSyncError",value:function(t){console.debug("Encountered SyncError",t),this.setOffline()}},{key:"handleUnauthorized",value: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"))}},{key:"updateLastSyncedOutput",value: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")}}},{key:"isSmallScreen",value:function(){return window.innerWidth<421}}],i&&l(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();const s=i;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,l)=>{for(var n in l)t.o(l,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:l[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function l(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var l=0;ls});var i=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(l(this,t),this.rs=e,this.leaveOpen=!!n.leaveOpen&&n.leaveOpen,this.autoCloseAfter=n.autoCloseAfter?n.autoCloseAfter:1500,this.skipInitial=!!n.skipInitial&&n.skipInitial,this.logging=!!n.logging&&n.logging,n.hasOwnProperty("modalBackdrop")){if("boolean"!=typeof n.modalBackdrop&&"onlySmallScreens"!==n.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=n.modalBackdrop}else this.modalBackdrop="onlySmallScreens";this.active=!1,this.online=!1,this.closed=!1,this.lastSynced=null,this.lastSyncedUpdateLoop=null}var e,i;return e=t,i=[{key:"log",value:function(){if(this.logging){for(var t,e=arguments.length,l=new Array(e),n=0;n

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:not([aria-hidden=true]) {\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 display: block;\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: block;\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: block;\n}\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\n display: none;\n}\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\n display: block;\n}\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\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}},{key:"setModalClass",value:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}}},{key:"setupElements",value:function(){if(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.rsSolid=document.querySelector(".rs-box-solid"),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.rsChooseSolidButton=document.querySelector("button.rs-choose-solid"),this.rsSolidOptions=[document.querySelector("button.rs-option-solid")],this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rsSolidForm=document.querySelector(".rs-solid-form"),this.rsProviderInput=this.rsSolidForm.querySelector("input[name=rs-provider-address]"),this.rsSolidConnectButton=document.querySelector(".rs-solid-connect"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.rs.apiKeys.hasOwnProperty("solid")){var t=this.rs.apiKeys.solid.providers?this.rs.apiKeys.solid.providers:[];if(t.length>0||this.rs.apiKeys.solid.allowAnyProvider){if(t.length>0){this.rsSolidOptions[0].lastElementChild.innerHTML=t[0].name;for(var e=1;e0?this.setState("choose"):this.setState("sign-in")}},{key:"setClickHandlers",value: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.rsChooseSolidButton.addEventListener("click",(function(){t.setState("solid"),t.rsProviderInput.focus()}));for(var e=0;e\n \n \n \n \n \n \n\n')}},{key:"enableConnectButton",value:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")}},{key:"setOffline",value:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)}},{key:"setOnline",value:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0}},{key:"setBackendClass",value:function(t){this.rsWidget.classList.remove("rs-backend-remotestorage"),this.rsWidget.classList.remove("rs-backend-dropbox"),this.rsWidget.classList.remove("rs-backend-googledrive"),this.rsWidget.classList.remove("rs-backend-solid"),t&&this.rsWidget.classList.add("rs-backend-".concat(t))}},{key:"showErrorBox",value:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")}},{key:"hideErrorBox",value:function(){this.rsErrorBox.innerHTML="",this.close()}},{key:"handleDiscoveryError",value: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()}},{key:"handleSyncError",value:function(t){console.debug("Encountered SyncError",t),this.setOffline()}},{key:"handleUnauthorized",value: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"))}},{key:"updateLastSyncedOutput",value: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")}}},{key:"isSmallScreen",value:function(){return window.innerWidth<421}}],i&&n(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();const s=i;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 6d7dff7..d2d4601 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 */\nclass Widget {\n constructor (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\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:not([aria-hidden=true]) {\\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 display: block;\\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: block;\\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: block;\\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","msg","console","debug","event","log","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsErrorBox","apiKeys","parentNode","removeChild","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","display","keys","length","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth"],"sourceRoot":""} \ No newline at end of file +{"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 */\nclass Widget {\n constructor (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\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [document.querySelector('button.rs-option-solid') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.rs.apiKeys.hasOwnProperty('solid')) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.rs.apiKeys.solid.providers ? this.rs.apiKeys.solid.providers : [];\n\n if (providers.length > 0 || this.rs.apiKeys.solid.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.rs.apiKeys.solid.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n // TODO set provider\n this.rs[\"solid\"].connect()\n });\n }\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 this.rsWidget.classList.remove('rs-backend-solid');\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.

Select Identity provider

\";\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:not([aria-hidden=true]) {\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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","msg","console","debug","event","log","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","solid","length","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","display","keys","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","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 5f00bec..1327581 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8740,8 +8740,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz", "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==", - "dev": true, - "requires": {} + "dev": true }, "@webpack-cli/info": { "version": "1.4.1", @@ -8756,8 +8755,7 @@ "version": "1.6.1", "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz", "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==", - "dev": true, - "requires": {} + "dev": true }, "@xtuc/ieee754": { "version": "1.2.0", @@ -8791,8 +8789,7 @@ "version": "1.7.6", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.7.6.tgz", "integrity": "sha512-FlVvVFA1TX6l3lp8VjDnYYq7R1nyW6x3svAt4nDgrWQ9SBaSh9CnbwgSUTasgfNfOG5HlM1ehugCvM+hjo56LA==", - "dev": true, - "requires": {} + "dev": true }, "aggregate-error": { "version": "3.1.0", @@ -9863,8 +9860,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "big.js": { "version": "5.2.2", @@ -11193,8 +11189,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "big.js": { "version": "5.2.2", @@ -11487,8 +11482,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -11926,8 +11920,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "p-limit": { "version": "3.1.0", @@ -12079,8 +12072,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "big.js": { "version": "5.2.2", @@ -12238,8 +12230,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "schema-utils": { "version": "3.1.1", @@ -12493,8 +12484,7 @@ "version": "8.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz", "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==", - "dev": true, - "requires": {} + "dev": true }, "xhr2": { "version": "0.2.1", diff --git a/src/assets/styles.css b/src/assets/styles.css index 378e7bc..ae34df5 100644 --- a/src/assets/styles.css +++ b/src/assets/styles.css @@ -70,6 +70,12 @@ .rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive { display: none; } +.rs-widget.rs-backend-solid svg#rs-main-logo-solid { + display: block; +} +.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid { + display: none; +} polygon.rs-logo-shape { fill: #FF4B03; diff --git a/src/assets/widget.html b/src/assets/widget.html index 4e8567b..b7208ef 100644 --- a/src/assets/widget.html +++ b/src/assets/widget.html @@ -210,6 +210,16 @@ +
@@ -466,6 +476,19 @@

Connect your storage

Google Drive
+
@@ -481,4 +504,29 @@

Connect your storage

+ + diff --git a/src/widget.js b/src/widget.js index 6aa39af..e14ebc7 100644 --- a/src/widget.js +++ b/src/widget.js @@ -211,12 +211,19 @@ class Widget { this.rsChoose = document.querySelector('.rs-box-choose'); this.rsConnected = document.querySelector('.rs-box-connected'); this.rsSignIn = document.querySelector('.rs-box-sign-in'); + this.rsSolid = document.querySelector('.rs-box-solid'); 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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid'); + this.rsSolidOptions = [document.querySelector('button.rs-option-solid') ]; this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message'); + + this.rsSolidForm = document.querySelector('.rs-solid-form'); + this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]'); + this.rsSolidConnectButton = document.querySelector('.rs-solid-connect'); // check if apiKeys is set for Dropbox or Google [googledrive, dropbox] // to show/hide relative buttons only if needed @@ -228,6 +235,38 @@ class Widget { this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton); } + // check if solid provideres are configured to add, show or hide buttons + // only if needed + if (! this.rs.apiKeys.hasOwnProperty('solid')) { + this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton); + } + else { + const providers = this.rs.apiKeys.solid.providers ? this.rs.apiKeys.solid.providers : []; + + if (providers.length > 0 || this.rs.apiKeys.solid.allowAnyProvider) { + if (providers.length > 0) { + this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name; + + for (let i = 1; i < providers.length; i++) { + const previousButton = this.rsSolidOptions[i - 1]; + const nextButton = previousButton.cloneNode(true); + nextButton.lastElementChild.innerHTML = providers[i].name; + previousButton.after(nextButton); + } + } + else { + this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); + } + + if (! this.rs.apiKeys.solid.allowAnyProvider) { + this.rsSolidForm.parentNode.removeChild(this.rsSolidForm); + } + } + else { + this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton); + } + } + this.rsSignInForm = document.querySelector('.rs-sign-in-form'); this.rsAddressInput = this.rsSignInForm.querySelector('input[name=rs-user-address]'); this.rsConnectButton = document.querySelector('.rs-connect'); @@ -333,6 +372,19 @@ class Widget { // Choose Google Drive button this.rsChooseGoogleDriveButton.addEventListener('click', () => this.rs["googledrive"].connect() ); + // Choose Solid button + this.rsChooseSolidButton.addEventListener('click', () => { + this.setState('solid'); + this.rsProviderInput.focus(); + }); + + for (let i = 0; i < this.rsSolidOptions.length; i++) { + this.rsSolidOptions[i].addEventListener('click', () => { + // TODO set provider + this.rs["solid"].connect() + }); + } + // Disconnect button this.rsDisconnectButton.addEventListener('click', () => this.rs.disconnect() ); @@ -491,6 +543,7 @@ class Widget { this.rsWidget.classList.remove('rs-backend-remotestorage'); this.rsWidget.classList.remove('rs-backend-dropbox'); this.rsWidget.classList.remove('rs-backend-googledrive'); + this.rsWidget.classList.remove('rs-backend-solid'); if (backend) { this.rsWidget.classList.add(`rs-backend-${backend}`); From 1a99750e602241f0c636007bae832127fc78b28f Mon Sep 17 00:00:00 2001 From: Yashar PourMohammad Date: Fri, 27 Oct 2023 12:08:38 +0000 Subject: [PATCH 02/10] Solid widget UI done --- build/widget.js | 2 +- build/widget.js.map | 2 +- src/assets/styles.css | 29 +++++++++++++++++++++-------- src/assets/widget.html | 35 ++++++++++++++++++----------------- 4 files changed, 41 insertions(+), 27 deletions(-) diff --git a/build/widget.js b/build/widget.js index 197fe31..cf758d3 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,l)=>{for(var n in l)t.o(l,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:l[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function l(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var l=0;ls});var i=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(l(this,t),this.rs=e,this.leaveOpen=!!n.leaveOpen&&n.leaveOpen,this.autoCloseAfter=n.autoCloseAfter?n.autoCloseAfter:1500,this.skipInitial=!!n.skipInitial&&n.skipInitial,this.logging=!!n.logging&&n.logging,n.hasOwnProperty("modalBackdrop")){if("boolean"!=typeof n.modalBackdrop&&"onlySmallScreens"!==n.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=n.modalBackdrop}else this.modalBackdrop="onlySmallScreens";this.active=!1,this.online=!1,this.closed=!1,this.lastSynced=null,this.lastSyncedUpdateLoop=null}var e,i;return e=t,i=[{key:"log",value:function(){if(this.logging){for(var t,e=arguments.length,l=new Array(e),n=0;n

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:not([aria-hidden=true]) {\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 display: block;\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: block;\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: block;\n}\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\n display: none;\n}\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\n display: block;\n}\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\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}},{key:"setModalClass",value:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}}},{key:"setupElements",value:function(){if(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.rsSolid=document.querySelector(".rs-box-solid"),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.rsChooseSolidButton=document.querySelector("button.rs-choose-solid"),this.rsSolidOptions=[document.querySelector("button.rs-option-solid")],this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rsSolidForm=document.querySelector(".rs-solid-form"),this.rsProviderInput=this.rsSolidForm.querySelector("input[name=rs-provider-address]"),this.rsSolidConnectButton=document.querySelector(".rs-solid-connect"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.rs.apiKeys.hasOwnProperty("solid")){var t=this.rs.apiKeys.solid.providers?this.rs.apiKeys.solid.providers:[];if(t.length>0||this.rs.apiKeys.solid.allowAnyProvider){if(t.length>0){this.rsSolidOptions[0].lastElementChild.innerHTML=t[0].name;for(var e=1;e0?this.setState("choose"):this.setState("sign-in")}},{key:"setClickHandlers",value: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.rsChooseSolidButton.addEventListener("click",(function(){t.setState("solid"),t.rsProviderInput.focus()}));for(var e=0;e\n \n \n \n \n \n \n\n')}},{key:"enableConnectButton",value:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")}},{key:"setOffline",value:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)}},{key:"setOnline",value:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0}},{key:"setBackendClass",value:function(t){this.rsWidget.classList.remove("rs-backend-remotestorage"),this.rsWidget.classList.remove("rs-backend-dropbox"),this.rsWidget.classList.remove("rs-backend-googledrive"),this.rsWidget.classList.remove("rs-backend-solid"),t&&this.rsWidget.classList.add("rs-backend-".concat(t))}},{key:"showErrorBox",value:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")}},{key:"hideErrorBox",value:function(){this.rsErrorBox.innerHTML="",this.close()}},{key:"handleDiscoveryError",value: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()}},{key:"handleSyncError",value:function(t){console.debug("Encountered SyncError",t),this.setOffline()}},{key:"handleUnauthorized",value: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"))}},{key:"updateLastSyncedOutput",value: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")}}},{key:"isSmallScreen",value:function(){return window.innerWidth<421}}],i&&n(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();const s=i;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,l)=>{for(var n in l)t.o(l,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:l[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function l(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var l=0;ls});var i=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(l(this,t),this.rs=e,this.leaveOpen=!!n.leaveOpen&&n.leaveOpen,this.autoCloseAfter=n.autoCloseAfter?n.autoCloseAfter:1500,this.skipInitial=!!n.skipInitial&&n.skipInitial,this.logging=!!n.logging&&n.logging,n.hasOwnProperty("modalBackdrop")){if("boolean"!=typeof n.modalBackdrop&&"onlySmallScreens"!==n.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=n.modalBackdrop}else this.modalBackdrop="onlySmallScreens";this.active=!1,this.online=!1,this.closed=!1,this.lastSynced=null,this.lastSyncedUpdateLoop=null}var e,i;return e=t,i=[{key:"log",value:function(){if(this.logging){for(var t,e=arguments.length,l=new Array(e),n=0;n

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:not([aria-hidden=true]) {\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 display: block;\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: block;\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: block;\n}\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\n display: none;\n}\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\n display: block;\n}\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\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.rs-state-solid .rs-main-logo {\n margin-left: 45%;\n float: none;\n}\n\n.rs-solid-form h3.rs-small-headline {\n margin-top: 10px;\n}\n\n.rs-sign-in-form input[type=text],\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\n.rs-solid-form button.rs-solid-connect:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-form button.rs-connecting svg,\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\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}},{key:"setModalClass",value:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}}},{key:"setupElements",value:function(){if(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.rsSolid=document.querySelector(".rs-box-solid"),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.rsChooseSolidButton=document.querySelector("button.rs-choose-solid"),this.rsSolidOptions=[document.querySelector("button.rs-option-solid")],this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rsSolidForm=document.querySelector(".rs-solid-form"),this.rsProviderInput=this.rsSolidForm.querySelector("input[name=rs-provider-address]"),this.rsSolidConnectButton=document.querySelector(".rs-solid-connect"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.rs.apiKeys.hasOwnProperty("solid")){var t=this.rs.apiKeys.solid.providers?this.rs.apiKeys.solid.providers:[];if(t.length>0||this.rs.apiKeys.solid.allowAnyProvider){if(t.length>0){this.rsSolidOptions[0].lastElementChild.innerHTML=t[0].name;for(var e=1;e0?this.setState("choose"):this.setState("sign-in")}},{key:"setClickHandlers",value: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.rsChooseSolidButton.addEventListener("click",(function(){t.setState("solid"),t.rsProviderInput.focus()}));for(var e=0;e\n \n \n \n \n \n \n\n')}},{key:"enableConnectButton",value:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")}},{key:"setOffline",value:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)}},{key:"setOnline",value:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0}},{key:"setBackendClass",value:function(t){this.rsWidget.classList.remove("rs-backend-remotestorage"),this.rsWidget.classList.remove("rs-backend-dropbox"),this.rsWidget.classList.remove("rs-backend-googledrive"),this.rsWidget.classList.remove("rs-backend-solid"),t&&this.rsWidget.classList.add("rs-backend-".concat(t))}},{key:"showErrorBox",value:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")}},{key:"hideErrorBox",value:function(){this.rsErrorBox.innerHTML="",this.close()}},{key:"handleDiscoveryError",value: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()}},{key:"handleSyncError",value:function(t){console.debug("Encountered SyncError",t),this.setOffline()}},{key:"handleUnauthorized",value: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"))}},{key:"updateLastSyncedOutput",value: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")}}},{key:"isSmallScreen",value:function(){return window.innerWidth<421}}],i&&n(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();const s=i;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 d2d4601..94c9515 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 */\nclass Widget {\n constructor (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\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [document.querySelector('button.rs-option-solid') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.rs.apiKeys.hasOwnProperty('solid')) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.rs.apiKeys.solid.providers ? this.rs.apiKeys.solid.providers : [];\n\n if (providers.length > 0 || this.rs.apiKeys.solid.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.rs.apiKeys.solid.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n // TODO set provider\n this.rs[\"solid\"].connect()\n });\n }\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 this.rsWidget.classList.remove('rs-backend-solid');\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.

Select Identity provider

\";\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:not([aria-hidden=true]) {\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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","msg","console","debug","event","log","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","solid","length","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","display","keys","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","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,CCA1BA,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,MCJ3EF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,I,oSCgB5EI,EAAAA,WACJ,WAAaC,GAA2B,IAAZC,EAAY,uDAAJ,GAQlC,GARsC,UACtCC,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,K,uCAG9B,WACE,GAAIX,KAAKK,QAAS,8BADZO,EACY,yBADZA,EACY,iBAChB,EAAAC,SAAQC,MAAR,SAAc,gBAAd,OAAiCF,O,0BAKrC,SAAcG,EAAOH,GAAK,WAExB,OADAZ,KAAKgB,IAAI,UAAWD,GACZA,GACN,IAAK,QACHf,KAAKiB,SAASjB,KAAKkB,OACnB,MACF,IAAK,gBACHlB,KAAKmB,gBAAiB,EACtBnB,KAAKoB,aAAaC,UAAUC,IAAI,aAChCC,YAAW,WACJ,EAAKJ,iBACV,EAAKK,iBAAiBC,YAAc,mBACnC,KACH,MACF,IAAK,YACHzB,KAAKmB,gBAAiB,EACtBnB,KAAKoB,aAAaC,UAAUK,OAAO,aAE/B1B,KAAK2B,SAASN,UAAUO,SAAS,2BAChC5B,KAAKC,GAAG4B,OAAOrB,OAClBR,KAAK8B,yBACI9B,KAAKC,GAAG4B,OAAOrB,SACxBR,KAAKU,WAAa,IAAIqB,KACtB/B,KAAKwB,iBAAiBC,YAAc,oBAGjCzB,KAAKS,QAAUT,KAAKgC,yBACvBT,WAAWvB,KAAKiC,MAAMC,KAAKlC,MAAOA,KAAKG,gBAEzC,MACF,IAAK,eACHH,KAAKO,QAAS,EACdP,KAAKmC,YACLnC,KAAKoC,kBACLpC,KAAKqC,OACLrC,KAAKsC,kBACL,MACF,IAAK,YACHtC,KAAKO,QAAS,EACdP,KAAKQ,QAAS,EACVR,KAAKC,GAAGsC,WAAW,SACrBvC,KAAKgC,yBAA0B,EAC/BhC,KAAKC,GAAGuC,GAAG,iBAAiB,kBAAM,EAAKC,aAAa,oBACpDzC,KAAKC,GAAGuC,GAAG,aAAa,kBAAM,EAAKC,aAAa,kBAEhDzC,KAAKoB,aAAaC,UAAUC,IAAI,aAChCC,WAAWvB,KAAKiC,MAAMC,KAAKlC,MAAOA,KAAKG,iBAEzC,IAAIuC,EAAgB1C,KAAKC,GAAG4B,OAAOc,YACnC3C,KAAK4C,gBAAgBC,UAAYH,EACjC1C,KAAKoC,gBAAgBpC,KAAKC,GAAG6C,SAC7B9C,KAAKwB,iBAAiBC,YAAc,YACpCzB,KAAKiB,SAAS,aACd,MACF,IAAK,kBACHjB,KAAK+C,aACL,MACF,IAAK,iBACH/C,KAAKmC,YACL,MACF,IAAK,QACHnC,KAAKoC,gBAAgBpC,KAAKC,GAAG6C,SAEZ,mBAAblC,EAAIoC,KACNhD,KAAKiD,qBAAqBrC,GACJ,cAAbA,EAAIoC,KACbhD,KAAKkD,gBAAgBtC,GACC,iBAAbA,EAAIoC,KACbhD,KAAKmD,mBAAmBvC,GAExBC,QAAQC,MAAM,8BAA+BF,M,sBAMrD,SAAUM,GACR,GAAKA,EAAL,CACAlB,KAAKgB,IAAI,iBAAkBE,GAE3B,IAAIkC,EAAeC,SAASC,cAAc,uBACtCF,IACFA,EAAa/B,UAAUK,OAAO,eAC9B0B,EAAaG,aAAa,cAAe,SAG3C,IAAIC,EAAWH,SAASC,cAAc,kBAAkBpC,GACpDsC,IACFA,EAASnC,UAAUC,IAAI,eACvBkC,EAASD,aAAa,cAAe,UAGvC,IAAIE,EAAoBzD,KAAK2B,SAAS+B,UAAUC,MAAM,iBAAiB,GACvE3D,KAAK2B,SAASN,UAAUK,OAAO+B,GAC/BzD,KAAK2B,SAASN,UAAUC,IAAxB,mBAAwCJ,GAASlB,KAAKkB,QAEtDlB,KAAKkB,MAAQA,K,6BAQf,WACMlB,KAAKI,YACPJ,KAAK4D,qBAEL5D,KAAKiB,SAAS,a,gCAWlB,WACE,IAAM4C,EAAUR,SAASS,cAAc,OACvCD,EAAQE,GAAK,uBACbF,EAAQhB,UC/KD,qshEDiLP,IAAMmB,EAAQX,SAASS,cAAc,SAIrC,OAHAE,EAAMnB,UEnLV,4iRFoLIgB,EAAQI,YAAYD,GAEbH,I,2BAST,WACE,GAAI7D,KAAKM,cAAe,CACtB,GAA2B,qBAAvBN,KAAKM,gBACDN,KAAKkE,gBACX,OAEFlE,KAAK2B,SAASN,UAAUC,IAAI,e,2BAShC,WAiCE,GAhCAtB,KAAK2B,SAAW0B,SAASC,cAAc,cACvCtD,KAAKmE,WAAad,SAASC,cAAc,wCACzCtD,KAAKoE,UAAYf,SAASC,cAAc,mBACxCtD,KAAKqE,SAAWhB,SAASC,cAAc,kBACvCtD,KAAKsE,YAAcjB,SAASC,cAAc,qBAC1CtD,KAAKuE,SAAWlB,SAASC,cAAc,mBACvCtD,KAAKwE,QAAUnB,SAASC,cAAc,iBAEtCtD,KAAKwB,iBAAmB6B,SAASC,cAAc,sCAC/CtD,KAAKyE,4BAA8BpB,SAASC,cAAc,uBAC1DtD,KAAK0E,sBAAwBrB,SAASC,cAAc,4BACpDtD,KAAK2E,0BAA4BtB,SAASC,cAAc,gCACxDtD,KAAK4E,oBAAsBvB,SAASC,cAAc,0BAClDtD,KAAK6E,eAAiB,CAACxB,SAASC,cAAc,2BAC9CtD,KAAK8E,WAAazB,SAASC,cAAc,mCAEzCtD,KAAK+E,YAAc1B,SAASC,cAAc,kBAC1CtD,KAAKgF,gBAAkBhF,KAAK+E,YAAYzB,cAAc,mCACtDtD,KAAKiF,qBAAuB5B,SAASC,cAAc,qBAI7CtD,KAAKC,GAAGiF,QAAQvF,eAAe,gBACnCK,KAAK2E,0BAA0BQ,WAAWC,YAAYpF,KAAK2E,2BAGvD3E,KAAKC,GAAGiF,QAAQvF,eAAe,YACnCK,KAAK0E,sBAAsBS,WAAWC,YAAYpF,KAAK0E,uBAKnD1E,KAAKC,GAAGiF,QAAQvF,eAAe,SAGhC,CACH,IAAM0F,EAAYrF,KAAKC,GAAGiF,QAAQI,MAAMD,UAAYrF,KAAKC,GAAGiF,QAAQI,MAAMD,UAAY,GAEtF,GAAIA,EAAUE,OAAS,GAAKvF,KAAKC,GAAGiF,QAAQI,MAAME,iBAAkB,CAClE,GAAIH,EAAUE,OAAS,EAAG,CACxBvF,KAAK6E,eAAe,GAAGY,iBAAiB5C,UAAYwC,EAAU,GAAGrC,KAEjE,IAAK,IAAI0C,EAAI,EAAGA,EAAIL,EAAUE,OAAQG,IAAK,CACzC,IAAMC,EAAiB3F,KAAK6E,eAAea,EAAI,GACzCE,EAAaD,EAAeE,WAAU,GAC5CD,EAAWH,iBAAiB5C,UAAYwC,EAAUK,GAAG1C,KACrD2C,EAAeG,MAAMF,SAIvB5F,KAAK6E,eAAe,GAAGM,WAAWC,YAAYpF,KAAK6E,eAAe,IAG9D7E,KAAKC,GAAGiF,QAAQI,MAAME,kBAC1BxF,KAAK+E,YAAYI,WAAWC,YAAYpF,KAAK+E,kBAI/C/E,KAAK4E,oBAAoBO,WAAWC,YAAYpF,KAAK4E,0BAzBvD5E,KAAK4E,oBAAoBO,WAAWC,YAAYpF,KAAK4E,qBA6BvD5E,KAAK+F,aAAe1C,SAASC,cAAc,oBAC3CtD,KAAKgG,eAAiBhG,KAAK+F,aAAazC,cAAc,+BACtDtD,KAAKiG,gBAAkB5C,SAASC,cAAc,eAE9CtD,KAAKkG,mBAAqB7C,SAASC,cAAc,kBACjDtD,KAAKoB,aAAeiC,SAASC,cAAc,YAC3CtD,KAAKmG,OAAS9C,SAASC,cAAc,mBAErCtD,KAAKoG,qBAAuB/C,SAASC,cAAc,gCACnDtD,KAAKqG,wBAA0BhD,SAASC,cAAc,sCAEtDtD,KAAK4C,gBAAkBS,SAASC,cAAc,mC,2BAQhD,WAAiB,WACftD,KAAKC,GAAGuC,GAAG,aAAa,kBAAM,EAAKC,aAAa,gBAChDzC,KAAKC,GAAGuC,GAAG,SAAS,kBAAM,EAAKC,aAAa,YAC5CzC,KAAKC,GAAGuC,GAAG,gBAAgB,kBAAM,EAAKC,aAAa,mBACnDzC,KAAKC,GAAGuC,GAAG,kBAAkB,kBAAM,EAAKC,aAAa,qBACrDzC,KAAKC,GAAGuC,GAAG,mBAAmB,kBAAM,EAAKC,aAAa,sBACtDzC,KAAKC,GAAGuC,GAAG,SAAS,SAAC8D,GAAD,OAAW,EAAK7D,aAAa,QAAS6D,MAE1DtG,KAAKuG,oBACLvG,KAAKwG,qB,oBAWP,SAAQC,GACN,IAEIC,EAFEC,EAAa3G,KAAK4G,qBAIxB,GAAIH,GAEF,GADAC,EAAoBrD,SAASwD,eAAeJ,IACvCK,OACH,KAAM,8CAAiDL,EAAY,SAGrEC,EAAoBrD,SAAS0D,KAE/BL,EAAkBzC,YAAY0C,GAE9B3G,KAAKgH,gBACLhH,KAAKiH,gBACLjH,KAAKsC,kBACLtC,KAAKkH,kB,+BAGP,WAAqB,WACnBlH,KAAK+F,aAAaoB,iBAAiB,UAAU,SAACC,GAC5CA,EAAEC,iBACF,IAAI1E,EAAcU,SAASC,cAAc,+BAA+BgE,MACxE,EAAKC,uBACL,EAAKtH,GAAGuH,QAAQ7E,Q,gCAWpB,WACM3C,KAAK2B,SAASN,UAAUO,SAAS,cACnC5B,KAAKmE,WAAWH,MAAMyD,QAAU,QAChCzH,KAAKmE,WAAW9C,UAAUC,IAAI,YAG5BtB,KAAKC,GAAGiF,SAAW9F,OAAOsI,KAAK1H,KAAKC,GAAGiF,SAASK,OAAS,EAC3DvF,KAAKiB,SAAS,UAEdjB,KAAKiB,SAAS,a,8BAIlB,WAAoB,WAElBjB,KAAKoE,UAAU+C,iBAAiB,SAAS,kBAAM,EAAKvD,wBAGpD5D,KAAKyE,4BAA4B0C,iBAAiB,SAAS,WACzD,EAAKlG,SAAS,WACd,EAAK+E,eAAe2B,WAItB3H,KAAK0E,sBAAsByC,iBAAiB,SAAS,kBAAM,EAAKlH,GAAL,QAAmBuH,aAG9ExH,KAAK2E,0BAA0BwC,iBAAiB,SAAS,kBAAM,EAAKlH,GAAL,YAAuBuH,aAGtFxH,KAAK4E,oBAAoBuC,iBAAiB,SAAS,WACjD,EAAKlG,SAAS,SACd,EAAK+D,gBAAgB2C,WAGvB,IAAK,IAAIjC,EAAI,EAAGA,EAAI1F,KAAK6E,eAAeU,OAAQG,IAC9C1F,KAAK6E,eAAea,GAAGyB,iBAAiB,SAAS,WAE/C,EAAKlH,GAAL,MAAiBuH,aAKrBxH,KAAKkG,mBAAmBiB,iBAAiB,SAAS,kBAAM,EAAKlH,GAAG2H,gBAEhE5H,KAAKoG,qBAAqBe,iBAAiB,SAAS,kBAAM,EAAKlH,GAAG4H,eAClE7H,KAAKqG,wBAAwBc,iBAAiB,SAAS,kBAAM,EAAKlH,GAAG2H,gBAGjE5H,KAAKC,GAAGsC,WAAW,SACrBvC,KAAKoB,aAAa+F,iBAAiB,SAAS,WACtC,EAAK/F,aAAaC,UAAUO,SAAS,cACvC,EAAK3B,GAAG6H,WACR,EAAK1G,aAAaC,UAAUK,OAAO,eAEnC,EAAKF,iBAAiBC,YAAc,gBACpC,EAAKxB,GAAG8H,YACR,EAAK3G,aAAaC,UAAUC,IAAI,iBAMtC+B,SAAS8D,iBAAiB,SAAS,kBAAM,EAAKlF,WAG9CjC,KAAK2B,SAASwF,iBAAiB,SAAS,SAAAC,GAAC,OAAIA,EAAEY,qBAG/ChI,KAAKmG,OAAOgB,iBAAiB,SAAS,kBAAM,EAAKc,c,oBASnD,WACMjI,KAAKS,OACPT,KAAKqC,OAEc,YAAfrC,KAAKkB,MACPlB,KAAK4D,qBAEL5D,KAAKiC,U,kBAQX,WACEjC,KAAKS,QAAS,EACdT,KAAK2B,SAASN,UAAUK,OAAO,aAC/B1B,KAAKgC,yBAA0B,EAE/B,IAAIkG,EAAW7E,SAASC,cAAc,uBAClC4E,GACFA,EAAS3E,aAAa,cAAe,W,mBAUzC,WAAS,WAEP,GAAmB,UAAfvD,KAAKkB,MAAT,CAEA,IAAKlB,KAAKE,WAAaF,KAAKO,OAAQ,CAClCP,KAAKS,QAAS,EACdT,KAAK2B,SAASN,UAAUC,IAAI,aAC5B,IAAI4G,EAAW7E,SAASC,cAAc,uBAClC4E,GACFA,EAAS3E,aAAa,cAAe,aAE9BvD,KAAKO,OACdP,KAAKiB,SAAS,aAEdjB,KAAKsC,kBAGHtC,KAAK2B,SAASN,UAAUO,SAAS,cACnC5B,KAAKmE,WAAW9C,UAAUK,OAAO,WACjCH,YAAW,WACT,EAAK4C,WAAWH,MAAMyD,QAAU,SAC/B,S,kCASP,WACEzH,KAAKiG,gBAAgBkC,UAAW,EAChCnI,KAAKiG,gBAAgB5E,UAAUC,IAAI,iBAEnCtB,KAAKiG,gBAAgBpD,UAArB,qBGzeJ,gV,iCHifE,WACE7C,KAAKiG,gBAAgBkC,UAAW,EAChCnI,KAAKiG,gBAAgBxE,YAAc,UACnCzB,KAAKiG,gBAAgB5E,UAAUK,OAAO,mB,wBAUxC,WACM1B,KAAKQ,SACPR,KAAK2B,SAASN,UAAUC,IAAI,cAC5BtB,KAAKwB,iBAAiBC,YAAc,UACpCzB,KAAKQ,QAAS,K,uBASlB,WACOR,KAAKQ,SACRR,KAAK2B,SAASN,UAAUK,OAAO,cAC3B1B,KAAKO,SACPP,KAAKwB,iBAAiBC,YAAc,cAGxCzB,KAAKQ,QAAS,I,6BAWhB,SAAiBsC,GACf9C,KAAK2B,SAASN,UAAUK,OAAO,4BAC/B1B,KAAK2B,SAASN,UAAUK,OAAO,sBAC/B1B,KAAK2B,SAASN,UAAUK,OAAO,0BAC/B1B,KAAK2B,SAASN,UAAUK,OAAO,oBAE3BoB,GACF9C,KAAK2B,SAASN,UAAUC,IAAxB,qBAA0CwB,M,0BAI9C,SAAcsF,GACZpI,KAAK8E,WAAWjC,UAAYuF,EAC5BpI,KAAKiB,SAAS,W,0BAGhB,WACEjB,KAAK8E,WAAWjC,UAAY,GAC5B7C,KAAKiC,U,kCAGP,SAAsBqE,GACpB,IAAI+B,EAAehF,SAASC,cAAc,qBAC1C+E,EAAaxF,UAAYyD,EAAMgC,QAC/BD,EAAahH,UAAUK,OAAO,aAC9B2G,EAAahH,UAAUC,IAAI,cAC3BtB,KAAKuI,wB,6BAGP,SAAiBjC,GACfzF,QAAQC,MAAM,wBAAyBwF,GACvCtG,KAAK+C,e,gCAGP,SAAoBuD,GACdA,EAAMkC,MAAuB,kBAAflC,EAAMkC,KACtBxI,KAAKC,GAAG2H,cAER5H,KAAKqC,OACLrC,KAAKyI,aAAanC,EAAMgC,QAAU,KAClCtI,KAAK8E,WAAWb,YAAYjE,KAAKoG,sBACjCpG,KAAKoG,qBAAqB/E,UAAUK,OAAO,gB,oCAI/C,WACE,GAAK1B,KAAKU,WAAV,CACA,IAAIgI,EAAM,IAAI3G,KACV4G,EAAuBC,KAAKC,OAAOH,EAAII,UAAY9I,KAAKU,WAAWoI,WAAW,KAC9DzF,SAASC,cAAc,sCAC7BT,UAAd,iBAAoC8F,EAApC,mB,2BAGF,WACE,OAAOI,OAAOC,WAAa,O,yEAnkBzBnJ,GAukBN,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 */\nclass Widget {\n constructor (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\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [document.querySelector('button.rs-option-solid') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.rs.apiKeys.hasOwnProperty('solid')) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.rs.apiKeys.solid.providers ? this.rs.apiKeys.solid.providers : [];\n\n if (providers.length > 0 || this.rs.apiKeys.solid.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.rs.apiKeys.solid.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n // TODO set provider\n this.rs[\"solid\"].connect()\n });\n }\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 this.rsWidget.classList.remove('rs-backend-solid');\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.

Or specify an identity provider

\";\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:not([aria-hidden=true]) {\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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.rs-state-solid .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n.rs-solid-form h3.rs-small-headline {\\n margin-top: 10px;\\n}\\n\\n.rs-sign-in-form input[type=text],\\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\\n.rs-solid-form button.rs-solid-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg,\\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\\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","msg","console","debug","event","log","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","solid","length","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","display","keys","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth"],"sourceRoot":""} \ No newline at end of file diff --git a/src/assets/styles.css b/src/assets/styles.css index ae34df5..68da070 100644 --- a/src/assets/styles.css +++ b/src/assets/styles.css @@ -208,12 +208,18 @@ polygon.rs-logo-shape, .rs-state-choose .rs-main-logo, -.rs-state-sign-in .rs-main-logo { +.rs-state-sign-in .rs-main-logo, +.rs-state-solid .rs-main-logo { margin-left: 45%; float: none; } -.rs-sign-in-form input[type=text] { +.rs-solid-form h3.rs-small-headline { + margin-top: 10px; +} + +.rs-sign-in-form input[type=text], +.rs-solid-form input[type=text] { padding: 15px 10px; display: block; width: 100%; @@ -223,7 +229,8 @@ polygon.rs-logo-shape, border-radius: 0; box-shadow: none; } -.rs-sign-in-form button.rs-connect { +.rs-sign-in-form button.rs-connect, +.rs-solid-form button.rs-solid-connect { padding: 15px 10px; margin-top: 20px; margin-bottom: 15px; @@ -237,22 +244,27 @@ polygon.rs-logo-shape, transition: box-shadow 200ms, background-color 200ms; } -.rs-sign-in-form button.rs-connect:hover { +.rs-sign-in-form button.rs-connect:hover, +.rs-solid-form button.rs-solid-connect:hover { cursor: pointer; background-color: #4BCB5D; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.2); } -.rs-sign-in-form button.rs-connect:active { +.rs-sign-in-form button.rs-connect:active, +.rs-solid-form button.rs-solid-connect:active { background-color: #3fb34f; } .rs-sign-in-form button.rs-connect:disabled, -.rs-sign-in-form button.rs-connect:disabled:hover { +.rs-sign-in-form button.rs-connect:disabled:hover, +.rs-solid-form button.rs-solid-connect:disabled, +.rs-solid-form button.rs-solid-connect:disabled:hover { background-color: #aaa; } -.rs-sign-in-form button.rs-connecting svg { +.rs-sign-in-form button.rs-connecting svg, +.rs-solid-form button.rs-solid-connecting svg { height: 1em; width: auto; vertical-align: middle; @@ -367,7 +379,8 @@ polygon.rs-logo-shape, max-width: 56px; } .rs-state-choose, - .rs-state-sign-in { + .rs-state-sign-in, + .rs-state-solid { position: fixed; top: 0; left: 0; diff --git a/src/assets/widget.html b/src/assets/widget.html index b7208ef..4178e6e 100644 --- a/src/assets/widget.html +++ b/src/assets/widget.html @@ -210,8 +210,8 @@ -

Connect your storage

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:not([aria-hidden=true]) {\n opacity: 1;\n max-height: 460px;\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 display: block;\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: block;\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: block;\n}\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\n display: none;\n}\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\n display: block;\n}\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\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.rs-state-solid .rs-main-logo {\n margin-left: 45%;\n float: none;\n}\n\n.rs-solid-form h3.rs-small-headline {\n margin-top: 10px;\n}\n\n.rs-sign-in-form input[type=text],\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\n.rs-solid-form button.rs-solid-connect:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-form button.rs-connecting svg,\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\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}},{key:"setModalClass",value:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}}},{key:"setupElements",value:function(){if(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.rsSolid=document.querySelector(".rs-box-solid"),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.rsChooseSolidButton=document.querySelector("button.rs-choose-solid"),this.rsSolidOptions=[document.querySelector("button.rs-option-solid")],this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rsSolidForm=document.querySelector(".rs-solid-form"),this.rsProviderInput=this.rsSolidForm.querySelector("input[name=rs-provider-address]"),this.rsSolidConnectButton=document.querySelector(".rs-solid-connect"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.rs.apiKeys.hasOwnProperty("solid")){var t=this.rs.apiKeys.solid.providers?this.rs.apiKeys.solid.providers:[];if(t.length>0||this.rs.apiKeys.solid.allowAnyProvider){if(t.length>0){this.rsSolidOptions[0].lastElementChild.innerHTML=t[0].name;for(var e=1;e0?this.setState("choose"):this.setState("sign-in")}},{key:"setClickHandlers",value: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.rsChooseSolidButton.addEventListener("click",(function(){t.setState("solid"),t.rsProviderInput.focus()}));for(var e=0;e\n \n \n \n \n \n \n\n')}},{key:"enableConnectButton",value:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")}},{key:"setOffline",value:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)}},{key:"setOnline",value:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0}},{key:"setBackendClass",value:function(t){this.rsWidget.classList.remove("rs-backend-remotestorage"),this.rsWidget.classList.remove("rs-backend-dropbox"),this.rsWidget.classList.remove("rs-backend-googledrive"),this.rsWidget.classList.remove("rs-backend-solid"),t&&this.rsWidget.classList.add("rs-backend-".concat(t))}},{key:"showErrorBox",value:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")}},{key:"hideErrorBox",value:function(){this.rsErrorBox.innerHTML="",this.close()}},{key:"handleDiscoveryError",value: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()}},{key:"handleSyncError",value:function(t){console.debug("Encountered SyncError",t),this.setOffline()}},{key:"handleUnauthorized",value: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"))}},{key:"updateLastSyncedOutput",value: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")}}},{key:"isSmallScreen",value:function(){return window.innerWidth<421}}],i&&n(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();const s=i;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 94c9515..4d8d367 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 */\nclass Widget {\n constructor (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\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [document.querySelector('button.rs-option-solid') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.rs.apiKeys.hasOwnProperty('solid')) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.rs.apiKeys.solid.providers ? this.rs.apiKeys.solid.providers : [];\n\n if (providers.length > 0 || this.rs.apiKeys.solid.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.rs.apiKeys.solid.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n // TODO set provider\n this.rs[\"solid\"].connect()\n });\n }\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 this.rsWidget.classList.remove('rs-backend-solid');\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.

Or specify an identity provider

\";\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:not([aria-hidden=true]) {\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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.rs-state-solid .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n.rs-solid-form h3.rs-small-headline {\\n margin-top: 10px;\\n}\\n\\n.rs-sign-in-form input[type=text],\\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\\n.rs-solid-form button.rs-solid-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg,\\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\\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","msg","console","debug","event","log","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","solid","length","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","display","keys","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth"],"sourceRoot":""} \ No newline at end of file +{"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 */\nclass Widget {\n constructor (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\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [document.querySelector('button.rs-option-solid') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.rs.apiKeys.hasOwnProperty('solid')) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.rs.apiKeys.solid.providers ? this.rs.apiKeys.solid.providers : [];\n\n if (providers.length > 0 || this.rs.apiKeys.solid.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.rs.apiKeys.solid.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n // TODO set provider\n this.rs[\"solid\"].connect()\n });\n }\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 this.rsWidget.classList.remove('rs-backend-solid');\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.

Or specify an identity provider

\";\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:not([aria-hidden=true]) {\\n opacity: 1;\\n max-height: 460px;\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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.rs-state-solid .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n.rs-solid-form h3.rs-small-headline {\\n margin-top: 10px;\\n}\\n\\n.rs-sign-in-form input[type=text],\\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\\n.rs-solid-form button.rs-solid-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg,\\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\\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","msg","console","debug","event","log","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","solid","length","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","display","keys","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth"],"sourceRoot":""} \ No newline at end of file diff --git a/src/assets/styles.css b/src/assets/styles.css index 68da070..66e0e7d 100644 --- a/src/assets/styles.css +++ b/src/assets/styles.css @@ -39,7 +39,7 @@ .rs-box.rs-selected:not([aria-hidden=true]) { opacity: 1; - max-height: 420px; + max-height: 460px; } /* Main logo */ From cd4cbcd7c0631d1ce26c14740f8df498e9227194 Mon Sep 17 00:00:00 2001 From: Yashar PourMohammad Date: Thu, 2 Nov 2023 15:28:50 +0000 Subject: [PATCH 04/10] Refactored Solid provider specification --- README.md | 20 +++++++++++++++++ build/widget.js | 2 +- build/widget.js.map | 2 +- src/widget.js | 53 ++++++++++++++++++++++++++++++++++++++++----- 4 files changed, 70 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 1befdde..0bef39c 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,26 @@ Example: const widget = new Widget(remoteStorage, { autoCloseAfter: 2000 }); ``` +## Including Solid + +In order to show Solid as an storage option you can use the `solidProviders` option. +`solidProviders` is an object that contains `providers` as the array of provider options and +`allowAnyProvider` as a boolean that allows the user to type in the address of any solid +identity provider. Each provider has a `name` to be displayed and an `authURL`. +`Widget.SOLID_COMMUNITY` and `widget.INRUPT` are predefined providers that you can use. + +Example: + +```js +const widget = new Widget(remoteStorage, { solidProviders: { + providers: [ + Widget.SOLID_COMMUNITY, + Widget.INRUPT + ], + allowAnyProvider: true +} }); +``` + ## Available Functions `attach(elementID)` - Attach the widget to the DOM and display it. You can diff --git a/build/widget.js b/build/widget.js index c35cbc7..7d5334a 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,l)=>{for(var n in l)t.o(l,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:l[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function l(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var l=0;ls});var i=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(l(this,t),this.rs=e,this.leaveOpen=!!n.leaveOpen&&n.leaveOpen,this.autoCloseAfter=n.autoCloseAfter?n.autoCloseAfter:1500,this.skipInitial=!!n.skipInitial&&n.skipInitial,this.logging=!!n.logging&&n.logging,n.hasOwnProperty("modalBackdrop")){if("boolean"!=typeof n.modalBackdrop&&"onlySmallScreens"!==n.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=n.modalBackdrop}else this.modalBackdrop="onlySmallScreens";this.active=!1,this.online=!1,this.closed=!1,this.lastSynced=null,this.lastSyncedUpdateLoop=null}var e,i;return e=t,i=[{key:"log",value:function(){if(this.logging){for(var t,e=arguments.length,l=new Array(e),n=0;n

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:not([aria-hidden=true]) {\n opacity: 1;\n max-height: 460px;\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 display: block;\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: block;\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: block;\n}\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\n display: none;\n}\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\n display: block;\n}\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\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.rs-state-solid .rs-main-logo {\n margin-left: 45%;\n float: none;\n}\n\n.rs-solid-form h3.rs-small-headline {\n margin-top: 10px;\n}\n\n.rs-sign-in-form input[type=text],\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\n.rs-solid-form button.rs-solid-connect:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-form button.rs-connecting svg,\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\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}},{key:"setModalClass",value:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}}},{key:"setupElements",value:function(){if(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.rsSolid=document.querySelector(".rs-box-solid"),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.rsChooseSolidButton=document.querySelector("button.rs-choose-solid"),this.rsSolidOptions=[document.querySelector("button.rs-option-solid")],this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rsSolidForm=document.querySelector(".rs-solid-form"),this.rsProviderInput=this.rsSolidForm.querySelector("input[name=rs-provider-address]"),this.rsSolidConnectButton=document.querySelector(".rs-solid-connect"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.rs.apiKeys.hasOwnProperty("solid")){var t=this.rs.apiKeys.solid.providers?this.rs.apiKeys.solid.providers:[];if(t.length>0||this.rs.apiKeys.solid.allowAnyProvider){if(t.length>0){this.rsSolidOptions[0].lastElementChild.innerHTML=t[0].name;for(var e=1;e0?this.setState("choose"):this.setState("sign-in")}},{key:"setClickHandlers",value: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.rsChooseSolidButton.addEventListener("click",(function(){t.setState("solid"),t.rsProviderInput.focus()}));for(var e=0;e\n \n \n \n \n \n \n\n')}},{key:"enableConnectButton",value:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")}},{key:"setOffline",value:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)}},{key:"setOnline",value:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0}},{key:"setBackendClass",value:function(t){this.rsWidget.classList.remove("rs-backend-remotestorage"),this.rsWidget.classList.remove("rs-backend-dropbox"),this.rsWidget.classList.remove("rs-backend-googledrive"),this.rsWidget.classList.remove("rs-backend-solid"),t&&this.rsWidget.classList.add("rs-backend-".concat(t))}},{key:"showErrorBox",value:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")}},{key:"hideErrorBox",value:function(){this.rsErrorBox.innerHTML="",this.close()}},{key:"handleDiscoveryError",value: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()}},{key:"handleSyncError",value:function(t){console.debug("Encountered SyncError",t),this.setOffline()}},{key:"handleUnauthorized",value: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"))}},{key:"updateLastSyncedOutput",value: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")}}},{key:"isSmallScreen",value:function(){return window.innerWidth<421}}],i&&n(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();const s=i;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={};function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function l(t,e){for(var n=0;ns});var i=function(){function t(e){var l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(n(this,t),this.rs=e,this.solidProviders=l.solidProviders?l.solidProviders:{},this.leaveOpen=!!l.leaveOpen&&l.leaveOpen,this.autoCloseAfter=l.autoCloseAfter?l.autoCloseAfter:1500,this.skipInitial=!!l.skipInitial&&l.skipInitial,this.logging=!!l.logging&&l.logging,l.hasOwnProperty("modalBackdrop")){if("boolean"!=typeof l.modalBackdrop&&"onlySmallScreens"!==l.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=l.modalBackdrop}else this.modalBackdrop="onlySmallScreens";this.active=!1,this.online=!1,this.closed=!1,this.lastSynced=null,this.lastSyncedUpdateLoop=null}var e,i;return e=t,i=[{key:"log",value: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:not([aria-hidden=true]) {\n opacity: 1;\n max-height: 460px;\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 display: block;\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: block;\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: block;\n}\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\n display: none;\n}\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\n display: block;\n}\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\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.rs-state-solid .rs-main-logo {\n margin-left: 45%;\n float: none;\n}\n\n.rs-solid-form h3.rs-small-headline {\n margin-top: 10px;\n}\n\n.rs-sign-in-form input[type=text],\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\n.rs-solid-form button.rs-solid-connect:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-form button.rs-connecting svg,\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\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}},{key:"setModalClass",value:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}}},{key:"setupElements",value:function(){if(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.rsSolid=document.querySelector(".rs-box-solid"),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.rsChooseSolidButton=document.querySelector("button.rs-choose-solid"),this.rsSolidOptions=[document.querySelector("button.rs-option-solid")],this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rsSolidForm=document.querySelector(".rs-solid-form"),this.rsProviderInput=this.rsSolidForm.querySelector("input[name=rs-provider-address]"),this.rsSolidConnectButton=document.querySelector(".rs-solid-connect"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.solidProviders){var t=this.solidProviders.providers?this.solidProviders.providers:[];if(t.length>0||this.solidProviders.allowAnyProvider){if(t.length>0){this.rsSolidOptions[0].lastElementChild.innerHTML=t[0].name;for(var e=1;e0?this.setState("choose"):this.setState("sign-in")}},{key:"setClickHandlers",value: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.rsChooseSolidButton.addEventListener("click",(function(){t.setState("solid"),t.rsProviderInput.focus()}));for(var e=function(e){t.rsSolidOptions[e].addEventListener("click",(function(){t.rs.setSolidAuthURL(t.solidProviders.providers[e].authURL),t.rs.solid.connect()}))},n=0;n\n \n \n \n \n \n \n\n')}},{key:"disableSolidConnectButton",value:function(){this.rsSolidConnectButton.disabled=!0,this.rsSolidConnectButton.classList.add("rs-connecting"),this.rsSolidConnectButton.innerHTML="Connecting ".concat('\n \n \n \n \n \n \n\n')}},{key:"enableConnectButton",value:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")}},{key:"enableSolidConnectButton",value:function(){this.rsSolidConnectButton.disabled=!1,this.rsSolidConnectButton.textContent="Connect",this.rsSolidConnectButton.classList.remove("rs-connecting")}},{key:"setOffline",value:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)}},{key:"setOnline",value:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0}},{key:"setBackendClass",value:function(t){this.rsWidget.classList.remove("rs-backend-remotestorage"),this.rsWidget.classList.remove("rs-backend-dropbox"),this.rsWidget.classList.remove("rs-backend-googledrive"),this.rsWidget.classList.remove("rs-backend-solid"),t&&this.rsWidget.classList.add("rs-backend-".concat(t))}},{key:"showErrorBox",value:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")}},{key:"hideErrorBox",value:function(){this.rsErrorBox.innerHTML="",this.close()}},{key:"handleDiscoveryError",value: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()}},{key:"handleSyncError",value:function(t){console.debug("Encountered SyncError",t),this.setOffline()}},{key:"handleUnauthorized",value: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"))}},{key:"updateLastSyncedOutput",value: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")}}},{key:"isSmallScreen",value:function(){return window.innerWidth<421}}],i&&l(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();i.SOLID_COMMUNITY={name:"Solid Community",authURL:"https://solidcommunity.net"},i.INRUPT={name:"Inrupt",authURL:"https://login.inrupt.com"};const s=i;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 4d8d367..4f6a301 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 */\nclass Widget {\n constructor (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\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [document.querySelector('button.rs-option-solid') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.rs.apiKeys.hasOwnProperty('solid')) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.rs.apiKeys.solid.providers ? this.rs.apiKeys.solid.providers : [];\n\n if (providers.length > 0 || this.rs.apiKeys.solid.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.rs.apiKeys.solid.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n // TODO set provider\n this.rs[\"solid\"].connect()\n });\n }\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 this.rsWidget.classList.remove('rs-backend-solid');\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.

Or specify an identity provider

\";\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:not([aria-hidden=true]) {\\n opacity: 1;\\n max-height: 460px;\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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.rs-state-solid .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n.rs-solid-form h3.rs-small-headline {\\n margin-top: 10px;\\n}\\n\\n.rs-sign-in-form input[type=text],\\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\\n.rs-solid-form button.rs-solid-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg,\\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\\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","msg","console","debug","event","log","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","solid","length","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","display","keys","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth"],"sourceRoot":""} \ No newline at end of file +{"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"],"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 {object} options.solidProviders - Specify valid Solid providers for the Solid backend\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 */\nclass Widget {\n constructor (remoteStorage, options={}) {\n this.rs = remoteStorage;\n\n this.solidProviders = options.solidProviders ? options.solidProviders : {};\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\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [document.querySelector('button.rs-option-solid') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.solidProviders) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.solidProviders.providers ? this.solidProviders.providers : [];\n\n if (providers.length > 0 || this.solidProviders.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.solidProviders.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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 this.rsSolidForm.addEventListener('submit', (e) => {\n e.preventDefault();\n let authURL = document.querySelector('input[name=rs-provider-address]').value;\n this.disableSolidConnectButton();\n this.rs.setSolidAuthURL(authURL);\n this.rs[\"solid\"].connect()\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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n this.rs.setSolidAuthURL(this.solidProviders.providers[i].authURL);\n this.rs[\"solid\"].connect()\n });\n }\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 * Disable the Solid connect button and indicate connect activity\n *\n * @private\n */\n disableSolidConnectButton () {\n this.rsSolidConnectButton.disabled = true;\n this.rsSolidConnectButton.classList.add('rs-connecting');\n const circleSpinner = circleOpenSvg;\n this.rsSolidConnectButton.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 * (Re)enable the Solid connect button and reset to original state\n *\n * @private\n */\n enableSolidConnectButton () { // TODO\n this.rsSolidConnectButton.disabled = false;\n this.rsSolidConnectButton.textContent = 'Connect';\n this.rsSolidConnectButton.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 this.rsWidget.classList.remove('rs-backend-solid');\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\nWidget.SOLID_COMMUNITY = {\n name: 'Solid Community',\n authURL: 'https://solidcommunity.net'\n};\n\nWidget.INRUPT = {\n name: 'Inrupt',\n authURL: 'https://login.inrupt.com'\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.

Or specify an identity provider

\";\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:not([aria-hidden=true]) {\\n opacity: 1;\\n max-height: 460px;\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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.rs-state-solid .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n.rs-solid-form h3.rs-small-headline {\\n margin-top: 10px;\\n}\\n\\n.rs-sign-in-form input[type=text],\\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\\n.rs-solid-form button.rs-solid-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg,\\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\\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\";"],"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","solidProviders","leaveOpen","autoCloseAfter","skipInitial","logging","modalBackdrop","active","online","closed","lastSynced","lastSyncedUpdateLoop","msg","console","debug","event","log","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","length","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","authURL","disableSolidConnectButton","setSolidAuthURL","display","keys","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","circleOpenSvg","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth","SOLID_COMMUNITY","INRUPT"],"sourceRoot":""} \ No newline at end of file diff --git a/src/widget.js b/src/widget.js index e14ebc7..e5a73bf 100644 --- a/src/widget.js +++ b/src/widget.js @@ -8,6 +8,7 @@ import circleOpenSvg from './assets/circle-open.svg'; * * @param {object} remoteStorage - remoteStorage instance * @param {object} options - Widget options + * @param {object} options.solidProviders - Specify valid Solid providers for the Solid backend * @param {boolean} options.leaveOpen - Do not minimize widget when user clicks outside of it (default: false) * @param {number} options.autoCloseAfter - Time after which the widget closes automatically in ms (default: 1500) * @param {boolean} options.skipInitial - Don't show the initial connect hint, but show sign-in screen directly instead (default: false) @@ -18,6 +19,7 @@ class Widget { constructor (remoteStorage, options={}) { this.rs = remoteStorage; + this.solidProviders = options.solidProviders ? options.solidProviders : {}; this.leaveOpen = options.leaveOpen ? options.leaveOpen : false; this.autoCloseAfter = options.autoCloseAfter ? options.autoCloseAfter : 1500; this.skipInitial = options.skipInitial ? options.skipInitial : false; @@ -237,13 +239,13 @@ class Widget { // check if solid provideres are configured to add, show or hide buttons // only if needed - if (! this.rs.apiKeys.hasOwnProperty('solid')) { + if (! this.solidProviders) { this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton); } else { - const providers = this.rs.apiKeys.solid.providers ? this.rs.apiKeys.solid.providers : []; + const providers = this.solidProviders.providers ? this.solidProviders.providers : []; - if (providers.length > 0 || this.rs.apiKeys.solid.allowAnyProvider) { + if (providers.length > 0 || this.solidProviders.allowAnyProvider) { if (providers.length > 0) { this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name; @@ -258,7 +260,7 @@ class Widget { this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); } - if (! this.rs.apiKeys.solid.allowAnyProvider) { + if (! this.solidProviders.allowAnyProvider) { this.rsSolidForm.parentNode.removeChild(this.rsSolidForm); } } @@ -334,6 +336,14 @@ class Widget { this.disableConnectButton(); this.rs.connect(userAddress); }); + + this.rsSolidForm.addEventListener('submit', (e) => { + e.preventDefault(); + let authURL = document.querySelector('input[name=rs-provider-address]').value; + this.disableSolidConnectButton(); + this.rs.setSolidAuthURL(authURL); + this.rs["solid"].connect() + }); } /** @@ -380,7 +390,7 @@ class Widget { for (let i = 0; i < this.rsSolidOptions.length; i++) { this.rsSolidOptions[i].addEventListener('click', () => { - // TODO set provider + this.rs.setSolidAuthURL(this.solidProviders.providers[i].authURL); this.rs["solid"].connect() }); } @@ -490,6 +500,18 @@ class Widget { this.rsConnectButton.innerHTML = `Connecting ${circleSpinner}`; } + /** + * Disable the Solid connect button and indicate connect activity + * + * @private + */ + disableSolidConnectButton () { + this.rsSolidConnectButton.disabled = true; + this.rsSolidConnectButton.classList.add('rs-connecting'); + const circleSpinner = circleOpenSvg; + this.rsSolidConnectButton.innerHTML = `Connecting ${circleSpinner}`; + } + /** * (Re)enable the connect button and reset to original state * @@ -501,6 +523,17 @@ class Widget { this.rsConnectButton.classList.remove('rs-connecting'); } + /** + * (Re)enable the Solid connect button and reset to original state + * + * @private + */ + enableSolidConnectButton () { // TODO + this.rsSolidConnectButton.disabled = false; + this.rsSolidConnectButton.textContent = 'Connect'; + this.rsSolidConnectButton.classList.remove('rs-connecting'); + } + /** * Mark the widget as offline. * @@ -597,4 +630,14 @@ class Widget { } } +Widget.SOLID_COMMUNITY = { + name: 'Solid Community', + authURL: 'https://solidcommunity.net' +}; + +Widget.INRUPT = { + name: 'Inrupt', + authURL: 'https://login.inrupt.com' +}; + export default Widget; From 3dcac921506aff773d4747fc51fcc60826fad7ca Mon Sep 17 00:00:00 2001 From: Yashar PourMohammad Date: Sun, 5 Nov 2023 15:02:45 +0000 Subject: [PATCH 05/10] Fixed bug when only Solid is configured --- build/widget.js | 2 +- build/widget.js.map | 2 +- src/assets/styles.css | 2 +- src/widget.js | 3 ++- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/build/widget.js b/build/widget.js index 7d5334a..8368e61 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={};function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function l(t,e){for(var n=0;ns});var i=function(){function t(e){var l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(n(this,t),this.rs=e,this.solidProviders=l.solidProviders?l.solidProviders:{},this.leaveOpen=!!l.leaveOpen&&l.leaveOpen,this.autoCloseAfter=l.autoCloseAfter?l.autoCloseAfter:1500,this.skipInitial=!!l.skipInitial&&l.skipInitial,this.logging=!!l.logging&&l.logging,l.hasOwnProperty("modalBackdrop")){if("boolean"!=typeof l.modalBackdrop&&"onlySmallScreens"!==l.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=l.modalBackdrop}else this.modalBackdrop="onlySmallScreens";this.active=!1,this.online=!1,this.closed=!1,this.lastSynced=null,this.lastSyncedUpdateLoop=null}var e,i;return e=t,i=[{key:"log",value: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:not([aria-hidden=true]) {\n opacity: 1;\n max-height: 460px;\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 display: block;\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: block;\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: block;\n}\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\n display: none;\n}\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\n display: block;\n}\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\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.rs-state-solid .rs-main-logo {\n margin-left: 45%;\n float: none;\n}\n\n.rs-solid-form h3.rs-small-headline {\n margin-top: 10px;\n}\n\n.rs-sign-in-form input[type=text],\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\n.rs-solid-form button.rs-solid-connect:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-form button.rs-connecting svg,\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\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}},{key:"setModalClass",value:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}}},{key:"setupElements",value:function(){if(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.rsSolid=document.querySelector(".rs-box-solid"),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.rsChooseSolidButton=document.querySelector("button.rs-choose-solid"),this.rsSolidOptions=[document.querySelector("button.rs-option-solid")],this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rsSolidForm=document.querySelector(".rs-solid-form"),this.rsProviderInput=this.rsSolidForm.querySelector("input[name=rs-provider-address]"),this.rsSolidConnectButton=document.querySelector(".rs-solid-connect"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.solidProviders){var t=this.solidProviders.providers?this.solidProviders.providers:[];if(t.length>0||this.solidProviders.allowAnyProvider){if(t.length>0){this.rsSolidOptions[0].lastElementChild.innerHTML=t[0].name;for(var e=1;e0?this.setState("choose"):this.setState("sign-in")}},{key:"setClickHandlers",value: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.rsChooseSolidButton.addEventListener("click",(function(){t.setState("solid"),t.rsProviderInput.focus()}));for(var e=function(e){t.rsSolidOptions[e].addEventListener("click",(function(){t.rs.setSolidAuthURL(t.solidProviders.providers[e].authURL),t.rs.solid.connect()}))},n=0;n\n \n \n \n \n \n \n\n')}},{key:"disableSolidConnectButton",value:function(){this.rsSolidConnectButton.disabled=!0,this.rsSolidConnectButton.classList.add("rs-connecting"),this.rsSolidConnectButton.innerHTML="Connecting ".concat('\n \n \n \n \n \n \n\n')}},{key:"enableConnectButton",value:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")}},{key:"enableSolidConnectButton",value:function(){this.rsSolidConnectButton.disabled=!1,this.rsSolidConnectButton.textContent="Connect",this.rsSolidConnectButton.classList.remove("rs-connecting")}},{key:"setOffline",value:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)}},{key:"setOnline",value:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0}},{key:"setBackendClass",value:function(t){this.rsWidget.classList.remove("rs-backend-remotestorage"),this.rsWidget.classList.remove("rs-backend-dropbox"),this.rsWidget.classList.remove("rs-backend-googledrive"),this.rsWidget.classList.remove("rs-backend-solid"),t&&this.rsWidget.classList.add("rs-backend-".concat(t))}},{key:"showErrorBox",value:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")}},{key:"hideErrorBox",value:function(){this.rsErrorBox.innerHTML="",this.close()}},{key:"handleDiscoveryError",value: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()}},{key:"handleSyncError",value:function(t){console.debug("Encountered SyncError",t),this.setOffline()}},{key:"handleUnauthorized",value: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"))}},{key:"updateLastSyncedOutput",value: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")}}},{key:"isSmallScreen",value:function(){return window.innerWidth<421}}],i&&l(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();i.SOLID_COMMUNITY={name:"Solid Community",authURL:"https://solidcommunity.net"},i.INRUPT={name:"Inrupt",authURL:"https://login.inrupt.com"};const s=i;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={};function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function l(t,e){for(var n=0;ns});var i=function(){function t(e){var l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(n(this,t),this.rs=e,this.solidProviders=l.solidProviders?l.solidProviders:{},this.leaveOpen=!!l.leaveOpen&&l.leaveOpen,this.autoCloseAfter=l.autoCloseAfter?l.autoCloseAfter:1500,this.skipInitial=!!l.skipInitial&&l.skipInitial,this.logging=!!l.logging&&l.logging,l.hasOwnProperty("modalBackdrop")){if("boolean"!=typeof l.modalBackdrop&&"onlySmallScreens"!==l.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=l.modalBackdrop}else this.modalBackdrop="onlySmallScreens";this.active=!1,this.online=!1,this.closed=!1,this.lastSynced=null,this.lastSyncedUpdateLoop=null}var e,i;return e=t,i=[{key:"log",value: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:not([aria-hidden=true]) {\n opacity: 1;\n max-height: 460px;\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 display: block;\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: block;\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: block;\n}\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\n display: none;\n}\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\n display: block;\n}\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\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.rs-state-solid .rs-main-logo {\n margin-left: 45%;\n float: none;\n}\n\n.rs-solid-form h3.rs-small-headline {\n margin-top: 10px;\n}\n\n.rs-sign-in-form input[type=text],\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\n.rs-solid-form button.rs-solid-connect:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-form button.rs-connecting svg,\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\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}},{key:"setModalClass",value:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}}},{key:"setupElements",value:function(){if(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.rsSolid=document.querySelector(".rs-box-solid"),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.rsChooseSolidButton=document.querySelector("button.rs-choose-solid"),this.rsSolidOptions=[document.querySelector("button.rs-option-solid")],this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rsSolidForm=document.querySelector(".rs-solid-form"),this.rsProviderInput=this.rsSolidForm.querySelector("input[name=rs-provider-address]"),this.rsSolidConnectButton=document.querySelector(".rs-solid-connect"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.solidProviders){var t=this.solidProviders.providers?this.solidProviders.providers:[];if(t.length>0||this.solidProviders.allowAnyProvider){if(t.length>0){this.rsSolidOptions[0].lastElementChild.innerHTML=t[0].name;for(var e=1;e0||this.solidProviders&&Object.keys(this.solidProviders).length>0?this.setState("choose"):this.setState("sign-in")}},{key:"setClickHandlers",value: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.rsChooseSolidButton.addEventListener("click",(function(){t.setState("solid"),t.rsProviderInput.focus()}));for(var e=function(e){t.rsSolidOptions[e].addEventListener("click",(function(){t.rs.setSolidAuthURL(t.solidProviders.providers[e].authURL),t.rs.solid.connect()}))},n=0;n\n \n \n \n \n \n \n\n')}},{key:"disableSolidConnectButton",value:function(){this.rsSolidConnectButton.disabled=!0,this.rsSolidConnectButton.classList.add("rs-connecting"),this.rsSolidConnectButton.innerHTML="Connecting ".concat('\n \n \n \n \n \n \n\n')}},{key:"enableConnectButton",value:function(){this.rsConnectButton.disabled=!1,this.rsConnectButton.textContent="Connect",this.rsConnectButton.classList.remove("rs-connecting")}},{key:"enableSolidConnectButton",value:function(){this.rsSolidConnectButton.disabled=!1,this.rsSolidConnectButton.textContent="Connect",this.rsSolidConnectButton.classList.remove("rs-connecting")}},{key:"setOffline",value:function(){this.online&&(this.rsWidget.classList.add("rs-offline"),this.rsConnectedLabel.textContent="Offline",this.online=!1)}},{key:"setOnline",value:function(){this.online||(this.rsWidget.classList.remove("rs-offline"),this.active&&(this.rsConnectedLabel.textContent="Connected")),this.online=!0}},{key:"setBackendClass",value:function(t){this.rsWidget.classList.remove("rs-backend-remotestorage"),this.rsWidget.classList.remove("rs-backend-dropbox"),this.rsWidget.classList.remove("rs-backend-googledrive"),this.rsWidget.classList.remove("rs-backend-solid"),t&&this.rsWidget.classList.add("rs-backend-".concat(t))}},{key:"showErrorBox",value:function(t){this.rsErrorBox.innerHTML=t,this.setState("error")}},{key:"hideErrorBox",value:function(){this.rsErrorBox.innerHTML="",this.close()}},{key:"handleDiscoveryError",value: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()}},{key:"handleSyncError",value:function(t){console.debug("Encountered SyncError",t),this.setOffline()}},{key:"handleUnauthorized",value: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"))}},{key:"updateLastSyncedOutput",value: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")}}},{key:"isSmallScreen",value:function(){return window.innerWidth<421}}],i&&l(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();i.SOLID_COMMUNITY={name:"Solid Community",authURL:"https://solidcommunity.net"},i.INRUPT={name:"Inrupt",authURL:"https://login.inrupt.com"};const s=i;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 4f6a301..45cb072 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"],"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 {object} options.solidProviders - Specify valid Solid providers for the Solid backend\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 */\nclass Widget {\n constructor (remoteStorage, options={}) {\n this.rs = remoteStorage;\n\n this.solidProviders = options.solidProviders ? options.solidProviders : {};\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\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [document.querySelector('button.rs-option-solid') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.solidProviders) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.solidProviders.providers ? this.solidProviders.providers : [];\n\n if (providers.length > 0 || this.solidProviders.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.solidProviders.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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 this.rsSolidForm.addEventListener('submit', (e) => {\n e.preventDefault();\n let authURL = document.querySelector('input[name=rs-provider-address]').value;\n this.disableSolidConnectButton();\n this.rs.setSolidAuthURL(authURL);\n this.rs[\"solid\"].connect()\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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n this.rs.setSolidAuthURL(this.solidProviders.providers[i].authURL);\n this.rs[\"solid\"].connect()\n });\n }\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 * Disable the Solid connect button and indicate connect activity\n *\n * @private\n */\n disableSolidConnectButton () {\n this.rsSolidConnectButton.disabled = true;\n this.rsSolidConnectButton.classList.add('rs-connecting');\n const circleSpinner = circleOpenSvg;\n this.rsSolidConnectButton.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 * (Re)enable the Solid connect button and reset to original state\n *\n * @private\n */\n enableSolidConnectButton () { // TODO\n this.rsSolidConnectButton.disabled = false;\n this.rsSolidConnectButton.textContent = 'Connect';\n this.rsSolidConnectButton.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 this.rsWidget.classList.remove('rs-backend-solid');\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\nWidget.SOLID_COMMUNITY = {\n name: 'Solid Community',\n authURL: 'https://solidcommunity.net'\n};\n\nWidget.INRUPT = {\n name: 'Inrupt',\n authURL: 'https://login.inrupt.com'\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.

Or specify an identity provider

\";\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:not([aria-hidden=true]) {\\n opacity: 1;\\n max-height: 460px;\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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.rs-state-solid .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n.rs-solid-form h3.rs-small-headline {\\n margin-top: 10px;\\n}\\n\\n.rs-sign-in-form input[type=text],\\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\\n.rs-solid-form button.rs-solid-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg,\\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\\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\";"],"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","solidProviders","leaveOpen","autoCloseAfter","skipInitial","logging","modalBackdrop","active","online","closed","lastSynced","lastSyncedUpdateLoop","msg","console","debug","event","log","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","length","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","authURL","disableSolidConnectButton","setSolidAuthURL","display","keys","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","circleOpenSvg","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth","SOLID_COMMUNITY","INRUPT"],"sourceRoot":""} \ No newline at end of file +{"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"],"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 {object} options.solidProviders - Specify valid Solid providers for the Solid backend\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 */\nclass Widget {\n constructor (remoteStorage, options={}) {\n this.rs = remoteStorage;\n\n this.solidProviders = options.solidProviders ? options.solidProviders : {};\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\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [document.querySelector('button.rs-option-solid') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.solidProviders) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.solidProviders.providers ? this.solidProviders.providers : [];\n\n if (providers.length > 0 || this.solidProviders.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.solidProviders.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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 this.rsSolidForm.addEventListener('submit', (e) => {\n e.preventDefault();\n let authURL = document.querySelector('input[name=rs-provider-address]').value;\n this.disableSolidConnectButton();\n this.rs.setSolidAuthURL(authURL);\n this.rs[\"solid\"].connect()\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.solidProviders && Object.keys(this.solidProviders).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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n this.rs.setSolidAuthURL(this.solidProviders.providers[i].authURL);\n this.rs[\"solid\"].connect()\n });\n }\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 * Disable the Solid connect button and indicate connect activity\n *\n * @private\n */\n disableSolidConnectButton () {\n this.rsSolidConnectButton.disabled = true;\n this.rsSolidConnectButton.classList.add('rs-connecting');\n const circleSpinner = circleOpenSvg;\n this.rsSolidConnectButton.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 * (Re)enable the Solid connect button and reset to original state\n *\n * @private\n */\n enableSolidConnectButton () { // TODO\n this.rsSolidConnectButton.disabled = false;\n this.rsSolidConnectButton.textContent = 'Connect';\n this.rsSolidConnectButton.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 this.rsWidget.classList.remove('rs-backend-solid');\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\nWidget.SOLID_COMMUNITY = {\n name: 'Solid Community',\n authURL: 'https://solidcommunity.net'\n};\n\nWidget.INRUPT = {\n name: 'Inrupt',\n authURL: 'https://login.inrupt.com'\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.

Or specify an identity provider

\";\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:not([aria-hidden=true]) {\\n opacity: 1;\\n max-height: 460px;\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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.rs-state-solid .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n.rs-solid-form h3.rs-small-headline {\\n margin-top: 10px;\\n}\\n\\n.rs-sign-in-form input[type=text],\\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\\n.rs-solid-form button.rs-solid-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg,\\n.rs-solid-form button.rs-solid-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 .rs-state-solid {\\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\";"],"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","solidProviders","leaveOpen","autoCloseAfter","skipInitial","logging","modalBackdrop","active","online","closed","lastSynced","lastSyncedUpdateLoop","msg","console","debug","event","log","setState","state","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","length","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","authURL","disableSolidConnectButton","setSolidAuthURL","display","keys","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","circleOpenSvg","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth","SOLID_COMMUNITY","INRUPT"],"sourceRoot":""} \ No newline at end of file diff --git a/src/assets/styles.css b/src/assets/styles.css index 66e0e7d..43ba3d7 100644 --- a/src/assets/styles.css +++ b/src/assets/styles.css @@ -83,7 +83,7 @@ polygon.rs-logo-shape { polygon.rs-logo-shape, #rs-main-logo-dropbox path, -#rs-main-logo-googledrive path { +#rs-main-logo-googledrive path { transition-property: fill; transition-duration: 0.5s; } diff --git a/src/widget.js b/src/widget.js index e5a73bf..208372a 100644 --- a/src/widget.js +++ b/src/widget.js @@ -359,7 +359,8 @@ class Widget { this.rsBackdrop.classList.add('visible'); } // choose backend only if some providers are declared - if (this.rs.apiKeys && Object.keys(this.rs.apiKeys).length > 0) { + if ((this.rs.apiKeys && Object.keys(this.rs.apiKeys).length > 0) || + (this.solidProviders && Object.keys(this.solidProviders).length > 0)) { this.setState('choose'); } else { this.setState('sign-in'); From cb93735f26e95a51be100b2452c1775e7096a9db Mon Sep 17 00:00:00 2001 From: Yashar PourMohammad Date: Mon, 4 Mar 2024 12:18:39 +0000 Subject: [PATCH 06/10] Login done (without error handling) --- src/assets/styles.css | 10 ++++++++- src/assets/widget.html | 28 ++++++++++++++++++++++++- src/widget.js | 47 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 82 insertions(+), 3 deletions(-) diff --git a/src/assets/styles.css b/src/assets/styles.css index 43ba3d7..4064546 100644 --- a/src/assets/styles.css +++ b/src/assets/styles.css @@ -201,6 +201,14 @@ polygon.rs-logo-shape, .rs-button-big:last-child { margin-bottom: 0; } +.rs-button-pod div { + display: flex; + text-overflow: ellipsis; + overflow-x: hidden; + font-size: 12px; + height: 40px; + align-items: center; +} .rs-content { padding: 0 10px 10px 10px; @@ -313,7 +321,7 @@ polygon.rs-logo-shape, .rs-box-connected { display: flex; flex-direction: row; - height: 40px; + height: 41px; transition: height 0s; } .rs-connected-text { diff --git a/src/assets/widget.html b/src/assets/widget.html index 4178e6e..1432376 100644 --- a/src/assets/widget.html +++ b/src/assets/widget.html @@ -6,6 +6,8 @@ rs-state-sign-in rs-state-connected rs-state-error + rs-state-solid + rs-state-choose-pod rs-offline rs-closed @@ -211,7 +213,7 @@

Connect your storage

+ +

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:not([aria-hidden=true]) {\n opacity: 1;\n max-height: 460px;\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 display: block;\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: block;\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: block;\n}\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\n display: none;\n}\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\n display: block;\n}\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\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.rs-button-pod div {\n display: flex;\n text-overflow: ellipsis;\n overflow-x: hidden;\n font-size: 12px;\n height: 40px;\n align-items: center;\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.rs-state-solid .rs-main-logo {\n margin-left: 45%;\n float: none;\n}\n\n.rs-solid-form h3.rs-small-headline {\n margin-top: 10px;\n}\n\n.rs-sign-in-form input[type=text],\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\n.rs-solid-form button.rs-solid-connect:disabled:hover {\n background-color: #aaa;\n}\n\n.rs-sign-in-form button.rs-connecting svg,\n.rs-solid-form button.rs-solid-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: 41px;\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 .rs-state-solid {\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}},{key:"setModalClass",value:function(){if(this.modalBackdrop){if("onlySmallScreens"===this.modalBackdrop&&!this.isSmallScreen())return;this.rsWidget.classList.add("rs-modal")}}},{key:"setupElements",value:function(){if(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.rsSolid=document.querySelector(".rs-box-solid"),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.rsChooseSolidButton=document.querySelector("button.rs-choose-solid"),this.rsSolidOptions=[document.querySelector("button.rs-option-solid")],this.rsSolidPodOptions=[document.querySelector("button.rs-choose-pod")],this.rsErrorBox=document.querySelector(".rs-box-error .rs-error-message"),this.rsSolidForm=document.querySelector(".rs-solid-form"),this.rsProviderInput=this.rsSolidForm.querySelector("input[name=rs-provider-address]"),this.rsSolidConnectButton=document.querySelector(".rs-solid-connect"),this.rs.apiKeys.hasOwnProperty("googledrive")||this.rsChooseGoogleDriveButton.parentNode.removeChild(this.rsChooseGoogleDriveButton),this.rs.apiKeys.hasOwnProperty("dropbox")||this.rsChooseDropboxButton.parentNode.removeChild(this.rsChooseDropboxButton),this.solidProviders){var t=this.solidProviders.providers?this.solidProviders.providers:[];if(t.length>0||this.solidProviders.allowAnyProvider){if(t.length>0){this.rsSolidOptions[0].lastElementChild.innerHTML=t[0].name;for(var e=1;ee.childElementCount;)e.removeChild(e.children[e.childElementCount-1]),this.rsSolidPodOptions.pop();for(;e.childElementCount0||this.solidProviders&&Object.keys(this.solidProviders).length>0?this.setState("choose"):this.setState("sign-in")}},{key:"setClickHandlers",value: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.rsChooseSolidButton.addEventListener("click",(function(){t.setState("solid"),t.rsProviderInput.focus()}));for(var e=function(e){t.rsSolidOptions[e].addEventListener("click",(function(){t.rs.solid.setAuthURL(t.solidProviders.providers[e].authURL),t.rs.solid.connect()}))},n=0;n {\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 {object} options.solidProviders - Specify valid Solid providers for the Solid backend\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 */\nclass Widget {\n constructor (remoteStorage, options={}) {\n this.rs = remoteStorage;\n\n this.solidProviders = options.solidProviders ? options.solidProviders : {};\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\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 'pod-not-selected':\n let podURLs = this.rs.solid.getPodURLs();\n\n if (podURLs.length == 0) {\n // TODO Edge case! Show error. No pods for identity.\n }\n // else if (podURLs.length == 1) {\n // TODO Disabled for testing purpose\n //this.rs.solid.setPodURL(podURLs[0]);\n // }\n else {\n this.populatePodOptions();\n this.setState('choose-pod');\n }\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [ document.querySelector('button.rs-option-solid') ];\n this.rsSolidPodOptions = [ document.querySelector('button.rs-choose-pod') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.solidProviders) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.solidProviders.providers ? this.solidProviders.providers : [];\n\n if (providers.length > 0 || this.solidProviders.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.solidProviders.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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('pod-not-selected', () => this.eventHandler('pod-not-selected'));\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 this.rsSolidForm.addEventListener('submit', (e) => {\n e.preventDefault();\n let authURL = document.querySelector('input[name=rs-provider-address]').value;\n this.disableSolidConnectButton();\n this.rs.setSolidAuthURL(authURL);\n this.rs[\"solid\"].connect()\n });\n }\n\n /**\n * Read solid pod URLs from the remote storage instance and fill the pod options.\n *\n * @private\n */\n populatePodOptions() {\n let podURLs = this.rs.solid.getPodURLs();\n let optionsParent = this.rsSolidPodOptions[0].parentElement;\n\n while (podURLs.length > optionsParent.childElementCount) {\n optionsParent.removeChild(optionsParent.children[optionsParent.childElementCount - 1]);\n this.rsSolidPodOptions.pop();\n }\n\n while (optionsParent.childElementCount < podURLs.length) {\n this.rsSolidPodOptions.concat(this.rsSolidPodOptions[0].cloneNode(true));\n }\n\n let rs = this.rs;\n\n for (let i = 0; i < podURLs.length; i++) {\n this.rsSolidPodOptions[i].children[1].textContent = podURLs[i];\n this.rsSolidPodOptions[i].addEventListener('click', function() {\n rs.solid.setPodURL(this.children[1].textContent);\n });\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.solidProviders && Object.keys(this.solidProviders).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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n this.rs.setSolidAuthURL(this.solidProviders.providers[i].authURL);\n this.rs[\"solid\"].connect()\n });\n }\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 * Disable the Solid connect button and indicate connect activity\n *\n * @private\n */\n disableSolidConnectButton () {\n this.rsSolidConnectButton.disabled = true;\n this.rsSolidConnectButton.classList.add('rs-connecting');\n const circleSpinner = circleOpenSvg;\n this.rsSolidConnectButton.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 * (Re)enable the Solid connect button and reset to original state\n *\n * @private\n */\n enableSolidConnectButton () { // TODO\n this.rsSolidConnectButton.disabled = false;\n this.rsSolidConnectButton.textContent = 'Connect';\n this.rsSolidConnectButton.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 this.rsWidget.classList.remove('rs-backend-solid');\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\nWidget.SOLID_COMMUNITY = {\n name: 'Solid Community',\n authURL: 'https://solidcommunity.net'\n};\n\nWidget.INRUPT = {\n name: 'Inrupt',\n authURL: 'https://login.inrupt.com'\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.

Select your pod

Select a pod to use as your storage.

Or specify an identity provider

\";\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:not([aria-hidden=true]) {\\n opacity: 1;\\n max-height: 460px;\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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.rs-button-pod div {\\n display: flex;\\n text-overflow: ellipsis;\\n overflow-x: hidden;\\n font-size: 12px;\\n height: 40px;\\n align-items: center;\\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.rs-state-solid .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n.rs-solid-form h3.rs-small-headline {\\n margin-top: 10px;\\n}\\n\\n.rs-sign-in-form input[type=text],\\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\\n.rs-solid-form button.rs-solid-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg,\\n.rs-solid-form button.rs-solid-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: 41px;\\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 .rs-state-solid {\\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\";"],"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","solidProviders","leaveOpen","autoCloseAfter","skipInitial","logging","modalBackdrop","active","online","closed","lastSynced","lastSyncedUpdateLoop","msg","console","debug","event","log","setState","state","solid","getPodURLs","length","populatePodOptions","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsSolidPodOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","authURL","disableSolidConnectButton","setSolidAuthURL","podURLs","optionsParent","parentElement","childElementCount","children","pop","concat","setPodURL","display","keys","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","circleOpenSvg","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth","SOLID_COMMUNITY","INRUPT"],"sourceRoot":""} \ No newline at end of file +{"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/assets/widget.html","webpack://Widget/./src/assets/circle-open.svg","webpack://Widget/./src/widget.js","webpack://Widget/./src/assets/styles.css"],"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, () => {\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))","// 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.

Select your pod

Select a pod to use as your storage.

Or specify an identity provider

\";\n// Exports\nexport default code;","export default \"\\n \\n \\n \\n \\n \\n \\n\\n\";","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 {object} options.solidProviders - Specify valid Solid providers for the Solid backend\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 */\nclass Widget {\n constructor (remoteStorage, options={}) {\n this.rs = remoteStorage;\n\n this.solidProviders = options.solidProviders ? options.solidProviders : {};\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\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 'pod-not-selected':\n let podURLs = this.rs.solid.getPodURLs();\n\n if (podURLs.length === 0) {\n this.handleNoPod();\n }\n else if (podURLs.length === 1) {\n this.rs.solid.setPodURL(podURLs[0]);\n }\n else {\n this.populatePodOptions();\n this.setState('choose-pod');\n }\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 this.rsSolid = document.querySelector('.rs-box-solid');\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.rsChooseSolidButton = document.querySelector('button.rs-choose-solid');\n this.rsSolidOptions = [ document.querySelector('button.rs-option-solid') ];\n this.rsSolidPodOptions = [ document.querySelector('button.rs-choose-pod') ];\n this.rsErrorBox = document.querySelector('.rs-box-error .rs-error-message');\n \n this.rsSolidForm = document.querySelector('.rs-solid-form');\n this.rsProviderInput = this.rsSolidForm.querySelector('input[name=rs-provider-address]');\n this.rsSolidConnectButton = document.querySelector('.rs-solid-connect');\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 // check if solid provideres are configured to add, show or hide buttons\n // only if needed\n if (! this.solidProviders) {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\n else {\n const providers = this.solidProviders.providers ? this.solidProviders.providers : [];\n\n if (providers.length > 0 || this.solidProviders.allowAnyProvider) {\n if (providers.length > 0) {\n this.rsSolidOptions[0].lastElementChild.innerHTML = providers[0].name;\n\n for (let i = 1; i < providers.length; i++) {\n const previousButton = this.rsSolidOptions[i - 1];\n const nextButton = previousButton.cloneNode(true);\n nextButton.lastElementChild.innerHTML = providers[i].name;\n previousButton.after(nextButton);\n }\n }\n else {\n this.rsSolidOptions[0].parentNode.removeChild(this.rsSolidOptions[0]); \n }\n \n if (! this.solidProviders.allowAnyProvider) {\n this.rsSolidForm.parentNode.removeChild(this.rsSolidForm);\n }\n }\n else {\n this.rsChooseSolidButton.parentNode.removeChild(this.rsChooseSolidButton);\n }\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('pod-not-selected', () => this.eventHandler('pod-not-selected'));\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 this.rsSolidForm.addEventListener('submit', (e) => {\n e.preventDefault();\n let authURL = document.querySelector('input[name=rs-provider-address]').value;\n this.disableSolidConnectButton();\n this.rs[\"solid\"].setAuthURL(authURL);\n this.rs[\"solid\"].connect()\n });\n }\n\n /**\n * Read solid pod URLs from the remote storage instance and fill the pod options.\n *\n * @private\n */\n populatePodOptions() {\n let podURLs = this.rs.solid.getPodURLs();\n let optionsParent = this.rsSolidPodOptions[0].parentElement;\n\n while (podURLs.length > optionsParent.childElementCount) {\n optionsParent.removeChild(optionsParent.children[optionsParent.childElementCount - 1]);\n this.rsSolidPodOptions.pop();\n }\n\n while (optionsParent.childElementCount < podURLs.length) {\n this.rsSolidPodOptions.concat(this.rsSolidPodOptions[0].cloneNode(true));\n }\n\n let rs = this.rs;\n\n for (let i = 0; i < podURLs.length; i++) {\n this.rsSolidPodOptions[i].children[1].textContent = podURLs[i];\n this.rsSolidPodOptions[i].addEventListener('click', function() {\n rs.solid.setPodURL(this.children[1].textContent);\n });\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.solidProviders && Object.keys(this.solidProviders).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 // Choose Solid button\n this.rsChooseSolidButton.addEventListener('click', () => {\n this.setState('solid');\n this.rsProviderInput.focus();\n });\n\n for (let i = 0; i < this.rsSolidOptions.length; i++) {\n this.rsSolidOptions[i].addEventListener('click', () => {\n this.rs[\"solid\"].setAuthURL(this.solidProviders.providers[i].authURL);\n this.rs[\"solid\"].connect()\n });\n }\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 * Disable the Solid connect button and indicate connect activity\n *\n * @private\n */\n disableSolidConnectButton () {\n this.rsSolidConnectButton.disabled = true;\n this.rsSolidConnectButton.classList.add('rs-connecting');\n const circleSpinner = circleOpenSvg;\n this.rsSolidConnectButton.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 this.rsWidget.classList.remove('rs-backend-solid');\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 handleNoPod () {\n this.open();\n this.showErrorBox('This account has no pods.');\n this.rsErrorBox.appendChild(this.rsErrorDisconnectButton);\n this.rsErrorDisconnectButton.classList.remove('rs-hidden');\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\nWidget.SOLID_COMMUNITY = {\n name: 'Solid Community',\n authURL: 'https://solidcommunity.net'\n};\n\nWidget.INRUPT = {\n name: 'Inrupt',\n authURL: 'https://login.inrupt.com'\n};\n\nexport default Widget;\n","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:not([aria-hidden=true]) {\\n opacity: 1;\\n max-height: 460px;\\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 display: block;\\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: block;\\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: block;\\n}\\n.rs-widget:not(.rs-backend-googledrive) svg#rs-main-logo-googledrive {\\n display: none;\\n}\\n.rs-widget.rs-backend-solid svg#rs-main-logo-solid {\\n display: block;\\n}\\n.rs-widget:not(.rs-backend-solid) svg#rs-main-logo-solid {\\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.rs-button-pod div {\\n display: flex;\\n text-overflow: ellipsis;\\n overflow-x: hidden;\\n font-size: 12px;\\n height: 40px;\\n align-items: center;\\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.rs-state-solid .rs-main-logo {\\n margin-left: 45%;\\n float: none;\\n}\\n\\n.rs-solid-form h3.rs-small-headline {\\n margin-top: 10px;\\n}\\n\\n.rs-sign-in-form input[type=text],\\n.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-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.rs-solid-form button.rs-solid-connect:disabled,\\n.rs-solid-form button.rs-solid-connect:disabled:hover {\\n background-color: #aaa;\\n}\\n\\n.rs-sign-in-form button.rs-connecting svg,\\n.rs-solid-form button.rs-solid-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: 41px;\\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 .rs-state-solid {\\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\";"],"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","arguments","length","undefined","_classCallCheck","this","rs","solidProviders","leaveOpen","autoCloseAfter","skipInitial","logging","modalBackdrop","active","online","closed","lastSynced","lastSyncedUpdateLoop","value","_console","_len","msg","Array","_key","console","debug","apply","concat","event","_this","log","setState","state","podURLs","solid","getPodURLs","handleNoPod","setPodURL","populatePodOptions","syncInProgress","rsSyncButton","classList","add","setTimeout","rsConnectedLabel","textContent","remove","rsWidget","contains","remote","updateLastSyncedOutput","Date","shouldCloseWhenSyncDone","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","connectedUser","userAddress","rsConnectedUser","innerHTML","backend","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","document","querySelector","setAttribute","toSelect","currentStateClass","className","match","showChooseOrSignIn","element","createElement","id","style","appendChild","isSmallScreen","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsSolid","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsChooseSolidButton","rsSolidOptions","rsSolidPodOptions","rsErrorBox","rsSolidForm","rsProviderInput","rsSolidConnectButton","apiKeys","parentNode","removeChild","providers","allowAnyProvider","lastElementChild","i","previousButton","nextButton","cloneNode","after","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","_this2","error","setEventListeners","setClickHandlers","elementId","parentContainerEl","domElement","createHtmlTemplate","getElementById","parent","body","setupElements","setupHandlers","setModalClass","_this3","addEventListener","e","preventDefault","disableConnectButton","connect","authURL","disableSolidConnectButton","setAuthURL","optionsParent","parentElement","childElementCount","children","pop","display","keys","_this4","focus","_loop","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","_this5","disabled","circleSpinner","circleOpenSvg","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","secondsSinceLastSync","Math","round","getTime","window","innerWidth","SOLID_COMMUNITY","INRUPT"],"sourceRoot":""} \ No newline at end of file