@localnerve/jump-scroll 0.3.4 → 0.3.6

package/README.md

@@ -8,7 +8,7 @@
 
 ## Summary
 
-Provides a small scrolling control that allows the user to go to the top or bottom, or jump to the next (or previous) section of a page.
+Provides a small scrolling control that allows the user to go to the top or bottom, or jump to the next (or previous) section of a page. Non-browser version of the module exports build helpers (for building CSP rules, etc).
 
 ## Attributes
 
@@ -28,6 +28,11 @@ Provides a small scrolling control that allows the user to go to the top or bott
 ```html 
     <jump-scroll target="article" display="best"></jump-scroll>
 ```
+## Non-browser Exports
+The non-browser version of the module exports methods to help with builds.
+
+### {Promise} getJumpScrollCssText()
+A function to asynchronously get the raw shadow css text. This is useful for computing the hash for a CSP style rule. Returns a Promise that resolves to the full utf8 string of css text.
 
 ## License
 LocalNerve [BSD-3-Clause](LICENSE.md) Licensed

package/dist/jump-scroll.js

@@ -1,2 +1,2 @@
 /*! jump-scroll, Copyright (c) 2023 Alex Grant (@localnerve), LocalNerve LLC, BSD-3-Clause */
-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({block:"nearest",inline:"start",behavior:"smooth"}),this.#i=this.#e,this.update("start")}clickBottom(){this.#s.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.#i=this.#s,this.update("end")}clickNext(){const t=this.#r.get(this.#i);t&&t.next&&(t.next.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.#i=t.next,this.update("mid"))}clickPrev(){const t=this.#r.get(this.#i);t&&t.prev&&(t.prev.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.#i=t.prev,this.update("mid"))}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){const t=e.target;let s="mid";this.#n=e.boundingClientRect.top>=0,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);
+class t extends HTMLElement{#t=null;#e=null;#s=null;#r=null;#i=null;#o=null;#n=null;#a=null;#l=!0;#c=!1;static#h=["target"];static#p={target:"section",display:"both"};static get observedAttributes(){return[...t.#h,"display","colormap"]}constructor(){super(),this.attachShadow({mode:"open"}),this.targetIntersection=this.targetIntersection.bind(this),this.controlIntersection=this.controlIntersection.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.#h.forEach((e=>{Object.defineProperty(this,e,{get(){return this.hasAttribute(e)?this.getAttribute(e):t.#p[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.#p[e]}set display(t){const e="display",s=["both","best"];this.#a&&this.#a.classList.remove(...s.concat("up","down")),s.includes(t)?(this.setAttribute(e,t),this.#a&&this.#a.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.#a)return;const e="colormap",s=t&&t.split(";");if(s&&s.length>0&&s[0].includes(":")){this.setAttribute(e,t),this.#n=new Map;for(const t of s){let[e,s]=t.replace(/\s/,"").split(":");s.startsWith("--")&&(s=`var(${s})`),this.#n.set(parseInt(e,10),s)}}else this.removeAttribute(e),this.#n=null}update(t){const e=[t],s=["mid","start","end","rest","up","down"];null!==this.#s&&s.push("none"),"best"===this.display&&"mid"===t&&(this.#l?e.push("down"):e.push("up")),this.#a.classList.remove(...s),this.#a.classList.add(...e),setTimeout((()=>{this.#a.classList.add("rest")}),500)}clickTop(){this.#i=this.#s,this.#s.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.update("start")}clickBottom(){this.#i=this.#r,this.#r.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}),this.update("end")}clickNext(){const t=this.#o.get(this.#i);t&&t.next&&(this.#i=t.next,t.next.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}))}clickPrev(){const t=this.#o.get(this.#i);t&&t.prev&&(this.#i=t.prev,t.prev.scrollIntoView({block:"nearest",inline:"start",behavior:"smooth"}))}updateTargetMap(e,s){if(!t.#h.includes(e)||!this.#c)return;let r,i;this.#s=null,this.#r=null,this.#i=null,this.#o=new WeakMap;const o=[];if(document.querySelectorAll(this[e]).forEach((t=>{for(r=t.getBoundingClientRect(),i=0;i<o.length&&!(r.top<o[i].top);i++);o.splice(i,0,{top:r.top,el:t}),"function"==typeof s&&s(t)})),o.length>0){this.#s=o[0].el,this.#r=o[o.length-1].el;let t=0;for(i=0;i<o.length;i++)0>o[i].top&&(t=i+1),this.#o.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.#i=o[t].el,0===t?this.update("start"):t===o.length-1?this.update("end"):this.update("mid")}}targetIntersection(t){const e=t[0];if(e.isIntersecting){const t=e.target;let s="mid";this.#l=e.boundingClientRect.top>=0,t===this.#s?s="start":t===this.#r&&(s="end"),this.#i=t,this.update(s)}}controlIntersection(t){const e=t.filter((t=>t.isIntersecting));if(e&&e.length>0&&this.#n){const t=e[0],s=this.#o.get(t.target);if(s){const t=s&&this.#n.get(s.index);t?this.#a.style.setProperty("--js-bg-color",t):this.#a.style.removeProperty("--js-bg-color")}}}setup(){this.#c=!0,this.#t=new IntersectionObserver(this.targetIntersection,{threshold:.5}),this.#e=new IntersectionObserver(this.controlIntersection,{threshold:.05,rootMargin:"-90% 0px 0px 0px"}),t.#h.forEach((t=>{this.updateTargetMap(t,(t=>{this.#t.observe(t),this.#e.observe(t)}))}))}teardown(){this.#t&&this.#t.disconnect(),this.#e&&this.#e.disconnect(),this.#t=null,this.#e=null,this.#s=null,this.#r=null,this.#i=null,this.#a=null,this.#o=null,this.#n=null,this.#c=!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.#a=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.#a=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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@localnerve/jump-scroll",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "A small, fast, no-dep, jump-scroll web component",
   "main": "dist/index.js",
   "browser": "dist/jump-scroll.js",