@glitchr/transparent 1.0.24 → 1.0.26

package/package.json

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

package/src/css/index.css

@@ -0,0 +1,28 @@
+
+img[data-src] { transition:all 0.25s ease !important; }
+img[data-src]:not(.loaded) {
+	opacity: 0;
+	visibility: hidden;
+}
+
+.lazybox.loading { animation: blink 2s infinite; }
+@keyframes blink {
+	0%		{ background-color: transparent;}
+	25%		{ background-color: #EFEFEFAA;}
+	50%		{ background-color: transparent;}
+	75%		{ background-color: #EFEFEFAA;}
+	100%	{ background-color: transparent;}
+}
+
+.error 
+{
+	display:flex;
+	justify-content:center;
+	align-items:center;
+
+	width:100vw;
+	height: 100vh;
+
+	background-image:url("data:image/png;base64,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");
+	background-size:90%;
+}

package/src/index.js

@@ -1,2 +1,2 @@
 import './js/transparent.js';
-import './css/index.scss';
+import './css/index.css';

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((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,98 +60,98 @@
         });
         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;
-
+    
         }.bind(this);
-
+    
         fn();
         if(reiteration > 0)
             interval = setInterval(fn, duration/reiteration);
     };
-
+    
     var Transparent = window.Transparent = {};
         Transparent.version = '0.1.0';
 
@@ -161,6 +161,7 @@
         "disable": false,
         "global_code": true,
         "debug": true,
+        "lazyload": true,
         "response_text": {},
         "response_limit": 25,
         "throttle": 1000,
@@ -210,6 +211,12 @@
         dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVE));
     }
 
+    window.addEventListener("DOMContentLoaded", function()
+    {
+        Transparent.loader = $($(document).find(Settings.loader)[0] ?? Transparent.html);
+        Transparent.lazyLoad();
+    });
+
     Transparent.isRescueMode = function() { return rescueMode; }
     Transparent.getData = function(uuid)
     {
@@ -260,7 +267,7 @@
 
     function isDomEntity(entity)
     {
-        return entity !== null && typeof entity  === 'object' && entity.nodeType !== undefined;
+        return typeof entity  === 'object' && entity.nodeType !== undefined;
     }
 
     Transparent.setResponse = function(uuid, responseText, scrollableXY = [], exceptionRaised = false)
@@ -412,14 +419,16 @@
         Transparent.configure({'x-ajax-request': true});
         Transparent.configure(options);
 
-        if(isReady) return this;
         isReady = true;
 
         dispatchEvent(new Event('transparent:'+Transparent.state.READY));
         Transparent.html.addClass(Transparent.state.READY);
 
         Transparent.addLayout();
+        Transparent.lazyLoad();
+
         Transparent.scrollToHash(location.hash, {}, function() {
+
             Transparent.activeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
         });
 
@@ -894,18 +903,23 @@
         console.error("Rescue mode.. called");
         rescueMode = true;
 
+        var head = $(dom).find("head").html();
         var body = $(dom).find("body").html();
-        if(body == "undefined") {
 
+        if(head == undefined || body == "undefined") {
+            
             $(Settings.identifier).html("<div class='error'></div>");
+
             setTimeout(function() { window.location.reload(); }, Transparent.parseDuration(Settings["rescue_reload"]));
 
         } else {
 
-            document.documentElement.innerHTML = dom.documentElement === undefined ? dom : dom.documentElement.innerHTML;
-            Transparent.transferAttributes(dom);
+            document.head.innerHTML = $(dom).find("head").html();
+            document.body.innerHTML = $(dom).find("body").html();
+            Transparent.evalScript($("head")[0]);
+            Transparent.evalScript($("body")[0]);
         }
-
+        
         Transparent.activeOut();
     }
 
@@ -1026,6 +1040,104 @@
         }, new Set());
     }
 
