@vtbag/element-crossing - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

lib/vanilla.js

@@ -1,1 +0,1 @@
-"use strict";(()=>{var d=!1,k="/svg",l=top.__vtbag?.elementCrossing;v();function v(){if(l?.fun){if(self===top)return;top.document.title=self.document.title,top.history.replaceState(self.history.state,"",self.location.href),self.crossingStorage=l.fun}document.addEventListener("astro:after-preparation",u),document.addEventListener("astro:after-swap",m),self.addEventListener("onpageswap"in self?"pageswap":"pagehide",u),self.addEventListener("onpagereveal"in self?"pagereveal":"DOMContentLoaded",m)}function u(){self.crossingStorage?self.crossingStorage.setItem("@vtbag/element-crossing",p()):top.sessionStorage.setItem("@vtbag/element-crossing",JSON.stringify(p()))}function m(){let t,o;(o=self.crossingStorage)?t=o.getItem("@vtbag/element-crossing")??[]:(o=top.sessionStorage,t=JSON.parse(o.getItem("@vtbag/element-crossing")??"[]")),top.sessionStorage.removeItem("@vtbag/element-crossing"),self.crossingStorage?.removeItem("@vtbag/element-crossing"),performance?.navigation?.type!==1&&"navigation"in self&&self.navigation?.navigationType!=="reload"&&y(t)}function p(){let t=new Set,o=[];return self.document.querySelectorAll("[data-vtbag-x]").forEach(s=>{let e=b(s);e&&(t.has(e.id)&&console.error("[crossing]","non unique id",e.id),o.push(e),t.add(e.id))}),d&&console.log("[crossing]","retrieve",o),o}function b(t){function o(i,a){let[n,r]=i.split(":",2);if(!n)return console.error("[crossing]","syntax error:",i,"is not recognized as a valid specification in",a),["<none>",r];if(r===void 0)switch(r=n.slice(1),n[0]){case"#":n="id";break;case".":n="class";break;case"@":n="prop";break;case"-":n="style";break;case"~":n="anim";break;case"&":if(n="elem",l?.fun)break;default:console.error("[crossing]","syntax error:",i,"is not recognized as a valid specification in",a)}return[n,r]}let s=t.id,e=[];if(t.getAttribute("data-vtbag-x")?.trim().split(/\s+/).forEach(i=>{let[a,n]=o(i,t);switch(a){case"id":s=n;break;case"class":e.push({kind:a,key:n,value:t.classList.contains(n)?"true":"false"});break;case"style":e.push({kind:a,key:n,value:""+(t.style[n]??"")});break;case"bool":case"num":case"prop":let r=t[n],g=typeof r;e.push({kind:g==="boolean"?"bool":g==="number"?"num":"prop",key:n,value:""+r});break;case"anim":if(n===k){if(!(t instanceof SVGSVGElement)){console.error("[crossing]",`retrieval: element is not an SVG element, but "${n}" was used for its key`,t);break}let c=t.getCurrentTime();c>0&&e.push({kind:a,key:n,value:c.toString()})}else{let c=t.getAnimations().filter(f=>f instanceof CSSAnimation&&f.animationName===n);c.length>1&&console.error("[crossing]",`retrieval: animation name ${n} is not unique for`,t),c.length>0&&e.push({kind:a,key:n,value:""+(c[0].currentTime??0)})}break;case"elem":top?.__vtbag?.elementCrossing?.fun&&(self.crossingStorage.setItem(n,t),e.push({kind:a,key:n}));break;default:console.error("[crossing]","unknown kind",a);break}}),!s)console.error("[crossing]","missing id in",t);else return{id:s,timestamp:new Date().getTime(),specs:e}}function y(t){d&&console.log("[crossing]","restore",t),t.forEach(o=>{let s=document.querySelector("#"+o.id+",[data-vtbag-x*='#"+o.id+"'],[data-vtbag-x*='id:"+o.id+"']");s&&o.specs.forEach(e=>{switch(e.kind){case"class":s.classList[e.value==="true"?"add":"remove"](e.key);break;case"style":e.key==="length"||e.key==="parentRule"?console.error("[crossing]","Cannot assign to read-only property",e.key,"in",o.id):s.style.setProperty(e.key,e.value??"");break;case"prop":s[e.key]=e.value;break;case"bool":s[e.key]=e.value==="true";break;case"num":s[e.key]=parseFloat(e.value??"0");break;case"anim":if(e.key===k){if(!(s instanceof SVGSVGElement)){console.error("[crossing]",`restore: element for key ${e.key} is not an SVG element`,s);break}s.setCurrentTime(parseFloat(e.value??"0")+(new Date().getTime()-o.timestamp)/1e3)}else{let a=s.getAnimations().filter(n=>n instanceof CSSAnimation&&n.animationName===e.key);a.length>1&&console.warn("[crossing]",`restore: animation name ${e.key} is not unique for`,s),a.forEach(n=>n.currentTime=~~(e.value??"0")+(new Date().getTime()-o.timestamp))}break;case"elem":if(top?.__vtbag?.elementCrossing?.fun){let a=self.crossingStorage.getItem(e.key);a&&(s.replaceWith(a),s=a)}break;default:console.error("[crossing]","unknown kind",e.kind);break}})})}})();
+"use strict";(()=>{var p=!1,k="/svg",l=top.__vtbag?.elementCrossing;v();function v(){if(l?.fun){if(self===top)return;top.document.title=self.document.title,top.history.replaceState(self.history.state,"",self.location.href),self.crossingStorage=l.fun}document.addEventListener("astro:after-preparation",u),document.addEventListener("astro:after-swap",m),self.addEventListener("onpageswap"in self?"pageswap":"pagehide",u),self.addEventListener("onpagereveal"in self?"pagereveal":"DOMContentLoaded",m)}function u(){self.crossingStorage?self.crossingStorage.setItem("@vtbag/element-crossing",d()):top.sessionStorage.setItem("@vtbag/element-crossing",JSON.stringify(d()))}function m(){let n,a;(a=self.crossingStorage)?n=a.getItem("@vtbag/element-crossing")??[]:(a=top.sessionStorage,n=JSON.parse(a.getItem("@vtbag/element-crossing")??"[]")),top.sessionStorage.removeItem("@vtbag/element-crossing"),self.crossingStorage?.removeItem("@vtbag/element-crossing"),performance?.navigation?.type!==1&&"navigation"in self&&self.navigation?.navigationType!=="reload"&&y(n)}function d(){let n=new Set,a=[];return self.document.querySelectorAll("[data-vtbag-x]").forEach(s=>{let e=b(s);e&&(n.has(e.id)&&console.error("[crossing]","non unique id",e.id),a.push(e),n.add(e.id))}),p&&console.log("[crossing]","retrieve",a),a}function b(n){function a(r,o){let[t,i]=r.split(":",2);if(!t)return console.error("[crossing]","syntax error:",r,"is not recognized as a valid specification in",o),["<none>",i];if(i===void 0)switch(i=t.slice(1),t[0]){case"#":t="id";break;case".":t="class";break;case"@":t="prop";break;case"-":t="style";break;case"~":t="anim";break;case"&":if(t="elem",l?.fun)break;default:console.error("[crossing]","syntax error:",r,"is not recognized as a valid specification in",o)}return[t,i]}let s=n.id,e=[];if(n.getAttribute("data-vtbag-x")?.trim().split(/\s+/).forEach(r=>{let[o,t]=a(r,n);switch(o){case"id":s=t;break;case"class":e.push({kind:o,key:t,value:n.classList.contains(t)?"true":"false"});break;case"style":e.push({kind:o,key:t,value:""+(n.style[t]??"")});break;case"bool":case"num":case"prop":let i=t.startsWith("data-")?n.dataset[t.substring(5)]:n[t],g=typeof i;e.push({kind:g==="boolean"?"bool":g==="number"?"num":"prop",key:t,value:""+i});break;case"anim":if(t===k){if(!(n instanceof SVGSVGElement)){console.error("[crossing]",`retrieval: element is not an SVG element, but "${t}" was used for its key`,n);break}let c=n.getCurrentTime();c>0&&e.push({kind:o,key:t,value:c.toString()})}else{let c=n.getAnimations().filter(f=>f instanceof CSSAnimation&&f.animationName===t);c.length>1&&console.error("[crossing]",`retrieval: animation name ${t} is not unique for`,n),c.length>0&&e.push({kind:o,key:t,value:""+(c[0].currentTime??0)})}break;case"elem":top?.__vtbag?.elementCrossing?.fun&&(self.crossingStorage.setItem(t,n),e.push({kind:o,key:t}));break;default:console.error("[crossing]","unknown kind",o);break}}),!s)console.error("[crossing]","missing id in",n);else return{id:s,timestamp:new Date().getTime(),specs:e}}function y(n){p&&console.log("[crossing]","restore",n),n.forEach(a=>{let s=document.querySelector("#"+a.id+",[data-vtbag-x*='#"+a.id+"'],[data-vtbag-x*='id:"+a.id+"']");s&&a.specs.forEach(e=>{switch(e.kind){case"class":s.classList[e.value==="true"?"add":"remove"](e.key);break;case"style":e.key==="length"||e.key==="parentRule"?console.error("[crossing]","Cannot assign to read-only property",e.key,"in",a.id):s.style.setProperty(e.key,e.value??"");break;case"prop":e.key.startsWith("data-")?s.dataset[e.key.substring(5)]=e.value:s[e.key]=e.value;break;case"bool":s[e.key]=e.value==="true";break;case"num":s[e.key]=parseFloat(e.value??"0");break;case"anim":if(e.key===k){if(!(s instanceof SVGSVGElement)){console.error("[crossing]",`restore: element for key ${e.key} is not an SVG element`,s);break}s.setCurrentTime(parseFloat(e.value??"0")+(new Date().getTime()-a.timestamp)/1e3)}else{let o=s.getAnimations().filter(t=>t instanceof CSSAnimation&&t.animationName===e.key);o.length>1&&console.warn("[crossing]",`restore: animation name ${e.key} is not unique for`,s),o.forEach(t=>t.currentTime=~~(e.value??"0")+(new Date().getTime()-a.timestamp))}break;case"elem":if(top?.__vtbag?.elementCrossing?.fun){let o=self.crossingStorage.getItem(e.key);o&&(s.replaceWith(o),s=o)}break;default:console.error("[crossing]","unknown kind",e.kind);break}})})}})();

