diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 98bf04f..0000000 --- a/.jshintrc +++ /dev/null @@ -1,39 +0,0 @@ -{ - "predef": [ - "global", - "Promise", - "require", - "process", - "module", - "exports", - "document", - "setInterval", - "setTimeout", - "clearInterval" - ], - "browser": false, - "boss": true, - "curly": true, - "debug": false, - "devel": true, - "eqeqeq": true, - "evil": true, - "forin": false, - "immed": false, - "laxbreak": false, - "newcap": true, - "noarg": true, - "noempty": false, - "nonew": false, - "nomen": false, - "onevar": false, - "plusplus": false, - "regexp": false, - "undef": true, - "sub": true, - "strict": false, - "white": false, - "eqnull": true, - "esnext": true, - "unused": true -} diff --git a/biome.json b/biome.json new file mode 100644 index 0000000..081d031 --- /dev/null +++ b/biome.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", + "files": { + "ignore": ["src/**/*.css", "src/**/*.html", "src/**/*.svg"] + } +} diff --git a/build/widget.js b/build/widget.js index 51d33d4..d824a65 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,this.parentContainerEl=null,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(){if(!this.parentContainerEl)throw new Error("Parent container element not found");this.rsWidget=this.parentContainerEl.querySelector(".rs-widget"),this.rsBackdrop=this.parentContainerEl.querySelector(".remotestorage-widget-modal-backdrop"),this.rsInitial=this.parentContainerEl.querySelector(".rs-box-initial"),this.rsChoose=this.parentContainerEl.querySelector(".rs-box-choose"),this.rsConnected=this.parentContainerEl.querySelector(".rs-box-connected"),this.rsSignIn=this.parentContainerEl.querySelector(".rs-box-sign-in"),this.rsConnectedLabel=this.parentContainerEl.querySelector(".rs-box-connected .rs-sub-headline"),this.rsChooseRemoteStorageButton=this.parentContainerEl.querySelector("button.rs-choose-rs"),this.rsChooseDropboxButton=this.parentContainerEl.querySelector("button.rs-choose-dropbox"),this.rsChooseGoogleDriveButton=this.parentContainerEl.querySelector("button.rs-choose-googledrive"),this.rsErrorBox=this.parentContainerEl.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=this.parentContainerEl.querySelector(".rs-sign-in-form"),this.rsAddressInput=this.rsSignInForm.querySelector("input[name=rs-user-address]"),this.rsConnectButton=this.parentContainerEl.querySelector(".rs-connect"),this.rsDisconnectButton=this.parentContainerEl.querySelector(".rs-disconnect"),this.rsSyncButton=this.parentContainerEl.querySelector(".rs-sync"),this.rsLogo=this.parentContainerEl.querySelector(".rs-widget-icon"),this.rsErrorReconnectLink=this.parentContainerEl.querySelector(".rs-box-error a.rs-reconnect"),this.rsErrorDisconnectButton=this.parentContainerEl.querySelector(".rs-box-error button.rs-disconnect"),this.rsConnectedUser=this.parentContainerEl.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=this.createHtmlTemplate(t);if(this.parentContainerEl,t instanceof HTMLElement)this.parentContainerEl=t;else if("string"==typeof t){if(this.parentContainerEl=document.getElementById(t),!this.parentContainerEl)throw new Error('Failed to find target DOM element with id="'+t+'"')}else{if(t)throw new Error("Unknown element type. Expected instance of HTMLElement or type of string.");this.parentContainerEl=document.body}this.parentContainerEl.appendChild(e),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=t.parentContainerEl.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=this.parentContainerEl.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=this.parentContainerEl.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:"handleSyncStarted",value:function(){var t=this;this.syncInProgress=!0,this.rsSyncButton.classList.add("rs-rotate"),setTimeout((function(){t.syncInProgress&&(t.rsConnectedLabel.textContent="Synchronizing")}),1e3)}},{key:"handleDiscoveryError",value:function(t){var e=this.parentContainerEl.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){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:"updateLastSyncedStatus",value:function(){var t=new Date;this.online?(this.lastSynced=t,this.rsConnectedLabel.textContent="Synced"):this.rsWidget.classList.contains("rs-state-unauthorized")||(this.rsConnectedLabel.textContent="Offline")}},{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,()=>(()=>{"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){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,l=Array(e);nu});var h=function(t){function e(){var t;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),c(t=function(t,e,l){return e=s(e),function(t,e){if(e&&("object"==n(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,r()?Reflect.construct(e,l||[],s(t).constructor):e.apply(t,l))}(this,e),"leaveOpen",!1),c(t,"autoCloseAfter",1500),c(t,"skipInitial",!1),c(t,"logging",!1),c(t,"modalBackdrop","onlySmallScreens"),c(t,"active",!1),c(t,"online",!1),c(t,"closed",!1),c(t,"state",""),c(t,"syncInProgress",!1),c(t,"shouldCloseWhenSyncDone",!1),c(t,"lastSynced",null),t.setupShadowDOM(),t}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&a(t,e)}(e,t),o=e,d=[{key:"setupShadowDOM",value:function(){var t=this.attachShadow({mode:"open"}),e=document.createElement("template");e.innerHTML="\n\t\t\t\n\t\t\t").concat('

Connect your storage

To sync data with your account
',"\n\t\t"),t.appendChild(e.content.cloneNode(!0))}},{key:"setRemoteStorage",value:function(t){this.rs=t,this.setupHandlers(),this.setInitialState(),this.setModalClass()}},{key:"setOptions",value:function(t){if(this.leaveOpen=t.leaveOpen||!1,this.autoCloseAfter=t.autoCloseAfter||1500,this.skipInitial=t.skipInitial||!1,this.logging=t.logging||!1,"modalBackdrop"in t){if("boolean"!=typeof t.modalBackdrop&&"onlySmallScreens"!==t.modalBackdrop)throw'options.modalBackdrop has to be true/false or "onlySmallScreens"';this.modalBackdrop=t.modalBackdrop}else this.modalBackdrop="onlySmallScreens"}},{key:"log",value:function(){if(this.logging){for(var t,e=arguments.length,n=new Array(e),l=0;l0?this.setState("choose"):this.setState("sign-in")}},{key:"setClickHandlers",value:function(){var t,e,n,i,o,r,a,s,c=this,d=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-box-initial");d&&d.addEventListener("click",function(){return c.showChooseOrSignIn()});var h=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("button.rs-choose-rs");h&&h.addEventListener("click",function(){var t;c.setState("sign-in");var e=null===(t=c.shadowRoot)||void 0===t?void 0:t.querySelector("input[name=rs-user-address]");e&&e.focus()});var p=null===(n=this.shadowRoot)||void 0===n?void 0:n.querySelector("button.rs-choose-dropbox");p&&p.addEventListener("click",function(){var t;return null===(t=c.rs.dropbox)||void 0===t?void 0:t.connect()});var f=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector("button.rs-choose-googledrive");f&&f.addEventListener("click",function(){var t;return null===(t=c.rs.googledrive)||void 0===t?void 0:t.connect()});var m,u=function(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return l(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?l(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var i=0,o=function(){};return{s:o,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,a=!0,s=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return a=t.done,t},e:function(t){s=!0,r=t},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw r}}}}(null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelectorAll(".rs-disconnect"));try{for(u.s();!(m=u.n()).done;)m.value.addEventListener("click",function(){return c.rs.disconnect()})}catch(t){u.e(t)}finally{u.f()}var b=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".rs-box-error a.rs-reconnect");if(b&&b.addEventListener("click",function(){return c.rs.reconnect()}),this.rs.hasFeature("Sync")){var v,g=null===(v=this.shadowRoot)||void 0===v?void 0:v.querySelector(".rs-sync");g&&g.addEventListener("click",function(){if(g.classList.contains("rs-rotate"))c.rs.stopSync(),g.classList.remove("rs-rotate");else{var t,e=null===(t=c.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-box-connected .rs-sub-headline");e&&(e.textContent="Synchronizing"),c.rs.startSync(),g.classList.add("rs-rotate")}})}document.addEventListener("click",function(){return c.close()});var z=null===(a=this.shadowRoot)||void 0===a?void 0:a.querySelector(".rs-widget");z&&z.addEventListener("click",function(t){return t.stopPropagation()});var y=null===(s=this.shadowRoot)||void 0===s?void 0:s.querySelector(".rs-widget-icon");y&&y.addEventListener("click",function(){return c.toggle()})}},{key:"toggle",value:function(){this.closed?this.open():"initial"===this.state?this.showChooseOrSignIn():this.close()}},{key:"open",value:function(){var t,e;this.closed=!1;var n=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-widget");n&&n.classList.remove("rs-closed"),this.shouldCloseWhenSyncDone=!1;var l=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".rs-box.rs-selected");l&&l.setAttribute("aria-hidden","false")}},{key:"close",value:function(){var t;if("error"!==this.state){var e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-widget");if(!this.leaveOpen&&this.active){var n;this.closed=!0,e&&e.classList.add("rs-closed");var l=null===(n=this.shadowRoot)||void 0===n?void 0:n.querySelector(".rs-box.rs-selected");l&&l.setAttribute("aria-hidden","true")}else this.active?this.setState("connected"):this.setInitialState();if(null!=e&&e.classList.contains("rs-modal")){var i,o=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".remotestorage-widget-modal-backdrop");o&&(o.classList.remove("visible"),setTimeout(function(){o.style.display="none"},300))}}}},{key:"disableConnectButton",value:function(){var t,e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-connect");e&&(e.disabled=!0,e.classList.add("rs-connecting"),e.innerHTML="Connecting ".concat('\n \n \n \n \n \n \n\n'))}},{key:"enableConnectButton",value:function(){var t,e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-connect");e&&(e.disabled=!1,e.textContent="Connect",e.classList.remove("rs-connecting"))}},{key:"setOffline",value:function(){if(this.online){var t,e,n=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-widget");n&&n.classList.add("rs-offline");var l=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".rs-box-connected .rs-sub-headline");l&&(l.textContent="Offline"),this.online=!1}}},{key:"setOnline",value:function(){if(!this.online){var t,e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-widget");if(e&&e.classList.remove("rs-offline"),this.active){var n,l=null===(n=this.shadowRoot)||void 0===n?void 0:n.querySelector(".rs-box-connected .rs-sub-headline");l&&(l.textContent="Connected")}}this.online=!0}},{key:"setBackendClass",value:function(t){var e,n=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".rs-widget");n&&(n.classList.remove("rs-backend-remotestorage"),n.classList.remove("rs-backend-dropbox"),n.classList.remove("rs-backend-googledrive"),t&&n.classList.add("rs-backend-".concat(t)))}},{key:"showErrorBox",value:function(t){var e,n=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".rs-box-error .rs-error-message");n&&(n.innerHTML=t),this.setState("error")}},{key:"hideErrorBox",value:function(){var t,e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-box-error .rs-error-message");e&&(e.innerHTML=""),this.close()}},{key:"handleSyncStarted",value:function(){var t,e=this;this.syncInProgress=!0;var n=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-sync");n&&n.classList.add("rs-rotate"),setTimeout(function(){var t;if(e.syncInProgress){var n=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector(".rs-box-connected .rs-sub-headline");n&&(n.textContent="Synchronizing")}},1e3)}},{key:"handleDiscoveryError",value:function(t){var e,n=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".rs-sign-in-error");n&&(n.innerHTML=t.message,n.classList.remove("rs-hidden"),n.classList.add("rs-visible")),this.enableConnectButton()}},{key:"handleSyncError",value:function(t){this.setOffline()}},{key:"handleUnauthorized",value:function(t){if(t.code&&"access_denied"===t.code)this.rs.disconnect();else{var e,n;this.open(),this.showErrorBox("".concat(t.message," "));var l=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".rs-box-error .rs-error-message"),i=null===(n=this.shadowRoot)||void 0===n?void 0:n.querySelector(".rs-box-error a.rs-reconnect");l&&i&&(l.appendChild(i),i.classList.remove("rs-hidden"))}}},{key:"updateLastSyncedStatus",value:function(){var t=new Date;if(this.online){var e;this.lastSynced=t;var n=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".rs-box-connected .rs-sub-headline");n&&(n.textContent="Synced")}else{var l,i=null===(l=this.shadowRoot)||void 0===l?void 0:l.querySelector(".rs-widget");if(null==i||!i.classList.contains("rs-state-unauthorized")){var o,r=null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(".rs-box-connected .rs-sub-headline");r&&(r.textContent="Offline")}}}},{key:"isSmallScreen",value:function(){return window.innerWidth<421}}],d&&i(o.prototype,d),Object.defineProperty(o,"prototype",{writable:!1}),o;var o,d}(o(HTMLElement));function p(t){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},p(t)}function f(t,e){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.parentContainerEl=null,this.component=document.createElement("remotestorage-widget"),this.component.setRemoteStorage(e),this.component.setOptions(n)},(e=[{key:"attach",value:function(t){if(t instanceof HTMLElement)this.parentContainerEl=t;else if("string"==typeof t){if(this.parentContainerEl=document.getElementById(t),!this.parentContainerEl)throw new Error('Failed to find target DOM element with id="'.concat(t,'"'))}else{if(t)throw new Error("Unknown element type. Expected instance of HTMLElement or type of string.");this.parentContainerEl=document.body}this.parentContainerEl.appendChild(this.component)}},{key:"toggle",value:function(){this.component.toggle()}},{key:"open",value:function(){this.component.open()}},{key:"close",value:function(){this.component.close()}}])&&f(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();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 a55607c..a82372d 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 this.parentContainerEl = null;\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-started':\n this.handleSyncStarted();\n break;\n // For backward compatibility with rs.js <= 2.0.0-beta.6\n case 'sync-req-done':\n this.handleSyncStarted();\n break;\n case 'sync-done':\n if (this.online && !msg.completed) return;\n this.syncInProgress = false;\n this.rsSyncButton.classList.remove(\"rs-rotate\");\n this.updateLastSyncedStatus();\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', msg => this.eventHandler('sync-req-done', msg));\n this.rs.on('sync-done', msg => this.eventHandler('sync-done', msg));\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 = this.parentContainerEl.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 = this.parentContainerEl.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 * @throws {Error} If parent container element not found\n * @private\n */\n setupElements () {\n if (!this.parentContainerEl) {\n throw new Error(\"Parent container element not found\");\n }\n\n this.rsWidget = this.parentContainerEl.querySelector('.rs-widget');\n this.rsBackdrop = this.parentContainerEl.querySelector('.remotestorage-widget-modal-backdrop');\n this.rsInitial = this.parentContainerEl.querySelector('.rs-box-initial');\n this.rsChoose = this.parentContainerEl.querySelector('.rs-box-choose');\n this.rsConnected = this.parentContainerEl.querySelector('.rs-box-connected');\n this.rsSignIn = this.parentContainerEl.querySelector('.rs-box-sign-in');\n\n this.rsConnectedLabel = this.parentContainerEl.querySelector('.rs-box-connected .rs-sub-headline');\n this.rsChooseRemoteStorageButton = this.parentContainerEl.querySelector('button.rs-choose-rs');\n this.rsChooseDropboxButton = this.parentContainerEl.querySelector('button.rs-choose-dropbox');\n this.rsChooseGoogleDriveButton = this.parentContainerEl.querySelector('button.rs-choose-googledrive');\n this.rsErrorBox = this.parentContainerEl.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 = this.parentContainerEl.querySelector('.rs-sign-in-form');\n this.rsAddressInput = this.rsSignInForm.querySelector('input[name=rs-user-address]');\n this.rsConnectButton = this.parentContainerEl.querySelector('.rs-connect');\n\n this.rsDisconnectButton = this.parentContainerEl.querySelector('.rs-disconnect');\n this.rsSyncButton = this.parentContainerEl.querySelector('.rs-sync');\n this.rsLogo = this.parentContainerEl.querySelector('.rs-widget-icon');\n\n this.rsErrorReconnectLink = this.parentContainerEl.querySelector('.rs-box-error a.rs-reconnect');\n this.rsErrorDisconnectButton = this.parentContainerEl.querySelector('.rs-box-error button.rs-disconnect');\n\n this.rsConnectedUser = this.parentContainerEl.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 a parentElement is specified, the widget will be appended to that\n * element, otherwise it will be appended to the document's body. The parent\n * element can be given either as a simple element ID or as a valid HTML\n * element.\n *\n * @param {String,HTMLElement} [parentElement] - Parent element\n * @throws {Error} If the element is not found or is of an unknown type.\n */\n attach (element) {\n const domElement = this.createHtmlTemplate(element);\n\n this.parentContainerEl;\n\n if (element instanceof HTMLElement) {\n this.parentContainerEl = element;\n } else if (typeof element === \"string\") {\n this.parentContainerEl = document.getElementById(element);\n if (!this.parentContainerEl) {\n throw new Error(\"Failed to find target DOM element with id=\\\"\" + element + \"\\\"\");\n }\n } else if (element) {\n throw new Error(\"Unknown element type. Expected instance of HTMLElement or type of string.\");\n } else {\n this.parentContainerEl = document.body;\n }\n this.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 = this.parentContainerEl.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 = this.parentContainerEl.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 = this.parentContainerEl.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 handleSyncStarted () {\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 }\n\n handleDiscoveryError (error) {\n let msgContainer = this.parentContainerEl.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 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 updateLastSyncedStatus () {\n const now = new Date();\n if (this.online) {\n this.lastSynced = now;\n this.rsConnectedLabel.textContent = 'Synced';\n } else {\n if (!this.rsWidget.classList.contains('rs-state-unauthorized')) {\n this.rsConnectedLabel.textContent = 'Offline';\n }\n }\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","parentContainerEl","modalBackdrop","active","online","closed","lastSynced","lastSyncedUpdateLoop","msg","console","debug","event","log","setState","state","handleSyncStarted","completed","syncInProgress","rsSyncButton","classList","remove","updateLastSyncedStatus","shouldCloseWhenSyncDone","setTimeout","close","bind","setOnline","setBackendClass","open","setInitialState","hasFeature","on","eventHandler","add","connectedUser","remote","userAddress","rsConnectedUser","innerHTML","backend","rsConnectedLabel","textContent","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","lastSelected","querySelector","setAttribute","toSelect","currentStateClass","rsWidget","className","match","showChooseOrSignIn","element","document","createElement","id","style","appendChild","isSmallScreen","Error","rsBackdrop","rsInitial","rsChoose","rsConnected","rsSignIn","rsChooseRemoteStorageButton","rsChooseDropboxButton","rsChooseGoogleDriveButton","rsErrorBox","apiKeys","parentNode","removeChild","rsSignInForm","rsAddressInput","rsConnectButton","rsDisconnectButton","rsLogo","rsErrorReconnectLink","rsErrorDisconnectButton","error","setEventListeners","setClickHandlers","domElement","createHtmlTemplate","HTMLElement","getElementById","body","setupElements","setupHandlers","setModalClass","addEventListener","e","preventDefault","value","disableConnectButton","connect","contains","display","keys","length","focus","disconnect","reconnect","stopSync","startSync","stopPropagation","toggle","selected","disabled","errorMsg","msgContainer","message","enableConnectButton","code","showErrorBox","now","Date","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-component.ts","webpack://Widget/./src/assets/styles.css","webpack://Widget/./src/assets/widget.html","webpack://Widget/./src/assets/circle-open.svg","webpack://Widget/./src/widget.ts"],"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))","import circleOpenSvg from \"./assets/circle-open.svg\";\nimport widgetCss from \"./assets/styles.css\";\nimport widgetHtml from \"./assets/widget.html\";\n\ninterface RemoteStorage {\n\tapiKeys: Record;\n\tbackend: string;\n\tremote: {\n\t\tuserAddress: string;\n\t};\n\ton(event: string, handler: (...args: unknown[]) => void): void;\n\tconnect(userAddress: string): void;\n\tdisconnect(): void;\n\treconnect(): void;\n\tstartSync(): void;\n\tstopSync(): void;\n\thasFeature(feature: string): boolean;\n\tdropbox?: {\n\t\tconnect(): void;\n\t};\n\tgoogledrive?: {\n\t\tconnect(): void;\n\t};\n}\n\ninterface SyncMessage {\n\t\tcompleted?: boolean;\n}\n\ninterface ErrorMessage {\n\t\tname: string;\n\n\tmessage: string;\n\n\tcode?: string;\n}\n\nexport class RemoteStorageWidget extends HTMLElement {\n\tprivate rs!: RemoteStorage;\n\tprivate leaveOpen = false;\n\tprivate autoCloseAfter = 1500;\n\tprivate skipInitial = false;\n\tprivate logging = false;\n\tprivate modalBackdrop: boolean | \"onlySmallScreens\" = \"onlySmallScreens\";\n\n\tprivate active = false;\n\tprivate online = false;\n\tprivate closed = false;\n\tprivate state = \"\";\n\tprivate syncInProgress = false;\n\tprivate shouldCloseWhenSyncDone = false;\n\tprivate lastSynced: Date | null = null;\n\tprivate lastSyncedUpdateLoop: unknown;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.setupShadowDOM();\n\t}\n\n\tprivate setupShadowDOM() {\n\t\t// Create shadow root\n\t\tconst shadow = this.attachShadow({ mode: 'open' });\n\n\t\t// Create template with styles and HTML\n\t\tconst template = document.createElement('template');\n\t\ttemplate.innerHTML = `\n\t\t\t\n\t\t\t${widgetHtml}\n\t\t`;\n\n\t\t// Clone template content into shadow DOM\n\t\tshadow.appendChild(template.content.cloneNode(true));\n\t}\n\n\t// Public API methods\n\tsetRemoteStorage(rs: RemoteStorage) {\n\t\tthis.rs = rs;\n\t\tthis.setupHandlers();\n\t\tthis.setInitialState();\n\t\tthis.setModalClass();\n\t}\n\n\tsetOptions(options: {\n\t\tleaveOpen?: boolean;\n\t\tautoCloseAfter?: number;\n\t\tskipInitial?: boolean;\n\t\tlogging?: boolean;\n\t\tmodalBackdrop?: boolean | \"onlySmallScreens\";\n\t}) {\n\t\tthis.leaveOpen = options.leaveOpen || false;\n\t\tthis.autoCloseAfter = options.autoCloseAfter || 1500;\n\t\tthis.skipInitial = options.skipInitial || false;\n\t\tthis.logging = options.logging || false;\n\n\t\tif (\"modalBackdrop\" in options) {\n\t\t\tif (\n\t\t\t\ttypeof options.modalBackdrop !== \"boolean\" &&\n\t\t\t\toptions.modalBackdrop !== \"onlySmallScreens\"\n\t\t\t) {\n\t\t\t\tthrow 'options.modalBackdrop has to be true/false or \"onlySmallScreens\"';\n\t\t\t}\n\t\t\tthis.modalBackdrop = options.modalBackdrop!;\n\t\t} else {\n\t\t\tthis.modalBackdrop = \"onlySmallScreens\";\n\t\t}\n\t}\n\n\tlog(...msg: unknown[]): void {\n\t\tif (this.logging) {\n\t\t\tconsole.debug(\"[RS-WIDGET] \", ...msg);\n\t\t}\n\t}\n\n\teventHandler(event: string, msg?: SyncMessage | ErrorMessage): void {\n\t\tthis.log(\"EVENT: \", event);\n\t\tswitch (event) {\n\t\t\tcase \"ready\":\n\t\t\t\tthis.setState(this.state);\n\t\t\t\tbreak;\n\t\t\tcase \"sync-started\":\n\t\t\t\tthis.handleSyncStarted();\n\t\t\t\tbreak;\n\t\t\tcase \"sync-req-done\":\n\t\t\t\tthis.handleSyncStarted();\n\t\t\t\tbreak;\n\t\t\tcase \"sync-done\": {\n\t\t\t\tif (this.online && !msg?.completed) return;\n\t\t\t\tthis.syncInProgress = false;\n\t\t\t\tconst rsSyncButton = this.shadowRoot?.querySelector('.rs-sync') as HTMLElement;\n\t\t\t\tif (rsSyncButton) {\n\t\t\t\t\trsSyncButton.classList.remove(\"rs-rotate\");\n\t\t\t\t}\n\t\t\t\tthis.updateLastSyncedStatus();\n\t\t\t\tif (!this.closed && this.shouldCloseWhenSyncDone) {\n\t\t\t\t\tsetTimeout(this.close.bind(this), this.autoCloseAfter);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"disconnected\":\n\t\t\t\tthis.active = false;\n\t\t\t\tthis.setOnline();\n\t\t\t\tthis.setBackendClass(undefined);\n\t\t\t\tthis.open();\n\t\t\t\tthis.setInitialState();\n\t\t\t\tbreak;\n\t\t\tcase \"connected\": {\n\t\t\t\tthis.active = true;\n\t\t\t\tthis.online = true;\n\t\t\t\tif (this.rs.hasFeature(\"Sync\")) {\n\t\t\t\t\tthis.shouldCloseWhenSyncDone = true;\n\t\t\t\t\tthis.rs.on(\"sync-req-done\", (msg) =>\n\t\t\t\t\t\tthis.eventHandler(\"sync-req-done\", msg),\n\t\t\t\t\t);\n\t\t\t\t\tthis.rs.on(\"sync-done\", (msg) => this.eventHandler(\"sync-done\", msg));\n\t\t\t\t} else {\n\t\t\t\t\tconst syncButton = this.shadowRoot?.querySelector('.rs-sync') as HTMLElement;\n\t\t\t\t\tif (syncButton) {\n\t\t\t\t\t\tsyncButton.classList.add(\"rs-hidden\");\n\t\t\t\t\t}\n\t\t\t\t\tsetTimeout(this.close.bind(this), this.autoCloseAfter);\n\t\t\t\t}\n\t\t\t\tconst connectedUser = this.rs.remote.userAddress;\n\t\t\t\tconst rsConnectedUser = this.shadowRoot?.querySelector('.rs-connected-text h1.rs-user') as HTMLElement;\n\t\t\t\tif (rsConnectedUser) {\n\t\t\t\t\trsConnectedUser.innerHTML = connectedUser;\n\t\t\t\t}\n\t\t\t\tthis.setBackendClass(this.rs.backend);\n\t\t\t\tconst rsConnectedLabel = this.shadowRoot?.querySelector('.rs-box-connected .rs-sub-headline') as HTMLElement;\n\t\t\t\tif (rsConnectedLabel) {\n\t\t\t\t\trsConnectedLabel.textContent = \"Connected\";\n\t\t\t\t}\n\t\t\t\tthis.setState(\"connected\");\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"network-offline\":\n\t\t\t\tthis.setOffline();\n\t\t\t\tbreak;\n\t\t\tcase \"network-online\":\n\t\t\t\tthis.setOnline();\n\t\t\t\tbreak;\n\t\t\tcase \"error\":\n\t\t\t\tthis.setBackendClass(this.rs.backend);\n\t\t\t\tif (msg?.name === \"DiscoveryError\") {\n\t\t\t\t\tthis.handleDiscoveryError(msg);\n\t\t\t\t} else if (msg?.name === \"SyncError\") {\n\t\t\t\t\tthis.handleSyncError(msg);\n\t\t\t\t} else if (msg?.name === \"Unauthorized\") {\n\t\t\t\t\tthis.handleUnauthorized(msg);\n\t\t\t\t} else {\n\t\t\t\t\tconsole.debug(`Encountered unhandled error: \"${msg}\"`);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tsetState(state: string): void {\n\t\tif (!state) return;\n\t\tthis.log(\"Setting state \", state);\n\n\t\tconst lastSelected = this.shadowRoot?.querySelector(\n\t\t\t\".rs-box.rs-selected\",\n\t\t);\n\t\tif (lastSelected) {\n\t\t\tlastSelected.classList.remove(\"rs-selected\");\n\t\t\tlastSelected.setAttribute(\"aria-hidden\", \"true\");\n\t\t}\n\n\t\tconst toSelect = this.shadowRoot?.querySelector(\n\t\t\t`.rs-box.rs-box-${state}`,\n\t\t);\n\t\tif (toSelect) {\n\t\t\ttoSelect.classList.add(\"rs-selected\");\n\t\t\ttoSelect.setAttribute(\"aria-hidden\", \"false\");\n\t\t}\n\n\t\tconst rsWidget = this.shadowRoot?.querySelector('.rs-widget') as HTMLElement;\n\t\tif (rsWidget) {\n\t\t\tconst currentStateClass =\n\t\t\t\trsWidget.className.match(/rs-state-\\S+/g)?.[0];\n\t\t\tif (currentStateClass) {\n\t\t\t\trsWidget.classList.remove(currentStateClass);\n\t\t\t}\n\t\t\trsWidget.classList.add(`rs-state-${state || this.state}`);\n\t\t}\n\n\t\tthis.state = state;\n\t}\n\n\tsetInitialState(): void {\n\t\tif (this.skipInitial) {\n\t\t\tthis.showChooseOrSignIn();\n\t\t} else {\n\t\t\tthis.setState(\"initial\");\n\t\t}\n\t}\n\n\tsetModalClass(): void {\n\t\tif (this.modalBackdrop) {\n\t\t\tif (this.modalBackdrop === \"onlySmallScreens\" && !this.isSmallScreen()) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst rsWidget = this.shadowRoot?.querySelector('.rs-widget') as HTMLElement;\n\t\t\tif (rsWidget) {\n\t\t\t\trsWidget.classList.add(\"rs-modal\");\n\t\t\t}\n\t\t}\n\t}\n\n\tsetupHandlers(): void {\n\t\tthis.rs.on(\"connected\", () => this.eventHandler(\"connected\"));\n\t\tthis.rs.on(\"ready\", () => this.eventHandler(\"ready\"));\n\t\tthis.rs.on(\"disconnected\", () => this.eventHandler(\"disconnected\"));\n\t\tthis.rs.on(\"network-online\", () => this.eventHandler(\"network-online\"));\n\t\tthis.rs.on(\"network-offline\", () => this.eventHandler(\"network-offline\"));\n\t\tthis.rs.on(\"error\", (error) => this.eventHandler(\"error\", error));\n\n\t\tthis.setEventListeners();\n\t\tthis.setClickHandlers();\n\t}\n\n\tsetEventListeners(): void {\n\t\tconst rsSignInForm = this.shadowRoot?.querySelector('.rs-sign-in-form') as HTMLFormElement;\n\t\tif (rsSignInForm) {\n\t\t\trsSignInForm.addEventListener(\"submit\", (e) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst rsAddressInput = this.shadowRoot?.querySelector('input[name=rs-user-address]') as HTMLInputElement;\n\t\t\t\tconst userAddress = rsAddressInput.value;\n\t\t\t\tthis.disableConnectButton();\n\t\t\t\tthis.rs.connect(userAddress);\n\t\t\t});\n\t\t}\n\t}\n\n\tshowChooseOrSignIn(): void {\n\t\tconst rsWidget = this.shadowRoot?.querySelector('.rs-widget') as HTMLElement;\n\t\tconst rsBackdrop = this.shadowRoot?.querySelector('.remotestorage-widget-modal-backdrop') as HTMLElement;\n\n\t\tif (rsWidget?.classList.contains(\"rs-modal\")) {\n\t\t\tif (rsBackdrop) {\n\t\t\t\trsBackdrop.style.display = \"block\";\n\t\t\t\trsBackdrop.classList.add(\"visible\");\n\t\t\t}\n\t\t}\n\t\tif (this.rs.apiKeys && Object.keys(this.rs.apiKeys).length > 0) {\n\t\t\tthis.setState(\"choose\");\n\t\t} else {\n\t\t\tthis.setState(\"sign-in\");\n\t\t}\n\t}\n\n\tsetClickHandlers(): void {\n\t\tconst rsInitial = this.shadowRoot?.querySelector('.rs-box-initial') as HTMLElement;\n\t\tif (rsInitial) {\n\t\t\trsInitial.addEventListener(\"click\", () => this.showChooseOrSignIn());\n\t\t}\n\n\t\tconst rsChooseRemoteStorageButton = this.shadowRoot?.querySelector('button.rs-choose-rs') as HTMLButtonElement;\n\t\tif (rsChooseRemoteStorageButton) {\n\t\t\trsChooseRemoteStorageButton.addEventListener(\"click\", () => {\n\t\t\t\tthis.setState(\"sign-in\");\n\t\t\t\tconst rsAddressInput = this.shadowRoot?.querySelector('input[name=rs-user-address]') as HTMLInputElement;\n\t\t\t\tif (rsAddressInput) {\n\t\t\t\t\trsAddressInput.focus();\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\tconst rsChooseDropboxButton = this.shadowRoot?.querySelector('button.rs-choose-dropbox') as HTMLButtonElement;\n\t\tif (rsChooseDropboxButton) {\n\t\t\trsChooseDropboxButton.addEventListener(\"click\", () =>\n\t\t\t\tthis.rs.dropbox?.connect(),\n\t\t\t);\n\t\t}\n\n\t\tconst rsChooseGoogleDriveButton = this.shadowRoot?.querySelector('button.rs-choose-googledrive') as HTMLButtonElement;\n\t\tif (rsChooseGoogleDriveButton) {\n\t\t\trsChooseGoogleDriveButton.addEventListener(\"click\", () =>\n\t\t\t\tthis.rs.googledrive?.connect(),\n\t\t\t);\n\t\t}\n\n\t\tconst rsDisconnectButtons = this.shadowRoot?.querySelectorAll('.rs-disconnect') as NodeListOf;\n\t\tfor (const button of rsDisconnectButtons) {\n\t\t\tbutton.addEventListener(\"click\", () => this.rs.disconnect());\n\t\t}\n\n\t\tconst rsErrorReconnectLink = this.shadowRoot?.querySelector('.rs-box-error a.rs-reconnect') as HTMLAnchorElement;\n\t\tif (rsErrorReconnectLink) {\n\t\t\trsErrorReconnectLink.addEventListener(\"click\", () =>\n\t\t\t\tthis.rs.reconnect(),\n\t\t\t);\n\t\t}\n\n\t\tif (this.rs.hasFeature(\"Sync\")) {\n\t\t\tconst rsSyncButton = this.shadowRoot?.querySelector('.rs-sync') as HTMLButtonElement;\n\t\t\tif (rsSyncButton) {\n\t\t\t\trsSyncButton.addEventListener(\"click\", () => {\n\t\t\t\t\tif (rsSyncButton.classList.contains(\"rs-rotate\")) {\n\t\t\t\t\t\tthis.rs.stopSync();\n\t\t\t\t\t\trsSyncButton.classList.remove(\"rs-rotate\");\n\t\t\t\t\t} else {\n\t\t\t\t\t\tconst rsConnectedLabel = this.shadowRoot?.querySelector('.rs-box-connected .rs-sub-headline') as HTMLElement;\n\t\t\t\t\t\tif (rsConnectedLabel) {\n\t\t\t\t\t\t\trsConnectedLabel.textContent = \"Synchronizing\";\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.rs.startSync();\n\t\t\t\t\t\trsSyncButton.classList.add(\"rs-rotate\");\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", () => this.close());\n\t\tconst rsWidget = this.shadowRoot?.querySelector('.rs-widget') as HTMLElement;\n\t\tif (rsWidget) {\n\t\t\trsWidget.addEventListener(\"click\", (e) => e.stopPropagation());\n\t\t}\n\n\t\tconst rsLogo = this.shadowRoot?.querySelector('.rs-widget-icon') as HTMLElement;\n\t\tif (rsLogo) {\n\t\t\trsLogo.addEventListener(\"click\", () => this.toggle());\n\t\t}\n\t}\n\n\ttoggle(): void {\n\t\tif (this.closed) {\n\t\t\tthis.open();\n\t\t} else {\n\t\t\tif (this.state === \"initial\") {\n\t\t\t\tthis.showChooseOrSignIn();\n\t\t\t} else {\n\t\t\t\tthis.close();\n\t\t\t}\n\t\t}\n\t}\n\n\topen(): void {\n\t\tthis.closed = false;\n\t\tconst rsWidget = this.shadowRoot?.querySelector('.rs-widget') as HTMLElement;\n\t\tif (rsWidget) {\n\t\t\trsWidget.classList.remove(\"rs-closed\");\n\t\t}\n\t\tthis.shouldCloseWhenSyncDone = false;\n\n\t\tconst selected = this.shadowRoot?.querySelector(\n\t\t\t\".rs-box.rs-selected\",\n\t\t);\n\t\tif (selected) {\n\t\t\tselected.setAttribute(\"aria-hidden\", \"false\");\n\t\t}\n\t}\n\n\tclose(): void {\n\t\tif (this.state === \"error\") {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rsWidget = this.shadowRoot?.querySelector('.rs-widget') as HTMLElement;\n\t\tif (!this.leaveOpen && this.active) {\n\t\t\tthis.closed = true;\n\t\t\tif (rsWidget) {\n\t\t\t\trsWidget.classList.add(\"rs-closed\");\n\t\t\t}\n\t\t\tconst selected = this.shadowRoot?.querySelector(\n\t\t\t\t\".rs-box.rs-selected\",\n\t\t\t);\n\t\t\tif (selected) {\n\t\t\t\tselected.setAttribute(\"aria-hidden\", \"true\");\n\t\t\t}\n\t\t} else if (this.active) {\n\t\t\tthis.setState(\"connected\");\n\t\t} else {\n\t\t\tthis.setInitialState();\n\t\t}\n\n\t\tif (rsWidget?.classList.contains(\"rs-modal\")) {\n\t\t\tconst rsBackdrop = this.shadowRoot?.querySelector('.remotestorage-widget-modal-backdrop') as HTMLElement;\n\t\t\tif (rsBackdrop) {\n\t\t\t\trsBackdrop.classList.remove(\"visible\");\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\trsBackdrop.style.display = \"none\";\n\t\t\t\t}, 300);\n\t\t\t}\n\t\t}\n\t}\n\n\tdisableConnectButton() {\n\t\tconst rsConnectButton = this.shadowRoot?.querySelector('.rs-connect') as HTMLButtonElement;\n\t\tif (rsConnectButton) {\n\t\t\trsConnectButton.disabled = true;\n\t\t\trsConnectButton.classList.add(\"rs-connecting\");\n\t\t\tconst circleSpinner = circleOpenSvg;\n\t\t\trsConnectButton.innerHTML = `Connecting ${circleSpinner}`;\n\t\t}\n\t}\n\n\tenableConnectButton() {\n\t\tconst rsConnectButton = this.shadowRoot?.querySelector('.rs-connect') as HTMLButtonElement;\n\t\tif (rsConnectButton) {\n\t\t\trsConnectButton.disabled = false;\n\t\t\trsConnectButton.textContent = \"Connect\";\n\t\t\trsConnectButton.classList.remove(\"rs-connecting\");\n\t\t}\n\t}\n\n\tsetOffline() {\n\t\tif (this.online) {\n\t\t\tconst rsWidget = this.shadowRoot?.querySelector('.rs-widget') as HTMLElement;\n\t\t\tif (rsWidget) {\n\t\t\t\trsWidget.classList.add(\"rs-offline\");\n\t\t\t}\n\t\t\tconst rsConnectedLabel = this.shadowRoot?.querySelector('.rs-box-connected .rs-sub-headline') as HTMLElement;\n\t\t\tif (rsConnectedLabel) {\n\t\t\t\trsConnectedLabel.textContent = \"Offline\";\n\t\t\t}\n\t\t\tthis.online = false;\n\t\t}\n\t}\n\n\tsetOnline() {\n\t\tif (!this.online) {\n\t\t\tconst rsWidget = this.shadowRoot?.querySelector('.rs-widget') as HTMLElement;\n\t\t\tif (rsWidget) {\n\t\t\t\trsWidget.classList.remove(\"rs-offline\");\n\t\t\t}\n\t\t\tif (this.active) {\n\t\t\t\tconst rsConnectedLabel = this.shadowRoot?.querySelector('.rs-box-connected .rs-sub-headline') as HTMLElement;\n\t\t\t\tif (rsConnectedLabel) {\n\t\t\t\t\trsConnectedLabel.textContent = \"Connected\";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tthis.online = true;\n\t}\n\n\tsetBackendClass(backend?: string) {\n\t\tconst rsWidget = this.shadowRoot?.querySelector('.rs-widget') as HTMLElement;\n\t\tif (rsWidget) {\n\t\t\trsWidget.classList.remove(\"rs-backend-remotestorage\");\n\t\t\trsWidget.classList.remove(\"rs-backend-dropbox\");\n\t\t\trsWidget.classList.remove(\"rs-backend-googledrive\");\n\n\t\t\tif (backend) {\n\t\t\t\trsWidget.classList.add(`rs-backend-${backend}`);\n\t\t\t}\n\t\t}\n\t}\n\n\tshowErrorBox(errorMsg: string) {\n\t\tconst rsErrorBox = this.shadowRoot?.querySelector('.rs-box-error .rs-error-message') as HTMLElement;\n\t\tif (rsErrorBox) {\n\t\t\trsErrorBox.innerHTML = errorMsg;\n\t\t}\n\t\tthis.setState(\"error\");\n\t}\n\n\thideErrorBox() {\n\t\tconst rsErrorBox = this.shadowRoot?.querySelector('.rs-box-error .rs-error-message') as HTMLElement;\n\t\tif (rsErrorBox) {\n\t\t\trsErrorBox.innerHTML = \"\";\n\t\t}\n\t\tthis.close();\n\t}\n\n\thandleSyncStarted() {\n\t\tthis.syncInProgress = true;\n\t\tconst rsSyncButton = this.shadowRoot?.querySelector('.rs-sync') as HTMLElement;\n\t\tif (rsSyncButton) {\n\t\t\trsSyncButton.classList.add(\"rs-rotate\");\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tif (!this.syncInProgress) return;\n\t\t\tconst rsConnectedLabel = this.shadowRoot?.querySelector('.rs-box-connected .rs-sub-headline') as HTMLElement;\n\t\t\tif (rsConnectedLabel) {\n\t\t\t\trsConnectedLabel.textContent = \"Synchronizing\";\n\t\t\t}\n\t\t}, 1000);\n\t}\n\n\thandleDiscoveryError(error: ErrorMessage) {\n\t\tconst msgContainer = this.shadowRoot?.querySelector(\".rs-sign-in-error\") as HTMLElement;\n\t\tif (msgContainer) {\n\t\t\tmsgContainer.innerHTML = error.message;\n\t\t\tmsgContainer.classList.remove(\"rs-hidden\");\n\t\t\tmsgContainer.classList.add(\"rs-visible\");\n\t\t}\n\t\tthis.enableConnectButton();\n\t}\n\n\thandleSyncError(error: ErrorMessage) {\n\t\tthis.setOffline();\n\t}\n\n\thandleUnauthorized(error: ErrorMessage) {\n\t\tif (error.code && error.code === \"access_denied\") {\n\t\t\tthis.rs.disconnect();\n\t\t} else {\n\t\t\tthis.open();\n\t\t\tthis.showErrorBox(`${error.message} `);\n\t\t\tconst rsErrorBox = this.shadowRoot?.querySelector('.rs-box-error .rs-error-message') as HTMLElement;\n\t\t\tconst rsErrorReconnectLink = this.shadowRoot?.querySelector('.rs-box-error a.rs-reconnect') as HTMLAnchorElement;\n\t\t\tif (rsErrorBox && rsErrorReconnectLink) {\n\t\t\t\trsErrorBox.appendChild(rsErrorReconnectLink);\n\t\t\t\trsErrorReconnectLink.classList.remove(\"rs-hidden\");\n\t\t\t}\n\t\t}\n\t}\n\n\tupdateLastSyncedStatus() {\n\t\tconst now = new Date();\n\t\tif (this.online) {\n\t\t\tthis.lastSynced = now;\n\t\t\tconst rsConnectedLabel = this.shadowRoot?.querySelector('.rs-box-connected .rs-sub-headline') as HTMLElement;\n\t\t\tif (rsConnectedLabel) {\n\t\t\t\trsConnectedLabel.textContent = \"Synced\";\n\t\t\t}\n\t\t} else {\n\t\t\tconst rsWidget = this.shadowRoot?.querySelector('.rs-widget') as HTMLElement;\n\t\t\tif (!rsWidget?.classList.contains(\"rs-state-unauthorized\")) {\n\t\t\t\tconst rsConnectedLabel = this.shadowRoot?.querySelector('.rs-box-connected .rs-sub-headline') as HTMLElement;\n\t\t\t\tif (rsConnectedLabel) {\n\t\t\t\t\trsConnectedLabel.textContent = \"Offline\";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tisSmallScreen() {\n\t\treturn window.innerWidth < 421;\n\t}\n}\n\n// Register the custom element\ncustomElements.define('remotestorage-widget', RemoteStorageWidget);\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: 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\";","// 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 \"\\n \\n \\n \\n \\n \\n \\n\\n\";","import \"./widget-component\";\nimport type { RemoteStorageWidget } from \"./widget-component\";\n\ninterface WidgetOptions {\n /** Keep the widget open when user clicks outside of it */\n leaveOpen?: boolean;\n /** Timeout after which the widget closes automatically (in milliseconds). The widget only closes when a storage is connected. */\n autoCloseAfter?: number;\n /** Don't show the initial connect hint, but show sign-in screen directly instead */\n skipInitial?: boolean;\n /** Enable logging for debugging purposes */\n logging?: boolean;\n /** Show a dark, transparent backdrop when opening the widget for connecting an account. `true` shows backdrop everywhere, `false` turns it off everywhere. Default is to only show it on small screens. */\n modalBackdrop?: boolean | \"onlySmallScreens\";\n}\n\ninterface RemoteStorage {\n apiKeys: Record;\n backend: string;\n remote: {\n userAddress: string;\n };\n on(event: string, handler: (...args: unknown[]) => void): void;\n connect(userAddress: string): void;\n disconnect(): void;\n reconnect(): void;\n startSync(): void;\n stopSync(): void;\n hasFeature(feature: string): boolean;\n dropbox?: {\n connect(): void;\n };\n googledrive?: {\n connect(): void;\n };\n}\n\n/**\n * RemoteStorage connect widget\n * @constructor\n */\nclass Widget {\n private component: RemoteStorageWidget;\n private parentContainerEl: HTMLElement | null;\n\n constructor(remoteStorage: RemoteStorage, options: WidgetOptions = {}) {\n this.parentContainerEl = null;\n\n // Create and configure the vanilla web component\n this.component = document.createElement(\n \"remotestorage-widget\",\n ) as RemoteStorageWidget;\n this.component.setRemoteStorage(remoteStorage);\n this.component.setOptions(options);\n }\n\n /**\n * Append widget to the DOM.\n *\n * If a parentElement is specified, the widget will be appended to that\n * element, otherwise it will be appended to the document's body. The parent\n * element can be given either as a simple element ID or as a valid HTML\n * element.\n *\n * @param {String,HTMLElement} [parentElement] - Parent element\n * @throws {Error} If the element is not found or is of an unknown type.\n */\n attach(element?: string | HTMLElement): void {\n if (element instanceof HTMLElement) {\n this.parentContainerEl = element;\n } else if (typeof element === \"string\") {\n this.parentContainerEl = document.getElementById(element);\n if (!this.parentContainerEl) {\n throw new Error(\n `Failed to find target DOM element with id=\"${element}\"`,\n );\n }\n } else if (element) {\n throw new Error(\n \"Unknown element type. Expected instance of HTMLElement or type of string.\",\n );\n } else {\n this.parentContainerEl = document.body;\n }\n\n this.parentContainerEl.appendChild(this.component);\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(): void {\n this.component.toggle();\n }\n\n /**\n * Open the widget.\n */\n open(): void {\n this.component.open();\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(): void {\n this.component.close();\n }\n}\n\nexport default Widget;\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","RemoteStorageWidget","_HTMLElement","_this","_classCallCheck","_defineProperty","_callSuper","setupShadowDOM","_inherits","value","shadow","this","attachShadow","mode","template","document","createElement","innerHTML","concat","appendChild","content","cloneNode","rs","setupHandlers","setInitialState","setModalClass","options","leaveOpen","autoCloseAfter","skipInitial","logging","modalBackdrop","_console","_len","arguments","length","msg","Array","_key","console","debug","apply","event","_this2","log","setState","state","handleSyncStarted","_this$shadowRoot","online","completed","syncInProgress","rsSyncButton","shadowRoot","querySelector","classList","remove","updateLastSyncedStatus","closed","shouldCloseWhenSyncDone","setTimeout","close","bind","active","setOnline","setBackendClass","undefined","open","_this$shadowRoot3","_this$shadowRoot4","hasFeature","on","eventHandler","_this$shadowRoot2","syncButton","add","connectedUser","remote","userAddress","rsConnectedUser","backend","rsConnectedLabel","textContent","setOffline","name","handleDiscoveryError","handleSyncError","handleUnauthorized","_this$shadowRoot5","_this$shadowRoot6","_this$shadowRoot7","lastSelected","setAttribute","toSelect","rsWidget","_rsWidget$className$m","currentStateClass","className","match","showChooseOrSignIn","_this$shadowRoot8","isSmallScreen","_this3","error","setEventListeners","setClickHandlers","_this$shadowRoot9","_this4","rsSignInForm","addEventListener","e","_this4$shadowRoot","preventDefault","disableConnectButton","connect","_this$shadowRoot0","_this$shadowRoot1","rsBackdrop","contains","style","display","apiKeys","keys","_this$shadowRoot10","_this$shadowRoot11","_this$shadowRoot12","_this$shadowRoot13","_this$shadowRoot14","_this$shadowRoot15","_this$shadowRoot17","_this$shadowRoot18","_this5","rsInitial","rsChooseRemoteStorageButton","_this5$shadowRoot","rsAddressInput","focus","rsChooseDropboxButton","_this5$rs$dropbox","dropbox","rsChooseGoogleDriveButton","_this5$rs$googledrive","googledrive","_step","_iterator","_createForOfIteratorHelper","querySelectorAll","s","n","done","disconnect","err","f","rsErrorReconnectLink","reconnect","_this$shadowRoot16","stopSync","_this5$shadowRoot2","startSync","stopPropagation","rsLogo","toggle","_this$shadowRoot19","_this$shadowRoot20","selected","_this$shadowRoot21","_this$shadowRoot22","_this$shadowRoot23","_this$shadowRoot24","rsConnectButton","disabled","_this$shadowRoot25","_this$shadowRoot26","_this$shadowRoot27","_this$shadowRoot28","_this$shadowRoot29","_this$shadowRoot30","errorMsg","_this$shadowRoot31","rsErrorBox","_this$shadowRoot32","_this$shadowRoot33","_this6","_this6$shadowRoot","_this$shadowRoot34","msgContainer","message","enableConnectButton","code","_this$shadowRoot35","_this$shadowRoot36","showErrorBox","now","Date","_this$shadowRoot37","lastSynced","_this$shadowRoot38","_this$shadowRoot39","window","innerWidth","_wrapNativeSuper","HTMLElement","customElements","Widget","remoteStorage","parentContainerEl","component","setRemoteStorage","setOptions","element","getElementById","Error","body"],"sourceRoot":""} \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 7648f2e..6d67d7f 100644 --- a/demo/index.html +++ b/demo/index.html @@ -18,6 +18,7 @@ +