npm - @glitchr/transparent - Versions diffs - 1.0.65 → 1.0.70 - Mend

@glitchr/transparent 1.0.65 → 1.0.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

	@@ -1,2 +1 @@
1 1	# TransparentJS
2	-

package/package.json CHANGED Viewed

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

package/src/js/transparent.js CHANGED Viewed

@@ -1,5 +1,3 @@
-import $ from 'jquery';
 // 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") }); } };
@@ -14,7 +12,6 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
     } else if (typeof exports === 'object') {
         module.exports = factory();
     } else {
-        root = window;
         root.Transparent = factory();
     }
@@ -182,9 +179,59 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         "smoothscroll_duration": "200ms",
         "smoothscroll_speed"   : 0,
         "smoothscroll_easing"  : "swing",
-        "exceptions": []
+        "exceptions": [],
+        // headlock: list of url substrings/regex to preserve in <head> across page transitions
+        // (e.g. third-party widgets like Brevo that inject <style>/<link> dynamically).
+        // In addition, head nodes injected dynamically AFTER initial DOMContentLoaded are
+        // preserved automatically. Use data-headlock="false" on a head element to opt-out.
+        "headlock": [
+            "brevo",
+            "conversations-widget",
+            /brevo/i
+        ]
     };
+    // Set of <head> children present on initial load. Anything added after is treated
+    // as dynamically injected (e.g. Brevo widget) and preserved across transitions.
+    var originalHeadNodes = new WeakSet();
+    function snapshotHeadNodes() {
+        var head = document.head;
+        if(!head) return;
+        for(var i = 0; i < head.children.length; i++)
+            originalHeadNodes.add(head.children[i]);
+    }
+    // Snapshot synchronously at module-eval time (scripts at end of <body> run before any
+    // async script — e.g. Brevo — can inject <style> tags, so the snapshot is clean).
+    // A DOMContentLoaded fallback is kept for the rare case where document.head is null
+    // (e.g. script loaded inside <head> before it finishes parsing).
+    snapshotHeadNodes();
+    if(!document.head)
+        document.addEventListener("DOMContentLoaded", snapshotHeadNodes, { once: true });
+    Transparent.isHeadlocked = function(el) {
+        if(!el || el.nodeType !== 1) return false;
+        // Explicit opt-out
+        var attr = el.getAttribute && el.getAttribute("data-headlock");
+        if(attr === "false") return false;
+        // Explicit opt-in via attribute
+        if(attr !== null && attr !== undefined) return true;
+        // Dynamically injected after initial load
+        if(!originalHeadNodes.has(el)) return true;
+        // URL pattern match (src/href attributes)
+        var patterns = Settings["headlock"] || [];
+        if(!patterns.length) return false;
+        var url = el.getAttribute && (el.getAttribute("src") || el.getAttribute("href"));
+        // <style> elements have no src/href — match against CSS textContent instead
+        if(!url && el.tagName === 'STYLE') url = el.textContent || '';
+        if(!url) return false;
+        for(var i = 0; i < patterns.length; i++) {
+            var p = patterns[i];
+            if(p instanceof RegExp) { if(p.test(url)) return true; }
+            else if(typeof p === "string" && p.length && url.indexOf(p) !== -1) return true;
+        }
+        return false;
+    }
     const State = Transparent.state = {
         ROOT       : "transparent",
@@ -578,7 +625,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             }
         }
-        var closestEl = $(el).closest("a");
+        closestEl = $(el).closest("a");
         if(!closestEl.length) closestEl = $(el).closest("button");
         if(!closestEl.length) closestEl = $(el).closest("input");
         if (closestEl.length) el = closestEl[0];
@@ -893,7 +940,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             } else {
                 if(dom === undefined)
-                    console.error("Response missing..");
+                    console.alert("Response missing..");
                 var parent = Transparent.findElementFromParents(dom, $(this).parents(), 3);
                 if (parent === undefined) {
@@ -957,7 +1004,6 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             Transparent.evalScript($("body")[0]);
         }
-        Transparent.scrollTo({top:0, left:0, duration:0});
         Transparent.activeOut();
     }
