modularload - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

dist/main.cjs.js

@@ -78,3 +78,5 @@ 'use strict';
       isLoaded: false,
-      isEntered: false
+      isEntered: false,
+      isUrl: false,
+      transitionContainer: null
     };
@@ -90,2 +92,6 @@ Object.assign(this, this.defaults, options);
     this.loadAttributes = ['src', 'srcset', 'style', 'href'];
+    this.isInserted = false;
+    this.controller = new AbortController();
+    this.signal = this.controller.signal;
+    this.enterTimeout = false;
     this.classContainer = this.html;
@@ -136,2 +142,9 @@ this.isChrome = navigator.userAgent.indexOf("Chrome") != -1 ? true : false;
     value: function reset() {
+      this.controller.abort();
+      window.clearTimeout(this.enterTimeout);
+
+      if (this.isInserted) {
+        this.removeContainer();
+      }
+
       this.classContainer = this.html;
@@ -144,2 +157,3 @@ Object.assign(this, this.defaults, this.options);
       this.transition = link.getAttribute('data-' + this.name);
+      this.isUrl = link.getAttribute('data-' + this.name + '-url');
       var href = link.getAttribute('href');
@@ -175,7 +189,6 @@ var target = link.getAttribute('target');
       var container = '[' + this.container + ']';
-      var transitionContainer;
       var oldContainer;
 
       if (this.transition && this.transition != 'true') {
-        transitionContainer = '[' + this.container + '="' + this.transition + '"]';
+        this.transitionContainer = '[' + this.container + '="' + this.transition + '"]';
         this.loadingClass = this.transitions[this.transition].loadingClass || this.loadingClass;
@@ -187,7 +200,7 @@ this.loadedClass = this.transitions[this.transition].loadedClass || this.loadedClass;
         this.exitDelay = this.transitions[this.transition].exitDelay || this.exitDelay;
-        oldContainer = document.querySelector(transitionContainer);
+        oldContainer = document.querySelector(this.transitionContainer);
       }
 
       if (oldContainer) {
-        container = transitionContainer;
+        container = this.transitionContainer;
         this.oldContainer = oldContainer;
@@ -212,6 +225,12 @@ this.classContainer = this.oldContainer.parentNode;
       this.href = href;
-      this.oldContainer.classList.add('is-old');
-      this.setLoading();
-      this.startEnterDelay();
-      this.goTo(href, container, push);
+      this.parentContainer = this.oldContainer.parentNode;
+
+      if (this.isUrl != null && this.isUrl != 'false') {
+        history.pushState(this.transition, null, href);
+      } else {
+        this.oldContainer.classList.add('is-old');
+        this.setLoading();
+        this.startEnterDelay();
+        this.goTo(href, container, push);
+      }
     }
@@ -241,3 +260,3 @@ }, {
 
-      setTimeout(function () {
+      this.enterTimeout = window.setTimeout(function () {
         _this2.isEntered = true;
@@ -255,7 +274,7 @@
 
-      fetch(href).then(function (response) {
+      fetch(href, {
+        signal: this.signal
+      }).then(function (response) {
         return response.text();
       }).then(function (data) {
-        _this3.isLoaded = true;
-        _this3.parentContainer = _this3.oldContainer.parentNode;
         var parser = new DOMParser();
@@ -267,2 +286,4 @@ _this3.data = parser.parseFromString(data, 'text/html');
 
+        _this3.parentNewContainer = _this3.newContainer.parentNode;
+
         _this3.hideContainer();
@@ -272,4 +293,8 @@
 
+        _this3.isInserted = true;
+
         _this3.setSvgs();
 
+        _this3.isLoaded = true;
+
         if (_this3.isEntered) {
@@ -327,3 +352,14 @@ _this3.transitionContainers();
       var description = this.data.head.querySelector('meta[name="description"]');
-      var datas = Object.assign({}, this.data.querySelector('html').dataset);
+      var container;
+      var newContainer;
+
+      if (this.subContainer) {
+        newContainer = this.parentNewContainer;
+        container = document.querySelector(this.transitionContainer).parentNode;
+      } else {
+        newContainer = this.data.querySelector('html');
+        container = document.querySelector('html');
+      }
+
+      var datas = Object.assign({}, newContainer.dataset);
       if (title) document.title = title.innerHTML;
@@ -338,3 +374,3 @@ if (description) document.head.querySelector('meta[name="description"]').setAttribute('content', description.getAttribute('content'));
 
-          document.querySelector('html').setAttribute('data-' + _this5.toDash(key), val);
+          container.setAttribute('data-' + _this5.toDash(key), val);
         });
@@ -406,2 +442,3 @@ }
       this.newContainer.classList.remove('is-new');
+      this.isInserted = false;
     }
@@ -408,0 +445,0 @@ }, {

dist/main.esm.js

@@ -76,3 +76,5 @@ function _classCallCheck(instance, Constructor) {
       isLoaded: false,
-      isEntered: false
+      isEntered: false,
+      isUrl: false,
+      transitionContainer: null
     };
@@ -88,2 +90,6 @@ Object.assign(this, this.defaults, options);
     this.loadAttributes = ['src', 'srcset', 'style', 'href'];
+    this.isInserted = false;
+    this.controller = new AbortController();
+    this.signal = this.controller.signal;
+    this.enterTimeout = false;
     this.classContainer = this.html;
@@ -134,2 +140,9 @@ this.isChrome = navigator.userAgent.indexOf("Chrome") != -1 ? true : false;
     value: function reset() {
+      this.controller.abort();
+      window.clearTimeout(this.enterTimeout);
+
+      if (this.isInserted) {
+        this.removeContainer();
+      }
+
       this.classContainer = this.html;
@@ -142,2 +155,3 @@ Object.assign(this, this.defaults, this.options);
       this.transition = link.getAttribute('data-' + this.name);
+      this.isUrl = link.getAttribute('data-' + this.name + '-url');
       var href = link.getAttribute('href');
@@ -173,7 +187,6 @@ var target = link.getAttribute('target');
       var container = '[' + this.container + ']';
-      var transitionContainer;
       var oldContainer;
 
       if (this.transition && this.transition != 'true') {
-        transitionContainer = '[' + this.container + '="' + this.transition + '"]';
+        this.transitionContainer = '[' + this.container + '="' + this.transition + '"]';
         this.loadingClass = this.transitions[this.transition].loadingClass || this.loadingClass;
@@ -185,7 +198,7 @@ this.loadedClass = this.transitions[this.transition].loadedClass || this.loadedClass;
         this.exitDelay = this.transitions[this.transition].exitDelay || this.exitDelay;
-        oldContainer = document.querySelector(transitionContainer);
+        oldContainer = document.querySelector(this.transitionContainer);
       }
 
       if (oldContainer) {
-        container = transitionContainer;
+        container = this.transitionContainer;
         this.oldContainer = oldContainer;
@@ -210,6 +223,12 @@ this.classContainer = this.oldContainer.parentNode;
       this.href = href;
-      this.oldContainer.classList.add('is-old');
-      this.setLoading();
-      this.startEnterDelay();
-      this.goTo(href, container, push);
+      this.parentContainer = this.oldContainer.parentNode;
+
+      if (this.isUrl != null && this.isUrl != 'false') {
+        history.pushState(this.transition, null, href);
+      } else {
+        this.oldContainer.classList.add('is-old');
+        this.setLoading();
+        this.startEnterDelay();
+        this.goTo(href, container, push);
+      }
     }
@@ -239,3 +258,3 @@ }, {
 
-      setTimeout(function () {
+      this.enterTimeout = window.setTimeout(function () {
         _this2.isEntered = true;
@@ -253,7 +272,7 @@
 
-      fetch(href).then(function (response) {
+      fetch(href, {
+        signal: this.signal
+      }).then(function (response) {
         return response.text();
       }).then(function (data) {
-        _this3.isLoaded = true;
-        _this3.parentContainer = _this3.oldContainer.parentNode;
         var parser = new DOMParser();
@@ -265,2 +284,4 @@ _this3.data = parser.parseFromString(data, 'text/html');
 
+        _this3.parentNewContainer = _this3.newContainer.parentNode;
+
         _this3.hideContainer();
@@ -270,4 +291,8 @@
 
+        _this3.isInserted = true;
+
         _this3.setSvgs();
 
+        _this3.isLoaded = true;
+
         if (_this3.isEntered) {
@@ -325,3 +350,14 @@ _this3.transitionContainers();
       var description = this.data.head.querySelector('meta[name="description"]');
-      var datas = Object.assign({}, this.data.querySelector('html').dataset);
+      var container;
+      var newContainer;
+
+      if (this.subContainer) {
+        newContainer = this.parentNewContainer;
+        container = document.querySelector(this.transitionContainer).parentNode;
+      } else {
+        newContainer = this.data.querySelector('html');
+        container = document.querySelector('html');
+      }
+
+      var datas = Object.assign({}, newContainer.dataset);
       if (title) document.title = title.innerHTML;
@@ -336,3 +372,3 @@ if (description) document.head.querySelector('meta[name="description"]').setAttribute('content', description.getAttribute('content'));
 
-          document.querySelector('html').setAttribute('data-' + _this5.toDash(key), val);
+          container.setAttribute('data-' + _this5.toDash(key), val);
         });
@@ -404,2 +440,3 @@ }
       this.newContainer.classList.remove('is-new');
+      this.isInserted = false;
     }
@@ -406,0 +443,0 @@ }, {

package.json

 {
   "name": "modularload",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Dead simple page transitions and lazy loading.",
@@ -5,0 +5,0 @@ "repository": "modularorg/modularload",

readme.md

@@ -139,2 +139,3 @@ <p align="center">
 | `data-load` | `string`, `false` | Transition name or disable transition |
+| `data-load-url` | `boolean` | Update url without loading container |
 | `data-load-src` | `string` | Lazy load src attribute |
@@ -141,0 +142,0 @@ | `data-load-srcset` | `string` | Lazy load srcset attribute |

src/main.js

@@ -12,3 +12,5 @@ export default class {
             isLoaded: false,
-            isEntered: false
+            isEntered: false,
+            isUrl: false,
+            transitionContainer: null
         }
@@ -26,2 +28,6 @@
         this.loadAttributes = ['src', 'srcset', 'style', 'href'];
+        this.isInserted = false;
+        this.controller = new AbortController();
+        this.signal = this.controller.signal;
+        this.enterTimeout = false;
 
@@ -66,2 +72,9 @@ this.classContainer = this.html;
     reset() {
+        this.controller.abort();
+        window.clearTimeout(this.enterTimeout);
+
+        if (this.isInserted) {
+            this.removeContainer();
+        }
+
         this.classContainer = this.html;
@@ -73,2 +86,3 @@ Object.assign(this, this.defaults, this.options);
         this.transition = link.getAttribute('data-' + this.name);
+        this.isUrl = link.getAttribute('data-' + this.name + '-url');
         const href = link.getAttribute('href');
@@ -103,19 +117,18 @@ const target = link.getAttribute('target');
         let container = '[' + this.container + ']';
-        let transitionContainer;
         let oldContainer;
 
         if (this.transition && this.transition != 'true') {
-            transitionContainer = '[' + this.container + '="' + this.transition + '"]';
+            this.transitionContainer = '[' + this.container + '="' + this.transition + '"]';
             this.loadingClass = this.transitions[this.transition].loadingClass || this.loadingClass;
             this.loadedClass = this.transitions[this.transition].loadedClass || this.loadedClass;
             this.readyClass = this.transitions[this.transition].readyClass || this.readyClass;
-            this.transitionsPrefix= this.transitions[this.transition].transitionsPrefix || this.transitionsPrefix;
+            this.transitionsPrefix = this.transitions[this.transition].transitionsPrefix || this.transitionsPrefix;
             this.enterDelay = this.transitions[this.transition].enterDelay || this.enterDelay;
             this.exitDelay = this.transitions[this.transition].exitDelay || this.exitDelay;
 
-            oldContainer = document.querySelector(transitionContainer);
+            oldContainer = document.querySelector(this.transitionContainer);
         }
 
         if (oldContainer) {
-            container = transitionContainer;
+            container = this.transitionContainer;
             this.oldContainer = oldContainer;
@@ -140,8 +153,13 @@ this.classContainer = this.oldContainer.parentNode;
         this.href = href;
+        this.parentContainer = this.oldContainer.parentNode;
 
-        this.oldContainer.classList.add('is-old');
+        if (this.isUrl != null && this.isUrl != 'false') {
+            history.pushState(this.transition, null, href);
+        } else {
+            this.oldContainer.classList.add('is-old');
 
-        this.setLoading();
-        this.startEnterDelay();
-        this.goTo(href, container, push);
+            this.setLoading();
+            this.startEnterDelay();
+            this.goTo(href, container, push);
+        }
     }
@@ -167,3 +185,3 @@
     startEnterDelay() {
-        setTimeout(() => {
+        this.enterTimeout = window.setTimeout(() => {
             this.isEntered = true;
@@ -178,8 +196,7 @@
     goTo(href, container, push) {
-        fetch(href)
+        fetch(href, {
+                signal: this.signal
+            })
             .then(response => response.text())
             .then(data => {
-                this.isLoaded = true;
-                this.parentContainer = this.oldContainer.parentNode;
-
                 const parser = new DOMParser();
@@ -190,2 +207,3 @@ this.data = parser.parseFromString(data, 'text/html');
                 this.newContainer.classList.add('is-new');
+                this.parentNewContainer = this.newContainer.parentNode;
 
@@ -195,5 +213,8 @@ this.hideContainer();
                 this.parentContainer.insertBefore(this.newContainer, this.oldContainer);
+                this.isInserted = true;
 
                 this.setSvgs();
 
+                this.isLoaded = true;
+
                 if (this.isEntered) {
@@ -243,4 +264,15 @@ this.transitionContainers();
         const description = this.data.head.querySelector('meta[name="description"]');
-        const datas = Object.assign({}, this.data.querySelector('html').dataset);
+        let container;
+        let newContainer;
 
+        if (this.subContainer) {
+            newContainer = this.parentNewContainer;
+            container = document.querySelector(this.transitionContainer).parentNode;
+        } else {
+            newContainer = this.data.querySelector('html');
+            container = document.querySelector('html');
+        }
+
+        const datas = Object.assign({}, newContainer.dataset);
+
         if (title) document.title = title.innerHTML;
@@ -250,3 +282,3 @@ if (description) document.head.querySelector('meta[name="description"]').setAttribute('content', description.getAttribute('content'));
             Object.entries(datas).forEach(([key, val]) => {
-                document.querySelector('html').setAttribute('data-' + this.toDash(key), val);
+                container.setAttribute('data-' + this.toDash(key), val);
             });
@@ -311,2 +343,3 @@ }
         this.newContainer.classList.remove('is-new');
+        this.isInserted = false;
     }
@@ -313,0 +346,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

44057

increased by8.08%

Lines of code

1105

increased by8.55%

Number of lines in readme file

152

increased by0.66%

No dependency changes