@glitchr/transparent 1.0.31 → 1.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glitchr/transparent",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "Transparent SPA Application",
   "main": "src/index.js",
   "access": "public",

package/src/js/transparent.js

@@ -15,36 +15,36 @@
         if(!newHash) newHash = "";
         if (newHash !== "" && (''+newHash).charAt(0) !== '#')
             newHash = '#' + newHash;
-    
+
         var oldURL = location.origin+location.pathname+location.hash;
         var newURL = location.origin+location.pathname+newHash;
-    
+
         var fallback  = $(newHash).length === 0;
-    
+
         var hashElement = $(newHash)[0] ?? undefined;
-        if (hashElement !== undefined) // Update hash only if element is displayed
-            fallback |= window.getComputedStyle(hashElement)["display"] == "none";
-    
+        // if (hashElement !== undefined) // Update hash only if element is displayed
+        //     fallback |= window.getComputedStyle(hashElement)["display"] == "none";
+
         if((skipIfEmptyIdentifier && !newHash) || fallback){
-    
+
             dispatchEvent(new HashChangeEvent("hashfallback", {oldURL:oldURL, newURL:newURL}));
             newHash = "";
-    
+
             oldURL = location.origin+location.pathname+location.hash;
             newURL = location.origin+location.pathname+newHash;
         }
-    
+
         if(oldURL == newURL) return false;
-    
+
         var state = Object.assign({}, history.state, {href: newURL});
         history.replaceState(state, '', newURL);
-    
+
         if(triggerHashChange)
             dispatchEvent(new HashChangeEvent("hashchange", {oldURL:oldURL, newURL:newURL}));
-    
+
         return true;
     };
-    
+
     $.fn.serializeObject = function() {
         var o = {};
         var a = this.serializeArray();
@@ -60,100 +60,100 @@
         });
         return o;
     };
-    
+
     $.fn.isScrollable  = function()
     {
         for (let el of $(this).isScrollableX())
             if(el) return true;
-    
+
         for (let el of $(this).isScrollableY())
             if(el) return true;
-    
+
         return false;
     }
-    
+
     $.fn.isScrollableX = function() {
-    
+
         return $(this).map(function(i) {
-    
+
             var el = this[i] === window ? document.documentElement : this[i];
             var isDom = el == document.documentElement;
-    
+
             var hasScrollableContent = el.scrollWidth > el.clientWidth;
-    
+
             var overflowStyle   = window.getComputedStyle(el).overflowX;
             var isOverflowScroll = overflowStyle.indexOf('scroll') !== -1;
-    
+
             return hasScrollableContent && (isOverflowScroll || isDom);
-    
+
         }.bind(this));
     }
-    
+
     $.fn.isScrollableY = function() {
-    
+
         return $(this).map(function(i) {
-    
+
             var el = this[i] === window ? document.documentElement : this[i];
             var isDom = el == document.documentElement;
-    
+
             var hasScrollableContent = el.scrollHeight > el.clientHeight;
-    
+
             var overflowStyle   = window.getComputedStyle(el).overflowY;
             var isOverflowScroll = overflowStyle.indexOf('scroll') !== -1;
-    
+
             return hasScrollableContent && (isOverflowScroll || isDom);
-    
+
         }.bind(this));
     }
-    
+
     $.fn.closestScrollable = function()
     {
         return $(this).map((i) => {
-    
+
             var target = this[i] === window ? document.documentElement : this[i];
             if (target === undefined) target = document.documentElement;
-    
+
             while (target !== document.documentElement) {
-    
+
                 if($(target).isScrollable()) return target;
-    
+
                 if(target.parentElement === undefined) return undefined;
                 if(target.parentElement === null) return null;
-    
+
                 target = target.parentElement;
             }
-    
+
             return $(target).isScrollable() ? target : undefined;
         });
     }
-    
+
     $.fn.repaint = function(duration = 1000, reiteration=5) {
-    
+
         var time = 0;
         var interval = undefined;
         var fn = function () {
-    
+
             $(this).each(function (_, el) {
-    
+
                 var displayBak = el.style.display;
-    
+
                 el.style.display = "none";
                 el.style.display = displayBak;
                 el.offsetHeight;
             });
-    
+
             if (time > duration) clearInterval(interval);
-                time += duration/reiteration;
-    
+            time += duration/reiteration;
+
         }.bind(this);
-    
+
         fn();
         if(reiteration > 0)
             interval = setInterval(fn, duration/reiteration);
     };
