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

@glitchr/transparent 1.0.70 → 1.0.80

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 (2) hide show

package/package.json +1 -1
package/src/js/transparent.js +109 -58

package/package.json CHANGED Viewed

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

package/src/js/transparent.js CHANGED Viewed

@@ -181,18 +181,14 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         "smoothscroll_easing"  : "swing",
         "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).
+        // (e.g. third-party widgets 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
-        ]
+        "headlock": []
     };
     // Set of <head> children present on initial load. Anything added after is treated
-    // as dynamically injected (e.g. Brevo widget) and preserved across transitions.
+    // as dynamically injected and preserved across transitions.
     var originalHeadNodes = new WeakSet();
     function snapshotHeadNodes() {
         var head = document.head;
@@ -201,7 +197,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             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).
+    // async script 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();
@@ -232,6 +228,29 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         return false;
     }
+    // ─── NAVIGATION TRACE LOG ───────────────────────────────────────
+    // Gated on Settings.debug. Set 'debug': true in Transparent.ready({...})
+    // to surface a per-step trace prefixed with "[TX]" in the console.
+    // Cheap when disabled — single boolean check, no allocation.
+    function _tx(tag, extra) {
+        if (!Settings || !Settings.debug) return;
+        try {
+            var cls = document.documentElement.className;
+            var t = performance.now().toFixed(1);
+            var here = (document.querySelector("#page") || document.documentElement);
+            var lay = here.getAttribute && (here.getAttribute("data-layout") || "?");
+            var path = location.pathname;
+            console.log("%c[TX]", "color:#0a0;font-weight:bold",
+                "+" + t + "ms", tag,
+                "path=" + path,
+                "layout=" + lay,
+                "ajaxSem=" + (typeof ajaxSemaphore === "undefined" ? "?" : ajaxSemaphore),
+                "classes=[" + cls + "]",
+                extra || "");
+        } catch(e) {}
+    }
+    // ────────────────────────────────────────────────────────────────
     const State = Transparent.state = {
         ROOT       : "transparent",
@@ -250,9 +269,9 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         CLICK      : "click",
         PREACTIVE  : "pre-active",
-        ACTIVEIN   : "active-in",
+        FADEIN   : "fade-in",
         ACTIVE     : "active",
-        ACTIVEOUT  : "active-out",
+        FADEOUT  : "fade-out",
         POSTACTIVE : "post-active",
         NOTIFICATION: "notification"
@@ -499,7 +518,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         if($(Transparent.html).hasClass(Transparent.state.FIRST)) {
             Transparent.scrollToHash(location.hash, {}, function() {
-                Transparent.activeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
+                Transparent.fadeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
             });
         }
@@ -840,28 +859,28 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         return {delay:delay, duration:duration};
     }
-    var activeInTime = 0;
-    var activeInRemainingTime = 0;
-    Transparent.activeIn = function(activeCallback = function() {}) {
+    var fadeInTime = 0;
+    var fadeInRemainingTime = 0;
+    Transparent.fadeIn = function(activeCallback = function() {}) {
+        _tx("fadeIn ENTRY");
         if(!Transparent.html.hasClass(Transparent.state.PREACTIVE)) {
             Transparent.html.addClass(Transparent.state.PREACTIVE);
             dispatchEvent(new Event('transparent:'+Transparent.state.PREACTIVE));
         }
         var active = Transparent.activeTime();
-        activeInTime = Date.now();
-        activeInRemainingTime = active.delay+active.duration;
+        fadeInTime = Date.now();
+        fadeInRemainingTime = active.delay+active.duration;
         Transparent.html.removeClass(Transparent.state.PREACTIVE);
-        if(!Transparent.html.hasClass(Transparent.state.ACTIVEIN)) {
-            Transparent.html.addClass(Transparent.state.ACTIVEIN);
-            dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVEIN));
+        if(!Transparent.html.hasClass(Transparent.state.FADEIN)) {
+            Transparent.html.addClass(Transparent.state.FADEIN);
+            dispatchEvent(new Event('transparent:'+Transparent.state.FADEIN));
         }
         Transparent.callback(function() {
-            Transparent.html.removeClass(Transparent.state.ACTIVEIN);
+            Transparent.html.removeClass(Transparent.state.FADEIN);
             if(!Transparent.html.hasClass(Transparent.state.ACTIVE)) {
                 Transparent.html.addClass(Transparent.state.ACTIVE);
                 dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVE));
@@ -871,23 +890,23 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             Transparent.callback(function() {
                 activeCallback();
-                activeInRemainingTime = 0;
+                fadeInRemainingTime = 0;
             }.bind(this), active.duration);
         }.bind(this), active.delay);
     }
-    Transparent.activeOut = function(activeCallback = function() {}) {
+    Transparent.fadeOut = function(activeCallback = function() {}) {
+        _tx("fadeOut ENTRY");
         if(!Transparent.html.hasClass(Transparent.state.ACTIVE)) {
             Transparent.html.addClass(Transparent.state.ACTIVE);
             dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVE));
         }
