@localnerve/jump-scroll 0.3.9 → 0.4.0
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/README.md +0 -1
- package/dist/jump-scroll.css +1 -1
- package/dist/jump-scroll.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,7 +26,6 @@ Provides a small scrolling control that allows the user to go to the top or bott
|
|
|
26
26
|
## Overridable CSS Variables
|
|
27
27
|
|
|
28
28
|
* `--js-width` - The overall width of the control. Defaults to 2em.
|
|
29
|
-
* `--js-height` - The overall height of the control. Defaults to 8em.
|
|
30
29
|
* `--js-bg-color` - The color of the control arrows. Defaults to black.
|
|
31
30
|
* `--js-opacity-full` - The opacity of the control arrows at attention. Defaults to 0.7.
|
|
32
31
|
* `--js-opacity-rest` - The opacity of the control arrows at rest. Defaults to 0.3.
|
package/dist/jump-scroll.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{--js-width:2em;--js-
|
|
1
|
+
:host{--js-width:2em;--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:1/4}.container.best{aspect-ratio:1/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}
|
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;#r=null;#
|
|
2
|
+
class t extends HTMLElement{#t=null;#e=null;#s=null;#i=!0;#r=null;#o=null;#n=null;#a=null;#l=null;#c=null;#h=null;#p=!1;#d=!1;static#u=800;static#g=["target"];static#b={target:"section",display:"both"};static get observedAttributes(){return[...t.#g,"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.#g.forEach((e=>{Object.defineProperty(this,e,{get(){return this.hasAttribute(e)?this.getAttribute(e):t.#b[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.#b[e]}set display(t){const e="display",s=["both","best"];this.#h&&this.#h.classList.remove(...s.concat("up","down")),s.includes(t)?(this.setAttribute(e,t),this.#v(),this.#m(),this.#h&&this.#h.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.#h)return;const e="colormap",s=t&&t.split(";");if(s&&s.length>0&&s[0].includes(":")){this.setAttribute(e,t),this.#c=new Map;for(const t of s){let[e,s]=t.replace(/\s/,"").split(":");s.startsWith("--")&&(s=`var(${s})`),this.#c.set(parseInt(e,10),s)}}else this.removeAttribute(e),this.#c=null}update(t){const e=[t],s=["mid","start","end","rest","up","down"];null!==this.#r&&s.push("none"),"best"===this.display&&"mid"===t&&(this.#i?e.push("down"):e.push("up")),this.#h.classList.remove(...s),this.#h.classList.add(...e),setTimeout((()=>{this.#h.classList.add("rest")}),500)}clickTop(){this.#a=this.#r,this.#r.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.update("start")}clickBottom(){this.#a=this.#o,this.#o.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.update("end")}clickNext(){const t=this.#l.get(this.#a);t&&t.next&&(this.#a=t.next,t.next.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}))}clickPrev(){const t=this.#l.get(this.#a);t&&t.prev&&(this.#a=t.prev,t.prev.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}))}updateTargetMap(e,s){if(!t.#g.includes(e)||!this.#p)return;let i,r;this.#r=null,this.#o=null,this.#n=null,this.#a=null,this.#l?this.#l.clear():this.#l=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.#r=o[0].el,this.#o=o[o.length-1].el,this.#n=new WeakMap([[this.#r,{pos:"start",down:!0}],[this.#o,{pos:"end",down:!1}]]);let t=0;for(r=0;r<o.length;r++)0>o[r].top&&(t=r+1),this.#l.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.#a=o[t].el,0===t?this.update("start"):t===o.length-1?this.update("end"):this.update("mid")}}targetIntersection(t){const e=t.sort(((t,e)=>{let s=t.isIntersecting?-1:e.isIntersecting?1:0;if(s){const i=this.#l.get(t.target),r=this.#l.get(e.target);s=this.#i?r.index-i.index:i.index-r.index,s||(s=e.intersectionRatio-t.intersectionRatio)}return s}))[0];if(e.isIntersecting){const t=this.#l.get(this.#a),s=this.#n.has(this.#a),i=this.#l.get(e.target),r=e.boundingClientRect.top,o=e.intersectionRatio,n=e.target,a=s?.9:.49;let{pos:l,down:c}=this.#n.get(n)??{pos:"mid",down:void 0===i.lastTop?this.#i:r<i.lastTop};if((this.#i?i.index>t.index:i.index<t.index)&&o>a&&(this.#a=n),c!==this.#i){const t=this.#l.values();for(const e of t)e.lastTop=void 0}i.lastTop=r,this.update(l),this.#i=c}}controlIntersection(t){if(this.#c){const e=t.filter((t=>t.isIntersecting));if(e&&e.length>0){const t=e[0],s=this.#l.get(t.target);if(s){const t=this.#c.get(s.index);t?this.#h.style.setProperty("--js-bg-color",t):this.#h.style.removeProperty("--js-bg-color")}}}}#m(){if(!this.#l)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:[.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.#l.keys();for(const t of a)this.#t.observe(t),this.#e.observe(t),this.#s.observe(t)}#v(){this.#t&&this.#t.disconnect(),this.#e&&this.#e.disconnect(),this.#s&&this.#s.disconnect(),this.#t=null,this.#e=null,this.#s=null,this.#i=!0}resizeHandler(){this.#d||(this.#d=!0,this.#v(),setTimeout((()=>{this.#m(),this.#d=!1}),t.#u))}#T(){window.addEventListener("resize",this.resizeHandler)}#w(){window.removeEventListener("resize",this.resizeHandler)}setup(){this.#p&&this.teardown(),this.#p=!0,t.#g.forEach((t=>{this.updateTargetMap(t)})),this.#m(),this.#T()}teardown(){this.#w(),this.#v(),this.#r=null,this.#o=null,this.#n=null,this.#a=null,this.#h=null,this.#l.clear(),this.#l=null,this.#c.clear(),this.#c=null,this.#p=!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-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:1/4}.container.best{aspect-ratio:1/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.#h=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.#h=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);
|