UNPKG

@oddbird/css-toggles

Version:

Polyfill for the proposed CSS Toggles syntax

11 lines (10 loc) 9.04 kB
var j="comm",I="rule",q="decl";var oe="@import";var ne="@keyframes";var ae=Math.abs,W=String.fromCharCode;function z(e){return e.trim()}function D(e,t,r){return e.replace(t,r)}function ie(e,t){return e.indexOf(t)}function V(e,t){return e.charCodeAt(t)|0}function O(e,t,r){return e.slice(t,r)}function k(e){return e.length}function _(e){return e.length}function C(e,t){return t.push(e),e}var F=1,L=1,ce=0,m=0,l=0,$="";function H(e,t,r,o,a,i,u){return{value:e,root:t,parent:r,type:o,props:a,children:i,line:F,column:L,length:u,return:""}}function se(){return l}function le(){return l=m>0?V($,--m):0,L--,l===10&&(L=1,F--),l}function v(){return l=m<ce?V($,m++):0,L++,l===10&&(L=1,F++),l}function A(){return V($,m)}function U(){return m}function K(e,t){return O($,e,t)}function J(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function ue(e){return F=L=1,ce=k($=e),m=0,[]}function ge(e){return $="",e}function B(e){return z(K(m-1,Q(e===91?e+2:e===40?e+1:e)))}function fe(e){for(;(l=A())&&l<33;)v();return J(e)>2||J(l)>3?"":" "}function pe(e,t){for(;--t&&v()&&!(l<48||l>102||l>57&&l<65||l>70&&l<97););return K(e,U()+(t<6&&A()==32&&v()==32))}function Q(e){for(;v();)switch(l){case e:return m;case 34:case 39:e!==34&&e!==39&&Q(l);break;case 40:e===41&&Q(e);break;case 92:v();break}return m}function de(e,t){for(;v()&&e+l!==47+10;)if(e+l===42+42&&A()===47)break;return"/*"+K(t,m-1)+"*"+W(e===47?e:v())}function xe(e){for(;!J(A());)v();return K(e,m)}function ve(e){return ge(Y("",null,null,null,[""],e=ue(e),0,[0],e))}function Y(e,t,r,o,a,i,u,n,g){for(var b=0,f=0,c=u,R=0,T=0,h=0,p=1,S=1,x=1,d=0,E="",N=a,w=i,y=o,s=E;S;)switch(h=d,d=v()){case 40:if(h!=108&&s.charCodeAt(c-1)==58){ie(s+=D(B(d),"&","&\f"),"&\f")!=-1&&(x=-1);break}case 34:case 39:case 91:s+=B(d);break;case 9:case 10:case 13:case 32:s+=fe(h);break;case 92:s+=pe(U()-1,7);continue;case 47:switch(A()){case 42:case 47:C(Ae(de(v(),U()),t,r),g);break;default:s+="/"}break;case 123*p:n[b++]=k(s)*x;case 125*p:case 59:case 0:switch(d){case 0:case 125:S=0;case 59+f:T>0&&k(s)-c&&C(T>32?me(s+";",o,r,c-1):me(D(s," ","")+";",o,r,c-2),g);break;case 59:s+=";";default:if(C(y=he(s,t,r,b,f,a,n,E,N=[],w=[],c),i),d===123)if(f===0)Y(s,t,y,y,N,i,c,n,w);else switch(R){case 100:case 109:case 115:Y(e,y,y,o&&C(he(e,y,y,0,0,a,n,E,a,N=[],c),w),a,w,c,n,o?N:w);break;default:Y(s,y,y,y,[""],w,0,n,w)}}b=f=T=0,p=x=1,E=s="",c=u;break;case 58:c=1+k(s),T=h;default:if(p<1){if(d==123)--p;else if(d==125&&p++==0&&le()==125)continue}switch(s+=W(d),d*p){case 38:x=f>0?1:(s+="\f",-1);break;case 44:n[b++]=(k(s)-1)*x,x=1;break;case 64:A()===45&&(s+=B(v())),R=A(),f=c=k(E=s+=xe(U())),d++;break;case 45:h===45&&k(s)==2&&(p=0)}}return i}function he(e,t,r,o,a,i,u,n,g,b,f){for(var c=a-1,R=a===0?i:[""],T=_(R),h=0,p=0,S=0;h<o;++h)for(var x=0,d=O(e,c+1,c=ae(p=u[h])),E=e;x<T;++x)(E=z(p>0?R[x]+" "+d:D(d,/&\f/g,R[x])))&&(g[S++]=E);return H(e,t,r,a===0?I:n,g,b,f)}function Ae(e,t,r){return H(e,t,r,j,W(se()),O(e,2,-2),0)}function me(e,t,r,o){return H(e,t,r,q,O(e,0,o),O(e,o+1,-1),o)}function G(e,t){for(var r="",o=_(e),a=0;a<o;a++)r+=t(e[a],a,e,t)||"";return r}function be(e,t,r,o){switch(e.type){case oe:case q:return e.return=e.return||e.value;case j:return"";case ne:return e.return=e.value+"{"+G(e.children,o)+"}";case I:e.value=e.props.join(",")}return k(r=G(e.children,o))?e.return=e.value+"{"+r+"}":""}var X=(e,t)=>RegExp(e.map(r=>r.source).join(""),t),Me=X([/(?<name>[\w-]+)/,/ */,/((?<initial>\d+)\/)?/,/(?<numActive>\d*)?/,/(\[(?<states>.+)\])?/,/ */,/(at +(?<at>[\w-]+))?/,/ */,/(?<modifiers>.*)/]),Oe=X([/((?<name>[\w-]+) +)?/,/(machine\((?<machine>[\w-]+)(?<strict> *, *strict)?\))/,/ */,/(at +(?<at>[\w-]+))?/,/ */,/(?<modifiers>.*)/]),Ce=X([/(?<name>[\w-]+)/,/ */,/(do[ (](?<transition>[\w-]+)\)?)?/,/(?<targetState>[\w-]*)/]),Le=0,$e=()=>Le++,M={},P={};function Ne(e){let t=[e],r=e.nextElementSibling;for(;r!==null;)t.push(r),r=r.nextElementSibling;return t}function ee(e,t){let r=e.includes("machine(")?Oe:Me,{name:o,machine:a,strict:i,initial:u,numActive:n,states:g,at:b,modifiers:f}=r.exec(e).groups;if(o=o||a,o===void 0)return;let c,R=P[a];R!==void 0?(g=Object.keys(R.states),c=g.length):g!==void 0?(g=g.split(/ +/),c=g.length):(c=parseInt(n||1)+1,g=[...Array(c).keys()].map(String)),f=f?.split(/ +/)||[];let T=f.includes("group"),h=f.includes("self"),p=g.indexOf(u);p===-1&&(p=g.indexOf(b)),p===-1&&(p=0);let S=0;f.includes("linear")&&(S=c-1),f.includes("sticky")&&(S=1);let x={name:o,resetTo:S,group:T,isNarrow:h,total:c,states:g,machine:a,activeIndex:p,strict:Boolean(i)};document.querySelectorAll(t).forEach(d=>{let E=`${o}-${$e()}`;(h?[d]:Ne(d)).forEach(w=>w.dataset.toggleRoot=E),M[E]={...x}})}function te(e,t){let{name:r,targetState:o,transition:a}=Ce.exec(e).groups;if(r===void 0)return;let i=({target:n})=>{n.dispatchEvent(new CustomEvent("_toggleTrigger",{bubbles:!0,detail:{toggleRoot:r,targetState:o,transition:a}}))};function u(n){![" ","Enter","Spacebar"].includes(n.key)||(n.preventDefault(),i(n))}document.querySelectorAll(t).forEach(n=>{n.dataset.toggleTrigger="",n.addEventListener("click",i),!["button","a","input"].includes(n.nodeName.toLowerCase())&&(n.addEventListener("keydown",u),n.setAttribute("tabindex",0),n.setAttribute("role","button"),n.setAttribute("aria-pressed",!1))})}var We=["after","backdrop","before","cue","cue-region","first-letter","first-line","file-selector-button","grammar-error","marker","placeholder","selection","spelling-error","target-text"].join("|"),Ue=RegExp(`::?(${We})`),Z=/:toggle\((?<name>[\w-]+) *(?<value>[\w-]*)\)/,Pe=/toggle *(?<name>[\w-]+)/;function Ee(e){let t=(e.props||[])[0];if(!(e.type==="@machine"&&t))return;let r={};e.children.filter(o=>o.type==="rule").forEach(o=>{r[o.value]=Object.fromEntries(o.children.filter(a=>a.type==="decl").map(a=>[a.props,a.children]))}),P[t]={name:t,states:r}}function ke(e){if(e.type!=="rule")return;let t=!1;return e.props=e.props.map(r=>{if(!r.match(Z))return r;let o=r.slice(0,r.search(Z)).replace(Ue,"");document.querySelectorAll(o).forEach(n=>n.dataset.toggle="");let a,{name:i,value:u}=Z.exec(r).groups;return u?a=`[data-toggle="${i} ${u}"]`:a=`[data-toggle^="${i} "]:not([data-toggle="${i} 0"])`,t=!0,r.replace(Z,a)}),t}function ye(e){if(!(e.type==="decl"&&e.props==="toggle-visibility"))return;let{name:t}=Pe.exec(e.children).groups;t!==void 0&&document.querySelectorAll(e.parent.value).forEach(r=>{r.dataset.toggleVisibility=""})}function Re(e){e.type==="decl"&&e.props==="toggle-root"&&ee(e.children,e.parent.value)}function we(e){e.type==="decl"&&e.props==="toggle-trigger"&&te(e.children,e.parent.value)}function Te(e){if(!(e.type==="decl"&&e.props==="toggle"))return;let t=e.parent.value,r=e.children;ee(r,t),te(r,t)}function re(e){let t=M[e],{activeIndex:r}=t;document.querySelectorAll(` [data-toggle-root="${e}"][data-toggle-visibility], [data-toggle-root="${e}"] [data-toggle-visibility] `).forEach(o=>{o.closest("[data-toggle-root]")?.dataset.toggleRoot===e&&(o.dataset.toggleVisibility=r>0?"visible":"hidden")}),document.querySelectorAll(` [data-toggle-root="${e}"][data-toggle], [data-toggle-root="${e}"] [data-toggle] `).forEach(o=>{o.closest("[data-toggle-root]")?.dataset.toggleRoot===e&&(o.dataset.toggle=`${t.name} ${t.states[r]}`)}),document.querySelectorAll(` [data-toggle-root="${e}"][data-toggle-trigger][aria-pressed], [data-toggle-root="${e}"] [data-toggle-trigger][aria-pressed] `).forEach(o=>{o.closest("[data-toggle-root]")?.dataset.toggleRoot===e&&o.setAttribute("aria-pressed",r>0)})}function Se(e,t){let r=!1;function o(i){if(i.type==="comm")return;Ee(i),r|=ke(i),ye(i),Re(i),we(i),Te(i);let u=(i.children||[]).length;for(let n=0;n<u;n++)o(i.children[n])}let a=ve(e);return a.forEach(o),r?G(a,be):""}function je(e){let t=Se(e.innerHTML);!t||(e.innerHTML=t)}async function Ie(e){if(e.rel!=="stylesheet")return;let t=new URL(e.href,document.baseURI);if(t.origin!==location.origin)return;let r=await fetch(t.toString()).then(i=>i.text()),o=Se(r,t.toString());if(!o)return;let a=new Blob([o],{type:"text/css"});e.href=URL.createObjectURL(a)}document.body.addEventListener("_toggleTrigger",e=>{let{target:t}=e,{toggleRoot:r,targetState:o,transition:a}=e.detail,u=t.closest(`[data-toggle-root^="${r}-"]`)?.dataset?.toggleRoot||null,n=M[u];if(n===void 0)return;let g=n.states[n.activeIndex];if(n.group)for(let c of Object.keys(M))M[c].name===r&&(M[c].activeIndex=0,re(c));let b=P[n.machine];if(b!==void 0&&(o=b.states[g][a],o===void 0))return;let f=n.states.indexOf(o);f===-1?n.activeIndex===n.total-1?n.activeIndex=n.resetTo:n.activeIndex++:n.activeIndex=f,re(u)});document.querySelectorAll("style").forEach(je);Promise.all([...document.querySelectorAll("link")].map(Ie)).then(()=>{Object.keys(M).forEach(re)});document.head.insertAdjacentHTML("beforeend",'<style>[data-toggle-visibility="hidden"] { display: none; }</style>');