+    Transparent.lazyLoad = function (lazyloadImages = undefined)
+    {
+        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");
+
+                                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;
+
+                            imageObserver.unobserve(image);
+                        }
+                });
+            });
+
+            lazyloadImages.forEach(function (image) {
+                imageObserver.observe(image);
+            });
+
+        } else {
+
+                var lazyloadThrottleTimeout;
+
+            function lazyload() {
+                if (lazyloadThrottleTimeout) {
+                    clearTimeout(lazyloadThrottleTimeout);
+                }
+
+                lazyloadThrottleTimeout = setTimeout(function () {
+                    var scrollTop = window.pageYOffset;
+                    lazyloadImages.forEach(function (img) {
+                        if (img.offsetTop < (window.innerHeight + scrollTop)) {
+                            img.src = img.dataset.src;
+                            img.classList.add('loaded');
+                        }
+                    });
+                    if (lazyloadImages.length == 0) {
+                        document.removeEventListener("scroll", lazyload);
+                        window.removeEventListener("resize", lazyload);
+                        window.removeEventListener("orientationChange", lazyload);
+                    }
+                }, 20);
+            }
+
+            document.addEventListener("scroll", lazyload);
+            window.addEventListener("resize", lazyload);
+            window.addEventListener("orientationChange", lazyload);
+        }
+    }
+
+    Transparent.loadImages = function()
+    {
+        function loadImg (src, timeout = 500) {
+            var imgPromise = new Promise((resolve, reject) => {
+
+                let img = new Image()
+                    img.onload = () => {
+                    resolve({
+                        src: src,
+                        width: img.naturalWidth,
+                        height: img.naturalHeight
+                    })
+                }
+
+                img.onerror = reject
+                img.src = src
+            })
+
+            var timer = new Promise((resolve, reject) => { setTimeout(reject, timeout) })
+            return Promise.race([imgPromise, timer])
+        }
+
+        function loadImgAll (imgList, timeout = 500) {
+            return new Promise((resolve, reject) => {
+                Promise.all(imgList
+                    .map(src => loadImg(src, timeout))
+                    .map(p => p.catch(e => false))
+                ).then(results => resolve(results.filter(r => r)))
+            })
+        }
+
+        return new Promise((resolve, reject) => {
+            loadImgAll(Array.from(Transparent.findImages(document.documentElement))).then(resolve, reject)
+        })
+    }
+
     Transparent.transferAttributes = function(dom) {
 
         var html = $(dom).find("html");
@@ -1034,37 +1146,27 @@
             $("html").removeAttr(attr.name);
         });
 
-        if(html.length > 0) {
-
-            $($(html)[0].attributes).each(function(i, attr) {
-                if(attr.name == "class") return;
-                $("html").attr(attr.name, attr.value);
-            });
-        }
+        $($(html)[0].attributes).each(function(i, attr) {
+            if(attr.name == "class") return;
+            $("html").attr(attr.name, attr.value);
+        });
 
         var head = $(dom).find("head");
         $($("head")[0].attributes).each(function(i, attr) {
             $("head").removeAttr(attr.name);
         });
 
-        if(head.length > 0) {
-
-            $($(head)[0].attributes).each(function(i, attr) {
-                $("head").attr(attr.name, attr.value);
-            });
-        }
+        $($(head)[0].attributes).each(function(i, attr) {
+            $("head").attr(attr.name, attr.value);
+        });
 
         var body = $(dom).find("body");
         $($("body")[0].attributes).each(function(i, attr) {
             $("body").removeAttr(attr.name);
         });
-
-        if(body.length > 0) {
-
-            $($(body)[0].attributes).each(function(i, attr) {
-                $("body").attr(attr.name, attr.value);
-            });
-        }
+        $($(body)[0].attributes).each(function(i, attr) {
+            $("body").attr(attr.name, attr.value);
+        });
     }
 
     Transparent.onLoad = function(uuid, dom, callback = null, scrollTo = false) {
@@ -1076,19 +1178,14 @@
         // Transfert attributes
         Transparent.transferAttributes(dom);
 
-        // Replace head..
+        // Replace head.. (@TODO keep ordering, by adding after.. last node probed)
         var head = $(dom).find("head");
         $("head").children().each(function() {
 
             var el   = this;
             var found = false;
 
-            head.children().each(function() {
-
-                found = this.isEqualNode(el);
-                return !found;
-            });
-
+            head.children().each(function() { found |= this.isEqualNode(el); });
             if(!found) this.remove();
         });
 
@@ -1105,6 +1202,30 @@
             }
         });
 
+        // Replace body end (@TODO keep ordering, by adding after.. last node probed)
+        var bodyScript = $(dom).find("body > script");
+        $("body").find("script").each(function() {
+           
+            var el   = this;
+            var found = false;
+
+            bodyScript.each(function() { found |= this.isEqualNode(el); });
+            if(!found) this.remove();
+        });
+
+        bodyScript.each(function() {
+
+            var el   = this;
+            var found = false;
+
+            $("body").find("script").each(function() { found |= this.isEqualNode(el); });
+            if(!found) {
+                
+                if(this.tagName != "SCRIPT" || Settings["global_code"] == true) $("body").append(this.cloneNode(true));
+                else $("body").append(this);
+            }
+        });
+        
         // Replace canvases..
         Transparent.replaceCanvases(dom);
 
@@ -1165,19 +1286,21 @@
         }
 
         $('head').append(function() {
+            $('body').append(function() {
 
-            $(Settings.identifier).append(function() {
+                $(Settings.identifier).append(function() {
 
-                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), 1);
+                });
             });
         });
     }
