modularload - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/main.cjs.js

@@ -76,11 +76,13 @@ 'use strict';
       enterDelay: 0,
-      exitDelay: 0
+      exitDelay: 0,
+      isLoaded: false,
+      isEntered: false
     };
     Object.assign(this, this.defaults, options);
+    this.options = options;
     this.namespace = 'modular';
     this.html = document.documentElement;
-    this.container = '[data-' + this.name + '-container]';
+    this.container = 'data-' + this.name + '-container';
     this.loadAttributes = ['src', 'srcset', 'style', 'href'];
-    this.isLoaded = false;
-    this.isEntered = false;
+    this.classContainer = this.html;
     this.isChrome = navigator.userAgent.indexOf("Chrome") != -1 ? true : false;
@@ -128,9 +130,10 @@ this.init();
     value: function reset() {
-      this.html.classList.remove(this.loadedClass, this.readyClass);
-      this.isEntered = false;
-      this.isLoaded = false;
+      this.classContainer.classList.remove(this.loadedClass, this.readyClass);
 
       if (this.transition) {
-        this.html.classList.remove(this.transitionsPrefix + this.transition);
+        this.classContainer.classList.remove(this.transitionsPrefix + this.transition);
       }
+
+      this.classContainer = this.html;
+      Object.assign(this, this.defaults, this.options);
     }
@@ -166,15 +169,29 @@ }, {
     value: function setOptions(href, push) {
-      var enterDelay = this.enterDelay;
-      var exitDelay = this.exitDelay;
+      var container = '[' + this.container + ']';
+      var transitionContainer;
+      var oldContainer;
 
       if (this.transition && this.transition != 'true') {
-        enterDelay = this.transitions[this.transition].enterDelay || this.enterDelay;
-        exitDelay = this.transitions[this.transition].exitDelay || this.exitDelay;
+        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.enterDelay = this.transitions[this.transition].enterDelay || this.enterDelay;
+        this.exitDelay = this.transitions[this.transition].exitDelay || this.exitDelay;
+        oldContainer = document.querySelector(transitionContainer);
       }
 
-      this.oldContainer = document.querySelector(this.container);
+      if (oldContainer) {
+        container = transitionContainer;
+        this.oldContainer = oldContainer;
+        this.classContainer = this.oldContainer.parentNode;
+      } else {
+        this.oldContainer = document.querySelector(container);
+      }
+
       this.oldContainer.classList.add('is-old');
       this.setLoading();
-      this.startEnterDelay(enterDelay, exitDelay);
-      this.goTo(href, exitDelay, push);
+      this.startEnterDelay();
+      this.goTo(href, container, push);
     }
@@ -184,6 +201,6 @@ }, {
     value: function setLoading() {
-      this.html.classList.add(this.loadingClass);
+      this.classContainer.classList.add(this.loadingClass);
 
       if (this.transition) {
-        this.html.classList.add(this.transitionsPrefix + this.transition);
+        this.classContainer.classList.add(this.transitionsPrefix + this.transition);
       }
@@ -196,3 +213,3 @@
     key: "startEnterDelay",
-    value: function startEnterDelay(enterDelay, exitDelay) {
+    value: function startEnterDelay() {
       var _this2 = this;
@@ -204,9 +221,9 @@
         if (_this2.isLoaded) {
-          _this2.transitionContainers(exitDelay);
+          _this2.transitionContainers();
         }
-      }, enterDelay);
+      }, this.enterDelay);
     }
   }, {
     key: "goTo",
-    value: function goTo(href, exitDelay, push) {
+    value: function goTo(href, container, push) {
       var _this3 = this;
@@ -221,3 +238,3 @@
         data = parser.parseFromString(data, 'text/html');
-        _this3.newContainer = data.querySelector(_this3.container);
+        _this3.newContainer = data.querySelector(container);
 
@@ -235,3 +252,3 @@ _this3.newContainer.classList.add('is-new');
         if (_this3.isEntered) {
-          _this3.transitionContainers(exitDelay);
+          _this3.transitionContainers();
         }
@@ -248,3 +265,3 @@
     key: "transitionContainers",
-    value: function transitionContainers(exitDelay) {
+    value: function transitionContainers() {
       var _this4 = this;
@@ -258,3 +275,3 @@
         _this4.setReady();
-      }, exitDelay);
+      }, this.exitDelay);
     }
