@vtbag/utensil-drawer/lib/bundled/declarative-names.js

Pull out just what you need to craft seamless transitions. The Utensil Drawer holds reusable functions to help you build websites with view transitions. It is a bit sparse right now, but like the one in your kitchen, it is bound to fill up over time.

"use strict";(()=>{function c(t,e,o=!1){let n,l=t.replace(/:in-viewport\s*$/,"");try{n=document.querySelectorAll(l)}catch(s){console.error(s.message.replace(/.*:/,"[vtbag] Error selecting elements for view transition names:"));return}let i=[...n];t.length!==l.length&&(i=i.filter(s=>{let a=s.getBoundingClientRect(),r=Math.max(0,Math.min(a.right,window.innerWidth)-Math.max(a.left,0)),d=Math.max(0,Math.min(a.bottom,window.innerHeight)-Math.max(a.top,0));return console.log(a,r,d),r>0&&d>0})),m(i,e,o)}function m(t,e,o=!1){e[e.length-1]==="~"&&(e=e.slice(0,-1)+"-",h(t)),e=CSS.escape(e),t.forEach((n,l,i)=>{let s=`${e}${i.length>1&&e!==""&&e!=="none"&&e!=="auto"&&e!=="match-element"?l:""}`;o&&(n.style.viewTransitionName=s)||(n.style.viewTransitionName||=s)})}function h(t){for(let e=t.length-1;e>0;--e){let o=Math.floor(Math.random()*(e+1));[t[e],t[o]]=[t[o],t[e]]}return t}function u(){addEventListener("DOMContentLoaded",g("old")),addEventListener("pagereveal",g("new")),addEventListener("pageswap",g("old"))}function g(t){return()=>{document.querySelectorAll("script").forEach(e=>{((e.getAttribute("data-vtbag-decl")??"")+";"+(e.getAttribute(`data-vtbag-decl-${t}`)??"")).split(/\s*;\s*/).forEach((n,l)=>{if(n=n.trim(),n.length>0){let i=n.split("=");if(i.length>1){let s=i.slice(0,-1).join("="),a=i[i.length-1],r=s.endsWith("~");r&&(s=s.slice(0,-1)),c(s.trim(),a.trim(),!r)}else c(n.trim(),`vtbag-decl-${l}-`,!1)}})})}}u();})();