remotestorage-widget - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

bower.json

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

package.json

 {
   "name": "remotestorage-widget",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "remoteStorage.js connect widget",
@@ -10,3 +10,3 @@ "main": "build/widget.js",
     "prebuild": "npm run clean -s",
-    "build": "NODE_ENV=production webpack -p",
+    "build": "NODE_ENV=production webpack",
     "dev": "webpack-dev-server --inline --hot --content-base demo --port 8008",
@@ -36,19 +36,20 @@ "open": "opener http://localhost:8008",
   "devDependencies": {
-    "babel-cli": "^6.8.0",
-    "babel-core": "^6.18.0",
-    "babel-loader": "^6.2.7",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.2",
     "babel-preset-es2015": "^6.18.0",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.4",
-    "http-server": "^0.8.5",
+    "file-loader": "^1.1.6",
+    "html-loader": "^0.5.5",
+    "http-server": "^0.11.1",
     "inline-loader": "^0.1.1",
-    "inline-svg-loader": "0.0.1",
     "opener": "^1.4.1",
     "raw-loader": "^0.5.1",
-    "remotestoragejs": "1.0.2",
+    "remotestoragejs": "1.2.1",
     "rimraf": "^2.4.3",
-    "svg-inline-loader": "^0.7.1",
-    "url-loader": "^0.5.7",
-    "webpack": "^1.13.3",
-    "webpack-dev-server": "^1.16.2"
+    "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"
   },
@@ -55,0 +56,0 @@ "babel": {

README.md

@@ -33,6 +33,7 @@ # remotestorage-widget
 |---|---|---|---|
-| `leaveOpen` | Keep the widget open when user clicks outside of it | Boolean | false |
-| `autoCloseAfter` | Timeout after which the widget closes automatically (in milliseconds). The widget only closes when a storage is connected. | Number | 1500 |
-| `skipInitial` | Don't show the initial connect hint, but show sign-in screen directly instead | Boolean | false |
-| `logging` | Enable logging for debugging purposes | Boolean | false |
+| `leaveOpen` | Keep the widget open when user clicks outside of it | Boolean | `false` |
+| `autoCloseAfter` | Timeout after which the widget closes automatically (in milliseconds). The widget only closes when a storage is connected. | Number | `1500` |
+| `skipInitial` | Don't show the initial connect hint, but show sign-in screen directly instead | Boolean | `false` |
+| `logging` | Enable logging for debugging purposes | Boolean | `false` |
+| `modalBackdrop` | 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. | Boolean, String | `"onlySmallScreens"` |
 
@@ -39,0 +40,0 @@ Example:

src/widget.js

@@ -7,10 +7,7 @@ /**
  * @param {object}  options                - Widget options
- * @param {boolean} options.leaveOpen      - Do not minimize widget when user clicks
- *                                           outside of it (default: false)
- * @param {number}  options.autoCloseAfter - Time after which the widget closes
- *                                           automatically in ms (default: 1500)
- * @param {boolean} options.skipInitial    - Don't show the initial connect hint,
- *                                           but show sign-in screen directly instead
- *                                           (default: false)
+ * @param {boolean} options.leaveOpen      - Do not minimize widget when user clicks outside of it (default: false)
+ * @param {number}  options.autoCloseAfter - Time after which the widget closes  automatically in ms (default: 1500)
+ * @param {boolean} options.skipInitial    - Don't show the initial connect hint, but show sign-in screen directly instead (default: false)
  * @param {boolean} options.logging        - Enable logging (default: false)
+ * @param {boolean,string} options.modalBackdrop - Show a dark, transparent backdrop when opening the widget for connecting an account. (default 'onlySmallScreens')
  */
@@ -25,2 +22,11 @@ let Widget = function(remoteStorage, options={}) {
 
+  if (options.hasOwnProperty('modalBackdrop')) {
+    if (typeof options.modalBackdrop !== 'boolean' && options.modalBackdrop !== 'onlySmallScreens') {
+      throw 'options.modalBackdrop has to be true/false or "onlySmallScreens"'
+    }
+    this.modalBackdrop  = options.modalBackdrop;
+  } else {
+    this.modalBackdrop  = 'onlySmallScreens';
+  }
+
   // true if we have remoteStorage connection's info
@@ -164,6 +170,6 @@ this.active = false;
     const style = document.createElement('style');
-    style.innerHTML = require('raw!./assets/styles.css');
+    style.innerHTML = require('raw-loader!./assets/styles.css');
 
     element.id = "remotestorage-widget";
-    element.innerHTML = require('html!./assets/widget.html');
+    element.innerHTML = require('html-loader!./assets/widget.html');
     element.appendChild(style);
@@ -175,2 +181,30 @@
   /**
+   * Create the widget's modal backdrop element, add
+   * styling, and append to DOM
+   *
+   * @private
+   */
+  createBackdropHtml () {
+    const backdropEl = document.createElement('div');
+    backdropEl.classList.add('remotestorage-widget-modal-backdrop');
+    document.body.appendChild(backdropEl);
+  },
+
+  /**
+   * Sets the `rs-modal` class on the widget element.
+   * Done by default for small screens (max-width 420px).
+   *
+   * @private
+   */
+  setModalClass () {
+    if (this.modalBackdrop) {
+      if (this.modalBackdrop === 'onlySmallScreens'
+          && !this.isSmallScreen()) {
+        return;
+      }
+      this.rsWidget.classList.add('rs-modal');
+    }
+  },
+
+  /**
    * Save all interactive DOM elements as variables for later access.
@@ -182,2 +216,3 @@ *
     this.rsWidget = document.querySelector('.rs-widget');
+    this.rsBackdrop = document.querySelector('.remotestorage-widget-modal-backdrop');
     this.rsInitial = document.querySelector('.rs-box-initial');
@@ -243,13 +278,16 @@ this.rsChoose = document.querySelector('.rs-box-choose');
   attach (elementId) {
+    this.createBackdropHtml()
     const domElement = this.createHtmlTemplate();
 
+    let parentContainerEl;
+
     if (elementId) {
-      const parent = document.getElementById(elementId);
+      parentContainerEl = document.getElementById(elementId);
       if (!parent) {
         throw "Failed to find target DOM element with id=\"" + elementId + "\"";
       }
-      parent.appendChild(domElement);
     } else {
-      document.body.appendChild(domElement);
+      parentContainerEl = document.body;
     }
+    parentContainerEl.appendChild(domElement);
 
@@ -259,2 +297,3 @@ this.setupElements();
     this.setInitialState();
+    this.setModalClass();
   },
@@ -280,2 +319,6 @@
   showChooseOrSignIn () {
+    if (this.rsWidget.classList.contains('rs-modal')) {
+      this.rsBackdrop.style.display = 'block';
+      this.rsBackdrop.classList.add('visible');
+    }
     // choose backend only if some providers are declared
@@ -376,2 +419,9 @@ if (this.rs.apiKeys && Object.keys(this.rs.apiKeys).length > 0) {
     }
+
+    if (this.rsWidget.classList.contains('rs-modal')) {
+      this.rsBackdrop.classList.remove('visible');
+      setTimeout(() => {
+        this.rsBackdrop.style.display = 'none';
+      }, 300);
+    }
   },
@@ -468,2 +518,6 @@
     subHeadlineEl.innerHTML = `Synced ${secondsSinceLastSync} seconds ago`;
+  },
+
+  isSmallScreen () {
+    return window.innerWidth < 421;
   }
@@ -470,0 +524,0 @@ };

webpack.config.js

 /* global __dirname */
-var webpack = require('webpack');
-var isProd = (process.env.NODE_ENV === 'production');
-var path = require('path');
+const webpack = require('webpack');
+const isProd = (process.env.NODE_ENV === 'production');
+const path = require('path');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 // minimize only in production
-var plugins = isProd ? [new webpack.optimize.UglifyJsPlugin({minimize: true})] : [];
+const plugins = isProd ? [new UglifyJSPlugin({ sourceMap: true })] : [];
 
@@ -17,2 +18,3 @@ module.exports = {
   },
+  mode: isProd ? 'production' : 'development',
   devtool: isProd ? '#source-map' : '#eval-source-map',
@@ -32,4 +34,8 @@ externals: {
   module: {
-    loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel?presets=es2015' },
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader?presets=es2015'
+      }
     ]
@@ -36,0 +42,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

Lines of code

1143

increased by8.24%

Number of lines in readme file

72

increased by1.41%

Worsened metrics

Total package byte prevSize

288256

decreased by-18.44%

Dev dependency count

18

increased by5.88%

No dependency changes