@@ -977,19 +1023,18 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             var maxScrollY = $(el).prop("scrollHeight") - Math.round($(el).prop("clientHeight"));
             if (maxScrollY == 0) maxScrollY = Math.round($(el).prop("clientHeight"));
-            var scrollTop  = Math.max(0, Math.min(dict["top"] ?? $(el).prop("scrollTop"), maxScrollY));
-            var scrollLeft = Math.max(0, Math.min(dict["left"] ?? $(el).prop("scrollLeft"), maxScrollX));
+            scrollTop  = Math.max(0, Math.min(dict["top"] ?? $(el).prop("scrollTop"), maxScrollY));
+            scrollLeft = Math.max(0, Math.min(dict["left"] ?? $(el).prop("scrollLeft"), maxScrollX));
-            var speed    = parseFloat(dict["speed"] ?? 0);
-            var easing   = dict["easing"] ?? "swing";
-            var debounce = dict["debounce"] ?? 0;
+            speed    = parseFloat(dict["speed"] ?? 0);
+            easing   = dict["easing"] ?? "swing";
+            debounce = dict["debounce"] ?? 0;
-            var duration  = 1000*Transparent.parseDuration(dict["duration"] ?? 0);
-            var durationX = 1000*Transparent.parseDuration(dict["duration-x"] ?? dict["duration"] ?? 0);
-            var durationY = 1000*Transparent.parseDuration(dict["duration-y"] ?? dict["duration"] ?? 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 distanceX = 0, distanceY = 0;
                 var currentScrollX = $(el)[0].scrollLeft;
                 if(currentScrollX < scrollLeft || scrollLeft == 0) // Going to the right
@@ -1234,6 +1279,15 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             // Replace head..
             var head = $(dom).find("head");
+            // Snapshot hrefs of already-loaded stylesheets so we can detect new ones
+            // added by the head merge and wait for them to finish loading before
+            // making #page visible (prevents FOUC on cold-cache layout transitions).
+            var _existingStyleHrefs = {};
+            $("head").children("link[rel='stylesheet']").each(function() {
+                var h = this.getAttribute("href"); if(h) _existingStyleHrefs[h] = true;
+            });
             $("head").children().each(function() {
                 var el   = this;
@@ -1242,9 +1296,17 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 head.children().each(function() {
                     found = this.isEqualNode(el);
+                    // Also match identical <style> tags by content (Brevo styles are identical across pages)
+                    if(!found && el.tagName === 'STYLE' && this.tagName === 'STYLE' &&
+                       el.textContent && this.textContent &&
+                       el.textContent.length > 100 && this.textContent.length === el.textContent.length) {
+                        found = this.textContent === el.textContent;
+                    }
                     return !found;
                 });
+                // Preserve headlocked nodes (dynamically injected widgets, url-matched, etc.)
+                if(!found && Transparent.isHeadlocked(el)) found = true;
                 if(!found) this.remove();
             });
@@ -1256,18 +1318,45 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 $("head").children().each(function() { found |= this.isEqualNode(el); });
                 if(!found) {
-                    if(this.tagName != "SCRIPT" || Settings["global_code"] == true) {
-                        $("head").append(this.cloneNode(true));
+                    if(this.tagName == "SCRIPT" && Settings["global_code"] != true) {
+                        // For inline scripts (without src), create and execute
+                        if(!this.src || this.src === '') {
+                            var script = document.createElement("script");
+                            script.text = this.innerHTML;
+                            var i = -1, attrs = this.attributes, attr;
+                            var N = attrs.length;
+                            while ( ++i < N ) {
+                                if(attrs[i].name !== 'src') {
+                                    script.setAttribute( attrs[i].name, attrs[i].value );
+                                }
+                            }
+                            $("head").append(script);
+                            originalHeadNodes.add(script);
+                        } else {
+                            $("head").append(this);
+                            originalHeadNodes.add(this);
+                        }
                     } else {
-                        $("head").append(this);
+                        var clonedEl = this.cloneNode(true);
+                        $("head").append(clonedEl);
+                        // Register as an "original" node so it falls through to URL-pattern
+                        // matching on future transitions — prevents layout CSS added by
+                        // Transparent itself from being auto-headlocked as third-party content.
+                        originalHeadNodes.add(clonedEl);
                     }
                 }
             });
