@localnerve/jump-scroll 0.1.0 → 0.2.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 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -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,(()=>(()=>{class t 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[...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",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(e,n){if(!t.#c.includes(e)||!this.#a)return;let s,i;this.#e=null,this.#n=null,this.#s=null,this.#i=new WeakMap;const r=[];document.querySelectorAll(this[e]).forEach((t=>{for(s=t.getBoundingClientRect(),i=0;i<r.length&&!(s.top<r[i].top);i++);r.splice(i,0,{top:s.top,el:t}),"function"==typeof n&&n(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}),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.#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 :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 </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",t),{}})()));
|
|
1
|
+
/*! jump-scroll, Copyright (c) 2023 Alex Grant (@localnerve), LocalNerve LLC, BSD-3-Clause */(()=>{"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))}}customElements.define("jump-scroll",s),exports.JumpScroll=e.JumpScroll,exports.JumpScrollCss=e.JumpScrollCss,Object.defineProperty(exports,"__esModule",{value:!0})})();
|