-        if(!Transparent.html.hasClass(Transparent.state.ACTIVEOUT)) {
-            Transparent.html.addClass(Transparent.state.ACTIVEOUT);
-            dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVEOUT));
+        if(!Transparent.html.hasClass(Transparent.state.FADEOUT)) {
+            Transparent.html.addClass(Transparent.state.FADEOUT);
+            dispatchEvent(new Event('transparent:'+Transparent.state.FADEOUT));
         }
         var active = Transparent.activeTime();
@@ -899,7 +918,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             var active = Transparent.activeTime();
             Transparent.callback(function() {
-                Transparent.html.removeClass(Transparent.state.ACTIVEOUT);
+                Transparent.html.removeClass(Transparent.state.FADEOUT);
                 if(Transparent.html.hasClass(Transparent.state.LOADING)) {
                     dispatchEvent(new Event('transparent:'+Transparent.state.LOADING));
@@ -1004,7 +1023,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             Transparent.evalScript($("body")[0]);
         }
-        Transparent.activeOut();
+        Transparent.fadeOut();
     }
     Transparent.userScroll = function(el = undefined) { return $(el === undefined ? document.documentElement : el).closestScrollable().prop("user-scroll") ?? true; }
@@ -1271,9 +1290,9 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             $(this).stop();
         });
-        activeInRemainingTime = activeInRemainingTime - (Date.now() - activeInTime);
         setTimeout(function() {
+            _tx("onLoad BODY (after 1ms)");
             // Transfert attributes
             Transparent.transferAttributes(dom);
@@ -1296,9 +1315,9 @@ 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 &&
+                    // Also match identical <style> tags by content
+                    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;
                     }
@@ -1320,7 +1339,8 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                     if(this.tagName == "SCRIPT" && Settings["global_code"] != true) {
-                        // For inline scripts (without src), create and execute
+                        // For inline scripts (without src), recreate so the browser will execute.
+                        // Simply re-appending the same <script> node doesn't execute it.
                         if(!this.src || this.src === '') {
                             var script = document.createElement("script");
                             script.text = this.innerHTML;
@@ -1350,13 +1370,6 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 }
             });
-            // 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() {
@@ -1368,7 +1381,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                     if(this.tagName == "SCRIPT" && Settings["global_code"] != true) {
-                        // For inline scripts (without src), create and execute
+                        // Same inline-script recreation as for <head>.
                         if(!this.src || this.src === '') {
                             var script = document.createElement("script");
                             script.text = this.innerHTML;
@@ -1403,7 +1416,13 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             // Make sure name/layout keep the same after a page change (tolerance for POST or GET requests)
             if(oldPage.attr("data-layout") != undefined && page.attr("data-layout") != undefined) {
-                var switchLayout = Transparent.state.SWITCH.replace("X", page.attr("data-layout")).replace("Y", oldPage.attr("data-layout"));
+                // X = prevLayout, Y = newLayout — must match the formula in handleResponse
+                // (line ~1852: SWITCH.replace("X", prevLayout).replace("Y", newLayout)).
+                // If these disagreed, the cleanup filter below would not recognize the
+                // switchLayout class that handleResponse added to <html> and would strip
+                // it before its CSS transition could play — visible as a race only in
+                // whichever direction the project's CSS actually styles.
+                var switchLayout = Transparent.state.SWITCH.replace("X", oldPage.attr("data-layout")).replace("Y", page.attr("data-layout"));
                 page.attr("data-layout-prev", oldPage.attr("data-layout"));
             }
@@ -1412,10 +1431,13 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             var  oldHtmlClass = Array.from(($(Transparent.html).attr("class") || "").split(" "));
             var removeHtmlClass = oldHtmlClass.filter(x => !htmlClass.includes(x) && switchLayout != x && !states.includes(x));
+            _tx("onLoad classMgmt", "switchLayout=" + switchLayout + " remove=[" + removeHtmlClass.join(",") + "] add=[" + htmlClass.join(",") + "]");
             Transparent.html.removeClass(removeHtmlClass).addClass(htmlClass);
+            _tx("onLoad PAGE_SWAP_BEGIN", "oldLayout=" + (oldPage.attr("data-layout")||"?") + " newLayout=" + (page.attr("data-layout")||"?"));
             $(page).insertBefore(oldPage);
             oldPage.remove();
+            _tx("onLoad PAGE_SWAP_DONE");
             if(Settings["global_code"] == true) Transparent.evalScript($(page)[0]);
             document.dispatchEvent(new Event('DOMContentLoaded'));
@@ -1451,11 +1473,19 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 }
             }
+            // 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);
+            });
             // Wait for any newly added layout stylesheets to finish loading before
