remotestorage-widget - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

bower.json

 {
     "name": "rs-widget",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "description": "Connect widget for remoteStorage.js",
@@ -5,0 +5,0 @@ "main": [

package.json

 {
   "name": "remotestorage-widget",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "remoteStorage.js connect widget",
@@ -35,26 +35,21 @@ "main": "build/widget.js",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.2",
-    "babel-preset-es2015": "^6.18.0",
-    "file-loader": "^1.1.6",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.6",
+    "@babel/preset-env": "^7.8.6",
+    "babel-loader": "^8.0.6",
+    "file-loader": "^5.1.0",
     "html-loader": "^0.5.5",
-    "http-server": "^0.11.1",
+    "http-server": "^0.12.1",
     "inline-loader": "^0.1.1",
-    "opener": "^1.4.1",
-    "raw-loader": "^0.5.1",
-    "remotestoragejs": "1.2.1",
-    "rimraf": "^2.4.3",
-    "svg-inline-loader": "^0.8.0",
-    "uglifyjs-webpack-plugin": "^2.1.1",
-    "url-loader": "^0.6.2",
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.1.14"
-  },
-  "babel": {
-    "presets": [
-      "es2015"
-    ]
+    "opener": "^1.5.1",
+    "raw-loader": "^4.0.0",
+    "remotestoragejs": "1.2.3",
+    "rimraf": "^3.0.2",
+    "svg-inline-loader": "^0.8.2",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "^3.0.0",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   }
 }

src/widget.js

@@ -59,5 +59,11 @@ /**
       case 'sync-req-done':
+        this.syncInProgress = true;
         this.rsSyncButton.classList.add("rs-rotate");
+        setTimeout(() => {
+          if (!this.syncInProgress) return;
+          this.rsConnectedLabel.textContent = 'Synchronizing';
+        }, 1000);
         break;
       case 'sync-done':
+        this.syncInProgress = false;
         this.rsSyncButton.classList.remove("rs-rotate");
@@ -70,4 +76,3 @@
           this.lastSynced = new Date();
-          let subHeadlineEl = document.querySelector('.rs-box-connected .rs-sub-headline');
-          subHeadlineEl.innerHTML = 'Synced just now';
+          this.rsConnectedLabel.textContent = 'Synced just now';
         }
@@ -126,23 +131,24 @@
   setState (state) {
-    if (state) {
-      this.log('Setting state ', state);
-      let lastSelected = document.querySelector('.rs-box.rs-selected');
-      if (lastSelected) {
-        lastSelected.classList.remove('rs-selected');
-      }
+    if (!state) return;
+    this.log('Setting state ', state);
 
-      let toSelect = document.querySelector('.rs-box.rs-box-'+state);
-      if (toSelect) {
-        toSelect.classList.add('rs-selected');
-      }
+    let lastSelected = document.querySelector('.rs-box.rs-selected');
+    if (lastSelected) {
+      lastSelected.classList.remove('rs-selected');
+      lastSelected.setAttribute('aria-hidden', 'true');
+    }
 
-      let currentStateClass = this.rsWidget.className.match(/rs-state-\S+/g)[0];
-      this.rsWidget.classList.remove(currentStateClass);
-      this.rsWidget.classList.add(`rs-state-${state || this.state}`);
+    let toSelect = document.querySelector('.rs-box.rs-box-'+state);
+    if (toSelect) {
+      toSelect.classList.add('rs-selected');
+      toSelect.setAttribute('aria-hidden', 'false');
+    }
 
-      this.state = state;
-    }
+    let currentStateClass = this.rsWidget.className.match(/rs-state-\S+/g)[0];
+    this.rsWidget.classList.remove(currentStateClass);
+    this.rsWidget.classList.add(`rs-state-${state || this.state}`);
+
+    this.state = state;
   },
 
-
   /**
@@ -170,7 +176,7 @@ * Set widget to its inital state
     const element = document.createElement('div');
-    const style = document.createElement('style');
-    style.innerHTML = require('raw-loader!./assets/styles.css');
-
     element.id = "remotestorage-widget";
     element.innerHTML = require('html-loader!./assets/widget.html');
+
+    const style = document.createElement('style');
+    style.innerHTML = require('raw-loader!./assets/styles.css').default;
     element.appendChild(style);
@@ -239,2 +245,3 @@
     this.rsSignInForm = document.querySelector('.rs-sign-in-form');
+    this.rsAddressInput = this.rsSignInForm.querySelector('input[name=rs-user-address]');
     this.rsConnectButton = document.querySelector('.rs-connect');
@@ -300,7 +307,6 @@
   setEventListeners () {
-    // Sign-in form
     this.rsSignInForm.addEventListener('submit', (e) => {
       e.preventDefault();
       let userAddress = document.querySelector('input[name=rs-user-address]').value;
-      this.rsConnectButton.disabled = true;
+      this.disableConnectButton();
       this.rs.connect(userAddress);
@@ -335,3 +341,6 @@ });
     // Choose RS button
-    this.rsChooseRemoteStorageButton.addEventListener('click', () => this.setState('sign-in') );
+    this.rsChooseRemoteStorageButton.addEventListener('click', () => {
+      this.setState('sign-in');
+      this.rsAddressInput.focus();
+    });
 
@@ -357,2 +366,3 @@ // Choose Dropbox button
         } else {
+          this.rsConnectedLabel.textContent = 'Synchronizing';
           this.rs.startSync();
@@ -399,2 +409,7 @@ this.rsSyncButton.classList.add("rs-rotate");
     this.shouldCloseWhenSyncDone = false; // prevent auto-closing when user opened the widget
+
+    let selected = document.querySelector('.rs-box.rs-selected');
+    if (selected) {
+      selected.setAttribute('aria-hidden', 'false');
+    }
   },
@@ -415,2 +430,6 @@
       this.rsWidget.classList.add('rs-closed');
+      let selected = document.querySelector('.rs-box.rs-selected');
+      if (selected) {
+        selected.setAttribute('aria-hidden', 'true');
+      }
     } else if (this.active) {
@@ -431,2 +450,25 @@ this.setState('connected');
   /**
+   * Disable the connect button and indicate connect activity
+   *
+   * @private
+   */
+  disableConnectButton () {
+    this.rsConnectButton.disabled = true;
+    this.rsConnectButton.classList.add('rs-connecting');
+    const circleSpinner = require('raw-loader!./assets/circle-open.svg').default;
+    this.rsConnectButton.innerHTML = `Connecting ${circleSpinner}`;
+  },
+
+  /**
+   * (Re)enable the connect button and reset to original state
+   *
+   * @private
+   */
+  enableConnectButton () {
+    this.rsConnectButton.disabled = false;
+    this.rsConnectButton.textContent = 'Connect';
+    this.rsConnectButton.classList.remove('rs-connecting');
+  },
+
+  /**
    * Mark the widget as offline.
@@ -494,9 +536,8 @@ *
     msgContainer.classList.add('rs-visible');
-    this.rsConnectButton.disabled = false;
+    this.enableConnectButton();
   },
 
-  handleSyncError (/* error */) {
-    // console.debug('Encountered SyncError', error);
-    this.open();
-    this.showErrorBox('App sync error');
+  handleSyncError (error) {
+    console.debug('Encountered SyncError', error);
+    this.setOffline();
   },
@@ -503,0 +544,0 @@

webpack.config.js

@@ -37,3 +37,8 @@ /* global __dirname */
         exclude: /node_modules/,
-        loader: 'babel-loader?presets=es2015'
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
       }
@@ -40,0 +45,0 @@ ]

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

395547

increased by37.22%

Number of package files

110

increased by816.67%

Lines of code

1206

increased by5.51%

No dependency changes