js-loading-overlay - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

dist/js-loading-overlay.js

@@ -102,5 +102,3 @@ /******/ (function(modules) { // webpackBootstrap
 
-var JSLoadingOverlay =
-/*#__PURE__*/
-function () {
+var JSLoadingOverlay = /*#__PURE__*/function () {
   function JSLoadingOverlay() {
@@ -116,3 +114,7 @@ _classCallCheck(this, JSLoadingOverlay);
       'overlayIDName': 'overlay',
-      'spinnerIDName': 'spinner'
+      'spinnerIDName': 'spinner',
+      'offsetY': 0,
+      'offsetX': 0,
+      'lockScroll': false,
+      'containerID': null
     };
@@ -177,2 +179,5 @@ this.stylesheetBaseURL = 'https://cdn.jsdelivr.net/npm/load-awesome@1.1.0/css/';
     };
+    this.originalBodyPosition = '';
+    this.originalBodyTop = '';
+    this.originalBodywidth = '';
   }
@@ -194,7 +199,11 @@ /**
 
-      this.generateSpinnerElement(); // Generate overlay html element.
+      this.generateSpinnerElement();
 
-      var loadingOverlay = this.generateOverlayElement(); // Insert the overlay html element in body.
+      if (this.options.lockScroll) {
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
+      } // Generate overlay html element in full page.
 
-      document.body.insertAdjacentHTML("beforeend", loadingOverlay);
+
+      this.generateAndAddOverlayElement();
     }
@@ -204,7 +213,16 @@ }, {
     value: function hide() {
+      // Unlock scroll.
+      if (this.options.lockScroll) {
+        document.body.style.overflow = '';
+        document.documentElement.style.overflow = '';
+      }
+
       var stylesheet = document.getElementById('loading-overlay-stylesheet');
-      stylesheet.disabled = true;
-      stylesheet.parentNode.removeChild(stylesheet);
-      document.getElementById(this.options.overlayIDName).remove();
-      document.getElementById(this.options.spinnerIDName).remove();
+
+      if (stylesheet) {
+        stylesheet.disabled = true;
+        stylesheet.parentNode.removeChild(stylesheet);
+        document.getElementById(this.options.overlayIDName).remove();
+        document.getElementById(this.options.spinnerIDName).remove();
+      }
     }
@@ -227,3 +245,3 @@ /**
     /**
-     * Generate overlay html element. Able to override element below:
+     * Generate overlay html element in full page.
      * - class name
@@ -237,5 +255,29 @@ * - background color
   }, {
-    key: "generateOverlayElement",
-    value: function generateOverlayElement() {
-      return "<div id=\"".concat(this.options.overlayIDName, "\" style=\"display: block !important; position: fixed; top: 0; left: 0; overflow: auto; opacity: ").concat(this.options.overlayOpacity, "; background: ").concat(this.options.overlayBackgroundColor, "; z-index: 50; width: 100%; height: 100%;\"></div><div id=\"").concat(this.options.spinnerIDName, "\" style=\"display: block !important; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); z-index: 9999;\">").concat(this.spinner, "</div>");
+    key: "generateAndAddOverlayElement",
+    value: function generateAndAddOverlayElement() {
+      var left = '50%'; // Check if spinner X offset not zero
+
+      if (this.options.offsetX !== 0) {
+        left = 'calc(50% + ' + this.options.offsetX + ')';
+      }
+
+      var top = '50%'; // Check if spinner Y offset not zero
+
+      if (this.options.offsetY !== 0) {
+        top = 'calc(50% + ' + this.options.offsetY + ')';
+      } // Generate overlay html element in container.
+
+
+      if (this.options.containerID && document.body.contains(document.getElementById(this.options.containerID))) {
+        var _loadingOverlay = "<div id=\"".concat(this.options.overlayIDName, "\" style=\"display: block !important; position: absolute; top: 0; left: 0; overflow: auto; opacity: ").concat(this.options.overlayOpacity, "; background: ").concat(this.options.overlayBackgroundColor, "; z-index: 50; width: 100%; height: 100%;\"></div><div id=\"").concat(this.options.spinnerIDName, "\" style=\"display: block !important; position: absolute; top: ").concat(top, "; left: ").concat(left, "; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); z-index: 9999;\">").concat(this.spinner, "</div>");
+
+        var containerID = document.getElementById(this.options.containerID);
+        containerID.style.position = 'relative';
+        containerID.insertAdjacentHTML('beforeend', _loadingOverlay);
+        return;
+      }
+
+      var loadingOverlay = "<div id=\"".concat(this.options.overlayIDName, "\" style=\"display: block !important; position: fixed; top: 0; left: 0; overflow: auto; opacity: ").concat(this.options.overlayOpacity, "; background: ").concat(this.options.overlayBackgroundColor, "; z-index: 50; width: 100%; height: 100%;\"></div><div id=\"").concat(this.options.spinnerIDName, "\" style=\"display: block !important; position: fixed; top: ").concat(top, "; left: ").concat(left, "; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); z-index: 9999;\">").concat(this.spinner, "</div>"); // Insert the overlay html element in body.
+
+      document.body.insertAdjacentHTML("beforeend", loadingOverlay);
     }
@@ -242,0 +284,0 @@ /**

dist/js-loading-overlay.min.js

@@ -1,2 +0,2 @@
-!function(e){var t={};function n(l){if(t[l])return t[l].exports;var i=t[l]={i:l,l:!1,exports:{}};return e[l].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,l){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(n.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(l,i,function(t){return e[t]}.bind(null,i));return l},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var l=t[n];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}var l=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.options={overlayBackgroundColor:"#666666",overlayOpacity:.6,spinnerIcon:"ball-circus",spinnerColor:"#000",spinnerSize:"3x",overlayIDName:"overlay",spinnerIDName:"spinner"},this.stylesheetBaseURL="https://cdn.jsdelivr.net/npm/load-awesome@1.1.0/css/",this.spinner=null,this.spinnerStylesheetURL=null,this.numberOfEmptyDivForSpinner={"ball-8bits":16,"ball-atom":4,"ball-beat":3,"ball-circus":5,"ball-climbing-dot":1,"ball-clip-rotate":1,"ball-clip-rotate-multiple":2,"ball-clip-rotate-pulse":2,"ball-elastic-dots":5,"ball-fall":3,"ball-fussion":4,"ball-grid-beat":9,"ball-grid-pulse":9,"ball-newton-cradle":4,"ball-pulse":3,"ball-pulse-rise":5,"ball-pulse-sync":3,"ball-rotate":1,"ball-running-dots":5,"ball-scale":1,"ball-scale-multiple":3,"ball-scale-pulse":2,"ball-scale-ripple":1,"ball-scale-ripple-multiple":3,"ball-spin":8,"ball-spin-clockwise":8,"ball-spin-clockwise-fade":8,"ball-spin-clockwise-fade-rotating":8,"ball-spin-fade":8,"ball-spin-fade-rotating":8,"ball-spin-rotate":2,"ball-square-clockwise-spin":8,"ball-square-spin":8,"ball-triangle-path":3,"ball-zig-zag":2,"ball-zig-zag-deflect":2,cog:1,"cube-transition":2,fire:3,"line-scale":5,"line-scale-party":5,"line-scale-pulse-out":5,"line-scale-pulse-out-rapid":5,"line-spin-clockwise-fade":8,"line-spin-clockwise-fade-rotating":8,"line-spin-fade":8,"line-spin-fade-rotating":8,pacman:6,"square-jelly-box":2,"square-loader":1,"square-spin":1,timer:1,"triangle-skew-spin":1}}var t,l,i;return t=e,(l=[{key:"show",value:function(e){this.setOptions(e),this.addSpinnerStylesheet(),this.generateSpinnerElement();var t=this.generateOverlayElement();document.body.insertAdjacentHTML("beforeend",t)}},{key:"hide",value:function(){var e=document.getElementById("loading-overlay-stylesheet");e&&(e.disabled=!0,e.parentNode.removeChild(e),document.getElementById(this.options.overlayIDName).remove(),document.getElementById(this.options.spinnerIDName).remove())}},{key:"setOptions",value:function(e){if(void 0!==e)for(var t in e)this.options[t]=e[t]}},{key:"generateOverlayElement",value:function(){return'<div id="'.concat(this.options.overlayIDName,'" style="display: block !important; position: fixed; top: 0; left: 0; overflow: auto; opacity: ').concat(this.options.overlayOpacity,"; background: ").concat(this.options.overlayBackgroundColor,'; z-index: 50; width: 100%; height: 100%;"></div><div id="').concat(this.options.spinnerIDName,'" style="display: block !important; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); z-index: 9999;">').concat(this.spinner,"</div>")}},{key:"generateSpinnerElement",value:function(){var e=this,t=Object.keys(this.numberOfEmptyDivForSpinner).find((function(t){return t===e.options.spinnerIcon})),n=this.generateEmptyDivElement(this.numberOfEmptyDivForSpinner[t]);this.spinner='<div style="color: '.concat(this.options.spinnerColor,'" class="la-').concat(this.options.spinnerIcon," la-").concat(this.options.spinnerSize,'">').concat(n,"</div>")}},{key:"addSpinnerStylesheet",value:function(){this.setSpinnerStylesheetURL();var e=document.createElement("link");e.setAttribute("id","loading-overlay-stylesheet"),e.setAttribute("rel","stylesheet"),e.setAttribute("type","text/css"),e.setAttribute("href",this.spinnerStylesheetURL),document.getElementsByTagName("head")[0].appendChild(e)}},{key:"setSpinnerStylesheetURL",value:function(){this.spinnerStylesheetURL=this.stylesheetBaseURL+this.options.spinnerIcon+".min.css"}},{key:"generateEmptyDivElement",value:function(e){for(var t="",n=1;n<=e;n++)t+="<div></div>";return t}}])&&n(t.prototype,l),i&&n(t,i),e}();window.JsLoadingOverlay=new l,e.exports=JsLoadingOverlay}]);
+!function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var i=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.options={overlayBackgroundColor:"#666666",overlayOpacity:.6,spinnerIcon:"ball-circus",spinnerColor:"#000",spinnerSize:"3x",overlayIDName:"overlay",spinnerIDName:"spinner",offsetY:0,offsetX:0,lockScroll:!1,containerID:null},this.stylesheetBaseURL="https://cdn.jsdelivr.net/npm/load-awesome@1.1.0/css/",this.spinner=null,this.spinnerStylesheetURL=null,this.numberOfEmptyDivForSpinner={"ball-8bits":16,"ball-atom":4,"ball-beat":3,"ball-circus":5,"ball-climbing-dot":1,"ball-clip-rotate":1,"ball-clip-rotate-multiple":2,"ball-clip-rotate-pulse":2,"ball-elastic-dots":5,"ball-fall":3,"ball-fussion":4,"ball-grid-beat":9,"ball-grid-pulse":9,"ball-newton-cradle":4,"ball-pulse":3,"ball-pulse-rise":5,"ball-pulse-sync":3,"ball-rotate":1,"ball-running-dots":5,"ball-scale":1,"ball-scale-multiple":3,"ball-scale-pulse":2,"ball-scale-ripple":1,"ball-scale-ripple-multiple":3,"ball-spin":8,"ball-spin-clockwise":8,"ball-spin-clockwise-fade":8,"ball-spin-clockwise-fade-rotating":8,"ball-spin-fade":8,"ball-spin-fade-rotating":8,"ball-spin-rotate":2,"ball-square-clockwise-spin":8,"ball-square-spin":8,"ball-triangle-path":3,"ball-zig-zag":2,"ball-zig-zag-deflect":2,cog:1,"cube-transition":2,fire:3,"line-scale":5,"line-scale-party":5,"line-scale-pulse-out":5,"line-scale-pulse-out-rapid":5,"line-spin-clockwise-fade":8,"line-spin-clockwise-fade-rotating":8,"line-spin-fade":8,"line-spin-fade-rotating":8,pacman:6,"square-jelly-box":2,"square-loader":1,"square-spin":1,timer:1,"triangle-skew-spin":1},this.originalBodyPosition="",this.originalBodyTop="",this.originalBodywidth=""}var t,i,o;return t=e,(i=[{key:"show",value:function(e){this.setOptions(e),this.addSpinnerStylesheet(),this.generateSpinnerElement(),this.options.lockScroll&&(document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden"),this.generateAndAddOverlayElement()}},{key:"hide",value:function(){this.options.lockScroll&&(document.body.style.overflow="",document.documentElement.style.overflow="");var e=document.getElementById("loading-overlay-stylesheet");e&&(e.disabled=!0,e.parentNode.removeChild(e),document.getElementById(this.options.overlayIDName).remove(),document.getElementById(this.options.spinnerIDName).remove())}},{key:"setOptions",value:function(e){if(void 0!==e)for(var t in e)this.options[t]=e[t]}},{key:"generateAndAddOverlayElement",value:function(){var e="50%";0!==this.options.offsetX&&(e="calc(50% + "+this.options.offsetX+")");var t="50%";if(0!==this.options.offsetY&&(t="calc(50% + "+this.options.offsetY+")"),this.options.containerID&&document.body.contains(document.getElementById(this.options.containerID))){var n='<div id="'.concat(this.options.overlayIDName,'" style="display: block !important; position: absolute; top: 0; left: 0; overflow: auto; opacity: ').concat(this.options.overlayOpacity,"; background: ").concat(this.options.overlayBackgroundColor,'; z-index: 50; width: 100%; height: 100%;"></div><div id="').concat(this.options.spinnerIDName,'" style="display: block !important; position: absolute; top: ').concat(t,"; left: ").concat(e,'; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); z-index: 9999;">').concat(this.spinner,"</div>"),i=document.getElementById(this.options.containerID);return i.style.position="relative",void i.insertAdjacentHTML("beforeend",n)}var o='<div id="'.concat(this.options.overlayIDName,'" style="display: block !important; position: fixed; top: 0; left: 0; overflow: auto; opacity: ').concat(this.options.overlayOpacity,"; background: ").concat(this.options.overlayBackgroundColor,'; z-index: 50; width: 100%; height: 100%;"></div><div id="').concat(this.options.spinnerIDName,'" style="display: block !important; position: fixed; top: ').concat(t,"; left: ").concat(e,'; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); z-index: 9999;">').concat(this.spinner,"</div>");document.body.insertAdjacentHTML("beforeend",o)}},{key:"generateSpinnerElement",value:function(){var e=this,t=Object.keys(this.numberOfEmptyDivForSpinner).find((function(t){return t===e.options.spinnerIcon})),n=this.generateEmptyDivElement(this.numberOfEmptyDivForSpinner[t]);this.spinner='<div style="color: '.concat(this.options.spinnerColor,'" class="la-').concat(this.options.spinnerIcon," la-").concat(this.options.spinnerSize,'">').concat(n,"</div>")}},{key:"addSpinnerStylesheet",value:function(){this.setSpinnerStylesheetURL();var e=document.createElement("link");e.setAttribute("id","loading-overlay-stylesheet"),e.setAttribute("rel","stylesheet"),e.setAttribute("type","text/css"),e.setAttribute("href",this.spinnerStylesheetURL),document.getElementsByTagName("head")[0].appendChild(e)}},{key:"setSpinnerStylesheetURL",value:function(){this.spinnerStylesheetURL=this.stylesheetBaseURL+this.options.spinnerIcon+".min.css"}},{key:"generateEmptyDivElement",value:function(e){for(var t="",n=1;n<=e;n++)t+="<div></div>";return t}}])&&n(t.prototype,i),o&&n(t,o),e}();window.JsLoadingOverlay=new i,e.exports=JsLoadingOverlay}]);
 //# sourceMappingURL=js-loading-overlay.min.js.map

package.json

 {
   "name": "js-loading-overlay",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Easy and beautiful way to display loading overlay in your application.",
@@ -32,3 +32,4 @@ "keywords": [
     "test": "jest",
-    "test-coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls",
+    "test-coverage": "jest --coverage",
+    "coverage": "coveralls < coverage/lcov.info",
     "dev": "webpack --mode development --watch",
@@ -35,0 +36,0 @@ "prod": "webpack -p --mode production"

readme.md

 ## JS Loading Overlay
 
-JS loading overlay using awesome spinner from [Load Awesome](https://github.danielcardoso.net/load-awesome/animations.html). It contains 52 spinner you can choose.
+Display loading overlay easily and beautifully in your application. JS loading overlay using awesome spinner from [Load Awesome](https://github.danielcardoso.net/load-awesome/animations.html). It contains 52 spinner you can choose.
 
 ### Build and Coverage Status
-[![Coverage Status](https://coveralls.io/repos/github/muhdfaiz/js-loading-overlay/badge.svg?branch=master)](https://coveralls.io/github/muhdfaiz/js-loading-overlay?branch=master) [![Build Status](https://travis-ci.org/muhdfaiz/js-loading-overlay.svg?branch=master)](https://travis-ci.org/taniarascia/chip8)
+[![Coverage Status](https://coveralls.io/repos/github/muhdfaiz/js-loading-overlay/badge.svg?branch=master)](https://coveralls.io/github/muhdfaiz/js-loading-overlay?branch=master) [![Build Status](https://travis-ci.org/muhdfaiz/js-loading-overlay.svg?branch=master)](https://travis-ci.org/muhdfaiz/js-loading-overlay.svg?branch=master)
 
+## Features
+
+- **Full page loading overlay.** Able to show full page loading overlay. 
+
+- **Loading overlay inside container.** Able to display the loading overlay inside the container
+
+- **Lock scroll.** Able to lock the scroll during loading overlay active.
+
+## Documentation
+
+For detail of installation instructions, in-depth usage, please take a look at the [documentation](https://muhdfaiz.github.io/js-loading-overlay/).
+
 ### How To Install
@@ -15,7 +27,8 @@ ```markdown
 yarn add js-loading-overlay
+
+Use without NPM or Yarn
+import 'js-loading-overlay'
+JsLoadingOverlay.show({'spinnerIcon': 'triangle-skew-spin'});
 ```
 
-### Demo
-- [https://muhdfaiz.github.io/js-loading-overlay/](https://muhdfaiz.github.io/js-loading-overlay/)
-
 ### How To Use
@@ -32,88 +45,2 @@ ```markdown
 
-### List Of Available Spinner
-- See [Load Awesome Website](https://github.danielcardoso.net/load-awesome/animations.html) 
-- For example if you want to use `Ball Atom` spinner. Set `spinnerIcon` in options to `ball-atom`. Name of the icon must 
-be lowercase and replace space with dash symbol (-).
-
-### Default Options
-
-```markdown
-'overlayBackgroundColor': '#666666',
-'overlayOpacity': 0.6,
-'spinnerIcon': 'ball-circus',
-'spinnerColor': '#000',
-'spinnerSize': '3x',
-'overlayIDName': 'overlay',
-'spinnerIDName': 'spinner',
-```
-
-### Options
-
-```markdown
-overlayBackgroundColor - overlay background color. Example: #000 or rgb(0, 0, 0)
-overlayOpacity - opacity of the overlay. From 0 to 1.
-spinnerColor - color of the spinner. Example: #000 or rgb(0, 0, 0)
-spinnerSize - Available size: `small`, `default`, `2x`, `3x`
-overlayIDName - ID of overlay div.
-spinnerIDName - ID of spinner div.
-```
-
-### Available Spinner Icon
-
-```markdown
-ball-8bits
-ball-atom
-ball-beat
-ball-circus
-ball-climbing-dot
-ball-clip-rotate
-ball-clip-rotate-multiple
-ball-clip-rotate-pulse
-ball-elastic-dots
-ball-fall
-ball-fussion
-ball-grid-beat
-ball-grid-pulse
-ball-newton-cradle
-ball-pulse
-ball-pulse-rise
-ball-pulse-sync
-ball-rotate
-ball-running-dots
-ball-scale
-ball-scale-multiple
-ball-scale-pulse
-ball-scale-ripple
-ball-scale-ripple-multiple
-ball-spin
-ball-spin-clockwise
-ball-spin-clockwise-fade
-ball-spin-clockwise-fade-rotating
-ball-spin-fade
-ball-spin-fade-rotating
-ball-spin-rotate
-ball-square-clockwise-spin
-ball-square-spin
-ball-triangle-path
-ball-zig-zag
-ball-zig-zag-deflect
-cog
-cube-transition
-fire
-line-scale
-line-scale-party
-line-scale-pulse-out
-line-scale-pulse-out-rapid
-line-spin-clockwise-fade
-line-spin-clockwise-fade-rotating
-line-spin-fade
-line-spin-fade-rotating
-pacman
-square-jelly-box
-square-loader
-square-spin
-timer
-triangle-skew-spin
-```
-
 ### Show loading overlay with default options
@@ -142,3 +69,2 @@
 ```markdown
-JsLoadingOverlay.hide();
-```
+JsLoadingOverlay.hide();

src/js-loading-overlay.js

@@ -12,2 +12,6 @@ class JSLoadingOverlay
             'spinnerIDName': 'spinner',
+            'offsetY': 0,
+            'offsetX': 0,
+            'lockScroll': false,
+            'containerID': null,
         };
@@ -72,2 +76,6 @@ this.stylesheetBaseURL = 'https://cdn.jsdelivr.net/npm/load-awesome@1.1.0/css/';
         }
+
+        this.originalBodyPosition = '';
+        this.originalBodyTop = '';
+        this.originalBodywidth = '';
     }
@@ -90,10 +98,18 @@
 
-        // Generate overlay html element.
-        let loadingOverlay = this.generateOverlayElement();
+        if (this.options.lockScroll) {
+            document.body.style.overflow = 'hidden';
+            document.documentElement.style.overflow = 'hidden';
+        }
 
-        // Insert the overlay html element in body.
-        document.body.insertAdjacentHTML("beforeend", loadingOverlay);
+        // Generate overlay html element in full page.
+        this.generateAndAddOverlayElement();
     }
 
     hide() {
+        // Unlock scroll.
+        if (this.options.lockScroll) {
+            document.body.style.overflow = '';
+            document.documentElement.style.overflow = '';
+        }
+
         var stylesheet = document.getElementById('loading-overlay-stylesheet');
@@ -124,3 +140,3 @@
     /**
-     * Generate overlay html element. Able to override element below:
+     * Generate overlay html element in full page.
      * - class name
@@ -132,4 +148,30 @@ * - background color
      */
-    generateOverlayElement() {
-        return `<div id="${this.options.overlayIDName}" style="display: block !important; position: fixed; top: 0; left: 0; overflow: auto; opacity: ${this.options.overlayOpacity}; background: ${this.options.overlayBackgroundColor}; z-index: 50; width: 100%; height: 100%;"></div><div id="${this.options.spinnerIDName}" style="display: block !important; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); z-index: 9999;">${this.spinner}</div>`
+    generateAndAddOverlayElement() {
+        let left = '50%';
+        // Check if spinner X offset not zero
+        if (this.options.offsetX !== 0) {
+            left = 'calc(50% + ' + this.options.offsetX + ')'
+        }
+
+        let top = '50%';
+        // Check if spinner Y offset not zero
+        if (this.options.offsetY !== 0) {
+            top = 'calc(50% + ' + this.options.offsetY + ')'
+        }
+
+        // Generate overlay html element in container.
+        if (this.options.containerID && document.body.contains(document.getElementById(this.options.containerID))) {
+            let loadingOverlay = `<div id="${this.options.overlayIDName}" style="display: block !important; position: absolute; top: 0; left: 0; overflow: auto; opacity: ${this.options.overlayOpacity}; background: ${this.options.overlayBackgroundColor}; z-index: 50; width: 100%; height: 100%;"></div><div id="${this.options.spinnerIDName}" style="display: block !important; position: absolute; top: ${top}; left: ${left}; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); z-index: 9999;">${this.spinner}</div>`
+
+            let containerID = document.getElementById(this.options.containerID);
+
+            containerID.style.position = 'relative';
+            containerID.insertAdjacentHTML('beforeend', loadingOverlay);
+            return;
+        }
+
+        let loadingOverlay = `<div id="${this.options.overlayIDName}" style="display: block !important; position: fixed; top: 0; left: 0; overflow: auto; opacity: ${this.options.overlayOpacity}; background: ${this.options.overlayBackgroundColor}; z-index: 50; width: 100%; height: 100%;"></div><div id="${this.options.spinnerIDName}" style="display: block !important; position: fixed; top: ${top}; left: ${left}; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); z-index: 9999;">${this.spinner}</div>`
+
+        // Insert the overlay html element in body.
+        document.body.insertAdjacentHTML("beforeend", loadingOverlay);
     }
@@ -136,0 +178,0 @@

test/loading-overlay.test.js

@@ -13,3 +13,7 @@ const loadingOverlay = require('../src/js-loading-overlay');
         'overlayIDName': 'overlay',
-        'spinnerIDName': 'spinner'
+        'spinnerIDName': 'spinner',
+        'offsetY': 0,
+        'offsetX': 0,
+        'lockScroll': false,
+        'containerID': null,
     };
@@ -131,3 +135,3 @@ });
 describe('generateOverlayElement function', () => {
-    test('It should generate correct overlay element', () => {
+    test('It should generate correct overlay element in full page', () => {
         let overlayBackgroundColor = 'rgb(0, 0, 0)';
@@ -150,7 +154,43 @@ let overlayOpacity = "0.6";
         };
-        loadingOverlay.generateSpinnerElement();
 
-        document.body.innerHTML = loadingOverlay.generateOverlayElement();
+        loadingOverlay.show();
 
         // Expect spinner element.
+        expect(document.getElementsByClassName('la-' + spinnerSize).length).toEqual(1);
+        expect(document.getElementsByClassName('la-' + spinnerSize)[0].style.color).toEqual(spinnerColor);
+
+        // Expect overlay element.
+        expect(document.getElementById(overlayIDName)).not.toBeNull();
+        expect(document.getElementById(overlayIDName).style.backgroundColor).toEqual(overlayBackgroundColor);
+        expect(document.getElementById(overlayIDName).style.opacity).toBe(overlayOpacity);
+    })
+
+    test('It should generate correct overlay element in container', () => {
+        let overlayBackgroundColor = 'rgb(0, 0, 0)';
+        let overlayOpacity = "0.6";
+        let spinnerIcon = 'ball-spin-clockwise';
+        let spinnerColor = 'rgb(236, 236, 236)';
+        let spinnerSize = 'small';
+        let overlayIDName = 'overlay';
+        let spinnerIDName = 'spinner';
+
+        loadingOverlay.options = {
+            'overlayBackgroundColor': overlayBackgroundColor,
+            'overlayOpacity': overlayOpacity,
+            'spinnerIcon': spinnerIcon,
+            'spinnerColor': spinnerColor,
+            'spinnerSize': spinnerSize,
+            'overlayIDName': overlayIDName,
+            'spinnerIDName': spinnerIDName,
+            'containerID': 'table'
+        };
+
+        document.body.innerHTML = '<div id="table"><table><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Test Company</td><td>Muhammad Faiz</td><td>Malaysia</td></tr></table></div>'
+        loadingOverlay.show();
+
+        // Expect overlay and spinner element inside the container.
+        expect(document.getElementById(loadingOverlay.options.containerID).contains(document.getElementById(loadingOverlay.options.overlayIDName))).toBe(true);
+        expect(document.getElementById(loadingOverlay.options.containerID).contains(document.getElementById(loadingOverlay.options.spinnerIDName))).toBe(true);
+
+        // Expect spinner element.
         expect(document.getElementsByClassName('la-' + spinnerIcon).length).toEqual(1);
@@ -176,3 +216,7 @@ expect(document.getElementsByClassName('la-' + spinnerSize).length).toEqual(1);
             'overlayIDName': 'overlay-id',
-            'spinnerIDName': 'spinner-id'
+            'spinnerIDName': 'spinner-id',
+            'offsetX': 10,
+            'offsetY': 20,
+            'lockScroll': true,
+            'containerID': 'table',
         };
@@ -189,24 +233,22 @@
         expect(loadingOverlay.options.spinnerIDName).toEqual(options.spinnerIDName);
+        expect(loadingOverlay.options.offsetX).toEqual(options.offsetX);
+        expect(loadingOverlay.options.offsetY).toEqual(options.offsetY);
+        expect(loadingOverlay.options.lockScroll).toEqual(options.lockScroll);
+        expect(loadingOverlay.options.containerID).toEqual(options.containerID);
     });
 
     test('It should not override default options when options parameter not exist.', () => {
-        let defaultOptions = {
-            'overlayBackgroundColor': '#666666',
-            'overlayOpacity': 0.6,
-            'spinnerIcon': 'ball-circus',
-            'spinnerColor': '#000',
-            'spinnerSize': '3x',
-            'overlayIDName': 'overlay',
-            'spinnerIDName': 'spinner'
-        };
-
         loadingOverlay.setOptions();
 
-        expect(loadingOverlay.options.overlayBackgroundColor).toEqual(defaultOptions.overlayBackgroundColor);
-        expect(loadingOverlay.options.overlayOpacity).toEqual(defaultOptions.overlayOpacity);
-        expect(loadingOverlay.options.spinnerIcon).toEqual(defaultOptions.spinnerIcon);
-        expect(loadingOverlay.options.spinnerColor).toEqual(defaultOptions.spinnerColor);
-        expect(loadingOverlay.options.spinnerSize).toEqual(defaultOptions.spinnerSize);
-        expect(loadingOverlay.options.overlayIDName).toEqual(defaultOptions.overlayIDName);
-        expect(loadingOverlay.options.spinnerIDName).toEqual(defaultOptions.spinnerIDName);
+        expect(loadingOverlay.options.overlayBackgroundColor).toEqual('#666666');
+        expect(loadingOverlay.options.overlayOpacity).toEqual(0.6);
+        expect(loadingOverlay.options.spinnerIcon).toEqual('ball-circus');
+        expect(loadingOverlay.options.spinnerColor).toEqual('#000');
+        expect(loadingOverlay.options.spinnerSize).toEqual('3x');
+        expect(loadingOverlay.options.overlayIDName).toEqual('overlay');
+        expect(loadingOverlay.options.spinnerIDName).toEqual('spinner');
+        expect(loadingOverlay.options.offsetX).toEqual(0);
+        expect(loadingOverlay.options.offsetY).toEqual(0);
+        expect(loadingOverlay.options.lockScroll).toEqual(false);
+        expect(loadingOverlay.options.containerID).toEqual(null);
     });
@@ -240,2 +282,10 @@ });
     test('It should not return an error when the loading overlay not shown.', () => {
+        loadingOverlay.hide();
+    });
+
+    test('It should unlock back the scroll after hide.', () => {
+        document.body.style.position = 'relative';
+        document.body.style.width = '500px';
+        document.body.style.top = '100px';
+
         let defaultOptions = {
@@ -248,6 +298,13 @@ 'overlayBackgroundColor': '#666666',
             'overlayIDName': 'overlay',
-            'spinnerIDName': 'spinner'
+            'spinnerIDName': 'spinner',
+            'lockScroll': true,
         };
 
+        loadingOverlay.show(defaultOptions);
+        expect(document.body.style.overflow).toEqual('hidden');
+        expect(document.documentElement.style.overflow).toEqual('hidden');
+
         loadingOverlay.hide();
+        expect(document.body.style.overflow).toEqual('');
+        expect(document.documentElement.style.overflow).toEqual('');
     });