-            // calling callback() / activeOut() — otherwise #page becomes visible while
+            // calling callback() / fadeOut() — otherwise #page becomes visible while
             // the new CSS is still being parsed, causing a flash of unstyled content.
             (function() {
                 function doCallback() {
+                    _tx("doCallback FIRES → callback() (which starts fadeOut)");
                     $('head').append(function() {
                         $(Settings.identifier).append(function() {
                             callback();
@@ -1464,20 +1494,38 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                         });
                     });
                 }
-                if(_newStyleLinks.length === 0) {
+                // For cached stylesheets, the browser may fire `load` synchronously on
+                // DOM insertion — BEFORE we can attach a listener — so listener-only
+                // waits get stuck on the 3 s guard. `.sheet !== null` indicates the
+                // CSSStyleSheet is already parsed and ready, which is the right
+                // condition to count it as "done." Cross-origin sheets still expose
+                // `.sheet` even though `.cssRules` throws — `.sheet !== null` is
+                // portable.
+                function isStyleLoaded(link) {
+                    try { return link.sheet !== null; } catch(e) { return true; }
+                }
+                var pending = _newStyleLinks.filter(function(l) { return !isStyleLoaded(l); });
+                _tx("stylesheet-wait BEGIN", "newLinks=" + _newStyleLinks.length + " cachedSkipped=" + (_newStyleLinks.length - pending.length) + " pending=" + pending.length);
+                if(pending.length === 0) {
+                    _tx("stylesheet-wait IMMEDIATE → doCallback");
                     doCallback();
                 } else {
-                    var remaining = _newStyleLinks.length;
+                    var remaining = pending.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(); }
+                        if(!fired) {
+                            _tx("stylesheet-wait GUARD fired (3s)", "remaining=" + remaining);
+                            fired = true; doCallback();
+                        }
                     }, 3000);
-                    _newStyleLinks.forEach(function(link) {
-                        function onDone() {
+                    pending.forEach(function(link) {
+                        function onDone(e) {
+                            _tx("stylesheet-wait link.load", "remaining=" + (remaining-1) + " href=" + link.getAttribute("href"));
                             if(--remaining <= 0 && !fired) {
                                 fired = true;
                                 clearTimeout(guard);
+                                _tx("stylesheet-wait ALL_LOADED → doCallback");
                                 doCallback();
                             }
                         }
@@ -1487,7 +1535,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 }
             })();
-        }.bind(this), activeInRemainingTime > 0 ? activeInRemainingTime : 1);
+        }.bind(this), 1);
     }
     function uuidv4() {
@@ -1599,7 +1647,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
     var ajaxSemaphore = false;
     var formSubmission = false;
     function __main__(e) {
+        _tx("__main__ ENTRY", "event=" + e.type + (e.target && e.target.tagName ? " target=" + e.target.tagName : ""));
         // Disable transparent JS (e.g. during development..)
         if(Settings.disable) return;
@@ -1716,7 +1764,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         $(Transparent.html).stop();
         Transparent.html.addClass(Transparent.state.LOADING);
-        Transparent.activeIn();
+        Transparent.fadeIn();
         function isJsonResponse(str) {
             try { JSON.parse(str); return true; }
@@ -1724,6 +1772,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         }
         function handleResponse(uuid, status = 200, method = null, data = null, xhr = null, request = null) {
+            _tx("handleResponse ENTRY", "status=" + status + " method=" + method);
             ajaxSemaphore = false;
@@ -1842,6 +1891,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 Transparent.html.addClass(Transparent.state.SAME);
             var switchLayout = Transparent.state.SWITCH.replace("X", prevLayout).replace("Y", newLayout);
+            _tx("handleResponse switchLayout", "prev=" + prevLayout + " new=" + newLayout + " adds=." + switchLayout);
             Transparent.html.addClass(switchLayout);
             dispatchEvent(new Event('transparent:'+switchLayout));
@@ -1850,13 +1900,14 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 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
+            // They download in parallel during the fadeIn 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;
@@ -1869,7 +1920,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             return Transparent.onLoad(uuid, dom, function() {
-                Transparent.activeOut(function() {
+                Transparent.fadeOut(function() {
                     Transparent.html
                         .removeClass(switchLayout)
@@ -1892,7 +1943,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             if(history.state)
                 Transparent.setResponse(history.state.uuid, Transparent.html[0], Transparent.getScrollableElementXY());
-            $(Transparent.html).prop("user-scroll", false); // make sure to avoid page jump during transition (cancelled in activeIn callback)
+            $(Transparent.html).prop("user-scroll", false); // make sure to avoid page jump during transition (cancelled in fadeIn callback)
             // Submit ajax request..
             if(form) form.dispatchEvent(new SubmitEvent("submit", { submitter: formTrigger }));
@@ -1907,8 +1958,8 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 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); }
+                success: function (html, status, request) { _tx("ajax SUCCESS", "status=" + request.status); return handleResponse(uuid, request.status, type, data, xhr, request); },
+                error:   function (request, ajaxOptions, thrownError) { _tx("ajax ERROR", "status=" + request.status); return handleResponse(uuid, request.status, type, data, xhr, request); }
             });
         }
@@ -2027,7 +2078,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             if(Settings.debug || preventDefault) {
                 if(preventDefault) Transparent.html.addClass(Transparent.state.READY);
-                if(preventDefault) Transparent.activeOut();
+                if(preventDefault) Transparent.fadeOut();
                 if(preventDefault) dispatchEvent(new Event('load'));
                 return "Dude, are you sure you want to leave? Think of the kittens!";