@@ -1304,8 +1427,7 @@
 
         var form   = target != undefined && target.tagName == "FORM" ? target : undefined;
         if (form) {
-
-            data = new FormData(form);
+            data = $(form).serialize();
             $(form).find(':submit').attr('disabled', 'disabled');
         }
 
@@ -1354,7 +1476,7 @@
 
         dispatchEvent(new Event('transparent:onbeforeunload'));
         dispatchEvent(new Event('onbeforeunload'));
-
+        
         $(Transparent.html).prop("user-scroll", true);
         $(Transparent.html).stop();
 
@@ -1399,6 +1521,7 @@
                 if(!Transparent.hasResponse(uuid))
                     Transparent.setResponse(uuid, responseText);
             }
+
             var dom = new DOMParser().parseFromString(responseText, "text/html");
             if(request && request.getResponseHeader("Content-Type") == "application/json") {
 
@@ -1426,9 +1549,8 @@
 
             // From here the page is valid..
             // so the new page is added to history..
-
             if(xhr)
-                history.pushState({uuid: uuid, status:status, method: method, data: data instanceof FormData ? "" : data, href: responseURL}, '', responseURL);
+                history.pushState({uuid: uuid, status:status, method: method, data: data, href: responseURL}, '', responseURL);
 
             var dom = new DOMParser().parseFromString(responseText, "text/html");
             if(status != 200) // Blatant error received..
@@ -1437,7 +1559,6 @@
             // Page not recognized.. just go there.. no POST information transmitted..
             if(!Transparent.isPage(dom))
                 return window.location.href = url;
-                // return Transparent.rescue(dom);
 
             // Layout not compatible.. needs to be reloaded (exception when POST is detected..)
             if(!Transparent.isCompatiblePage(dom, method, data))
@@ -1477,7 +1598,7 @@
                 return window.location.reload();
 
             return Transparent.onLoad(uuid, dom, function() {
-
+                
                     Transparent.activeOut(function() {
 
                         Transparent.html
@@ -1509,8 +1630,6 @@
                 url: url.href,
                 type: type,
                 data: data,
-                contentType: false,
-                processData: false,
                 dataType: 'html',
                 headers: Settings["headers"] || {},
                 xhr: function () { return xhr; },
@@ -1527,9 +1646,6 @@
     if (href != location.origin + location.pathname + location.hash)
         history.replaceState({uuid: uuidv4(), status: history.state ? history.state.status : 200, data:{}, method: history.state ? history.state.method : "GET", href: location.origin + location.pathname + location.hash}, '', location.origin + location.pathname + location.hash);
 
-    window.addEventListener("DOMContentLoaded", function() { Transparent.loader = $($(document).find(Settings.loader)[0] ?? Transparent.html); }, true);
-    window.addEventListener("load",function() { Transparent.ready(); });
-
     // Overload onpopstate
     if(Settings.disable) {
 

package/src/css/index.scss

@@ -1,22 +0,0 @@
-
-@keyframes blinkOpacity {
-	0%		{ opacity: 1; }
-	25%		{ opacity: 0; }
-	50%		{ opacity: 1; }
-	75%		{ opacity: 0; }
-	100%	{ opacity: 1; }
-}
-
-.error
-{
-	animation: blink 5s infinite;
-
-	width:100vw;
-	height: 100vh;
-
-	background-image:url("../images/error.svg");
-	background-position: center;
-	background-repeat: no-repeat;
-
-	animation: blinkOpacity 2s infinite;
-}

package/src/images/error.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
- <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
- <g>
-  <title>Layer 1</title>
-  <g stroke="null" id="svg_1">
-   <rect stroke="null" id="svg_2" x="0" y="0" opacity="0.3" fill="rgba(105,77,255,0)" height="256.17189" width="256.265636"/>
-   <path stroke="null" id="svg_3" fill="#fff" d="m128.132818,21.347657a106.777348,106.738287 0 1 0 106.777348,106.738287a106.777348,106.738287 0 0 0 -106.777348,-106.738287z"/>
-   <path stroke="null" id="svg_4" fill="#dd1e1e" d="m128.132818,32.021486a96.099614,96.064459 0 1 0 96.099614,96.064459a96.099614,96.064459 0 0 0 -96.099614,-96.064459zm55.524221,130.220711l-21.35547,21.347657l-34.168751,-34.156252l-34.168751,34.156252l-21.35547,-21.347657l34.168751,-34.156252l-34.168751,-34.156252l21.35547,-21.347657l34.168751,34.156252l34.168751,-34.156252l21.35547,21.347657l-34.168751,34.156252l34.168751,34.156252z"/>
-  </g>
- </g>
-</svg>