-    
+
     var Transparent = window.Transparent = {};
-        Transparent.version = '0.1.0';
+    Transparent.version = '0.1.0';
 
     var Settings = Transparent.settings = {
         "headers": {},
@@ -276,7 +276,7 @@
             responseText = responseText.outerHTML;
 
         var array = JSON.parse(sessionStorage.getItem('transparent')) || [];
-            array.push(uuid);
+        array.push(uuid);
 
         while(array.length > Settings["response_limit"])
             sessionStorage.removeItem('transparent['+array.shift()+']');
@@ -533,7 +533,7 @@
                 if (href.endsWith  ("#")) href = href.slice(0, -1);
 
                 var method = el.target.getAttribute("method") || "GET";
-                    method = method.toUpperCase();
+                method = method.toUpperCase();
 
                 var form = Transparent.findNearestForm(el);
                 if (form == null) {
@@ -650,20 +650,20 @@
                 if(url === null || url === "") continue;
 
                 var preload = document.createElement("link");
-                    preloads.push(preload);
+                preloads.push(preload);
 
-                    preload.onload = function () {
+                preload.onload = function () {
 
-                        if (++nPreloaded == nPreload)
-                            return callback(preloads);
-                    };
+                    if (++nPreloaded == nPreload)
+                        return callback(preloads);
+                };
 
-                    preload.setAttribute("rel", "preload");
-                    preload.setAttribute("as", as);
-                    preload.setAttribute("crossorigin","");
-                    preload.href = url;
+                preload.setAttribute("rel", "preload");
+                preload.setAttribute("as", as);
+                preload.setAttribute("crossorigin","");
+                preload.href = url;
 
-                    document.head.append(preload);
+                document.head.append(preload);
             }
         }
     }
@@ -725,11 +725,11 @@
     Transparent.parseDuration = function(str) {
 
         var array = String(str).split(", ");
-            array = array.map(function(t) {
+        array = array.map(function(t) {
 
-                if(String(t).endsWith("ms")) return parseFloat(String(t))/1000;
-                return parseFloat(String(t));
-            });
+            if(String(t).endsWith("ms")) return parseFloat(String(t))/1000;
+            return parseFloat(String(t));
+        });
 
         return Math.max(...array);
     }
@@ -760,7 +760,8 @@
 
         return {delay:delay, duration:duration};
     }
-
+    var activeInTime = 0;
+    var activeInRemainingTime = 0;
     Transparent.activeIn = function(activeCallback = function() {}) {
 
         if(!Transparent.html.hasClass(Transparent.state.PREACTIVE)) {
@@ -769,6 +770,8 @@
         }
 
         var active = Transparent.activeTime();
+        activeInTime = Date.now();
+        activeInRemainingTime = active.delay+active.duration;
 
         Transparent.html.removeClass(Transparent.state.PREACTIVE);
         if(!Transparent.html.hasClass(Transparent.state.ACTIVEIN)) {
@@ -788,6 +791,7 @@
             Transparent.callback(function() {
 
                 activeCallback();
+                activeInRemainingTime = 0;
 
             }.bind(this), active.duration);
 
@@ -908,7 +912,7 @@
 
         console.log(head, body);
         if(head == undefined || body == "undefined") {
-            
+
             $(Settings.identifier).html("<div class='error'></div>");
 
             setTimeout(function() { window.location.reload(); }, Transparent.parseDuration(Settings["rescue_reload"]));
@@ -920,7 +924,7 @@
             Transparent.evalScript($("head")[0]);
             Transparent.evalScript($("body")[0]);
         }
-        
+
         Transparent.activeOut();
     }
 
@@ -1023,22 +1027,22 @@
         return Array.from(doc.querySelectorAll('*'))
             .reduce((collection, node) => {
 
-            let prop = window.getComputedStyle(node, null).getPropertyValue('background-image')
-            let match = srcChecker.exec(prop);
-            if (match) collection.add(match[1]);
+                let prop = window.getComputedStyle(node, null).getPropertyValue('background-image')
+                let match = srcChecker.exec(prop);
+                if (match) collection.add(match[1]);
 
-            if (/^img$/i.test(node.tagName)) collection.add(node.src)
-            else if (/^frame$/i.test(node.tagName)) {
+                if (/^img$/i.test(node.tagName)) collection.add(node.src)
+                else if (/^frame$/i.test(node.tagName)) {
 
-                try {
-                    searchDOM(node.contentDocument || node.contentWindow.document)
-                        .forEach(img => { if (img) collection.add(img); })
-                } catch (e) {}
-            }
+                    try {
+                        searchDOM(node.contentDocument || node.contentWindow.document)
+                            .forEach(img => { if (img) collection.add(img); })
+                    } catch (e) {}
+                }
 
-            return collection;
+                return collection;
 
-        }, new Set());
+            }, new Set());
     }
 
     Transparent.lazyLoad = function (lazyloadImages = undefined)
