@glitchr/transparent 1.0.70 → 1.0.71

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
  1. package/package.json +1 -1
  2. package/src/js/transparent.js +59 -43
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@glitchr/transparent",
3
- "version": "1.0.70",
3
+ "version": "1.0.71",
4
4
  "description": "Transparent SPA Application",
5
5
  "main": "src/index.js",
6
6
  "access": "public",
package/src/js/transparent.js CHANGED
@@ -181,18 +181,14 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
181
181
  "smoothscroll_easing" : "swing",
182
182
  "exceptions": [],
183
183
  // headlock: list of url substrings/regex to preserve in <head> across page transitions
184
- // (e.g. third-party widgets like Brevo that inject <style>/<link> dynamically).
184
+ // (e.g. third-party widgets that inject <style>/<link> dynamically).
185
185
  // In addition, head nodes injected dynamically AFTER initial DOMContentLoaded are
186
186
  // preserved automatically. Use data-headlock="false" on a head element to opt-out.
187
- "headlock": [
188
- "brevo",
189
- "conversations-widget",
190
- /brevo/i
191
- ]
187
+ "headlock": []
192
188
  };
193
189
 
194
190
  // Set of <head> children present on initial load. Anything added after is treated
195
- // as dynamically injected (e.g. Brevo widget) and preserved across transitions.
191
+ // as dynamically injected and preserved across transitions.
196
192
  var originalHeadNodes = new WeakSet();
197
193
  function snapshotHeadNodes() {
198
194
  var head = document.head;
@@ -201,7 +197,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
201
197
  originalHeadNodes.add(head.children[i]);
202
198
  }
203
199
  // Snapshot synchronously at module-eval time (scripts at end of <body> run before any
204
- // async script — e.g. Brevo — can inject <style> tags, so the snapshot is clean).
200
+ // async script can inject <style> tags, so the snapshot is clean).
205
201
  // A DOMContentLoaded fallback is kept for the rare case where document.head is null
206
202
  // (e.g. script loaded inside <head> before it finishes parsing).
207
203
  snapshotHeadNodes();
@@ -250,9 +246,9 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
250
246
  CLICK : "click",
251
247
 
252
248
  PREACTIVE : "pre-active",
253
- ACTIVEIN : "active-in",
249
+ FADEIN : "fade-in",
254
250
  ACTIVE : "active",
255
- ACTIVEOUT : "active-out",
251
+ FADEOUT : "fade-out",
256
252
  POSTACTIVE : "post-active",
257
253
 
258
254
  NOTIFICATION: "notification"
@@ -499,7 +495,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
499
495
 
500
496
  if($(Transparent.html).hasClass(Transparent.state.FIRST)) {
501
497
  Transparent.scrollToHash(location.hash, {}, function() {
502
- Transparent.activeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
498
+ Transparent.fadeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
503
499
  });
504
500
  }
505
501
 
@@ -840,9 +836,10 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
840
836
 
841
837
  return {delay:delay, duration:duration};
842
838
  }
843
- var activeInTime = 0;
844
- var activeInRemainingTime = 0;
845
- Transparent.activeIn = function(activeCallback = function() {}) {
839
+
840
+ var fadeInTime = 0;
841
+ var fadeInRemainingTime = 0;
842
+ Transparent.fadeIn = function(activeCallback = function() {}) {
846
843
 
847
844
  if(!Transparent.html.hasClass(Transparent.state.PREACTIVE)) {
848
845
  Transparent.html.addClass(Transparent.state.PREACTIVE);
@@ -850,18 +847,18 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
850
847
  }
851
848
 
852
849
  var active = Transparent.activeTime();
853
- activeInTime = Date.now();
854
- activeInRemainingTime = active.delay+active.duration;
850
+ fadeInTime = Date.now();
851
+ fadeInRemainingTime = active.delay+active.duration;
855
852
 
856
853
  Transparent.html.removeClass(Transparent.state.PREACTIVE);
857
- if(!Transparent.html.hasClass(Transparent.state.ACTIVEIN)) {
858
- Transparent.html.addClass(Transparent.state.ACTIVEIN);
859
- dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVEIN));
854
+ if(!Transparent.html.hasClass(Transparent.state.FADEIN)) {
855
+ Transparent.html.addClass(Transparent.state.FADEIN);
856
+ dispatchEvent(new Event('transparent:'+Transparent.state.FADEIN));
860
857
  }
861
858
 
862
859
  Transparent.callback(function() {
863
860
 
864
- Transparent.html.removeClass(Transparent.state.ACTIVEIN);
861
+ Transparent.html.removeClass(Transparent.state.FADEIN);
865
862
  if(!Transparent.html.hasClass(Transparent.state.ACTIVE)) {
866
863
  Transparent.html.addClass(Transparent.state.ACTIVE);
867
864
  dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVE));
@@ -871,23 +868,23 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
871
868
  Transparent.callback(function() {
872
869
 
873
870
  activeCallback();
874
- activeInRemainingTime = 0;
871
+ fadeInRemainingTime = 0;
875
872
 
876
873
  }.bind(this), active.duration);
877
874
 
878
875
  }.bind(this), active.delay);