@@ -348,4 +365,4 @@ }, {
     value: function setLoaded() {
-      this.html.classList.add(this.loadedClass);
-      this.html.classList.remove(this.loadingClass);
+      this.classContainer.classList.add(this.loadedClass);
+      this.classContainer.classList.remove(this.loadingClass);
       var loadedEvent = new Event(this.namespace + 'loaded');
@@ -363,3 +380,3 @@ window.dispatchEvent(loadedEvent);
     value: function setReady() {
-      this.html.classList.add(this.readyClass);
+      this.classContainer.classList.add(this.readyClass);
       var readyEvent = new Event(this.namespace + 'ready');
@@ -366,0 +383,0 @@ window.dispatchEvent(readyEvent);

dist/main.esm.js

@@ -74,11 +74,13 @@ function _classCallCheck(instance, Constructor) {
       enterDelay: 0,
-      exitDelay: 0
+      exitDelay: 0,
+      isLoaded: false,
+      isEntered: false
     };
     Object.assign(this, this.defaults, options);
+    this.options = options;
     this.namespace = 'modular';
     this.html = document.documentElement;
-    this.container = '[data-' + this.name + '-container]';
+    this.container = 'data-' + this.name + '-container';
     this.loadAttributes = ['src', 'srcset', 'style', 'href'];
-    this.isLoaded = false;
-    this.isEntered = false;
+    this.classContainer = this.html;
     this.isChrome = navigator.userAgent.indexOf("Chrome") != -1 ? true : false;
@@ -126,9 +128,10 @@ this.init();
     value: function reset() {
-      this.html.classList.remove(this.loadedClass, this.readyClass);
-      this.isEntered = false;
-      this.isLoaded = false;
+      this.classContainer.classList.remove(this.loadedClass, this.readyClass);
 
       if (this.transition) {
-        this.html.classList.remove(this.transitionsPrefix + this.transition);
+        this.classContainer.classList.remove(this.transitionsPrefix + this.transition);
       }
+
+      this.classContainer = this.html;
+      Object.assign(this, this.defaults, this.options);
     }
@@ -164,15 +167,29 @@ }, {
     value: function setOptions(href, push) {
-      var enterDelay = this.enterDelay;
-      var exitDelay = this.exitDelay;
+      var container = '[' + this.container + ']';
+      var transitionContainer;
+      var oldContainer;
 
       if (this.transition && this.transition != 'true') {
-        enterDelay = this.transitions[this.transition].enterDelay || this.enterDelay;
-        exitDelay = this.transitions[this.transition].exitDelay || this.exitDelay;
+        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.enterDelay = this.transitions[this.transition].enterDelay || this.enterDelay;
+        this.exitDelay = this.transitions[this.transition].exitDelay || this.exitDelay;
+        oldContainer = document.querySelector(transitionContainer);
       }
 
-      this.oldContainer = document.querySelector(this.container);
+      if (oldContainer) {
+        container = transitionContainer;
+        this.oldContainer = oldContainer;
+        this.classContainer = this.oldContainer.parentNode;
+      } else {
+        this.oldContainer = document.querySelector(container);
+      }
+
       this.oldContainer.classList.add('is-old');
       this.setLoading();
-      this.startEnterDelay(enterDelay, exitDelay);
-      this.goTo(href, exitDelay, push);
+      this.startEnterDelay();
+      this.goTo(href, container, push);
     }
@@ -182,6 +199,6 @@ }, {
     value: function setLoading() {
-      this.html.classList.add(this.loadingClass);
+      this.classContainer.classList.add(this.loadingClass);
 
       if (this.transition) {
-        this.html.classList.add(this.transitionsPrefix + this.transition);
+        this.classContainer.classList.add(this.transitionsPrefix + this.transition);
       }
@@ -194,3 +211,3 @@
     key: "startEnterDelay",
-    value: function startEnterDelay(enterDelay, exitDelay) {
+    value: function startEnterDelay() {
       var _this2 = this;
@@ -202,9 +219,9 @@
         if (_this2.isLoaded) {
-          _this2.transitionContainers(exitDelay);
+          _this2.transitionContainers();
         }
-      }, enterDelay);
+      }, this.enterDelay);
     }
   }, {
     key: "goTo",
-    value: function goTo(href, exitDelay, push) {
+    value: function goTo(href, container, push) {
       var _this3 = this;
@@ -219,3 +236,3 @@
         data = parser.parseFromString(data, 'text/html');
-        _this3.newContainer = data.querySelector(_this3.container);
+        _this3.newContainer = data.querySelector(container);
 
@@ -233,3 +250,3 @@ _this3.newContainer.classList.add('is-new');
         if (_this3.isEntered) {
-          _this3.transitionContainers(exitDelay);
+          _this3.transitionContainers();
         }
@@ -246,3 +263,3 @@
     key: "transitionContainers",
-    value: function transitionContainers(exitDelay) {
+    value: function transitionContainers() {
       var _this4 = this;
@@ -256,3 +273,3 @@
         _this4.setReady();
-      }, exitDelay);
+      }, this.exitDelay);
     }