package.json

 {
 	"name": "@vtbag/element-crossing",
 	"type": "module",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"main": "lib/vanilla.js",
@@ -44,3 +44,3 @@ "description": "Sites using cross-document view transitions do full page loads of static content on navigation. The element crossing provides a way to preserve current dynamic state of selected elements across cross-document view transitions for a smoother user experience.",
 	},
-	"homepage": "https://vtbag.pages.dev",
+	"homepage": "https://vtbag.dev",
 	"funding": {
@@ -52,3 +52,3 @@ "type": "github",
 		"@changesets/cli": "^2.27.9",
-		"@eslint/js": "^9.13.0",
+		"@eslint/js": "^9.14.0",
 		"@types/dom-view-transitions": "^1.0.5",
@@ -55,0 +55,0 @@ "esbuild": "^0.24.0",

README.md

@@ -12,7 +12,7 @@ [⭐️Please star to support this work⭐️](https://github.com/vtbag/element-crossing)
 
-The @vtbag website can be found at https://vtbag.pages.dev/
+The @vtbag website can be found at https://vtbag.dev/
 
 ## !!! News !!!
 
-Updated dependencies.
+Now also fully supports crossing of `data-*` properties.
 
@@ -23,2 +23,4 @@ For details see the [CHANGELOG](https://github.com/vtbag/element-crossing/blob/main/CHANGELOG.md)
 
+> Now also preserves the animation state of animated SVGs across cross-document view transitions, thanks to [Lukas](https://github.com/trombach)!
+
 > Small improvements for smoother animations and handling reloads.
@@ -45,2 +47,2 @@
 
-[View configuration examples](https://vtbag.pages.dev/tools/element-crossing/#applications-with-real-world-examples) and [see the Element Crossing in action](https://vtbag.pages.dev/crossing/vanilla/1/)
+[View configuration examples](https://vtbag.dev/tools/element-crossing/#applications-with-real-world-examples) and [see the Element Crossing in action](https://vtbag.dev/crossing/vanilla/1/)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9418

increased by2.95%

Number of lines in readme file

46

increased by4.55%

No dependency changes