@oddbird/css-anchor-positioning
Version:
Polyfill for the proposed CSS anchor positioning spec
2 lines (1 loc) • 3.05 kB
JavaScript
import{p as a}from"./polyfill-SWhtadZ6.js";const i="anchorName"in document.documentElement.style,l=document.getElementById("apply-polyfill");i?(l.innerText="No Polyfill Needed",l.setAttribute("disabled",""),console.log("anchor-positioning is supported in this browser; polyfill skipped.")):l.addEventListener("click",()=>a().then(e=>{l.innerText="Polyfill Applied",l.setAttribute("disabled",""),console.log(e)}));const c=document.getElementById("toggle-anchor-width"),n=document.getElementById("my-anchor-update");c.addEventListener("click",()=>{n.getAttribute("data-small")?(n.setAttribute("data-large",!0),n.removeAttribute("data-small")):(n.setAttribute("data-small",!0),n.removeAttribute("data-large"))});function u(){const e=document.createElement("style");e.id="my-style-manual-anchor",e.textContent=["#my-anchor-manual {","anchor-name: --my-anchor-manual;","}"].join("");const m=document.createElement("style");m.id="my-style-manual-style-el",m.textContent=["#my-target-manual-style-el {","position: absolute;","bottom: anchor(--my-anchor-manual top);","right: anchor(--my-anchor-manual left);","}"].join("");const o=document.createElement("link");o.id="my-style-manual-link-el",o.rel="stylesheet",o.href="/anchor-manual.css",document.head.append(e,m,o),document.getElementById("my-target-manual-inline-style")?.setAttribute("style",["position: absolute","top: anchor(--my-anchor-manual bottom)","left: anchor(--my-anchor-manual right)"].join(";"))}document.getElementById("prepare-manual-polyfill")?.addEventListener("click",()=>u(),{once:!0});const s=document.getElementById("apply-polyfill-manually-set1");s?.addEventListener("click",e=>{a({elements:[document.getElementById("my-style-manual-anchor"),document.getElementById("my-style-manual-style-el")],excludeInlineStyles:!0}).then(()=>{s.setAttribute("disabled","")})});const d=document.getElementById("apply-polyfill-manually-set2");d?.addEventListener("click",e=>{a({elements:[document.getElementById("my-style-manual-anchor"),document.getElementById("my-style-manual-link-el"),document.getElementById("my-target-manual-inline-style")],excludeInlineStyles:!0}).then(()=>{d.setAttribute("disabled","")})});const y=document.getElementById("apply-polyfill-manually-set3");y?.addEventListener("click",e=>{a({elements:[document.getElementById("my-style-manual-anchor"),document.getElementById("my-style-manual-style-el")]}).then(()=>{y.setAttribute("disabled","")})});const t=document.getElementById("apply-polyfill-manually");i&&(t.innerText="Load Anchor Positioning CSS");t.addEventListener("click",()=>{u(),i?(t.innerText="Anchor Positioning CSS applied",console.log("anchor-positioning is supported in this browser; polyfill skipped.")):a({elements:[document.getElementById("my-style-manual-anchor"),document.getElementById("my-style-manual-link-el"),document.getElementById("my-style-manual-style-el"),document.getElementById("my-target-manual-inline-style")]}).then(e=>{t.innerText="Polyfill Applied",t.setAttribute("disabled",""),console.log(e)}),t.setAttribute("disabled","")});