+            // Collect link[rel="stylesheet"] elements inserted by the head merge above
+            var _newStyleLinks = [];
+            $("head").children("link[rel='stylesheet']").each(function() {
+                var h = this.getAttribute("href");
+                if(h && !_existingStyleHrefs[h]) _newStyleLinks.push(this);
+            });
             var bodyScript = $(dom).find("body > script");
             bodyScript.each(function() {
@@ -1277,10 +1366,27 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 $("body").children().each(function() { found |= this.isEqualNode(el); });
                 if(!found) {
-                    if(this.tagName != "SCRIPT" || Settings["global_code"] == true) {
-                        $("body").append(this.cloneNode(true));
+                    if(this.tagName == "SCRIPT" && Settings["global_code"] != true) {
+                        // For inline scripts (without src), create and execute
+                        if(!this.src || this.src === '') {
+                            var script = document.createElement("script");
+                            script.text = this.innerHTML;
+                            var i = -1, attrs = this.attributes, attr;
+                            var N = attrs.length;
+                            while ( ++i < N ) {
+                                if(attrs[i].name !== 'src') {
+                                    script.setAttribute( attrs[i].name, attrs[i].value );
+                                }
+                            }
+                            $("body").append(script);
+                        } else {
+                            $("body").append(this);
+                        }
                     } else {
-                        $("body").append(this);
+                        $("body").append(this.cloneNode(true));
                     }
                 }
             });
@@ -1323,7 +1429,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 var scrollableElements   = Transparent.getScrollableElement();
                 var scrollableElementsXY = Transparent.getResponsePosition(uuid);
-                for(var i = 0; i < scrollableElements.length; i++) {
+                for(i = 0; i < scrollableElements.length; i++) {
                     var el = scrollableElements[i];
                     var positionXY = undefined;
@@ -1345,18 +1451,41 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 }
             }
-            $('head').append(function() {
-                $(Settings.identifier).append(function() {
-                        // Callback if needed, or any other actions
-                        callback();
-                        // Trigger onload event
-                        dispatchEvent(new Event('transparent:load'));
-                        dispatchEvent(new Event('load'));
-                });
-            });
+            // Wait for any newly added layout stylesheets to finish loading before
+            // calling callback() / activeOut() — otherwise #page becomes visible while
+            // the new CSS is still being parsed, causing a flash of unstyled content.
+            (function() {
+                function doCallback() {
+                    $('head').append(function() {
+                        $(Settings.identifier).append(function() {
+                            callback();
+                            dispatchEvent(new Event('transparent:load'));
+                            dispatchEvent(new Event('load'));
+                        });
+                    });
+                }
+                if(_newStyleLinks.length === 0) {
+                    doCallback();
+                } else {
+                    var remaining = _newStyleLinks.length;
+                    var fired = false;
+                    // Safety valve: if a stylesheet fails or stalls, don't block forever.
+                    var guard = setTimeout(function() {
+                        if(!fired) { fired = true; doCallback(); }
+                    }, 3000);
+                    _newStyleLinks.forEach(function(link) {
+                        function onDone() {
+                            if(--remaining <= 0 && !fired) {
+                                fired = true;
+                                clearTimeout(guard);
+                                doCallback();
+                            }
+                        }
+                        link.addEventListener('load',  onDone, {once:true});
+                        link.addEventListener('error', onDone, {once:true});
+                    });
+                }
+            })();
         }.bind(this), activeInRemainingTime > 0 ? activeInRemainingTime : 1);
     }
@@ -1461,7 +1590,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         var elementsXY = [];
         var elements = Transparent.getScrollableElement();
