@localnerve/jump-scroll 0.3.0 → 0.3.1
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/index.js +1 -1
- package/dist/jump-scroll.js +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -16,7 +16,7 @@ const thisDir = url.fileURLToPath(new URL('.', import.meta.url));
|
|
|
16
16
|
*
|
|
17
17
|
* @returns {String} The utf8 css file content
|
|
18
18
|
*/
|
|
19
|
-
export async function
|
|
19
|
+
export async function getJumpScrollCssText () {
|
|
20
20
|
return await fs.readFile(path.join(thisDir, 'jump-scroll.css'), {
|
|
21
21
|
encoding: 'utf8'
|
|
22
22
|
});
|
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=null;#r=null;#o=null;#n=!0;#a=!1;static#c=["target"];static#l={target:"section",display:"both"};static get observedAttributes(){return[...t.#c,"display"]}constructor(){super(),this.attachShadow({mode:"open"}),this.intersectionCallback=this.intersectionCallback.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.#c.forEach((e=>{Object.defineProperty(this,e,{get(){return this.hasAttribute(e)?this.getAttribute(e):t.#l[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.#l[e]}set display(t){const e="display",s=["both","best"],i=this.#o??{classList:{remove:()=>{},add:()=>{}}};i.classList.remove(...s.concat("up","down")),s.includes(t)?(this.setAttribute(e,t),i.classList.add(t)):this.removeAttribute(e)}update(t){const e=[t];"best"===this.display&&"mid"===t&&(this.#n?e.push("down"):e.push("up")),this.#o.classList.remove(
|
|
2
|
+
class t extends HTMLElement{#t=null;#e=null;#s=null;#i=null;#r=null;#o=null;#n=!0;#a=!1;static#c=["target"];static#l={target:"section",display:"both"};static get observedAttributes(){return[...t.#c,"display"]}constructor(){super(),this.attachShadow({mode:"open"}),this.intersectionCallback=this.intersectionCallback.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.#c.forEach((e=>{Object.defineProperty(this,e,{get(){return this.hasAttribute(e)?this.getAttribute(e):t.#l[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.#l[e]}set display(t){const e="display",s=["both","best"],i=this.#o??{classList:{remove:()=>{},add:()=>{}}};i.classList.remove(...s.concat("up","down")),s.includes(t)?(this.setAttribute(e,t),i.classList.add(t)):this.removeAttribute(e)}update(t){const e=[t],s=["mid","start","end","rest","up","down"];null!==this.#e&&s.push("none"),"best"===this.display&&"mid"===t&&(this.#n?e.push("down"):e.push("up")),this.#o.classList.remove(...s),this.#o.classList.add(...e),setTimeout((()=>{this.#o.classList.add("rest")}),500)}clickTop(){this.#e.scrollIntoView(),this.#i=this.#e,this.update("start")}clickBottom(){this.#s.scrollIntoView(),this.#i=this.#s,this.update("end")}clickNext(){const t=this.#r.get(this.#i);t&&t.next&&(t.next.scrollIntoView({block:t.next===this.#s?"start":"center",behavior:"smooth"}),this.#i=t.next)}clickPrev(){const t=this.#r.get(this.#i);t&&t.prev&&(t.prev.scrollIntoView({block:t.prev===this.#e?"start":"center",behavior:"smooth"}),this.#i=t.prev)}updateTargetMap(e,s){if(!t.#c.includes(e)||!this.#a)return;let i,r;this.#e=null,this.#s=null,this.#i=null,this.#r=new WeakMap;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.#e=o[0].el,this.#s=o[o.length-1].el;let t=0;for(r=0;r<o.length;r++)0>o[r].top&&(t=r+1),this.#r.set(o[r].el,{prev:r>0?o[r-1].el:null,next:r<o.length-1?o[r+1].el:null});this.#i=o[t].el,0===t?this.update("start"):t===o.length-1?this.update("end"):this.update("mid")}}intersectionCallback(t){const e=t[0];if(e.isIntersecting){this.#n=e.boundingClientRect.top>=0;const t=e.target;let s="mid";t===this.#e?s="start":t===this.#s&&(s="end"),this.#i=t,this.update(s)}}setup(){this.#a=!0,this.#t=new IntersectionObserver(this.intersectionCallback,{threshold:.5}),t.#c.forEach((t=>{this.updateTargetMap(t,(t=>{this.#t.observe(t)}))}))}teardown(){this.#t&&this.#t.disconnect(),this.#t=null,this.#e=null,this.#s=null,this.#i=null,this.#o=null,this.#r=null,this.#a=!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-height:8em;--js-bg-color:black;--js-color:white;--js-opacity-full:0.7;--js-opacity-rest:0.3;position:fixed;bottom:1rem;right:.8rem;width:var(--js-width);height:var(--js-height);color:var(--js-color)}.container{display:block;transition:opacity 1s;opacity:var(--js-opacity-full)}.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.mid.down .top,.container.best.mid.up .top,.container.end .top{transform:translateY(102%)}.bot,.top{position:absolute;width:100%;height:calc(var(--js-height)/ 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.#o=t.querySelector(".container"),this.display=this.display,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.#o=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);
|