UNPKG

@oddbird/css-anchor-positioning

Version:

Polyfill for the proposed CSS anchor positioning spec

2 lines (1 loc) 3.11 kB
import{p as a}from"./polyfill-DHJMI3jZ.js";const y="anchorName"in document.documentElement.style,l=document.getElementById("apply-polyfill");y?(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 p=document.getElementById("toggle-anchor-width"),n=document.getElementById("my-anchor-update");p.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(){var c;const e=document.createElement("style");e.id="my-style-manual-anchor",e.textContent=["#my-anchor-manual {","anchor-name: --my-anchor-manual;","}"].join("");const d=document.createElement("style");d.id="my-style-manual-style-el",d.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,d,o),(c=document.getElementById("my-target-manual-inline-style"))==null||c.setAttribute("style",["position: absolute","top: anchor(--my-anchor-manual bottom)","left: anchor(--my-anchor-manual right)"].join(";"))}var r;(r=document.getElementById("prepare-manual-polyfill"))==null||r.addEventListener("click",()=>u(),{once:!0});const m=document.getElementById("apply-polyfill-manually-set1");m==null||m.addEventListener("click",e=>{a({elements:[document.getElementById("my-style-manual-anchor"),document.getElementById("my-style-manual-style-el")],excludeInlineStyles:!0}).then(()=>{m.setAttribute("disabled","")})});const i=document.getElementById("apply-polyfill-manually-set2");i==null||i.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(()=>{i.setAttribute("disabled","")})});const s=document.getElementById("apply-polyfill-manually-set3");s==null||s.addEventListener("click",e=>{a({elements:[document.getElementById("my-style-manual-anchor"),document.getElementById("my-style-manual-style-el")]}).then(()=>{s.setAttribute("disabled","")})});const t=document.getElementById("apply-polyfill-manually");y&&(t.innerText="Load Anchor Positioning CSS");t.addEventListener("click",()=>{u(),y?(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","")});