@@ -346,4 +363,4 @@ }, {
     value: function setLoaded() {
-      this.html.classList.add(this.loadedClass);
-      this.html.classList.remove(this.loadingClass);
+      this.classContainer.classList.add(this.loadedClass);
+      this.classContainer.classList.remove(this.loadingClass);
       var loadedEvent = new Event(this.namespace + 'loaded');
@@ -361,3 +378,3 @@ window.dispatchEvent(loadedEvent);
     value: function setReady() {
-      this.html.classList.add(this.readyClass);
+      this.classContainer.classList.add(this.readyClass);
       var readyEvent = new Event(this.namespace + 'ready');
@@ -364,0 +381,0 @@ window.dispatchEvent(readyEvent);

package.json

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

src/main.js

@@ -10,3 +10,5 @@ export default class {
             enterDelay: 0,
-            exitDelay: 0
+            exitDelay: 0,
+            isLoaded: false,
+            isEntered: false
         }
@@ -16,9 +18,9 @@
 
+        this.options = options;
         this.namespace = 'modular';
         this.html = document.documentElement;
-        this.container = '[data-' + this.name + '-container]';
+        this.container = 'data-' + this.name + '-container';
         this.loadAttributes = ['src', 'srcset', 'style', 'href'];
 
-        this.isLoaded = false;
-        this.isEntered = false;
+        this.classContainer = this.html;
 
@@ -59,9 +61,10 @@ this.isChrome = (navigator.userAgent.indexOf("Chrome") != -1) ? true : false;
     reset() {
-        this.html.classList.remove(this.loadedClass, this.readyClass);
-        this.isEntered = false;
-        this.isLoaded = false;
+        this.classContainer.classList.remove(this.loadedClass, this.readyClass);
 
         if (this.transition) {
-            this.html.classList.remove(this.transitionsPrefix + this.transition);
+            this.classContainer.classList.remove(this.transitionsPrefix + this.transition);
         }
+
+        this.classContainer = this.html;
+        Object.assign(this, this.defaults, this.options);
     }
@@ -95,23 +98,38 @@
     setOptions(href, push) {
-        let enterDelay = this.enterDelay;
-        let exitDelay = this.exitDelay;
+        let container = '[' + this.container + ']';
+        let transitionContainer;
+        let oldContainer;
 
         if (this.transition && this.transition != 'true') {
-            enterDelay = this.transitions[this.transition].enterDelay || this.enterDelay;
-            exitDelay = this.transitions[this.transition].exitDelay || this.exitDelay;
+            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.enterDelay = this.transitions[this.transition].enterDelay || this.enterDelay;
+            this.exitDelay = this.transitions[this.transition].exitDelay || this.exitDelay;
+
+            oldContainer = document.querySelector(transitionContainer);
         }
 
-        this.oldContainer = document.querySelector(this.container);
+        if (oldContainer) {
+            container = transitionContainer;
+            this.oldContainer = oldContainer;
+            this.classContainer = this.oldContainer.parentNode;
+        } else {
+            this.oldContainer = document.querySelector(container);
+        }
+
         this.oldContainer.classList.add('is-old');
 
         this.setLoading();
-        this.startEnterDelay(enterDelay, exitDelay);
-        this.goTo(href, exitDelay, push);
+        this.startEnterDelay();
+        this.goTo(href, container, push);
     }
 
     setLoading() {
-        this.html.classList.add(this.loadingClass);
+        this.classContainer.classList.add(this.loadingClass);
 
         if (this.transition) {
-            this.html.classList.add(this.transitionsPrefix + this.transition);
+            this.classContainer.classList.add(this.transitionsPrefix + this.transition);
         }
@@ -123,3 +141,3 @@
 
-    startEnterDelay(enterDelay, exitDelay) {
+    startEnterDelay() {
         setTimeout(() => {
@@ -129,8 +147,8 @@ this.isEntered = true;
             if (this.isLoaded) {
-                this.transitionContainers(exitDelay);
+                this.transitionContainers();
             }
-        }, enterDelay);
+        }, this.enterDelay);
     }
 
-    goTo(href, exitDelay, push) {
+    goTo(href, container, push) {
         fetch(href)
@@ -145,3 +163,3 @@ .then(response => response.text())
 
-                this.newContainer = data.querySelector(this.container);
+                this.newContainer = data.querySelector(container);
                 this.newContainer.classList.add('is-new');
@@ -157,3 +175,3 @@
                 if (this.isEntered) {
-                    this.transitionContainers(exitDelay);
+                    this.transitionContainers();
                 }
@@ -169,3 +187,3 @@
 
-    transitionContainers(exitDelay) {
+    transitionContainers() {
         this.showContainer();
@@ -177,3 +195,3 @@ this.setLoaded();
             this.setReady();
-        }, exitDelay);
+        }, this.exitDelay);
     }
@@ -254,4 +272,4 @@
     setLoaded() {
-        this.html.classList.add(this.loadedClass);
-        this.html.classList.remove(this.loadingClass);
+        this.classContainer.classList.add(this.loadedClass);
+        this.classContainer.classList.remove(this.loadingClass);
 
@@ -268,3 +286,3 @@ const loadedEvent = new Event(this.namespace + 'loaded');
     setReady() {
-        this.html.classList.add(this.readyClass);
+        this.classContainer.classList.add(this.readyClass);
 
@@ -271,0 +289,0 @@ const readyEvent = new Event(this.namespace + 'ready');

No alert changes

Improved metrics

Total package byte prevSize

37781

increased by7.6%

Lines of code

949

increased by4.98%

No dependency changes