@@ -257,3 +314,3 @@ });
 describe('show function', () => {
-    test('It should show the loading overlay.', () => {
+    test('It should show the loading overlay in full page.', () => {
         let defaultOptions = {
@@ -271,2 +328,3 @@ 'overlayBackgroundColor': '#666666',
 
+        expect(document.querySelectorAll('body > #' + defaultOptions.overlayIDName)).toBeTruthy();
         expect(document.getElementById(loadingOverlay.options.overlayIDName)).toBeTruthy();
@@ -276,2 +334,29 @@ expect(document.getElementById(loadingOverlay.options.spinnerIDName)).toBeTruthy();
     });
+
+    test('It should show the loading overlay in container page.', () => {
+        document.body.innerHTML = '<div id="table"><table><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Test Company</td><td>Muhammad Faiz</td><td>Malaysia</td></tr></table></div>'
+
+        let defaultOptions = {
+            'overlayBackgroundColor': '#666666',
+            'overlayOpacity': 0.6,
+            'spinnerIcon': 'ball-circus',
+            'spinnerColor': '#000',
+            'spinnerSize': '3x',
+            'overlayIDName': 'overlay',
+            'spinnerIDName': 'spinner',
+            'containerID': 'table'
+        };
+
+        loadingOverlay.show(defaultOptions);
+
+        expect(document.querySelectorAll('body > #' + defaultOptions.overlayIDName).length === 0).toBe(true);
+
+        // Expect overlay and spinner element inside the container.
+        expect(document.getElementById(loadingOverlay.options.containerID).contains(document.getElementById(loadingOverlay.options.overlayIDName))).toBe(true);
+        expect(document.getElementById(loadingOverlay.options.containerID).contains(document.getElementById(loadingOverlay.options.spinnerIDName))).toBe(true);
+
+        expect(document.getElementById(loadingOverlay.options.overlayIDName)).toBeTruthy();
+        expect(document.getElementById(loadingOverlay.options.spinnerIDName)).toBeTruthy();
+        expect(document.getElementsByTagName('link')[0].getAttribute('href')).toBe(loadingOverlay.spinnerStylesheetURL);
+    });
 });

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

110511

increased by24.67%

Number of package files

17

increased by13.33%

Lines of code

905

increased by19.08%

Worsened metrics

Number of lines in readme file

67

decreased by-52.82%

No dependency changes