@@ -1046,25 +1050,25 @@
         lazyloadImages = lazyloadImages || document.querySelectorAll("img[data-src]:not(.loaded)");
         if ("IntersectionObserver" in window) {
 
-                var imageObserver = new IntersectionObserver(function (entries, observer) {
-                    entries.forEach(function (entry) {
-                        if (entry.isIntersecting) {
-                            var image = entry.target;
-                            var lazybox = image.closest(".lazybox");
+            var imageObserver = new IntersectionObserver(function (entries, observer) {
+                entries.forEach(function (entry) {
+                    if (entry.isIntersecting) {
+                        var image = entry.target;
+                        var lazybox = image.closest(".lazybox");
 
-                                image.onload = function() {
-                                    this.classList.add("loaded");
-                                    this.classList.remove("loading");
-                                    if(lazybox) lazybox.classList.add("loaded");
-                                    if(lazybox) lazybox.classList.remove("loading");
-                                };
+                        image.onload = function() {
+                            this.classList.add("loaded");
+                            this.classList.remove("loading");
+                            if(lazybox) lazybox.classList.add("loaded");
+                            if(lazybox) lazybox.classList.remove("loading");
+                        };
 
-                                if(lazybox) lazybox.classList.add("loading");
-                                image.classList.add("loading");
-                                image.src = image.dataset.src;
+                        if(lazybox) lazybox.classList.add("loading");
+                        image.classList.add("loading");
+                        image.src = image.dataset.src;
 
-                            imageObserver.unobserve(image);
-                        }
+                        imageObserver.unobserve(image);
+                    }
                 });
             });
 
@@ -1074,7 +1078,7 @@
 
         } else {
 
-                var lazyloadThrottleTimeout;
+            var lazyloadThrottleTimeout;
 
             function lazyload() {
                 if (lazyloadThrottleTimeout) {
@@ -1109,7 +1113,7 @@
             var imgPromise = new Promise((resolve, reject) => {
 
                 let img = new Image()
-                    img.onload = () => {
+                img.onload = () => {
                     resolve({
                         src: src,
                         width: img.naturalWidth,
@@ -1209,14 +1213,14 @@
         });
 
         var bodyScript = $(dom).find("body > script");
-            bodyScript.each(function() {
+        bodyScript.each(function() {
 
-                var el   = this;
-                var found = false;
+            var el   = this;
+            var found = false;
 
-                $("body").children().each(function() { found |= this.isEqualNode(el); });
-                if(!found) $("body").append(this);
-            });
+            $("body").children().each(function() { found |= this.isEqualNode(el); });
+            if(!found) $("body").append(this);
+        });
 
         // Replace canvases..
         Transparent.replaceCanvases(dom);
@@ -1280,29 +1284,27 @@
 
         $('head').append(function() {
 
-            $('body').append(function() {
+            $(Settings.identifier).append(function() {
 
-                $(Settings.identifier).append(function() {
+                activeInRemainingTime = activeInRemainingTime - (Date.now() - activeInTime);
+                setTimeout(function() {
 
-                    setTimeout(function() {
+                    // Callback if needed, or any other actions
+                    callback();
 
-                        // Callback if needed, or any other actions
-                        callback();
-
-                        // Trigger onload event
-                        dispatchEvent(new Event('transparent:load'));
-                        dispatchEvent(new Event('load'));
+                    // Trigger onload event
+                    dispatchEvent(new Event('transparent:load'));
+                    dispatchEvent(new Event('load'));
 
-                    }.bind(this), 1);
-                });
+                }.bind(this), activeInRemainingTime > 0 ? activeInRemainingTime : 1);
             });
         });
     }
 
     function uuidv4() {
         return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-          var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
-          return v.toString(16);
+            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
         });
     }
 
@@ -1326,13 +1328,13 @@
         if(str === undefined) return undefined;
 
         var array = String(str).split(", ");
-            array = array.map(function(s) {
+        array = array.map(function(s) {
 
-                     if(s.endsWith("rem")) return Transparent.remToPixel    (s);
-                else if(s.endsWith("em") ) return Transparent.emToPixel     (s, el);
-                else if(s.endsWith("%")  ) return Transparent.percentToPixel(s, el);
-                return parseFloat(s);
-            });
+            if(s.endsWith("rem")) return Transparent.remToPixel    (s);
+            else if(s.endsWith("em") ) return Transparent.emToPixel     (s, el);
+            else if(s.endsWith("%")  ) return Transparent.percentToPixel(s, el);
+            return parseFloat(s);
+        });
 
         return Math.max(...array);
     }
@@ -1341,10 +1343,10 @@
 
         var style  = window.getComputedStyle(el);
         var dict = {};
-            dict["top"   ] = Transparent.parseToPixel(style["scroll-padding-top"   ] || 0, el);
-            dict["left"  ] = Transparent.parseToPixel(style["scroll-padding-left"  ] || 0, el);
-            dict["right" ] = Transparent.parseToPixel(style["scroll-padding-right" ] || 0, el);
-            dict["bottom"] = Transparent.parseToPixel(style["scroll-padding-bottom"] || 0, el);
+        dict["top"   ] = Transparent.parseToPixel(style["scroll-padding-top"   ] || 0, el);
+        dict["left"  ] = Transparent.parseToPixel(style["scroll-padding-left"  ] || 0, el);
+        dict["right" ] = Transparent.parseToPixel(style["scroll-padding-right" ] || 0, el);
+        dict["bottom"] = Transparent.parseToPixel(style["scroll-padding-bottom"] || 0, el);
 
         if(isNaN(dict["top"   ])) dict["top"]    = 0;
         if(isNaN(dict["left"  ])) dict["left"]   = 0;
@@ -1471,7 +1473,7 @@
 
         dispatchEvent(new Event('transparent:onbeforeunload'));
         dispatchEvent(new Event('onbeforeunload'));
-        
+
         $(Transparent.html).prop("user-scroll", true);
         $(Transparent.html).stop();
 
@@ -1486,7 +1488,7 @@
         function handleResponse(uuid, status = 200, method = null, data = null, xhr = null, request = null) {
 
             var responseURL;
-                responseURL = xhr !== null ? xhr.responseURL : url.href;
+            responseURL = xhr !== null ? xhr.responseURL : url.href;
 
             responseText  = Transparent.getResponseText(uuid);
 
@@ -1593,21 +1595,21 @@
                 return window.location.reload();
 
             return Transparent.onLoad(uuid, dom, function() {
-                
-                    Transparent.activeOut(function() {
-
-                        Transparent.html
-                            .removeClass(switchLayout)
-                            .removeClass(Transparent.state.SUBMIT)
-                            .removeClass(Transparent.state.POPSTATE)
-                            .removeClass(Transparent.state.NEW);
-                    });
 
-                }, type != "POST");
+                Transparent.activeOut(function() {
+
+                    Transparent.html
+                        .removeClass(switchLayout)
+                        .removeClass(Transparent.state.SUBMIT)
+                        .removeClass(Transparent.state.POPSTATE)
+                        .removeClass(Transparent.state.NEW);
+                });
+
+            }, type != "POST");
         }
 
         if(history.state && !Transparent.hasResponse(history.state.uuid))
-                Transparent.setResponse(history.state.uuid, Transparent.html[0], Transparent.getScrollableElementXY());
+            Transparent.setResponse(history.state.uuid, Transparent.html[0], Transparent.getScrollableElementXY());
 
         // This append on user click (e.g. when user push a link)
         // It is null when dev is pushing or replacing state