879
876
  }
880
877
 
881
- Transparent.activeOut = function(activeCallback = function() {}) {
878
+ Transparent.fadeOut = function(activeCallback = function() {}) {
882
879
 
883
880
  if(!Transparent.html.hasClass(Transparent.state.ACTIVE)) {
884
881
  Transparent.html.addClass(Transparent.state.ACTIVE);
885
882
  dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVE));
886
883
  }
887
884
 
888
- if(!Transparent.html.hasClass(Transparent.state.ACTIVEOUT)) {
889
- Transparent.html.addClass(Transparent.state.ACTIVEOUT);
890
- dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVEOUT));
885
+ if(!Transparent.html.hasClass(Transparent.state.FADEOUT)) {
886
+ Transparent.html.addClass(Transparent.state.FADEOUT);
887
+ dispatchEvent(new Event('transparent:'+Transparent.state.FADEOUT));
891
888
  }
892
889
 
893
890
  var active = Transparent.activeTime();
@@ -899,7 +896,9 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
899
896
  var active = Transparent.activeTime();
900
897
  Transparent.callback(function() {
901
898
 
902
- Transparent.html.removeClass(Transparent.state.ACTIVEOUT);
899
+ Transparent.html.removeClass(Transparent.state.FADEOUT);
900
+ ajaxSemaphore = false;
901
+
903
902
  if(Transparent.html.hasClass(Transparent.state.LOADING)) {
904
903
 
905
904
  dispatchEvent(new Event('transparent:'+Transparent.state.LOADING));
@@ -907,7 +906,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
907
906
  Object.values(Transparent.state).forEach(e => Transparent.html.removeClass(e));
908
907
  Transparent.html.addClass(Transparent.state.ROOT + " " + Transparent.state.READY);
909
908
  }
910
-
909
+
911
910
  Transparent.html.addClass(Transparent.state.POSTACTIVE);
912
911
 
913
912
  var active = Transparent.activeTime();
@@ -1004,7 +1003,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1004
1003
  Transparent.evalScript($("body")[0]);
1005
1004
  }
1006
1005
 
1007
- Transparent.activeOut();
1006
+ Transparent.fadeOut();
1008
1007
  }
1009
1008
 
1010
1009
  Transparent.userScroll = function(el = undefined) { return $(el === undefined ? document.documentElement : el).closestScrollable().prop("user-scroll") ?? true; }
@@ -1271,7 +1270,6 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1271
1270
  $(this).stop();
1272
1271
  });
1273
1272
 
1274
- activeInRemainingTime = activeInRemainingTime - (Date.now() - activeInTime);
1275
1273
  setTimeout(function() {
1276
1274
 
1277
1275
  // Transfert attributes
@@ -1296,7 +1294,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1296
1294
  head.children().each(function() {
1297
1295
 
1298
1296
  found = this.isEqualNode(el);
1299
- // Also match identical <style> tags by content (Brevo styles are identical across pages)
1297
+ // Also match identical <style> tags by content
1300
1298
  if(!found && el.tagName === 'STYLE' && this.tagName === 'STYLE' &&
1301
1299
  el.textContent && this.textContent &&
1302
1300
  el.textContent.length > 100 && this.textContent.length === el.textContent.length) {
@@ -1452,7 +1450,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1452
1450
  }
1453
1451
 
1454
1452
  // Wait for any newly added layout stylesheets to finish loading before
1455
- // calling callback() / activeOut() — otherwise #page becomes visible while
1453
+ // calling callback() / fadeOut() — otherwise #page becomes visible while
1456
1454
  // the new CSS is still being parsed, causing a flash of unstyled content.
1457
1455
  (function() {
1458
1456
  function doCallback() {
@@ -1487,7 +1485,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1487
1485
  }
1488
1486
  })();
1489
1487
 
1490
- }.bind(this), activeInRemainingTime > 0 ? activeInRemainingTime : 1);
1488
+ }.bind(this), 1);
1491
1489
  }
1492
1490
 
