@glitchr/transparent 1.0.54 → 1.0.56

package/package.json

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

package/src/js/transparent.js

@@ -1,3 +1,10 @@
+// Modern browser: use passive event listeners where appropriate for better performance
+jQuery.event.special.touchstart = { setup: function( _, ns, handle ) { this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") }); } };
+jQuery.event.special.touchmove  = { setup: function( _, ns, handle ) { this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") }); } };
+jQuery.event.special.wheel      = { setup: function( _, ns, handle ) { this.addEventListener("wheel", handle, { passive: true }); } };
+jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addEventListener("mousewheel", handle, { passive: true }); } };
+
+// Transparent.js
 (function (root, factory) {
 
     if (typeof define === 'function' && define.amd) {
@@ -19,6 +26,7 @@
         if(!newHash) newHash = "";
         if (newHash !== "" && (''+newHash).charAt(0) !== '#')
             newHash = '#' + newHash;
+
         var newURL = location.origin+location.pathname+newHash;
         var newHashElement = $(newHash);
 
@@ -154,7 +162,7 @@
 
     var Transparent = window.Transparent = {};
     Transparent.version = '0.1.0';
-
+    
     var Settings = Transparent.settings = {
         "headers": {},
         "data": {},
@@ -435,11 +443,16 @@
         Transparent.addLayout();
         Transparent.lazyLoad();
 
-        Transparent.scrollToHash(location.hash, {}, function() {
-
-            Transparent.activeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
-        });
+        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+        window.previousScroll = {top: scrollTop, left: scrollLeft};
 
+        if($(Transparent.html).hasClass(Transparent.state.FIRST)) {
+            Transparent.scrollToHash(location.hash, {}, function() {
+                Transparent.activeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
+            });
+        }
+        
         return this;
     };
 
@@ -537,6 +550,7 @@
                 var href = el.target.getAttribute("action");
                 if(!href) href = location.pathname + href;
 
+
                 if (href.startsWith("#")) href = location.pathname + href;
                 if (href.endsWith  ("#")) href = href.slice(0, -1);
 
@@ -551,6 +565,7 @@
 
                 if(!$(el).hasClass("skip-validation") && !form.checkValidity()) {
                     console.error("Invalid form submission.", el);
+                    form.classList.add('was-validated');
                     return null;
                 }
 
@@ -596,6 +611,7 @@
 
                     if(!$(el).hasClass("skip-validation") && !form.checkValidity()) {
                         console.error("Invalid form submission.", el);
+                        form.classList.add('was-validated');
                         return null;
                     }
 
@@ -836,7 +852,7 @@
                 Transparent.html.removeClass(Transparent.state.ACTIVEOUT);
                 if(Transparent.html.hasClass(Transparent.state.LOADING)) {
 
-                    dispatchEvent(new Event('transparent:'+Transparent.state.LOAD));
+                    dispatchEvent(new Event('transparent:'+Transparent.state.LOADING));
 
                     Object.values(Transparent.state).forEach(e => Transparent.html.removeClass(e));
                     Transparent.html.addClass(Transparent.state.ROOT + " " + Transparent.state.READY);
@@ -945,69 +961,73 @@
     Transparent.userScroll = function(el = undefined) { return $(el === undefined ? document.documentElement : el).closestScrollable().prop("user-scroll") ?? true; }
     Transparent.scrollTo = function(dict, el = window, callback = function() {})
     {
-        el = $(el).length ? $(el)[0] : window;
-        if (el === window  )
-            el = document.documentElement;
-        if (el === document)
-            el = document.documentElement;
-
-        var maxScrollX = $(el).prop("scrollWidth") - Math.round($(el).prop("clientWidth"));
-        if (maxScrollX == 0) maxScrollX = Math.round($(el).prop("clientWidth"));
-        var maxScrollY = $(el).prop("scrollHeight") - Math.round($(el).prop("clientHeight"));
-        if (maxScrollY == 0) maxScrollY = Math.round($(el).prop("clientHeight"));
-
-        scrollTop  = Math.max(0, Math.min(dict["top"] ?? $(el).prop("scrollTop"), maxScrollY));
-        scrollLeft = Math.max(0, Math.min(dict["left"] ?? $(el).prop("scrollLeft"), maxScrollX));
-
-        speed    = parseFloat(dict["speed"] ?? 0);
-        easing   = dict["easing"] ?? "swing";
-        debounce = dict["debounce"] ?? 0;
-
-        duration  = 1000*Transparent.parseDuration(dict["duration"] ?? 0);
-        durationX = 1000*Transparent.parseDuration(dict["duration-x"] ?? dict["duration"] ?? 0);
-        durationY = 1000*Transparent.parseDuration(dict["duration-y"] ?? dict["duration"] ?? 0);
-
-        if(speed) {
-
-            var currentScrollX = $(el)[0].scrollLeft;
-            if(currentScrollX < scrollLeft || scrollLeft == 0) // Going to the right
-                distanceX = Math.abs(scrollLeft - currentScrollX);
-            else // Going back to 0 position
-                distanceX = currentScrollX;
-
-            var currentScrollY = $(el)[0].scrollTop;
-            if(currentScrollY <= scrollTop || scrollTop == 0) // Going to the right
-                distanceY = Math.abs(scrollTop - currentScrollY);
-            else // Going back to 0 position
-                distanceY = currentScrollY;
-
-            durationX = speed ? 1000*distanceX/speed : durationX;
-            durationY = speed ? 1000*distanceY/speed : durationY;
-            duration = durationX+durationY;
-        }
+        setTimeout(function() {
 
-        var callbackWrapper = function() {
+            el = $(el).length ? $(el)[0] : window;
+            if (el === window  )
+                el = document.documentElement;
+            if (el === document)
+                el = document.documentElement;
+
+            var maxScrollX = $(el).prop("scrollWidth") - Math.round($(el).prop("clientWidth"));
+            if (maxScrollX == 0) maxScrollX = Math.round($(el).prop("clientWidth"));
+            var maxScrollY = $(el).prop("scrollHeight") - Math.round($(el).prop("clientHeight"));
+            if (maxScrollY == 0) maxScrollY = Math.round($(el).prop("clientHeight"));
+
+            scrollTop  = Math.max(0, Math.min(dict["top"] ?? $(el).prop("scrollTop"), maxScrollY));
+            scrollLeft = Math.max(0, Math.min(dict["left"] ?? $(el).prop("scrollLeft"), maxScrollX));
+
+            speed    = parseFloat(dict["speed"] ?? 0);
+            easing   = dict["easing"] ?? "swing";
+            debounce = dict["debounce"] ?? 0;
+
+            duration  = 1000*Transparent.parseDuration(dict["duration"] ?? 0);
+            durationX = 1000*Transparent.parseDuration(dict["duration-x"] ?? dict["duration"] ?? 0);
+            durationY = 1000*Transparent.parseDuration(dict["duration-y"] ?? dict["duration"] ?? 0);
+
+            if(speed) {
+
+                var currentScrollX = $(el)[0].scrollLeft;
+                if(currentScrollX < scrollLeft || scrollLeft == 0) // Going to the right
+                    distanceX = Math.abs(scrollLeft - currentScrollX);
+                else // Going back to 0 position
+                    distanceX = currentScrollX;
+
+                var currentScrollY = $(el)[0].scrollTop;
+                if(currentScrollY <= scrollTop || scrollTop == 0) // Going to the right
+                    distanceY = Math.abs(scrollTop - currentScrollY);
+                else // Going back to 0 position
+                    distanceY = currentScrollY;
+
+                durationX = speed ? 1000*distanceX/speed : durationX;
+                durationY = speed ? 1000*distanceY/speed : durationY;
+                duration = durationX+durationY;
+            }
 
-            el.dispatchEvent(new Event('scroll'));
-            callback();
+            var callbackWrapper = function() {
 
-            $(el).prop("user-scroll", true);
-        };
+                el.dispatchEvent(new Event('scroll'));
+                callback();
 
-        if(duration == 0) {
+                $(el).prop("user-scroll", true);
+            };
 
-            el.scrollTo(scrollLeft, scrollTop);
-            el.dispatchEvent(new Event('scroll'));
-            callback();
+            if(duration == 0) {
 
-            $(el).prop("user-scroll", true);
+                el.scrollTo(scrollLeft, scrollTop);
+                el.dispatchEvent(new Event('scroll'));
+                callback();
 
-        } else {
+                $(el).prop("user-scroll", true);
 
-            $(el).animate({scrollTop: scrollTop}, durationY, easing,
-                () => $(el).animate({scrollLeft: scrollLeft}, durationX, easing, Transparent.debounce(callbackWrapper, debounce))
-            );
-        }
+            } else {
+
+                $(el).stop(true).animate({scrollTop: scrollTop}, durationY, easing,
+                    () => $(el).stop(true).animate({scrollLeft: scrollLeft}, durationX, easing, Transparent.debounce(callbackWrapper, debounce))
+                );
+            }
+
+        }.bind(this), 1);
 
         return this;
     }
@@ -1194,6 +1214,14 @@
         window.previousLocation = window.location.toString();
         if(callback === null) callback = function() {};
 
+        $(Transparent.html).data("autoscroll-prevent", false);
+        $(Transparent.html).off("wheel.autoscroll DOMMouseScroll.autoscroll mousewheel.autoscroll touchstart.autoscroll");
+        $(Transparent.html).on("wheel.autoscroll DOMMouseScroll.autoscroll mousewheel.autoscroll touchstart.autoscroll", function(e) {
+
+            $(this).prop("user-scroll", true);
+            $(this).stop();
+        });
+
         activeInRemainingTime = activeInRemainingTime - (Date.now() - activeInTime);
         setTimeout(function() {
 
@@ -1386,26 +1414,30 @@
 
     Transparent.scrollToHash = function(hash = window.location.hash, options = {}, callback = function() {}, el = window)
     {
-        if (hash !== "") {
+        setTimeout(function() {
 
-            if ((''+hash).charAt(0) !== '#')
-                hash = '#' + hash;
+            if (hash !== "") {
 
-            var hashElement = $(hash)[0] ?? undefined;
-            if (hashElement !== undefined) {
+                if ((''+hash).charAt(0) !== '#')
+                    hash = '#' + hash;
 
-                var scrollTop  = hashElement.getBoundingClientRect().top  + document.documentElement.scrollTop - Transparent.getScrollPadding().top;
-                var scrollLeft = hashElement.getBoundingClientRect().left + document.documentElement.scrollLeft - Transparent.getScrollPadding().left;
+                var hashElement = $(hash)[0] ?? undefined;
+                if (hashElement !== undefined) {
 
-                options = Object.assign({duration: Settings["smoothscroll_duration"], speed: Settings["smoothscroll_speed"]}, options, {left:scrollLeft, top:scrollTop});
-            }
+                    var scrollTop  = hashElement.getBoundingClientRect().top  + document.documentElement.scrollTop - Transparent.getScrollPadding().top;
+                    var scrollLeft = hashElement.getBoundingClientRect().left + document.documentElement.scrollLeft - Transparent.getScrollPadding().left;
 
-            var bottomReach = document.body.scrollHeight - (window.scrollY + window.innerHeight) < 1;
-            var bottomOverflow = scrollTop > window.scrollY + window.innerHeight;
-        }
+                    options = Object.assign({duration: Settings["smoothscroll_duration"], speed: Settings["smoothscroll_speed"]}, options, {left:scrollLeft, top:scrollTop});
+                }
+
+                var bottomReach = document.body.scrollHeight - (window.scrollY + window.innerHeight) < 1;
+                var bottomOverflow = scrollTop > window.scrollY + window.innerHeight;
+            }
 
-        if(hash === "" || (bottomReach && bottomOverflow)) callback({}, el);
-        else Transparent.scrollTo(options, el, callback);
+            if(hash === "" || (bottomReach && bottomOverflow)) callback({}, el);
+            else Transparent.scrollTo(options, el, callback);
+        
+        }.bind(this), 1); // minimal delay to ensure the element is rendered
 
         return this;
     }
@@ -1440,7 +1472,10 @@
 
         // Determine link
         const link = Transparent.findLink(e);
-        if   (link == null) return;
+        if (link == null) {
+            e.preventDefault();
+            return;
+        }
 
         dispatchEvent(new CustomEvent('transparent:link', {link:link}));
 
@@ -1495,10 +1530,18 @@
         }
 
         // Specific page exception
-        for(i = 0; i < Settings.exceptions.length; i++) {
-
-            exception = Settings.exceptions[i];
-            if (url.pathname.startsWith(exception)) return;
+        for (let i = 0; i < Settings.exceptions.length; i++) {
+            let exception = Settings.exceptions[i];
+            if (exception instanceof RegExp) {
+                if (exception.test(url.pathname)) return;
+            } else {
+                // Simple wildcard support: * matches any sequence of characters
+                let pattern = exception.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*');
+                let regex = new RegExp('^' + pattern + '$');
+                if (regex.test(url.pathname)) {
+                    return;
+                }
+            }
         }
 
         // Ressources files rejected
@@ -1521,7 +1564,7 @@
             Transparent.scrollToHash(url.hash ?? "", {easing:Settings["smoothscroll_easing"], duration:Settings["smoothscroll_duration"], speed:Settings["smoothscroll_speed"]}, function() {
 
                 if (e.target != undefined && $(e.target).data("skip-hash") != true)
-                    window.replaceHash(url.hash);
+                    window.location.hash = url.hash;
 
             }, $(e.target).closestScrollable());
 
@@ -1532,8 +1575,9 @@
         if(e.metaKey && e.shiftKey) return window.open(url, '_blank').focus(); // Safari not focusing..
         if(e.metaKey || $(target).attr("target") == "_blank") return window.open(url, '_blank');
 
-        dispatchEvent(new Event('transparent:onbeforeunload'));
-        dispatchEvent(new Event('onbeforeunload'));
+        // right (still limited by browser policy):
+        dispatchEvent(new Event('transparent:beforeunload'));
+        dispatchEvent(new Event('beforeunload', { cancelable: true }));
 
         $(Transparent.html).prop("user-scroll", true);
         $(Transparent.html).stop();
@@ -1772,6 +1816,8 @@
 
         window.onbeforeunload = function(e) {
 
+            if(Settings.debug) console.log("Transparent onbeforeunload event called..");
+
             if(formSubmission) return; // Do not display on form submission
             if(Settings.disable) return;
 
@@ -1802,8 +1848,6 @@
 
             var formDataBeforeKeys    = Object.keys(formDataBefore);
             var formDataAfterKeys     = Object.keys(formDataAfter);
-            var formDataBeforeEntries = Object.entries(formDataBefore);
-            var formDataAfterEntries  = Object.entries(formDataAfter);
             function same(a, b) { return JSON.stringify(a) === JSON.stringify(b); }
             function sameKeys(a, b) {