-        for(var i = 0; i < elements.length; i++)
+        for(i = 0; i < elements.length; i++)
             elementsXY.push([$(elements[i]).scrollTop(), $(elements[i]).scrollLeft()]);
         return elementsXY;
@@ -1493,10 +1622,8 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         // Wait for transparent window event to be triggered
         if (!isReady) return;
-        const $ctx = (e.type === Transparent.state.SUBMIT) ? $(document) : $(this);
-        if (e.type !== Transparent.state.POPSTATE   &&
-            e.type !== Transparent.state.HASHCHANGE &&
-            !$ctx.find(Settings.identifier).length) return;
+        if (e.type != Transparent.state.POPSTATE   &&
+            e.type != Transparent.state.HASHCHANGE && !$(this).find(Settings.identifier).length) return;
         var form   = target != undefined && target.tagName == "FORM" ? target : undefined;
         var formTrigger = undefined;
@@ -1596,34 +1723,35 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             catch (e) { return false; }
         }
-        function handleResponse(uuid, status = 200, method = null, data = null, responseURL = null, contentType = null, fetchedResponseText = null) {
+        function handleResponse(uuid, status = 200, method = null, data = null, xhr = null, request = null) {
             ajaxSemaphore = false;
+            var responseURL;
+            responseURL = xhr !== null ? xhr.responseURL : url.href;
-            responseURL = responseURL ?? url.href;
-            var responseText  = Transparent.getResponseText(uuid);
+            responseText  = Transparent.getResponseText(uuid);
-            const fragmentPosResp = responseURL.indexOf("#");
-            var strippedResponseUrl = (fragmentPosResp < 0 ? responseURL : responseURL.substring(0, fragmentPosResp)).trimEnd("/");
+            var fragmentPos = responseURL.indexOf("#");
+            var strippedResponseUrl = (fragmentPos < 0 ? responseURL : responseURL.substring(0, fragmentPos)).trimEnd("/");
-            const fragmentPosReq = url.href.indexOf("#");
-            var strippedUrlHref = (fragmentPosReq < 0 ? url.href : url.href.substring(0, fragmentPosReq)).trimEnd("/");
+            var fragmentPos = url.href.indexOf("#");
+            var strippedUrlHref = (fragmentPos < 0 ? url.href : url.href.substring(0, fragmentPos)).trimEnd("/");
             if( strippedUrlHref == strippedResponseUrl )
-                responseURL = url.href; // NB: fetch response.url strips away #fragments
+                responseURL = url.href; // NB: xhr.responseURL strips away #fragments
             if(!responseText) {
-                if(!fetchedResponseText && responseText === null) {
+                if(!request && responseText === null) {
                     setTimeout(function() { window.location.href = responseURL; }, Settings["throttle"]);
                     return;
                 }
-                responseText = fetchedResponseText;
+                responseText = request.responseText;
                 if(status >= 500) {
-                    console.error("Unexpected response from "+uuid+": error code "+status);
+                    console.error("Unexpected XHR response from "+uuid+": error code "+request.status);
                     console.error(sessionStorage);
                 }
@@ -1632,7 +1760,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             }
             var dom = new DOMParser().parseFromString(responseText, "text/html");
-            if(contentType && contentType.includes("application/json")) {
+            if(request && request.getResponseHeader("Content-Type") == "application/json") {
                 if(!isJsonResponse(responseText)) {
                     console.error("Invalid response received for "+ responseURL);
@@ -1658,7 +1786,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             }
             // Invalid html page returned
-            if(contentType && contentType.includes("text/html")) {
+            if(request && request.getResponseHeader("Content-Type") == "text/html") {
                 if (!responseText.includes("<html") && !responseText.includes("<body") && !responseText.includes("<head"))
                     return Transparent.rescue(dom);
@@ -1677,7 +1805,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             // From here the page is valid..
             // so the new page is added to history..
-            if(fetchedResponseText !== null)
+            if(xhr)
                 history.pushState({uuid: uuid, status:status, method: method, data: {}, href: responseURL}, '', responseURL);
             // Page not recognized.. just go fetch by yourself.. no POST information transmitted..
@@ -1721,6 +1849,24 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             if($(dom).find("html").hasClass(Transparent.state.RELOAD) || $(dom).find("html").hasClass(Transparent.state.DISABLE))
                 return window.location.reload();
+            // Kick off preloads for stylesheets the new page needs but aren't yet in <head>.
+            // They download in parallel during the activeIn animation so onLoad() finds them
+            // already cached — eliminating FOUC on cold-cache layout transitions.
+            (function() {
+                var loaded = {};
+                $("head").children("link[rel='stylesheet']").each(function() {
+                    var h = this.getAttribute("href"); if(h) loaded[h] = true;
+                });
+                $(dom).find("head").children("link[rel='stylesheet']").each(function() {
+                    var h = this.getAttribute("href");
+                    if(!h || loaded[h]) return;
+                    if($("head").find("link[rel='preload'][href='" + h.replace(/'/g, "\\'") + "']").length) return;
+                    var pl = document.createElement("link");
+                    pl.rel = "preload"; pl.as = "style"; pl.href = h;
+                    document.head.appendChild(pl);
+                });
+            })();
             return Transparent.onLoad(uuid, dom, function() {
                 Transparent.activeOut(function() {
@@ -1749,20 +1895,20 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             $(Transparent.html).prop("user-scroll", false); // make sure to avoid page jump during transition (cancelled in activeIn callback)
             // Submit ajax request..
-            ajaxSemaphore = true; // Raise before dispatching synthetic submit to prevent double-submission
             if(form) form.dispatchEvent(new SubmitEvent("submit", { submitter: formTrigger }));
-            return fetch(url.href, {
-                method: type,
-                body: type === "GET" ? undefined : data,
-                headers: Settings["headers"] || {}
-            })
-            .then(async (response) => {
-                const responseText = await response.text();
-                return handleResponse(uuid, response.status, type, data, response.url, response.headers.get("Content-Type"), responseText);
-            })
-            .catch(() => {
-                handleResponse(uuid, 500, type, data, url.href, null, null);
+            var xhr = new XMLHttpRequest();
+            ajaxSemaphore = true;
+            return jQuery.ajax({
+                url: url.href,
+                type: type,
+                data: data,
+                contentType: false,
+                processData: false,
+                headers: Settings["headers"] || {},
+                xhr: function () { return xhr; },
+                success: function (html, status, request) { return handleResponse(uuid, request.status, type, data, xhr, request); },
+                error:   function (request, ajaxOptions, thrownError) { return handleResponse(uuid, request.status, type, data, xhr, request); }
             });
         }
@@ -1782,8 +1928,8 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         if(Settings.debug) console.debug("Transparent is disabled..");
-        const statesSet = new Set(Object.values(Transparent.state));
-        const htmlClass = ($("html").attr("class") || "").split(" ").filter(x => !statesSet.has(x));
+        var states    = Object.values(Transparent.state);
+        var htmlClass = Array.from(($("html").attr("class") || "").split(" ")).filter(x => !states.includes(x));
         Transparent.html.removeClass(states).addClass(htmlClass.join(" ")+" "+Transparent.state.ROOT+" "+Transparent.state.READY+" "+Transparent.state.DISABLE);
     } else {
@@ -1869,7 +2015,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                     var fieldValueBefore = formDataBefore[fieldName];
                     if(fieldValueBefore instanceof File) {
-                        if(!(fieldValueAfter instanceof File)) preventDefault = true;
+                        if(!fieldValueAfter instanceof File) preventDefault = true;
                         else if (fieldValueBefore.size != fieldValueAfter.size) preventDefault = true;
                     } else if(fieldValueBefore != fieldValueAfter) {
@@ -1890,7 +2036,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         document.addEventListener('click', __main__, false);
-        $(document).on("submit", "form", __main__);
+        $("form").on("submit", __main__);
     }