@localnerve/jump-scroll 0.5.1 → 0.5.3
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 +9 -9
- package/dist/jump-scroll.css +1 -1
- package/dist/jump-scroll.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,29 +15,29 @@ Provides a small scrolling control that allows the user to go to the top or bott
|
|
|
15
15
|
* `target` - *Required*. A selector to select all the elements to vertically "jump scroll" to in the page. Defaults to 'section'.
|
|
16
16
|
|
|
17
17
|
* `display` - "both" | "best"
|
|
18
|
-
**"
|
|
19
|
-
**"
|
|
18
|
+
**"best"** - *Default*. The control displays either [top, previous] OR [bottom, next] jump scrolling options. Which one is displayed depends on the position on the page and the direction of scrolling. If the user is in the middle of the page and scrolls, the control only displays the jump scroll options in the direction of the scroll. Less vertical space required.
|
|
19
|
+
**"both"** - The control displays both [top, previous] AND [bottom, next] jump scrolling options simulataneously. Larger footprint.
|
|
20
20
|
|
|
21
21
|
* `colormap` - *Optional*. A map of targets to colors. Changes the color of the jump-scroll control over specific elements.
|
|
22
22
|
**Format:** `selector@color[;selector@color]*`
|
|
23
|
-
**selector** - *string*. Must be a selector of DOM element(s). When a selected element crosses the vertical bounds of the `jump-scroll` control, the `js-bg-color` background will be changed to the color (or variable) provided.
|
|
24
|
-
**color** - *CssColor|CssCustomProperty*. A css color or a
|
|
23
|
+
**selector** - *string*. Must be a selector of DOM element(s). When a selected element crosses the vertical bounds of the `jump-scroll` control, the `js-bg-color` background will be changed to the color (or variable) provided.
|
|
24
|
+
**color** - *CssColor|CssCustomProperty*. A css color or a custom property (variable) of a color to use for the `js-bg-color` background of the control.
|
|
25
25
|
|
|
26
26
|
## Overridable CSS Variables
|
|
27
27
|
|
|
28
|
-
* `--js-width` - The overall width of the control. Defaults to
|
|
28
|
+
* `--js-width` - The overall width of the control. Defaults to 3em.
|
|
29
29
|
* `--js-bg-color` - The color of the control arrows. Defaults to black.
|
|
30
30
|
* `--js-opacity-full` - The opacity of the control arrows at attention. Defaults to 0.7.
|
|
31
31
|
* `--js-opacity-rest` - The opacity of the control arrows at rest. Defaults to 0.3.
|
|
32
|
-
* `--js-attach-right` - The distance from the fixed, right-edge attachment. Defaults to
|
|
33
|
-
* `--js-attach-bottom` - The distance form the fixed, bottom-edge attachment. Defaults to
|
|
32
|
+
* `--js-attach-right` - The distance from the fixed, right-edge attachment. Defaults to 1rem;
|
|
33
|
+
* `--js-attach-bottom` - The distance form the fixed, bottom-edge attachment. Defaults to 1rem;
|
|
34
34
|
|
|
35
35
|
## Usage Example
|
|
36
36
|
|
|
37
37
|
```html
|
|
38
|
-
<jump-scroll target="article" display="best"></jump-scroll>
|
|
38
|
+
<jump-scroll target="article" display="best" colormap="footer,article:nth-of-type(even)@--bg-color"></jump-scroll>
|
|
39
39
|
```
|
|
40
|
-
See [The reference implementation](index.html) for more detailed usage example.
|
|
40
|
+
See [The reference implementation](./index.html) for more detailed usage example.
|
|
41
41
|
|
|
42
42
|
## Non-browser Exports
|
|
43
43
|
|
package/dist/jump-scroll.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{--js-width:
|
|
1
|
+
: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}
|
package/dist/jump-scroll.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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=!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;static#m=800;static#T=15;static#I=["target"];static#
|
|
1
|
+
/*! jump-scroll@0.5.3, 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;static#m=800;static#T=15;static#I=["target"];static#w={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.#w[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.#w[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.#f(),this.#y(),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.#r?e.push("down"):e.push("up")),this.#g.classList.remove(...s),this.#g.classList.add(...e),setTimeout((()=>{this.#g.classList.add("rest")}),500)}#k(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"}),setTimeout((()=>{n===Math.round(o.lastTop)&&(s(n)?this.#k(e,s):window.scrollBy({top:n,behavior:"smooth"}))}),16.67*t.#T)}else this.#p.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"})}#C(t="start"){this.#p="start"===t?this.#l:this.#c,this.#p.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.update(t)}clickTop(){this.#C("start")}clickBottom(){this.#C("end")}clickNext(){this.#k("next",(t=>t<window.innerHeight))}clickPrev(){this.#k("prev",(t=>t>0))}updateTargetMap(e,s){if(!t.#I.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,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.update(p),this.#r=d}this.#i&&n.intersectionRatio>=.98&&(this.#p=c)}else n.intersectionRatio<=o&&(this.#d.get(n.target).lastTop=void 0)}controlIntersection(t,e){if(this.#u){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)}}}#y(){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`}),this.#n=0,this.#o=0;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)}#f(){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((()=>{this.setup(!1),this.#v=!1}),t.#m))}#O(){this.#v=!1,window.addEventListener("resize",this.resizeHandler)}#j(){window.removeEventListener("resize",this.resizeHandler),this.#v=!1}setup(e=!0){this.#b&&this.teardown(e),this.#b=!0,t.#I.forEach((t=>{this.updateTargetMap(t)})),this.#y(),e&&this.#O()}teardown(t=!0){t&&this.#j(),this.#f(),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);
|