@localnerve/jump-scroll 0.4.4 → 0.4.5
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.js +1 -1
- package/package.json +1 -1
package/dist/jump-scroll.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! jump-scroll, Copyright (c) 2023 Alex Grant (@localnerve), LocalNerve LLC, BSD-3-Clause */
|
|
2
|
-
class t extends HTMLElement{#t=null;#e=null;#s=null;#i=!0;#r=!1;#o=null;#n=null;#a=null;#l=null;#c=null;#h=null;#p=null;#d=!1;#g=!1;static#u=800;static#b=["target"];static#v={target:"section",display:"both"};static get observedAttributes(){return[...t.#b,"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.#b.forEach((e=>{Object.defineProperty(this,e,{get(){return this.hasAttribute(e)?this.getAttribute(e):t.#v[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.#v[e]}set display(t){const e="display",s=["both","best"];this.#p&&this.#p.classList.remove(...s.concat("up","down")),s.includes(t)?(this.setAttribute(e,t),this.#m(),this.#T(),this.#p&&this.#p.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.#p)return;const e="colormap",s=t&&t.split(";");if(s&&s.length>0&&s[0].includes(":")){this.setAttribute(e,t),this.#h=new Map;for(const t of s){let[e,s]=t.replace(/\s/,"").split(":");s.startsWith("--")&&(s=`var(${s})`),this.#h.set(parseInt(e,10),s)}}else this.removeAttribute(e),this.#h=null}update(t){const e=[t],s=["mid","start","end","rest","up","down"];null!==this.#o&&s.push("none"),"best"===this.display&&"mid"===t&&(this.#i?e.push("down"):e.push("up")),this.#p.classList.remove(...s),this.#p.classList.add(...e),setTimeout((()=>{this.#p.classList.add("rest")}),500)}clickTop(){this.#l=this.#o,this.#o.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.update("start")}clickBottom(){this.#l=this.#n,this.#n.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.update("end")}clickNext(){const t=this.#c.get(this.#l);t&&t.next&&(this.#l=t.next,t.next.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}))}clickPrev(){const t=this.#c.get(this.#l);t&&t.prev&&(this.#l=t.prev,t.prev.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}))}updateTargetMap(e,s){if(!t.#b.includes(e)||!this.#d)return;let i,r;this.#o=null,this.#n=null,this.#a=null,this.#l=null,this.#c?this.#c.clear():this.#c=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++);o.splice(r,0,{top:i.top,el:t}),"function"==typeof s&&s(t)})),o.length>0){this.#o=o[0].el,this.#n=o[o.length-1].el,this.#a=new WeakMap([[this.#o,{pos:"start",down:!0}],[this.#n,{pos:"end",down:!1}]]);let t=0;for(r=0;r<o.length;r++)0>o[r].top&&(t=r+1),this.#c.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.#l=o[t].el,0===t?this.update("start"):t===o.length-1?this.update("end"):this.update("mid")}}targetIntersection(t){let e,s;const i=t.sort(((t,i)=>{const r=t.isIntersecting&&i.isIntersecting;let o=t.isIntersecting?-1:i.isIntersecting?1:0;const n=t.target===this.#o&&t||i.target===this.#o&&i;n&&(e?n.intersectionRatio<e.intersectionRatio&&(e=n):e=n);const a=t.target===this.#n&&t||i.target===this.#n&&i;if(a&&(s?a.intersectionRatio<s.intersectionRatio&&(s=a):s=a),r){const e=this.#c.get(t.target),s=this.#c.get(i.target);o=this.#i?s.index-e.index:e.index-s.index,o||(o=i.intersectionRatio-t.intersectionRatio)}return o}))[0];if(i.isIntersecting){const t=this.#c.get(this.#l),r=this.#a.has(i.target),o=this.#c.get(i.target),n=i.boundingClientRect.top,a=i.intersectionRatio,l=i.target,c=.49,h=r?0:c;let{pos:p,down:d}=this.#a.get(l)??{pos:"mid",down:void 0===o.lastTop?this.#i:n<o.lastTop};if("mid"!==p)this.#r=a>c&&p;else if(this.#r)return void("start"===this.#r?e&&e.intersectionRatio<=c&&(this.#r=!1):s&&s.intersectionRatio<=c&&(this.#r=!1));if((this.#i?o.index>t.index:o.index<t.index)&&a>h&&(this.#l=l),d!==this.#i){const t=this.#c.values();for(const e of t)e.lastTop=void 0}o.lastTop=n,this.update(p),this.#i=d}}controlIntersection(t){if(this.#h){const e=t.filter((t=>t.isIntersecting));if(e.length>0){const t=e[0],s=this.#c.get(t.target);if(s){const t=this.#h.get(s.index);t?this.#p.style.setProperty("--js-bg-color",t):this.#p.style.removeProperty("--js-bg-color")}}}}#T(){if(!this.#c)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,{threshold:0,rootMargin:`-${i}px 0px -${r}px 0px`}),this.#s=new IntersectionObserver(this.controlIntersection,{threshold:0,rootMargin:`-${n}px 0px -${o}px 0px`});const a=this.#c.keys();for(const t of a)this.#t.observe(t),this.#e.observe(t),this.#s.observe(t)}#m(){this.#t&&this.#t.disconnect(),this.#e&&this.#e.disconnect(),this.#s&&this.#s.disconnect(),this.#t=null,this.#e=null,this.#s=null
|
|
2
|
+
class t extends HTMLElement{#t=null;#e=null;#s=null;#i=!0;#r=!1;#o=null;#n=null;#a=null;#l=null;#c=null;#h=null;#p=null;#d=!1;#g=!1;static#u=800;static#b=["target"];static#v={target:"section",display:"both"};static get observedAttributes(){return[...t.#b,"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.#b.forEach((e=>{Object.defineProperty(this,e,{get(){return this.hasAttribute(e)?this.getAttribute(e):t.#v[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.#v[e]}set display(t){const e="display",s=["both","best"];this.#p&&this.#p.classList.remove(...s.concat("up","down")),s.includes(t)?(this.setAttribute(e,t),this.#m(),this.#T(),this.#p&&this.#p.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.#p)return;const e="colormap",s=t&&t.split(";");if(s&&s.length>0&&s[0].includes(":")){this.setAttribute(e,t),this.#h=new Map;for(const t of s){let[e,s]=t.replace(/\s/,"").split(":");s.startsWith("--")&&(s=`var(${s})`),this.#h.set(parseInt(e,10),s)}}else this.removeAttribute(e),this.#h=null}update(t){const e=[t],s=["mid","start","end","rest","up","down"];null!==this.#o&&s.push("none"),"best"===this.display&&"mid"===t&&(this.#i?e.push("down"):e.push("up")),this.#p.classList.remove(...s),this.#p.classList.add(...e),setTimeout((()=>{this.#p.classList.add("rest")}),500)}clickTop(){this.#l=this.#o,this.#o.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.update("start")}clickBottom(){this.#l=this.#n,this.#n.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.update("end")}clickNext(){const t=this.#c.get(this.#l);t&&t.next&&(this.#l=t.next,t.next.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}))}clickPrev(){const t=this.#c.get(this.#l);t&&t.prev&&(this.#l=t.prev,t.prev.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}))}updateTargetMap(e,s){if(!t.#b.includes(e)||!this.#d)return;let i,r;this.#o=null,this.#n=null,this.#a=null,this.#l=null,this.#c?this.#c.clear():this.#c=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++);o.splice(r,0,{top:i.top,el:t}),"function"==typeof s&&s(t)})),o.length>0){this.#o=o[0].el,this.#n=o[o.length-1].el,this.#a=new WeakMap([[this.#o,{pos:"start",down:!0}],[this.#n,{pos:"end",down:!1}]]);let t=0;for(r=0;r<o.length;r++)0>o[r].top&&(t=r+1),this.#c.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.#l=o[t].el,0===t?this.update("start"):t===o.length-1?this.update("end"):this.update("mid")}}targetIntersection(t){let e,s;const i=t.sort(((t,i)=>{const r=t.isIntersecting&&i.isIntersecting;let o=t.isIntersecting?-1:i.isIntersecting?1:0;const n=t.target===this.#o&&t||i.target===this.#o&&i;n&&(e?n.intersectionRatio<e.intersectionRatio&&(e=n):e=n);const a=t.target===this.#n&&t||i.target===this.#n&&i;if(a&&(s?a.intersectionRatio<s.intersectionRatio&&(s=a):s=a),r){const e=this.#c.get(t.target),s=this.#c.get(i.target);o=this.#i?s.index-e.index:e.index-s.index,o||(o=i.intersectionRatio-t.intersectionRatio)}return o}))[0];if(i.isIntersecting){const t=this.#c.get(this.#l),r=this.#a.has(i.target),o=this.#c.get(i.target),n=i.boundingClientRect.top,a=i.intersectionRatio,l=i.target,c=.49,h=r?0:c;let{pos:p,down:d}=this.#a.get(l)??{pos:"mid",down:void 0===o.lastTop?this.#i:n<o.lastTop};if("mid"!==p)this.#r=a>c&&p;else if(this.#r)return void("start"===this.#r?e&&e.intersectionRatio<=c&&(this.#r=!1):s&&s.intersectionRatio<=c&&(this.#r=!1));if((this.#i?o.index>t.index:o.index<t.index)&&a>h&&(this.#l=l),d!==this.#i){const t=this.#c.values();for(const e of t)e.lastTop=void 0}o.lastTop=n,this.update(p),this.#i=d}}controlIntersection(t){if(this.#h){const e=t.filter((t=>t.isIntersecting));if(e.length>0){const t=e[0],s=this.#c.get(t.target);if(s){const t=this.#h.get(s.index);t?this.#p.style.setProperty("--js-bg-color",t):this.#p.style.removeProperty("--js-bg-color")}}}}#T(){if(!this.#c)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,{threshold:0,rootMargin:`-${i}px 0px -${r}px 0px`}),this.#s=new IntersectionObserver(this.controlIntersection,{threshold:0,rootMargin:`-${n}px 0px -${o}px 0px`});const a=this.#c.keys();for(const t of a)this.#t.observe(t),this.#e.observe(t),this.#s.observe(t)}#m(){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.#g||(this.#g=!0,this.#m(),setTimeout((()=>{this.#T(),this.#g=!1}),t.#u))}#f(){this.#g=!1,window.addEventListener("resize",this.resizeHandler)}#w(){window.removeEventListener("resize",this.resizeHandler),this.#g=!1}setup(e=!0){this.#d&&this.teardown(),this.#d=!0,t.#b.forEach((t=>{this.updateTargetMap(t)})),this.#T(),e&&this.#f()}teardown(t=!0){t&&this.#w(),this.#m(),this.#o=null,this.#n=null,this.#a=null,this.#l=null,this.#c&&this.#c.clear(),this.#c=null,this.#d=!1}connectedCallback(){"complete"!==document.readyState?window.addEventListener("load",(()=>{this.setup()}),{once:!0}):this.setup();const{shadowRoot:t}=this;t.innerHTML='<style>:host{--js-width:2em;--js-aspect-ratio:0.25;--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:0.5rem;--js-attach-bottom:0.7rem;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(15% 5%,85% 5%,85% 30%,60% 30%,85% 95%,15% 95%,40% 30%,15% 30%)}.bot .next,.top .prev{height:calc(var(--js-height)/ 4);clip-path:polygon(50% 5%,85% 60%,60% 60%,85% 95%,15% 95%,40% 60%,15% 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.#p=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.#p=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);
|