js-loading-overlay - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

@@ -7,2 +7,7 @@ # Changelog
 
+## 1.2.0 - 2020-12-05
+
+- Add option to specify custom overlay z-index.
+- Add option to specify custom spinner z-index.
+
 ## 1.1.0 - 2020-12-02
@@ -9,0 +14,0 @@

dist/js-loading-overlay.js

@@ -117,3 +117,5 @@ /******/ (function(modules) { // webpackBootstrap
       'lockScroll': false,
-      'containerID': null
+      'containerID': null,
+      'spinnerZIndex': 99999,
+      'overlayZIndex': 99998
     };
@@ -178,5 +180,2 @@ this.stylesheetBaseURL = 'https://cdn.jsdelivr.net/npm/load-awesome@1.1.0/css/';
     };
-    this.originalBodyPosition = '';
-    this.originalBodyTop = '';
-    this.originalBodywidth = '';
   }
@@ -208,2 +207,6 @@ /**
     }
+    /**
+     * Hide Loading Overlay
+     */
+
   }, {
@@ -218,3 +221,3 @@ key: "hide",
 
-      var stylesheet = document.getElementById('loading-overlay-stylesheet');
+      var stylesheet = document.getElementById('loading-overlay-stylesheet'); // Remove stylesheet.
 
@@ -277,3 +280,3 @@ if (stylesheet) {
 
-      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.
+      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: ").concat(this.options.overlayZIndex, "; 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: ").concat(this.options.spinnerZIndex, ";\">").concat(this.spinner, "</div>"); // Insert the overlay html element in body.
 
@@ -280,0 +283,0 @@ document.body.insertAdjacentHTML("beforeend", loadingOverlay);

dist/js-loading-overlay.min.js

@@ -1,2 +0,2 @@
-!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}]);
+!function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},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 o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},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 o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var o=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,spinnerZIndex:99999,overlayZIndex:99998},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,o,i;return t=e,(o=[{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>"),o=document.getElementById(this.options.containerID);return o.style.position="relative",void o.insertAdjacentHTML("beforeend",n)}var i='<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: ").concat(this.options.overlayZIndex,'; 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: ").concat(this.options.spinnerZIndex,';">').concat(this.spinner,"</div>");document.body.insertAdjacentHTML("beforeend",i)}},{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,o),i&&n(t,i),e}();window.JsLoadingOverlay=new o,e.exports=JsLoadingOverlay}]);
 //# sourceMappingURL=js-loading-overlay.min.js.map

package.json

 {
   "name": "js-loading-overlay",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Easy and beautiful way to display loading overlay in your application.",
@@ -28,3 +28,4 @@ "keywords": [
     "webpack": "^4.39.2",
-    "webpack-cli": "^3.3.9"
+    "webpack-cli": "^3.3.9",
+    "xmlhttprequest": "^1.8.0"
   },
@@ -41,3 +42,4 @@ "scripts": {
   "license": "MIT",
-  "private": false
+  "private": false,
+  "dependencies": {}
 }

readme.md

@@ -18,3 +18,3 @@ ## JS Loading Overlay
 
-For detail of installation instructions, in-depth usage, please take a look at the [documentation](https://muhdfaiz.github.io/js-loading-overlay/).
+For detail of installation instructions, in-depth usage, please take a look at the [documentation](https://js-loading-overlay.muhdfaiz.com/).
 
@@ -68,2 +68,15 @@ ### How To Install
 ```markdown
-JsLoadingOverlay.hide();
+JsLoadingOverlay.hide();
+```
+
+### Changelog
+
+Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
+
+## Contributing
+
+Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
+
+## License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

src/js-loading-overlay.js

@@ -16,2 +16,4 @@ class JSLoadingOverlay
             'containerID': null,
+            'spinnerZIndex': 99999,
+            'overlayZIndex': 99998
         };
@@ -76,6 +78,2 @@ this.stylesheetBaseURL = 'https://cdn.jsdelivr.net/npm/load-awesome@1.1.0/css/';
         }
-
-        this.originalBodyPosition = '';
-        this.originalBodyTop = '';
-        this.originalBodywidth = '';
     }
@@ -107,2 +105,5 @@
 
+    /**
+     * Hide Loading Overlay
+     */
     hide() {
@@ -117,2 +118,3 @@ // Unlock scroll.
 
+        // Remove stylesheet.
         if (stylesheet) {
@@ -150,2 +152,3 @@ stylesheet.disabled = true;
         let left = '50%';
+
         // Check if spinner X offset not zero
@@ -157,2 +160,3 @@ if (this.options.offsetX !== 0) {
         let top = '50%';
+
         // Check if spinner Y offset not zero
@@ -174,3 +178,3 @@ if (this.options.offsetY !== 0) {
 
-        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>`
+        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: ${this.options.overlayZIndex}; 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: ${this.options.spinnerZIndex};">${this.spinner}</div>`
 
@@ -177,0 +181,0 @@ // Insert the overlay html element in body.

test/loading-overlay.test.js

 const loadingOverlay = require('../src/js-loading-overlay');
+const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
 
@@ -18,2 +19,4 @@ beforeEach(() => {
         'containerID': null,
+        'overlayZIndex': 99998,
+        'spinnerZIndex': 99999,
     };
@@ -219,2 +222,4 @@ });
             'containerID': 'table',
+            'overlayZIndex': 99998,
+            'spinnerZIndex': 99999,
         };
@@ -235,2 +240,4 @@
         expect(loadingOverlay.options.containerID).toEqual(options.containerID);
+        expect(loadingOverlay.options.spinnerZIndex).toEqual(options.spinnerZIndex);
+        expect(loadingOverlay.options.overlayZIndex).toEqual(options.overlayZIndex);
     });
@@ -355,2 +362,60 @@
     });
+
+    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);
+    });
+
+    test('It should show the loading overlay with custom offset of spinner position.', () => {
+        document.body.innerHTML = ''
+
+        let defaultOptions = {
+            'offsetY': '-10px',
+            'offsetX': '20px',
+        };
+
+        loadingOverlay.show(defaultOptions);
+
+        expect(document.querySelectorAll('body > #' + defaultOptions.overlayIDName).length === 0).toBe(true);
+        expect(document.body.innerHTML).toContain('calc(50% + ' + defaultOptions.offsetY);
+        expect(document.body.innerHTML).toContain('calc(50% + ' + defaultOptions.offsetX);
+    });
+
+    test('It should show the loading overlay with custom z-index.', () => {
+        document.body.innerHTML = ''
+
+        let defaultOptions = {
+            'spinnerZIndex': 50,
+            'overlayZIndex': 49
+        };
+
+        loadingOverlay.show(defaultOptions);
+
+        expect(document.querySelectorAll('body > #' + defaultOptions.overlayIDName).length === 0).toBe(true);
+
+        expect(document.getElementById(loadingOverlay.options.overlayIDName).style.zIndex).toBe(defaultOptions.overlayZIndex.toString());
+        expect(document.getElementById(loadingOverlay.options.spinnerIDName).style.zIndex).toBe(defaultOptions.spinnerZIndex.toString());
+    });
 });

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

115098

increased by4.15%

Lines of code

961

increased by6.19%

Number of lines in readme file

80

increased by19.4%

Worsened metrics

Dev dependency count

15

increased by7.14%

No dependency changes