@localnerve/jump-scroll 0.1.0 → 0.2.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/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! jump-scroll, Copyright (c) 2023 Alex Grant (@localnerve), LocalNerve LLC, BSD-3-Clause */
|
|
2
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["jump-scroll"]=e():t["jump-scroll"]=e()}(self,(()=>(()=>{
|
|
2
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["jump-scroll"]=e():t["jump-scroll"]=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var s in n)t.o(n,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:n[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{JumpScroll:()=>s,JumpScrollCss:()=>n});const n="\n :host {\n --js-width: 2em;\n --js-height: 8em;\n --js-bg-color: black;\n --js-color: white;\n --js-opacity-full: 0.7;\n --js-opacity-rest: 0.3;\n\n position: fixed;\n bottom: 1rem;\n right: 0.8rem;\n width: var(--js-width);\n height: var(--js-height);\n color: var(--js-color);\n }\n\n .container {\n display: block;\n transition: opacity 1s;\n opacity: var(--js-opacity-full);\n }\n .container.none {\n display: none;\n }\n .container.rest {\n opacity: var(--js-opacity-rest);\n }\n .container.mid {\n transform: none;\n }\n .container.best.mid.down .top,\n .container.start .top {\n pointer-events: none;\n opacity: 0;\n }\n .container.best.mid.up .bot,\n .container.end .bot {\n pointer-events: none;\n opacity: 0;\n transform: translateY(102%);\n }\n .container.best.mid.down .top,\n .container.best.mid.up .top,\n .container.end .top {\n transform: translateY(102%);\n }\n\n .top,\n .bot {\n position: absolute;\n width: 100%;\n height: calc(var(--js-height) / 2);\n transition: opacity 1s, transform 1s;\n pointer-events: auto;\n }\n .top {\n top: 0;\n }\n .bot {\n bottom: 0;\n }\n\n .top .start,\n .top .prev,\n .bot .next,\n .bot .end {\n content: '';\n position: absolute;\n left: 50%;\n width: 100%;\n background: var(--js-bg-color);\n }\n .top .start,\n .bot .end {\n height: calc(var(--js-height) / 6);\n clip-path: polygon(15% 5%, 85% 5%, 85% 30%, 60% 30%, 85% 95%, 15% 95%, 40% 30%, 15% 30%);\n }\n .top .prev,\n .bot .next {\n height: calc(var(--js-height) / 4);\n clip-path: polygon(50% 5%, 85% 60%, 60% 60%, 85% 95%, 15% 95%, 40% 60%, 15% 60%);\n }\n .top .start,\n .top .prev {\n transform: translateX(-50%);\n }\n .bot .next,\n .bot .end {\n transform: translateX(-50%) rotateX(180deg);\n }\n .top .start {\n top: 0;\n }\n .top .prev {\n top: calc((var(--js-height) / 6) + 10%);\n }\n .bot .next {\n bottom: calc((var(--js-height) / 6) + 10%);\n }\n .bot .end {\n bottom: 0;\n }\n";class s extends HTMLElement{#t=null;#e=null;#n=null;#s=null;#i=null;#r=null;#o=!0;#a=!1;static#c=["target"];static#l={target:"section",display:"both"};static get observedAttributes(){return[...s.#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(){s.#c.forEach((t=>{Object.defineProperty(this,t,{get(){return this.hasAttribute(t)?this.getAttribute(t):s.#l[t]},set(e){e?this.setAttribute(t,e):this.removeAttribute(t),this.updateTargetMap(e)}})}))}get display(){const t="display";return this.hasAttribute(t)?this.getAttribute(t):s.#l[t]}set display(t){const e="display",n=["both","best"],s=this.#r??{classList:{remove:()=>{},add:()=>{}}};s.classList.remove(...n.concat("up","down")),n.includes(t)?(this.setAttribute(e,t),s.classList.add(t)):this.removeAttribute(e)}update(t){const e=[t];"best"===this.display&&"mid"===t&&(this.#o?e.push("down"):e.push("up")),this.#r.classList.remove("mid","start","end","none","rest","up","down"),this.#r.classList.add(...e),setTimeout((()=>{this.#r.classList.add("rest")}),500)}clickTop(){this.#e.scrollIntoView(),this.#s=this.#e,this.update("start")}clickBottom(){this.#n.scrollIntoView(),this.#s=this.#n,this.update("end")}clickNext(){const t=this.#i.get(this.#s);t&&t.next&&(t.next.scrollIntoView({block:t.next===this.#n?"start":"center",behavior:"smooth"}),this.#s=t.next)}clickPrev(){const t=this.#i.get(this.#s);t&&t.prev&&(t.prev.scrollIntoView({block:t.prev===this.#e?"start":"center",behavior:"smooth"}),this.#s=t.prev)}updateTargetMap(t,e){if(!s.#c.includes(t)||!this.#a)return;let n,i;this.#e=null,this.#n=null,this.#s=null,this.#i=new WeakMap;const r=[];document.querySelectorAll(this[t]).forEach((t=>{for(n=t.getBoundingClientRect(),i=0;i<r.length&&!(n.top<r[i].top);i++);r.splice(i,0,{top:n.top,el:t}),"function"==typeof e&&e(t)})),this.#e=r[0].el,this.#n=r[r.length-1].el;let o=0;for(i=0;i<r.length;i++)0>r[i].top&&(o=i+1),this.#i.set(r[i].el,{prev:i>0?r[i-1].el:null,next:i<r.length-1?r[i+1].el:null});this.#s=r[o].el,0===o?this.update("start"):o===r.length-1?this.update("end"):this.update("mid")}intersectionCallback(t){const e=t[0];if(e.isIntersecting){this.#o=e.boundingClientRect.top>=0;const t=e.target;let n="mid";t===this.#e?n="start":t===this.#n&&(n="end"),this.#s=t,this.update(n)}}setup(){this.#a=!0,this.#t=new IntersectionObserver(this.intersectionCallback,{threshold:.5}),s.#c.forEach((t=>{this.updateTargetMap(t,(t=>{this.#t.observe(t)}))}))}teardown(){this.#t&&this.#t.disconnect(),this.#t=null,this.#e=null,this.#n=null,this.#s=null,this.#r=null,this.#i=null,this.#a=!1}connectedCallback(){"complete"!==document.readyState?window.addEventListener("load",(()=>{this.setup()}),{once:!0}):this.setup();const{shadowRoot:t}=this;t.innerHTML=`\n <style>\n ${n}\n </style>\n\n <div class="container none">\n <div class="top">\n <div class="start"></div>\n <div class="prev"></div>\n </div>\n <div class="bot">\n <div class="next"></div>\n <div class="end"></div>\n </div>\n </div>\n `,this.#r=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.#r=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,n){n!==e&&(this[t]=this.getAttribute(t))}}return customElements.define("jump-scroll",s),e})()));
|