@parsonic/back-to-top
Version:
Scroll back to top of page web component
5 lines (4 loc) • 2.53 kB
JavaScript
(()=>{var c=new CSSStyleSheet;c.replaceSync(`:host{--button-background:var(--btt-button-background,rgba(0,0,0,.6));--button-background-hover:var(
--btt-button-background-hover,rgba(0,0,0,.8)
);--button-border:var(--btt-button-border,none);--button-color:var(--btt-button-color,#fff);--button-inset:var(--btt-button-inset,auto 2rem 2rem auto);--button-padding:var(--btt-button-padding,0.5rem);--button-radius:var(--btt-button-radius,999px);--button-size:var(--btt-button-size,1.5rem);inset:var(--button-inset);opacity:0;position:fixed;transform:scale(0);transition:transform .2s,opacity .2s;visibility:hidden}:host([data-state=active]){opacity:1;transform:scale(1);visibility:visible}button{background:var(--button-background);border:var(--button-border);border-radius:var(--button-radius);box-sizing:content-box;color:var(--button-color);cursor:pointer;font-size:var(--button-size);height:var(--button-size);line-height:1;padding:var(--button-padding);transition:background .2s;width:var(--button-size);svg{position:relative;top:-1px}} (hover:hover){button:hover{background:var(--button-background-hover)}}`);var d=c;var o=class extends HTMLElement{static register(t="back-to-top"){customElements.define(t,this)}#t=null;#o=0;#e=500;connectedCallback(){let{buttonLabel:t="Scroll back to top",scrollBehavior:b="auto",scrollContainer:n,threshold:u}=this.dataset,a=document.createElement("template");a.innerHTML=`<slot><button part="button" type="button" aria-label="${t}"><slot name="icon"><svg part="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg></slot></button></slot>`;let r=this.attachShadow({mode:"open"});r.appendChild(a.content.cloneNode(!0)),r.adoptedStyleSheets.push(d);let i=parseInt(u,10);isNaN(i)||(this.#e=i);let e;n&&document.getElementById(n)&&(e=document.getElementById(n)),this.#n(e?.scrollTop??window.scrollY),this.#t=new AbortController;let s=e??window;s.addEventListener("scroll",()=>{this.#n(e?.scrollTop??window.scrollY)},{signal:this.#t.signal}),r.querySelector("slot").addEventListener("click",()=>{let{focusTarget:l}=this.dataset;l&&document.getElementById(l)?.focus({preventScroll:!0}),s.scrollTo({top:0,behavior:b})})}disconnectedCallback(){this.#t?.abort()}#n(t){t>this.#e&&t<this.#o?this.dataset.state="active":this.dataset.state="inactive",this.#o=t}};o.register();})();
//# sourceMappingURL=min.js.map