@localnerve/jump-scroll 0.5.4 → 0.6.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/jump-scroll.css +1 -1
- package/dist/jump-scroll.js +2 -2
- package/package.json +1 -1
package/dist/jump-scroll.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{--js-width:3em;--js-aspect-ratio:0.
|
|
1
|
+
:host{--js-width:3em;--js-aspect-ratio:0.17;--js-aspect-ratio-container:calc(var(--js-aspect-ratio) * (1 + var(--js-aspect-ratio)));--js-height:calc(var(--js-width) * (1 / var(--js-aspect-ratio)));--js-bg-color:black;--js-color:white;--js-opacity-full:0.7;--js-opacity-rest:0.3;--js-attach-right:1rem;--js-attach-bottom:1rem;position:fixed;bottom:var(--js-attach-bottom);right:var(--js-attach-right);color:var(--js-color)}.container{display:block;transition:opacity 1s;opacity:var(--js-opacity-full);width:var(--js-width);height:auto;aspect-ratio:var(--js-aspect-ratio-container)}.container button{padding:0;margin:0;border:none;color:transparent}.container.best{aspect-ratio:calc(var(--js-aspect-ratio-container) * 2)}.container.none{display:none}.container.rest{opacity:var(--js-opacity-rest)}.container.mid{transform:none}.container.best.mid.down .top,.container.start .top{pointer-events:none;opacity:0}.container.best.mid.up .bot,.container.end .bot{pointer-events:none;opacity:0;transform:translateY(102%)}.container.best.end .top,.container.best.mid.down .top,.container.best.mid.up .top{transform:translateY(8%)}.container.end .top{transform:translateY(102%)}.bot,.top{position:absolute;width:var(--js-width);height:auto;aspect-ratio:calc(var(--js-aspect-ratio-container) * 2);transition:opacity 1s,transform 1s;pointer-events:auto}.top{top:0}.bot{bottom:0}.bot .end,.bot .next,.top .prev,.top .start{content:'';position:absolute;left:50%;width:100%;background:var(--js-bg-color)}.bot .end,.top .start{height:calc(var(--js-height)/ 6);clip-path:polygon(10% 0%,90% 0%,90% 30%,65% 30%,100% 100%,0% 100%,35% 30%,10% 30%)}.bot .next,.top .prev{height:calc(var(--js-height)/ 4);clip-path:polygon(50% 0%,100% 60%,65% 60%,100% 100%,0% 100%,35% 60%,0% 60%)}.top .prev,.top .start{transform:translateX(-50%)}.bot .end,.bot .next{transform:translateX(-50%) rotateX(180deg)}.top .start{top:0}.top .prev{top:calc((var(--js-height)/ 6) + 10%)}.bot .next{bottom:calc((var(--js-height)/ 6) + 10%)}.bot .end{bottom:0}
|
package/dist/jump-scroll.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! jump-scroll@0.
|
|
2
|
-
class t extends HTMLElement{#t=null;#e=null;#s=null;#i=!0;#r=!1;#o=0;#n=0;#a="";#l=null;#c=null;#h=null;#p=null;#d=null;#u=null;#g=null;#b=!1;#v=!1;#m=0;static#T=800;static#w=15;static#I=["target"];static#f={target:"section",display:"best"};static get observedAttributes(){return[...t.#I,"display","colormap"]}static getNumber(t){return parseFloat(t.replace(/[^.+\-\d]+/,""))}constructor(){super(),this.attachShadow({mode:"open"}),this.targetIntersection=this.targetIntersection.bind(this),this.controlIntersection=this.controlIntersection.bind(this),this.resizeHandler=this.resizeHandler.bind(this),this.setup=this.setup.bind(this),this.clickTop=this.clickTop.bind(this),this.clickBottom=this.clickBottom.bind(this),this.clickNext=this.clickNext.bind(this),this.clickPrev=this.clickPrev.bind(this),this.createTargetProperties()}createTargetProperties(){t.#I.forEach((e=>{Object.defineProperty(this,e,{get(){return this.hasAttribute(e)?this.getAttribute(e):t.#f[e]},set(t){t?this.setAttribute(e,t):this.removeAttribute(e),this.updateTargetMap(t)}})}))}get display(){const e="display";return this.hasAttribute(e)?this.getAttribute(e):t.#f[e]}set display(t){const e="display",s=["both","best"];this.#g&&this.#g.classList.remove(...s.concat("up","down")),s.includes(t)?(this.setAttribute(e,t),this.#y(),this.#k(),this.#g&&this.#g.classList.add(t)):this.removeAttribute(e)}get colormap(){let t="";const e="colormap";return this.hasAttribute(e)&&(t=this.getAttribute(e)),t}set colormap(t){if(null===this.#g)return;this.#u&&this.#u.clear(),this.#u=null;const e="colormap",s=t&&t.split(";");if(s&&s.length>0&&s[0].includes("@")){this.setAttribute(e,t),this.#u=new Map;for(const t of s){let[e,s]=t.replace(/\s/,"").split("@");s.startsWith("--")&&(s=`var(${s})`),document.querySelectorAll(e).forEach((t=>{this.#u.set(t,s)}))}}else this.removeAttribute(e)}get currentTarget(){return this.#p}set currentTarget(t){this.#d.has(t)&&(this.#p=t)}update(t){const e=[t],s=["mid","start","end","rest","up","down"];null!==this.#l&&s.push("none"),"best"===this.display&&"mid"===t&&(this.#i?e.push("down"):e.push("up")),this.#g.classList.remove(...s),this.#g.classList.add(...e),setTimeout((()=>{this.#g.classList.add("rest")}),500)}#O(e,s){const i=this.#d.get(this.#p);if(i[e]){const r=i[e],o=this.#d.get(r),n=Math.round(o.lastTop);this.#p=r,this.#p.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),setTimeout((()=>{n===Math.round(o.lastTop)&&(s(n)?this.#O(e,s):window.scrollBy({top:n,behavior:"smooth"}))}),16.67*t.#w)}else this.#p.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"})}#j(t="start"){this.#p="start"===t?this.#l:this.#c,this.#p.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.update(t)}clickTop(){this.#j("start")}clickBottom(){this.#j("end")}clickNext(){this.#O("next",(t=>t<window.innerHeight))}clickPrev(){this.#O("prev",(t=>t>0))}updateTargetMap(e,s){if(!t.#I.includes(e)||!this.#b)return;let i,r;this.#l=null,this.#c=null,this.#h=null,this.#p=null,this.#d?this.#d.clear():this.#d=new Map;const o=[];if(document.querySelectorAll(this[e]).forEach((t=>{for(i=t.getBoundingClientRect(),r=0;r<o.length&&!(i.top<o[r].top);r++);(0===r||r>0&&o[r-1].top!==i.top)&&o.splice(r,0,{top:i.top,bot:i.bottom,el:t}),"function"==typeof s&&s(t)})),o.length>0){this.#l=o[0].el,this.#c=o[o.length-1].el,this.#h=new WeakMap([[this.#l,{pos:"start",down:!0}],[this.#c,{pos:"end",down:!1}]]);let t=0,e=0;const s=window.innerHeight;for(r=0;r<o.length;r++)0>o[r].top&&(e=o[r].bot<s?1:0,t=r+e<o.length?r+e:r),this.#d.set(o[r].el,{index:r,prev:r>0?o[r-1].el:null,next:r<o.length-1?o[r+1].el:null});this.#p=o[t].el,0===t?this.update("start"):t===o.length-1?this.update("end"):this.update("mid")}}targetIntersection(t){const e=t=>{const e=this.#d.get(t.target);t.isIntersecting&&t.intersectionRatio>=.95?e.lastTop?e.lastTop<t.boundingClientRect.top&&(e.lastTop=t.boundingClientRect.top):e.lastTop=t.boundingClientRect.top:t.isIntersecting||(e.lastTop=void 0)};let s,i;const r=(t,e,s,i)=>{let r=t;const o=s.target===e&&s||i.target===e&&i;return o&&(r?o.intersectionRatio<r.intersectionRatio&&(r=o):r=o),r},o=.49,n=t.sort(((t,o)=>{const n=t.isIntersecting&&o.isIntersecting;let a=t.isIntersecting?-1:o.isIntersecting?1:0;return s=r(s,this.#l,t,o),i=r(i,this.#c,t,o),e(t),e(o),n&&(a=o.intersectionRatio-t.intersectionRatio),a}))[0];if(n.isIntersecting){const t=this.#d.get(this.#p),e=this.#h.has(n.target),r=this.#d.get(n.target),a=n.boundingClientRect.top,l=n.intersectionRatio,c=n.target,h=e?0:o,{pos:p,down:d}=this.#h.get(c)??{pos:"mid",down:void 0===r.lastTop?this.#i:a<r.lastTop};if(r.lastTop=a,"mid"!==p)this.#r=l>o&&p;else if(this.#r){const t="start"===this.#r?s:i;t&&t.intersectionRatio<=o&&(this.#r=!1)}if(!this.#r||"mid"!==p){(this.#i?r.index>t.index:r.index<t.index)&&l>h&&(this.#p=c),this.update(p),this.#i=d}this.#r&&n.intersectionRatio>=.98&&(this.#p=c)}else n.intersectionRatio<=o&&(this.#d.get(n.target).lastTop=void 0)}controlIntersection(t,e){if(this.#u&&!this.#v){const s=e.filter((t=>t.isIntersecting));if(s.length>0){const e=s[0],i=this.#u.get(e.target);this.#n++,this.#a=t,this.#o=this.#n,i?this.#g.style.setProperty("--js-bg-color",i):(this.#g.style.removeProperty("--js-bg-color"),this.#n=0)}else{this.#n--;const e=Math.abs(this.#o-this.#n);(t!==this.#a||e%2&&this.#o<3)&&(this.#g.style.removeProperty("--js-bg-color"),this.#n=0)}}}#k(){if(!this.#d)return;const e=window.innerHeight,s=this.offsetHeight,i=e-s,r=Math.abs(s-2),o=t.getNumber(window.getComputedStyle(this).bottom),n=e-o-2;this.#t=new IntersectionObserver(this.targetIntersection,{threshold:[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]}),this.#e=new IntersectionObserver(this.controlIntersection.bind(null,"top"),{threshold:0,rootMargin:`-${i}px 0px -${r}px 0px`}),this.#s=new IntersectionObserver(this.controlIntersection.bind(null,"bot"),{threshold:0,rootMargin:`-${n}px 0px -${o}px 0px`});const a=this.#d.keys();for(const t of a)this.#t.observe(t);const l=this.#u.keys();for(const t of l)this.#e.observe(t),this.#s.observe(t)}#y(){this.#t&&this.#t.disconnect(),this.#e&&this.#e.disconnect(),this.#s&&this.#s.disconnect(),this.#t=null,this.#e=null,this.#s=null}resizeHandler(){this.#v||(this.#v=!0,setTimeout((()=>{let t=!1;const e=window.innerWidth;e!==this.#m&&(e>this.#m&&(t=!0),this.#m=e),this.setup(!1,t),this.#v=!1}),t.#T))}#C(){this.#v=!1,window.addEventListener("resize",this.resizeHandler)}#x(){window.removeEventListener("resize",this.resizeHandler),this.#v=!1}setup(e=!0,s=!0){this.#b?this.teardown(e,s):this.#m=window.innerWidth,this.#b=!0,s&&t.#I.forEach((t=>{this.updateTargetMap(t)})),this.#k(),e&&this.#C()}teardown(t=!0,e=!0){t&&this.#x(),this.#y(),e&&(this.#l=null,this.#c=null,this.#h=null,this.#p=null,this.#d&&this.#d.clear(),this.#d=null),this.#b=!1}connectedCallback(){"complete"!==document.readyState?window.addEventListener("load",(()=>{this.setup()}),{once:!0}):this.setup();const{shadowRoot:t}=this;t.innerHTML='<style>:host{--js-width:3em;--js-aspect-ratio:0.18;--js-height:calc(var(--js-width) * (1 / var(--js-aspect-ratio)));--js-bg-color:black;--js-color:white;--js-opacity-full:0.7;--js-opacity-rest:0.3;--js-attach-right:1rem;--js-attach-bottom:1rem;position:fixed;bottom:var(--js-attach-bottom);right:var(--js-attach-right);color:var(--js-color)}.container{display:block;transition:opacity 1s;opacity:var(--js-opacity-full);width:var(--js-width);height:auto;aspect-ratio:var(--js-aspect-ratio)}.container.best{aspect-ratio:calc(var(--js-aspect-ratio) * 2)}.container.none{display:none}.container.rest{opacity:var(--js-opacity-rest)}.container.mid{transform:none}.container.best.mid.down .top,.container.start .top{pointer-events:none;opacity:0}.container.best.mid.up .bot,.container.end .bot{pointer-events:none;opacity:0;transform:translateY(102%)}.container.best.end .top,.container.best.mid.down .top,.container.best.mid.up .top{transform:none}.container.end .top{transform:translateY(102%)}.bot,.top{position:absolute;width:var(--js-width);height:auto;aspect-ratio:1/2;transition:opacity 1s,transform 1s;pointer-events:auto}.top{top:0}.bot{bottom:0}.bot .end,.bot .next,.top .prev,.top .start{content:\'\';position:absolute;left:50%;width:100%;background:var(--js-bg-color)}.bot .end,.top .start{height:calc(var(--js-height)/ 6);clip-path:polygon(10% 0%,90% 0%,90% 30%,65% 30%,100% 100%,0% 100%,35% 30%,10% 30%)}.bot .next,.top .prev{height:calc(var(--js-height)/ 4);clip-path:polygon(50% 0%,100% 60%,65% 60%,100% 100%,0% 100%,35% 60%,0% 60%)}.top .prev,.top .start{transform:translateX(-50%)}.bot .end,.bot .next{transform:translateX(-50%) rotateX(180deg)}.top .start{top:0}.top .prev{top:calc((var(--js-height)/ 6) + 10%)}.bot .next{bottom:calc((var(--js-height)/ 6) + 10%)}.bot .end{bottom:0}</style><div class="container none"><div class="top"><div class="start"></div><div class="prev"></div></div><div class="bot"><div class="next"></div><div class="end"></div></div></div>',this.#g=t.querySelector(".container"),this.display=this.display,this.colormap=this.colormap,t.querySelector(".top .start").addEventListener("click",this.clickTop),t.querySelector(".bot .end").addEventListener("click",this.clickBottom),t.querySelector(".top .prev").addEventListener("click",this.clickPrev),t.querySelector(".bot .next").addEventListener("click",this.clickNext)}disconnectedCallback(){this.#g=null,this.shadowRoot.querySelector(".top .start").removeEventListener("click",this.clickTop),this.shadowRoot.querySelector(".bot .end").removeEventListener("click",this.clickBottom),this.shadowRoot.querySelector(".top. .prev").removeEventListener("click",this.clickPrev),this.shadowRoot.querySelector(".bot .next").removeEventListener("click",this.clickNext),this.teardown()}attributeChangedCallback(t,e,s){s!==e&&(this[t]=this.getAttribute(t))}}customElements.define("jump-scroll",t);
|
|
1
|
+
/*! jump-scroll@0.6.0-rc.02, Copyright (c) 2023 Alex Grant (@localnerve), LocalNerve LLC, BSD-3-Clause */
|
|
2
|
+
class t extends HTMLElement{#t=null;#e=null;#s=null;#r=!0;#i=!1;#o=0;#n=0;#a="";#l=null;#c=null;#h=null;#p=null;#d=null;#u=null;#g=null;#b=!1;#v=!1;#m=0;static#T=800;static#f=15;static#w=["target"];static#y={target:"section",display:"best"};static get observedAttributes(){return[...t.#w,"display","colormap"]}static getNumber(t){return parseFloat(t.replace(/[^.+\-\d]+/,""))}constructor(){super(),this.attachShadow({mode:"open"}),this.targetIntersection=this.targetIntersection.bind(this),this.controlIntersection=this.controlIntersection.bind(this),this.resizeHandler=this.resizeHandler.bind(this),this.setup=this.setup.bind(this),this.clickTop=this.clickTop.bind(this),this.clickBottom=this.clickBottom.bind(this),this.clickNext=this.clickNext.bind(this),this.clickPrev=this.clickPrev.bind(this),this.createTargetProperties()}createTargetProperties(){t.#w.forEach((e=>{Object.defineProperty(this,e,{get(){return this.hasAttribute(e)?this.getAttribute(e):t.#y[e]},set(t){t?this.setAttribute(e,t):this.removeAttribute(e),this.updateTargetMap(t)}})}))}get display(){const e="display";return this.hasAttribute(e)?this.getAttribute(e):t.#y[e]}set display(t){const e="display",s=["both","best"];this.#g&&this.#g.classList.remove(...s.concat("up","down")),s.includes(t)?(this.setAttribute(e,t),this.#I(),this.#k(),this.#g&&this.#g.classList.add(t)):this.removeAttribute(e)}get colormap(){let t="";const e="colormap";return this.hasAttribute(e)&&(t=this.getAttribute(e)),t}set colormap(t){if(null===this.#g)return;this.#u&&this.#u.clear(),this.#u=null;const e="colormap",s=t&&t.split(";");if(s&&s.length>0&&s[0].includes("@")){this.setAttribute(e,t),this.#u=new Map;for(const t of s){let[e,s]=t.replace(/\s/,"").split("@");s.startsWith("--")&&(s=`var(${s})`),document.querySelectorAll(e).forEach((t=>{this.#u.set(t,s)}))}}else this.removeAttribute(e)}get currentTarget(){return this.#p}set currentTarget(t){this.#d.has(t)&&(this.#p=t,this.#S())}update(t){const e=[t],s=["mid","start","end","rest","up","down"];null!==this.#l&&s.push("none"),"best"===this.display&&"mid"===t&&(this.#r?e.push("down"):e.push("up")),this.#g.classList.remove(...s),this.#g.classList.add(...e),setTimeout((()=>{this.#g.classList.add("rest")}),500)}#A(e,s){const r=this.#d.get(this.#p);if(r[e]){const i=r[e],o=this.#d.get(i),n=Math.round(o.lastTop);this.#p=i,this.#p.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.#S(),setTimeout((()=>{n===Math.round(o.lastTop)&&(s(n)?this.#A(e,s):window.scrollBy({top:n,behavior:"smooth"}))}),16.67*t.#f)}else this.#p.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"})}#x(t="start"){this.#p="start"===t?this.#l:this.#c,this.#p.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.#S(),this.update(t)}clickTop(t){t.preventDefault(),this.#x("start")}clickBottom(t){t.preventDefault(),this.#x("end")}clickNext(t){t.preventDefault(),this.#A("next",(t=>t<window.innerHeight))}clickPrev(t){t.preventDefault(),this.#A("prev",(t=>t>0))}#j(){if(!this.#g||!this.#l||!this.#d)return;const t=this.#l.parentElement;if(t){let e;if(t.id)e=t.id;else{const s=new Uint8Array(10);e=`js-${btoa(crypto.getRandomValues(s))}`,t.id=e}this.#g.setAttribute("aria-controls",e)}if(this.#d){const t=this.#d.size-1;this.#g.setAttribute("aria-valuemax",t>0?t:1)}}#S(){this.#g&&this.#d&&this.#g.setAttribute("aria-valuenow",this.#d.get(this.#p).index)}updateTargetMap(e,s){if(!t.#w.includes(e)||!this.#b)return;let r,i;this.#l=null,this.#c=null,this.#h=null,this.#p=null,this.#d?this.#d.clear():this.#d=new Map;const o=[];if(document.querySelectorAll(this[e]).forEach((t=>{for(r=t.getBoundingClientRect(),i=0;i<o.length&&!(r.top<o[i].top);i++);(0===i||i>0&&o[i-1].top!==r.top)&&o.splice(i,0,{top:r.top,bot:r.bottom,el:t}),"function"==typeof s&&s(t)})),o.length>0){this.#l=o[0].el,this.#c=o[o.length-1].el,this.#h=new WeakMap([[this.#l,{pos:"start",down:!0}],[this.#c,{pos:"end",down:!1}]]);let t=0,e=0;const s=window.innerHeight;for(i=0;i<o.length;i++)0>o[i].top&&(e=o[i].bot<s?1:0,t=i+e<o.length?i+e:i),this.#d.set(o[i].el,{index:i,prev:i>0?o[i-1].el:null,next:i<o.length-1?o[i+1].el:null});this.#p=o[t].el,this.#S(),0===t?this.update("start"):t===o.length-1?this.update("end"):this.update("mid")}}targetIntersection(t){const e=t=>{const e=this.#d.get(t.target);t.isIntersecting&&t.intersectionRatio>=.95?e.lastTop?e.lastTop<t.boundingClientRect.top&&(e.lastTop=t.boundingClientRect.top):e.lastTop=t.boundingClientRect.top:t.isIntersecting||(e.lastTop=void 0)};let s,r;const i=(t,e,s,r)=>{let i=t;const o=s.target===e&&s||r.target===e&&r;return o&&(i?o.intersectionRatio<i.intersectionRatio&&(i=o):i=o),i},o=.49,n=t.sort(((t,o)=>{const n=t.isIntersecting&&o.isIntersecting;let a=t.isIntersecting?-1:o.isIntersecting?1:0;return s=i(s,this.#l,t,o),r=i(r,this.#c,t,o),e(t),e(o),n&&(a=o.intersectionRatio-t.intersectionRatio),a}))[0];if(n.isIntersecting){const t=this.#d.get(this.#p),e=this.#h.has(n.target),i=this.#d.get(n.target),a=n.boundingClientRect.top,l=n.intersectionRatio,c=n.target,h=e?0:o,{pos:p,down:d}=this.#h.get(c)??{pos:"mid",down:void 0===i.lastTop?this.#r:a<i.lastTop};if(i.lastTop=a,"mid"!==p)this.#i=l>o&&p;else if(this.#i){const t="start"===this.#i?s:r;t&&t.intersectionRatio<=o&&(this.#i=!1)}if(!this.#i||"mid"!==p){(this.#r?i.index>t.index:i.index<t.index)&&l>h&&(this.#p=c,this.#S()),this.update(p),this.#r=d}this.#i&&n.intersectionRatio>=.98&&(this.#p=c,this.#S())}else n.intersectionRatio<=o&&(this.#d.get(n.target).lastTop=void 0)}controlIntersection(t,e){if(this.#u&&!this.#v){const s=e.filter((t=>t.isIntersecting));if(s.length>0){const e=s[0],r=this.#u.get(e.target);this.#n++,this.#a=t,this.#o=this.#n,r?this.#g.style.setProperty("--js-bg-color",r):(this.#g.style.removeProperty("--js-bg-color"),this.#n=0)}else{this.#n--;const e=Math.abs(this.#o-this.#n);(t!==this.#a||e%2&&this.#o<3)&&(this.#g.style.removeProperty("--js-bg-color"),this.#n=0)}}}#k(){if(!this.#d)return;const e=window.innerHeight,s=this.offsetHeight,r=e-s,i=Math.abs(s-2),o=t.getNumber(window.getComputedStyle(this).bottom),n=e-o-2;this.#t=new IntersectionObserver(this.targetIntersection,{threshold:[.1,.2,.3,.4,.5,.6,.7,.8,.9,1]}),this.#e=new IntersectionObserver(this.controlIntersection.bind(null,"top"),{threshold:0,rootMargin:`-${r}px 0px -${i}px 0px`}),this.#s=new IntersectionObserver(this.controlIntersection.bind(null,"bot"),{threshold:0,rootMargin:`-${n}px 0px -${o}px 0px`});const a=this.#d.keys();for(const t of a)this.#t.observe(t);const l=this.#u.keys();for(const t of l)this.#e.observe(t),this.#s.observe(t)}#I(){this.#t&&this.#t.disconnect(),this.#e&&this.#e.disconnect(),this.#s&&this.#s.disconnect(),this.#t=null,this.#e=null,this.#s=null}resizeHandler(){this.#v||(this.#v=!0,setTimeout((()=>{let t=!1;const e=window.innerWidth;e!==this.#m&&(e>this.#m&&(t=!0),this.#m=e),this.setup(!1,t),this.#v=!1}),t.#T))}#O(){this.#v=!1,window.addEventListener("resize",this.resizeHandler)}#C(){window.removeEventListener("resize",this.resizeHandler),this.#v=!1}setup(e=!0,s=!0){let r=!1;this.#b?this.teardown(e,s):r=!0,this.#b=!0,s&&t.#w.forEach((t=>{this.updateTargetMap(t)})),r&&(this.#m=window.innerWidth,this.#j()),this.#k(),e&&this.#O()}teardown(t=!0,e=!0){t&&this.#C(),this.#I(),e&&(this.#l=null,this.#c=null,this.#h=null,this.#p=null,this.#d&&this.#d.clear(),this.#d=null),this.#b=!1}connectedCallback(){"complete"!==document.readyState?window.addEventListener("load",(()=>{this.setup()}),{once:!0}):this.setup();const{shadowRoot:t}=this;t.innerHTML='<style>:host{--js-width:3em;--js-aspect-ratio:0.17;--js-aspect-ratio-container:calc(var(--js-aspect-ratio) * (1 + var(--js-aspect-ratio)));--js-height:calc(var(--js-width) * (1 / var(--js-aspect-ratio)));--js-bg-color:black;--js-color:white;--js-opacity-full:0.7;--js-opacity-rest:0.3;--js-attach-right:1rem;--js-attach-bottom:1rem;position:fixed;bottom:var(--js-attach-bottom);right:var(--js-attach-right);color:var(--js-color)}.container{display:block;transition:opacity 1s;opacity:var(--js-opacity-full);width:var(--js-width);height:auto;aspect-ratio:var(--js-aspect-ratio-container)}.container button{padding:0;margin:0;border:none;color:transparent}.container.best{aspect-ratio:calc(var(--js-aspect-ratio-container) * 2)}.container.none{display:none}.container.rest{opacity:var(--js-opacity-rest)}.container.mid{transform:none}.container.best.mid.down .top,.container.start .top{pointer-events:none;opacity:0}.container.best.mid.up .bot,.container.end .bot{pointer-events:none;opacity:0;transform:translateY(102%)}.container.best.end .top,.container.best.mid.down .top,.container.best.mid.up .top{transform:translateY(8%)}.container.end .top{transform:translateY(102%)}.bot,.top{position:absolute;width:var(--js-width);height:auto;aspect-ratio:calc(var(--js-aspect-ratio-container) * 2);transition:opacity 1s,transform 1s;pointer-events:auto}.top{top:0}.bot{bottom:0}.bot .end,.bot .next,.top .prev,.top .start{content:\'\';position:absolute;left:50%;width:100%;background:var(--js-bg-color)}.bot .end,.top .start{height:calc(var(--js-height)/ 6);clip-path:polygon(10% 0%,90% 0%,90% 30%,65% 30%,100% 100%,0% 100%,35% 30%,10% 30%)}.bot .next,.top .prev{height:calc(var(--js-height)/ 4);clip-path:polygon(50% 0%,100% 60%,65% 60%,100% 100%,0% 100%,35% 60%,0% 60%)}.top .prev,.top .start{transform:translateX(-50%)}.bot .end,.bot .next{transform:translateX(-50%) rotateX(180deg)}.top .start{top:0}.top .prev{top:calc((var(--js-height)/ 6) + 10%)}.bot .next{bottom:calc((var(--js-height)/ 6) + 10%)}.bot .end{bottom:0}</style><div role="scrollbar" aria-controls="body" aria-valuenow="0" aria-valuemax="1" aria-valuemin="0" class="container none"><div class="top"><button type="button" tabindex="-1" class="start">Scroll to start</button><button type="button" tabindex="-1" class="prev">Scroll to previous</button></div><div class="bot"><button type="button" tabindex="-1" class="next">Scroll to next</button><button type="button" tabindex="-1" class="end">Scroll to end</button></div></div>',this.#g=t.querySelector(".container"),this.display=this.display,this.colormap=this.colormap,t.querySelector(".top .start").addEventListener("click",this.clickTop),t.querySelector(".bot .end").addEventListener("click",this.clickBottom),t.querySelector(".top .prev").addEventListener("click",this.clickPrev),t.querySelector(".bot .next").addEventListener("click",this.clickNext)}disconnectedCallback(){this.#g=null,this.shadowRoot.querySelector(".top .start").removeEventListener("click",this.clickTop),this.shadowRoot.querySelector(".bot .end").removeEventListener("click",this.clickBottom),this.shadowRoot.querySelector(".top. .prev").removeEventListener("click",this.clickPrev),this.shadowRoot.querySelector(".bot .next").removeEventListener("click",this.clickNext),this.teardown()}attributeChangedCallback(t,e,s){s!==e&&(this[t]=this.getAttribute(t))}}customElements.define("jump-scroll",t);
|