1493
1491
  function uuidv4() {
@@ -1716,7 +1714,25 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1716
1714
  $(Transparent.html).stop();
1717
1715
 
1718
1716
  Transparent.html.addClass(Transparent.state.LOADING);
1719
- Transparent.activeIn();
1717
+
1718
+ var fadeInDone = false;
1719
+ var pendingResponseArgs = null;
1720
+
1721
+ function tryDispatch(args) {
1722
+ if (args !== undefined) pendingResponseArgs = args;
1723
+ if (fadeInDone && pendingResponseArgs !== null)
1724
+ handleResponse(...pendingResponseArgs);
1725
+ }
1726
+
1727
+ // Lock navigation for the full transition (fadeIn + page swap + fadeOut).
1728
+ // Released inside Transparent.fadeOut's final cleanup, covering both the
1729
+ // AJAX path and the popstate/cached-response path.
1730
+ ajaxSemaphore = true;
1731
+
1732
+ Transparent.fadeIn(function() {
1733
+ fadeInDone = true;
1734
+ tryDispatch();
1735
+ });
1720
1736
 
1721
1737
  function isJsonResponse(str) {
1722
1738
  try { JSON.parse(str); return true; }
@@ -1725,8 +1741,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1725
1741
 
1726
1742
  function handleResponse(uuid, status = 200, method = null, data = null, xhr = null, request = null) {
1727
1743
 
1728
- ajaxSemaphore = false;
1729
-
1744
+
1730
1745
  var responseURL;
1731
1746
  responseURL = xhr !== null ? xhr.responseURL : url.href;
1732
1747
 
@@ -1782,6 +1797,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1782
1797
  else location.reload();
1783
1798
  }
1784
1799
 
1800
+ ajaxSemaphore = false;
1785
1801
  return dispatchEvent(new Event('load'));
1786
1802
  }
1787
1803
 
@@ -1850,13 +1866,14 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1850
1866
  return window.location.reload();
1851
1867
 
1852
1868
  // Kick off preloads for stylesheets the new page needs but aren't yet in <head>.
1853
- // They download in parallel during the activeIn animation so onLoad() finds them
1869
+ // They download in parallel during the fadeIn animation so onLoad() finds them
1854
1870
  // already cached — eliminating FOUC on cold-cache layout transitions.
1855
1871
  (function() {
1856
1872
  var loaded = {};
1857
1873
  $("head").children("link[rel='stylesheet']").each(function() {
1858
1874
  var h = this.getAttribute("href"); if(h) loaded[h] = true;
1859
1875
  });
1876
+
1860
1877
  $(dom).find("head").children("link[rel='stylesheet']").each(function() {
1861
1878
  var h = this.getAttribute("href");
1862
1879
  if(!h || loaded[h]) return;
@@ -1869,7 +1886,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1869
1886
 
1870
1887
  return Transparent.onLoad(uuid, dom, function() {
1871
1888
 
1872
- Transparent.activeOut(function() {
1889
+ Transparent.fadeOut(function() {
1873
1890
 
1874
1891
  Transparent.html
1875
1892
  .removeClass(switchLayout)
@@ -1892,13 +1909,12 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1892
1909
  if(history.state)
1893
1910
  Transparent.setResponse(history.state.uuid, Transparent.html[0], Transparent.getScrollableElementXY());
1894
1911
 
1895
- $(Transparent.html).prop("user-scroll", false); // make sure to avoid page jump during transition (cancelled in activeIn callback)
1912
+ $(Transparent.html).prop("user-scroll", false); // make sure to avoid page jump during transition (cancelled in fadeIn callback)
1896
1913
 
1897
1914
  // Submit ajax request..
1898
1915
  if(form) form.dispatchEvent(new SubmitEvent("submit", { submitter: formTrigger }));
1899
1916
  var xhr = new XMLHttpRequest();
1900
1917
 
1901
- ajaxSemaphore = true;
1902
1918
  return jQuery.ajax({
1903
1919
  url: url.href,
1904
1920
  type: type,
@@ -1907,12 +1923,12 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
1907
1923
  processData: false,
1908
1924
  headers: Settings["headers"] || {},
1909
1925
  xhr: function () { return xhr; },
1910
- success: function (html, status, request) { return handleResponse(uuid, request.status, type, data, xhr, request); },
1911
- error: function (request, ajaxOptions, thrownError) { return handleResponse(uuid, request.status, type, data, xhr, request); }
1926
+ success: function (html, status, request) { return tryDispatch([uuid, request.status, type, data, xhr, request]); },
1927
+ error: function (request, ajaxOptions, thrownError) { return tryDispatch([uuid, request.status, type, data, xhr, request]); }
1912
1928
  });
1913
1929
  }
1914
1930
 
1915
- return handleResponse(history.state.uuid, history.state.status, history.state.method, history.state.data);
1931
+ return tryDispatch([history.state.uuid, history.state.status, history.state.method, history.state.data]);
1916
1932
  }
1917
1933
 
1918
1934
  // Update history if not refreshing page or different page (avoid double pushState)
@@ -2027,7 +2043,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
2027
2043
  if(Settings.debug || preventDefault) {
2028
2044
 
2029
2045
  if(preventDefault) Transparent.html.addClass(Transparent.state.READY);
2030
- if(preventDefault) Transparent.activeOut();
2046
+ if(preventDefault) Transparent.fadeOut();
2031
2047
  if(preventDefault) dispatchEvent(new Event('load'));
2032
2048
 
2033
2049
  return "Dude, are you sure you want to leave? Think of the kittens!";