index-scrollbar - npm Package Compare versions

Comparing version 1.0.13 to 1.0.14

dist/index-scrollbar/p-e97f0891.entry.js

+import{r as t,c as i,h as s,H as e,g as h}from"./p-d4d31fe4.js";let n=class{constructor(s){t(this,s),this.letterChange=i(this,"letterChange",7),this.isActive=i(this,"isActive",7),this.alphabet=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],this.overflowDivider="·",this.validLetters=this.alphabet,this.disableInvalidLetters=!1,this.prioritizeHidingInvalidLetters=!1,this.letterMagnification=!0,this.magnifyDividers=!1,this.magnificationMultiplier=2,this.magnificationCurve=[1,.7,.5,.3,.1],this.exactX=!1,this.navigateOnHover=!1,this.letterSpacing=0,this.offsetSizeCheckInterval=0,this._lastEmittedActive=!1,this._isComponentActive=!1,this.visibleLetters=[],this.rendering=!0,this._lettersShortened=!1,this._isInBounds=!0}onAlphabetChange(t){if(!Array.isArray(t)||!t.every((t=>"string"==typeof t)))throw new Error("alphabet must be a string or an array of strings");this.checkVisibleLetters(!0),this.visibleLetters=t}onOverflowDividerChange(t){if("string"!=typeof t&&null!=t)throw new Error("overflowDivider must be a string");this.checkVisibleLetters(!0)}onValidLettersChange(){this.checkVisibleLetters(!0)}onDisableInvalidLettersChange(){this.checkVisibleLetters(!0)}onPrioritizeHidingInvalidLettersChange(){this.checkVisibleLetters(!0)}onMagnificationMultiplierChange(){this.checkVisibleLetters(!0)}onMagnificationCurveChange(t){if(!Array.isArray(t)||!t.every((t=>"number"==typeof t&&t>=0&&t<=1)))throw new Error("magnificationCurve must be an array of numbers between 0 and 1")}onExactXChange(){this._isInBounds=!0}onLetterSpacingChange(t){if("number"!=typeof t&&"string"!=typeof t&&null!==t)throw new Error("letterSpacing must be a number, string or null");this.checkVisibleLetters(!0)}onOffsetSizeCheckIntervalChange(){this._offsetSizeCheckIntervalTimer&&clearInterval(this._offsetSizeCheckIntervalTimer),this.offsetSizeCheckInterval&&(this._offsetSizeCheckIntervalTimer=setInterval((()=>this.checkVisibleLetters())))}connectedCallback(){window.addEventListener("resize",this.checkVisibleLetters.bind(this))}componentDidLoad(){this.alphabetContainer.addEventListener("touchstart",(t=>this.focusEvent(t,"touchstart")),{passive:!0}),this.alphabetContainer.addEventListener("touchmove",(t=>this.focusEvent(t,"touchmove")),{passive:!0}),this.alphabetContainer.addEventListener("touchend",(()=>this.focusEnd()),{passive:!0}),this.alphabetContainer.addEventListener("mouseenter",(t=>this.focusEvent(t,"mouseenter")),{passive:!0}),this.alphabetContainer.addEventListener("mousemove",(t=>this.focusEvent(t,"mousemove")),{passive:!0}),this.alphabetContainer.addEventListener("mouseleave",(()=>this.focusEnd()),{passive:!0}),this.alphabetContainer.addEventListener("click",(t=>this.focusEvent(t,"click")),{passive:!0}),setTimeout((()=>{this.onAlphabetChange(this.alphabet),this.onOverflowDividerChange(this.overflowDivider),this.onValidLettersChange(),this.onDisableInvalidLettersChange(),this.onPrioritizeHidingInvalidLettersChange(),this.onMagnificationMultiplierChange(),this.onMagnificationCurveChange(this.magnificationCurve),this.onLetterSpacingChange(this.letterSpacing),this.onOffsetSizeCheckIntervalChange(),this.onExactXChange(),this.checkVisibleLetters(),this.rendering=!1}),100)}disconnectedCallback(){this.alphabetContainer.removeEventListener("touchstart",(t=>this.focusEvent(t,"touchstart"))),this.alphabetContainer.removeEventListener("touchmove",(t=>this.focusEvent(t,"touchmove"))),this.alphabetContainer.removeEventListener("touchend",(()=>this.focusEnd())),this.alphabetContainer.removeEventListener("mouseenter",(t=>this.focusEvent(t,"mouseenter"))),this.alphabetContainer.removeEventListener("mousemove",(t=>this.focusEvent(t,"mousemove"))),this.alphabetContainer.removeEventListener("mouseleave",(()=>this.focusEnd())),this.alphabetContainer.removeEventListener("click",(t=>this.focusEvent(t,"click"))),window.removeEventListener("resize",this.checkVisibleLetters.bind(this)),clearInterval(this._offsetSizeCheckIntervalTimer)}get alphabetContainer(){return this.el.shadowRoot.querySelector(".container")}checkVisibleLetters(t){let i=this.alphabetContainer.clientHeight;if(!t&&i===this._lastHeight)return;this._lastHeight=i;let s=this.alphabet,e=0,h=this.stringToNumber(getComputedStyle(this.alphabetContainer).getPropertyValue("font-size"));if(this.letterMagnification&&(h=h*this.magnificationMultiplier*.6),"number"==typeof this.letterSpacing?e=this.letterSpacing:"string"==typeof this.letterSpacing&&(e=this.stringToNumber(this.letterSpacing),this.letterSpacing.endsWith("%")&&(e=i*(e/100))),h+=e,this.prioritizeHidingInvalidLetters&&this.validLetters&&i/h<s.length&&(s=this.validLetters),s="asonteaontehanth".split(""),this._lettersShortened=i/h<s.length,this._lettersShortened){const t=s.length-Math.floor(i/h);t===s.length&&(s=[]);const e=this.getNumHiddenHalves(t,s.length)+1;let n=s.slice(0,Math.ceil(s.length/2)),r=s.slice(Math.floor(s.length/2)).reverse();for(let t=0;t<e;t++)n=n.filter(((t,i)=>i%2==0)),r=r.filter(((t,i)=>i%2==0));n=n.reduce(((t,i,s)=>(s>0&&t.push(this.overflowDivider),t.push(i),t)),[]),r=r.reduce(((t,i,s)=>(s>0&&t.push(this.overflowDivider),t.push(i),t)),[]),this.alphabet.length%2==0&&n.push(this.overflowDivider),s=n.concat(r.reverse())}this.visibleLetters=s}getNumHiddenHalves(t,i){return t>i/2?1+this.getNumHiddenHalves(t%(i/2),Math.ceil(i/2)):0}isValid(t){var i;return!1!==(null===(i=this.validLetters)||void 0===i?void 0:i.includes(t))||t===this.overflowDivider}focusEvent(t,i){var s,e,h,n;this._lastEmittedActive||this.isActive.emit(this._lastEmittedActive=!0),"click"===i?this._isComponentActive=!1:this._isComponentActive||(this._isComponentActive=!0),this.setLetterFromCoordinates(null!==(e=null===(s=t.touches)||void 0===s?void 0:s[0].clientX)&&void 0!==e?e:t.clientX,null!==(n=null===(h=t.touches)||void 0===h?void 0:h[0].clientY)&&void 0!==n?n:t.clientY),this._lastEmittedLetter===this.letterSelected||!this.navigateOnHover&&i.includes("mouse")||this.letterChange.emit(this._lastEmittedLetter=this.letterSelected)}focusEnd(){this.isActive.emit(this._isComponentActive=this._lastEmittedActive=!1)}setLetterFromCoordinates(t,i){if(this.exactX){const i=this.alphabetContainer.getBoundingClientRect().right,s=this.alphabetContainer.getBoundingClientRect().left;if(this._isInBounds=t>s&&t<i,!this._isInBounds)return void(this.visualLetterIndex=this.visualLetterIndex=null)}const s=this.alphabetContainer.clientHeight,e=Math.min(Math.max(0,i-this.alphabetContainer.getBoundingClientRect().top),s);let h=e/s*(this.visibleLetters.length-1);const n=Math.round(h)<h;h=Math.round(h),this.magIndex=h,this.visualLetterIndex=this.getClosestValidLetterIndex(this.visibleLetters,h,n),this.letterSelected=this._lettersShortened?this.validLetters?this.validLetters[Math.round(e/s*(this.validLetters.length-1))]:this.alphabet[this.getClosestValidLetterIndex(this.alphabet,h,n)]:this.visibleLetters[this.visualLetterIndex]}getClosestValidLetterIndex(t,i,s){const e=t.map((t=>t.toLowerCase())),h=this.validLetters.map((t=>t.toLowerCase())).map((t=>e.indexOf(t)));return h.length>0?h.reduce(((t,e)=>s?Math.abs(e-i)>Math.abs(t-i)?t:e:Math.abs(e-i)<Math.abs(t-i)?e:t)):null}stringToNumber(t){return Number(null==t?void 0:t.match(/[\.\d]+/)[0])}getLetterStyle(t){if(void 0===this.magIndex&&null===this.magIndex||!this.magnifyDividers&&this.visibleLetters[t]===this.overflowDivider||this.disableInvalidLetters&&!this.isValid(this.visibleLetters[t]))return{};const i=this.visibleLetters.filter((t=>t!==this.overflowDivider)),s=Math.round(t/this.visibleLetters.length*i.length),e=Math.round(this.magIndex/this.visibleLetters.length*i.length);let h=this.magnifyDividers?Math.abs(this.magIndex-t):Math.abs(e-s);return this._isInBounds&&this._isComponentActive&&this.letterMagnification?{transform:`scale(${h<this.magnificationCurve.length-1?this.magnificationCurve[h]*(this.magnificationMultiplier-1)+1:1})`,zIndex:this.magIndex===t?1:0}:{transform:"scale(1)",zIndex:0}}render(){var t;return s(e,null,s("div",{class:{container:!0,visible:!this.rendering}},null===(t=this.visibleLetters)||void 0===t?void 0:t.map(((t,i)=>s("div",{key:`${t}-${i}`,class:{letter:!0,"letter-disabled":this.disableInvalidLetters&&!this.isValid(t)},style:this.getLetterStyle(i),id:this.visibleLetters[i]},s("label",null," ",t))))))}get el(){return h(this)}static get watchers(){return{alphabet:["onAlphabetChange"],overflowDivider:["onOverflowDividerChange"],validLetters:["onValidLettersChange"],disableInvalidLetters:["onDisableInvalidLettersChange"],prioritizeHidingInvalidLetters:["onPrioritizeHidingInvalidLettersChange"],magnificationMultiplier:["onMagnificationMultiplierChange"],magnificationCurve:["onMagnificationCurveChange"],exactX:["onExactXChange"],letterSpacing:["onLetterSpacingChange"],offsetSizeCheckInterval:["onOffsetSizeCheckIntervalChange"]}}};n.style=":host{transition:opacity 0.2s ease-in-out;font-size:min(20px, max(12px, 1vh));padding:calc(2 * min(20px, max(12px, 1vh))) 0}:host .visible{opacity:1 !important}:host .container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}:host .container.cursor-pointer{cursor:pointer}:host .container .letter{padding:0 20px;position:relative;pointer-events:none;transition:transform 0.2s ease-in-out;transform-origin:60%}:host .container .letter label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .container .letter.letter-disabled{opacity:0.3}:host .container .letter.letter-is-hidden-value{transform-origin:center;transform:scale(2)}";export{n as index_scrollbar}

dist/cjs/index-scrollbar.cjs.entry.js

@@ -158,34 +158,36 @@ 'use strict';
     //Check if there is enough free space for letters
-    // this._lettersShortened = height / letterSize < newAlphabet.length;
-    // if (this._lettersShortened) {
-    //   const numHiddenLetters = newAlphabet.length - Math.floor(height / letterSize);
-    //   if (numHiddenLetters === newAlphabet.length) newAlphabet = [];
-    //   //determine how many letters to hide
-    //   const hiddenHalves = this.getNumHiddenHalves(numHiddenLetters, newAlphabet.length) + 1;
-    //   // (this.magnifyDividers || numHiddenLetters > newAlphabet.length - 2 ? 1 : 0);
-    //   //split alphabet into two halves
-    //   let alphabet1 = newAlphabet.slice(0, Math.ceil(newAlphabet.length / 2));
-    //   let alphabet2 = newAlphabet.slice(Math.floor(newAlphabet.length / 2)).reverse();
-    //   for (let i = 0; i < hiddenHalves; i++) {
-    //     alphabet1 = alphabet1.filter((_, i) => i % 2 === 0);
-    //     alphabet2 = alphabet2.filter((_, i) => i % 2 === 0);
-    //   }
-    //   //insert dots between letters
-    //   alphabet1 = alphabet1.reduce((prev, curr, i) => {
-    //     if (i > 0) {
-    //       if (this.overflowDivider) prev.push(this.overflowDivider);
-    //     }
-    //     prev.push(curr);
-    //     return prev;
-    //   }, []);
-    //   alphabet2 = alphabet2.reduce((prev, curr, i) => {
-    //     if (i > 0) {
-    //       if (this.overflowDivider) prev.push(this.overflowDivider);
-    //     }
-    //     prev.push(curr);
-    //     return prev;
-    //   }, []);
-    //   if (this.alphabet.length % 2 === 0 && this.overflowDivider) alphabet1.push(this.overflowDivider);
-    //   newAlphabet = alphabet1.concat(alphabet2.reverse());
-    // }
+    this._lettersShortened = height / letterSize < newAlphabet.length;
+    if (this._lettersShortened) {
+      const numHiddenLetters = newAlphabet.length - Math.floor(height / letterSize);
+      if (numHiddenLetters === newAlphabet.length)
+        newAlphabet = [];
+      //determine how many letters to hide
+      const hiddenHalves = this.getNumHiddenHalves(numHiddenLetters, newAlphabet.length) + 1;
+      // (this.magnifyDividers || numHiddenLetters > newAlphabet.length - 2 ? 1 : 0);
+      //split alphabet into two halves
+      let alphabet1 = newAlphabet.slice(0, Math.ceil(newAlphabet.length / 2));
+      let alphabet2 = newAlphabet.slice(Math.floor(newAlphabet.length / 2)).reverse();
+      for (let i = 0; i < hiddenHalves; i++) {
+        alphabet1 = alphabet1.filter((_, i) => i % 2 === 0);
+        alphabet2 = alphabet2.filter((_, i) => i % 2 === 0);
+      }
+      //insert dots between letters
+      alphabet1 = alphabet1.reduce((prev, curr, i) => {
+        if (i > 0) {
+          prev.push(this.overflowDivider);
+        }
+        prev.push(curr);
+        return prev;
+      }, []);
+      alphabet2 = alphabet2.reduce((prev, curr, i) => {
+        if (i > 0) {
+          prev.push(this.overflowDivider);
+        }
+        prev.push(curr);
+        return prev;
+      }, []);
+      if (this.alphabet.length % 2 === 0)
+        alphabet1.push(this.overflowDivider);
+      newAlphabet = alphabet1.concat(alphabet2.reverse());
+    }
     this.visibleLetters = newAlphabet;
@@ -192,0 +194,0 @@ }

dist/collection/co...ents/index-scrollbar/index-scrollbar.js

@@ -148,34 +148,36 @@ import { Component, Host, h, Prop, Event, Element, State, Watch } from '@stencil/core';
     //Check if there is enough free space for letters
-    // this._lettersShortened = height / letterSize < newAlphabet.length;
-    // if (this._lettersShortened) {
-    //   const numHiddenLetters = newAlphabet.length - Math.floor(height / letterSize);
-    //   if (numHiddenLetters === newAlphabet.length) newAlphabet = [];
-    //   //determine how many letters to hide
-    //   const hiddenHalves = this.getNumHiddenHalves(numHiddenLetters, newAlphabet.length) + 1;
-    //   // (this.magnifyDividers || numHiddenLetters > newAlphabet.length - 2 ? 1 : 0);
-    //   //split alphabet into two halves
-    //   let alphabet1 = newAlphabet.slice(0, Math.ceil(newAlphabet.length / 2));
-    //   let alphabet2 = newAlphabet.slice(Math.floor(newAlphabet.length / 2)).reverse();
-    //   for (let i = 0; i < hiddenHalves; i++) {
-    //     alphabet1 = alphabet1.filter((_, i) => i % 2 === 0);
-    //     alphabet2 = alphabet2.filter((_, i) => i % 2 === 0);
-    //   }
-    //   //insert dots between letters
-    //   alphabet1 = alphabet1.reduce((prev, curr, i) => {
-    //     if (i > 0) {
-    //       if (this.overflowDivider) prev.push(this.overflowDivider);
-    //     }
-    //     prev.push(curr);
-    //     return prev;
-    //   }, []);
-    //   alphabet2 = alphabet2.reduce((prev, curr, i) => {
-    //     if (i > 0) {
-    //       if (this.overflowDivider) prev.push(this.overflowDivider);
-    //     }
-    //     prev.push(curr);
-    //     return prev;
-    //   }, []);
-    //   if (this.alphabet.length % 2 === 0 && this.overflowDivider) alphabet1.push(this.overflowDivider);
-    //   newAlphabet = alphabet1.concat(alphabet2.reverse());
-    // }
+    this._lettersShortened = height / letterSize < newAlphabet.length;
+    if (this._lettersShortened) {
+      const numHiddenLetters = newAlphabet.length - Math.floor(height / letterSize);
+      if (numHiddenLetters === newAlphabet.length)
+        newAlphabet = [];
+      //determine how many letters to hide
+      const hiddenHalves = this.getNumHiddenHalves(numHiddenLetters, newAlphabet.length) + 1;
+      // (this.magnifyDividers || numHiddenLetters > newAlphabet.length - 2 ? 1 : 0);
+      //split alphabet into two halves
+      let alphabet1 = newAlphabet.slice(0, Math.ceil(newAlphabet.length / 2));
+      let alphabet2 = newAlphabet.slice(Math.floor(newAlphabet.length / 2)).reverse();
+      for (let i = 0; i < hiddenHalves; i++) {
+        alphabet1 = alphabet1.filter((_, i) => i % 2 === 0);
+        alphabet2 = alphabet2.filter((_, i) => i % 2 === 0);
+      }
+      //insert dots between letters
+      alphabet1 = alphabet1.reduce((prev, curr, i) => {
+        if (i > 0) {
+          prev.push(this.overflowDivider);
+        }
+        prev.push(curr);
+        return prev;
+      }, []);
+      alphabet2 = alphabet2.reduce((prev, curr, i) => {
+        if (i > 0) {
+          prev.push(this.overflowDivider);
+        }
+        prev.push(curr);
+        return prev;
+      }, []);
+      if (this.alphabet.length % 2 === 0)
+        alphabet1.push(this.overflowDivider);
+      newAlphabet = alphabet1.concat(alphabet2.reverse());
+    }
     this.visibleLetters = newAlphabet;
@@ -182,0 +184,0 @@ }

dist/components/index-scrollbar.js

@@ -156,34 +156,36 @@ import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
     //Check if there is enough free space for letters
-    // this._lettersShortened = height / letterSize < newAlphabet.length;
-    // if (this._lettersShortened) {
-    //   const numHiddenLetters = newAlphabet.length - Math.floor(height / letterSize);
-    //   if (numHiddenLetters === newAlphabet.length) newAlphabet = [];
-    //   //determine how many letters to hide
-    //   const hiddenHalves = this.getNumHiddenHalves(numHiddenLetters, newAlphabet.length) + 1;
-    //   // (this.magnifyDividers || numHiddenLetters > newAlphabet.length - 2 ? 1 : 0);
-    //   //split alphabet into two halves
-    //   let alphabet1 = newAlphabet.slice(0, Math.ceil(newAlphabet.length / 2));
-    //   let alphabet2 = newAlphabet.slice(Math.floor(newAlphabet.length / 2)).reverse();
-    //   for (let i = 0; i < hiddenHalves; i++) {
-    //     alphabet1 = alphabet1.filter((_, i) => i % 2 === 0);
-    //     alphabet2 = alphabet2.filter((_, i) => i % 2 === 0);
-    //   }
-    //   //insert dots between letters
-    //   alphabet1 = alphabet1.reduce((prev, curr, i) => {
-    //     if (i > 0) {
-    //       if (this.overflowDivider) prev.push(this.overflowDivider);
-    //     }
-    //     prev.push(curr);
-    //     return prev;
-    //   }, []);
-    //   alphabet2 = alphabet2.reduce((prev, curr, i) => {
-    //     if (i > 0) {
-    //       if (this.overflowDivider) prev.push(this.overflowDivider);
-    //     }
-    //     prev.push(curr);
-    //     return prev;
-    //   }, []);
-    //   if (this.alphabet.length % 2 === 0 && this.overflowDivider) alphabet1.push(this.overflowDivider);
-    //   newAlphabet = alphabet1.concat(alphabet2.reverse());
-    // }
+    this._lettersShortened = height / letterSize < newAlphabet.length;
+    if (this._lettersShortened) {
+      const numHiddenLetters = newAlphabet.length - Math.floor(height / letterSize);
+      if (numHiddenLetters === newAlphabet.length)
+        newAlphabet = [];
+      //determine how many letters to hide
+      const hiddenHalves = this.getNumHiddenHalves(numHiddenLetters, newAlphabet.length) + 1;
+      // (this.magnifyDividers || numHiddenLetters > newAlphabet.length - 2 ? 1 : 0);
+      //split alphabet into two halves
+      let alphabet1 = newAlphabet.slice(0, Math.ceil(newAlphabet.length / 2));
+      let alphabet2 = newAlphabet.slice(Math.floor(newAlphabet.length / 2)).reverse();
+      for (let i = 0; i < hiddenHalves; i++) {
+        alphabet1 = alphabet1.filter((_, i) => i % 2 === 0);
+        alphabet2 = alphabet2.filter((_, i) => i % 2 === 0);
+      }
+      //insert dots between letters
+      alphabet1 = alphabet1.reduce((prev, curr, i) => {
+        if (i > 0) {
+          prev.push(this.overflowDivider);
+        }
+        prev.push(curr);
+        return prev;
+      }, []);
+      alphabet2 = alphabet2.reduce((prev, curr, i) => {
+        if (i > 0) {
+          prev.push(this.overflowDivider);
+        }
+        prev.push(curr);
+        return prev;
+      }, []);
+      if (this.alphabet.length % 2 === 0)
+        alphabet1.push(this.overflowDivider);
+      newAlphabet = alphabet1.concat(alphabet2.reverse());
+    }
     this.visibleLetters = newAlphabet;
@@ -190,0 +192,0 @@ }

dist/esm/index-scrollbar.entry.js

@@ -154,34 +154,36 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5f889f85.js';
     //Check if there is enough free space for letters
-    // this._lettersShortened = height / letterSize < newAlphabet.length;
-    // if (this._lettersShortened) {
-    //   const numHiddenLetters = newAlphabet.length - Math.floor(height / letterSize);
-    //   if (numHiddenLetters === newAlphabet.length) newAlphabet = [];
-    //   //determine how many letters to hide
-    //   const hiddenHalves = this.getNumHiddenHalves(numHiddenLetters, newAlphabet.length) + 1;
-    //   // (this.magnifyDividers || numHiddenLetters > newAlphabet.length - 2 ? 1 : 0);
-    //   //split alphabet into two halves
-    //   let alphabet1 = newAlphabet.slice(0, Math.ceil(newAlphabet.length / 2));
-    //   let alphabet2 = newAlphabet.slice(Math.floor(newAlphabet.length / 2)).reverse();
-    //   for (let i = 0; i < hiddenHalves; i++) {
-    //     alphabet1 = alphabet1.filter((_, i) => i % 2 === 0);
-    //     alphabet2 = alphabet2.filter((_, i) => i % 2 === 0);
-    //   }
-    //   //insert dots between letters
-    //   alphabet1 = alphabet1.reduce((prev, curr, i) => {
-    //     if (i > 0) {
-    //       if (this.overflowDivider) prev.push(this.overflowDivider);
-    //     }
-    //     prev.push(curr);
-    //     return prev;
-    //   }, []);
-    //   alphabet2 = alphabet2.reduce((prev, curr, i) => {
-    //     if (i > 0) {
-    //       if (this.overflowDivider) prev.push(this.overflowDivider);
-    //     }
-    //     prev.push(curr);
-    //     return prev;
-    //   }, []);
-    //   if (this.alphabet.length % 2 === 0 && this.overflowDivider) alphabet1.push(this.overflowDivider);
-    //   newAlphabet = alphabet1.concat(alphabet2.reverse());
-    // }
+    this._lettersShortened = height / letterSize < newAlphabet.length;
+    if (this._lettersShortened) {
+      const numHiddenLetters = newAlphabet.length - Math.floor(height / letterSize);
+      if (numHiddenLetters === newAlphabet.length)
+        newAlphabet = [];
+      //determine how many letters to hide
+      const hiddenHalves = this.getNumHiddenHalves(numHiddenLetters, newAlphabet.length) + 1;
+      // (this.magnifyDividers || numHiddenLetters > newAlphabet.length - 2 ? 1 : 0);
+      //split alphabet into two halves
+      let alphabet1 = newAlphabet.slice(0, Math.ceil(newAlphabet.length / 2));
+      let alphabet2 = newAlphabet.slice(Math.floor(newAlphabet.length / 2)).reverse();
+      for (let i = 0; i < hiddenHalves; i++) {
+        alphabet1 = alphabet1.filter((_, i) => i % 2 === 0);
+        alphabet2 = alphabet2.filter((_, i) => i % 2 === 0);
+      }
+      //insert dots between letters
+      alphabet1 = alphabet1.reduce((prev, curr, i) => {
+        if (i > 0) {
+          prev.push(this.overflowDivider);
+        }
+        prev.push(curr);
+        return prev;
+      }, []);
+      alphabet2 = alphabet2.reduce((prev, curr, i) => {
+        if (i > 0) {
+          prev.push(this.overflowDivider);
+        }
+        prev.push(curr);
+        return prev;
+      }, []);
+      if (this.alphabet.length % 2 === 0)
+        alphabet1.push(this.overflowDivider);
+      newAlphabet = alphabet1.concat(alphabet2.reverse());
+    }
     this.visibleLetters = newAlphabet;
@@ -188,0 +190,0 @@ }

dist/index-scrollbar/index-scrollbar.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as i}from"./p-d4d31fe4.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i([["p-6a1351c1",[[1,"index-scrollbar",{alphabet:[16],overflowDivider:[1,"overflow-divider"],validLetters:[16],disableInvalidLetters:[4,"disable-invalid-letters"],prioritizeHidingInvalidLetters:[4,"prioritize-hiding-invalid-letters"],letterMagnification:[4,"letter-magnification"],magnifyDividers:[4,"magnify-dividers"],magnificationMultiplier:[2,"magnification-multiplier"],magnificationCurve:[16],exactX:[4,"exact-x"],navigateOnHover:[4,"navigate-on-hover"],letterSpacing:[8,"letter-spacing"],offsetSizeCheckInterval:[2,"offset-size-check-interval"],_isComponentActive:[32],visibleLetters:[32],rendering:[32],_lastEmittedLetter:[32],magIndex:[32],_isInBounds:[32],visualLetterIndex:[32],letterSelected:[32]}]]]],e)));
+import{p as e,b as i}from"./p-d4d31fe4.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i([["p-e97f0891",[[1,"index-scrollbar",{alphabet:[16],overflowDivider:[1,"overflow-divider"],validLetters:[16],disableInvalidLetters:[4,"disable-invalid-letters"],prioritizeHidingInvalidLetters:[4,"prioritize-hiding-invalid-letters"],letterMagnification:[4,"letter-magnification"],magnifyDividers:[4,"magnify-dividers"],magnificationMultiplier:[2,"magnification-multiplier"],magnificationCurve:[16],exactX:[4,"exact-x"],navigateOnHover:[4,"navigate-on-hover"],letterSpacing:[8,"letter-spacing"],offsetSizeCheckInterval:[2,"offset-size-check-interval"],_isComponentActive:[32],visibleLetters:[32],rendering:[32],_lastEmittedLetter:[32],magIndex:[32],_isInBounds:[32],visualLetterIndex:[32],letterSelected:[32]}]]]],e)));

package.json

 {
   "name": "index-scrollbar",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Stencil Component Starter",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

dist/index-scrollbar/p-6a1351c1.entry.js

-import{r as t,c as i,h as s,H as e,g as h}from"./p-d4d31fe4.js";let n=class{constructor(s){t(this,s),this.letterChange=i(this,"letterChange",7),this.isActive=i(this,"isActive",7),this.alphabet=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],this.overflowDivider="·",this.validLetters=this.alphabet,this.disableInvalidLetters=!1,this.prioritizeHidingInvalidLetters=!1,this.letterMagnification=!0,this.magnifyDividers=!1,this.magnificationMultiplier=2,this.magnificationCurve=[1,.7,.5,.3,.1],this.exactX=!1,this.navigateOnHover=!1,this.letterSpacing=0,this.offsetSizeCheckInterval=0,this._lastEmittedActive=!1,this._isComponentActive=!1,this.visibleLetters=[],this.rendering=!0,this._lettersShortened=!1,this._isInBounds=!0}onAlphabetChange(t){if(!Array.isArray(t)||!t.every((t=>"string"==typeof t)))throw new Error("alphabet must be a string or an array of strings");this.checkVisibleLetters(!0),this.visibleLetters=t}onOverflowDividerChange(t){if("string"!=typeof t&&null!=t)throw new Error("overflowDivider must be a string");this.checkVisibleLetters(!0)}onValidLettersChange(){this.checkVisibleLetters(!0)}onDisableInvalidLettersChange(){this.checkVisibleLetters(!0)}onPrioritizeHidingInvalidLettersChange(){this.checkVisibleLetters(!0)}onMagnificationMultiplierChange(){this.checkVisibleLetters(!0)}onMagnificationCurveChange(t){if(!Array.isArray(t)||!t.every((t=>"number"==typeof t&&t>=0&&t<=1)))throw new Error("magnificationCurve must be an array of numbers between 0 and 1")}onExactXChange(){this._isInBounds=!0}onLetterSpacingChange(t){if("number"!=typeof t&&"string"!=typeof t&&null!==t)throw new Error("letterSpacing must be a number, string or null");this.checkVisibleLetters(!0)}onOffsetSizeCheckIntervalChange(){this._offsetSizeCheckIntervalTimer&&clearInterval(this._offsetSizeCheckIntervalTimer),this.offsetSizeCheckInterval&&(this._offsetSizeCheckIntervalTimer=setInterval((()=>this.checkVisibleLetters())))}connectedCallback(){window.addEventListener("resize",this.checkVisibleLetters.bind(this))}componentDidLoad(){this.alphabetContainer.addEventListener("touchstart",(t=>this.focusEvent(t,"touchstart")),{passive:!0}),this.alphabetContainer.addEventListener("touchmove",(t=>this.focusEvent(t,"touchmove")),{passive:!0}),this.alphabetContainer.addEventListener("touchend",(()=>this.focusEnd()),{passive:!0}),this.alphabetContainer.addEventListener("mouseenter",(t=>this.focusEvent(t,"mouseenter")),{passive:!0}),this.alphabetContainer.addEventListener("mousemove",(t=>this.focusEvent(t,"mousemove")),{passive:!0}),this.alphabetContainer.addEventListener("mouseleave",(()=>this.focusEnd()),{passive:!0}),this.alphabetContainer.addEventListener("click",(t=>this.focusEvent(t,"click")),{passive:!0}),setTimeout((()=>{this.onAlphabetChange(this.alphabet),this.onOverflowDividerChange(this.overflowDivider),this.onValidLettersChange(),this.onDisableInvalidLettersChange(),this.onPrioritizeHidingInvalidLettersChange(),this.onMagnificationMultiplierChange(),this.onMagnificationCurveChange(this.magnificationCurve),this.onLetterSpacingChange(this.letterSpacing),this.onOffsetSizeCheckIntervalChange(),this.onExactXChange(),this.checkVisibleLetters(),this.rendering=!1}),100)}disconnectedCallback(){this.alphabetContainer.removeEventListener("touchstart",(t=>this.focusEvent(t,"touchstart"))),this.alphabetContainer.removeEventListener("touchmove",(t=>this.focusEvent(t,"touchmove"))),this.alphabetContainer.removeEventListener("touchend",(()=>this.focusEnd())),this.alphabetContainer.removeEventListener("mouseenter",(t=>this.focusEvent(t,"mouseenter"))),this.alphabetContainer.removeEventListener("mousemove",(t=>this.focusEvent(t,"mousemove"))),this.alphabetContainer.removeEventListener("mouseleave",(()=>this.focusEnd())),this.alphabetContainer.removeEventListener("click",(t=>this.focusEvent(t,"click"))),window.removeEventListener("resize",this.checkVisibleLetters.bind(this)),clearInterval(this._offsetSizeCheckIntervalTimer)}get alphabetContainer(){return this.el.shadowRoot.querySelector(".container")}checkVisibleLetters(t){let i=this.alphabetContainer.clientHeight;if(!t&&i===this._lastHeight)return;this._lastHeight=i;let s=this.alphabet,e=0,h=this.stringToNumber(getComputedStyle(this.alphabetContainer).getPropertyValue("font-size"));this.letterMagnification&&(h=h*this.magnificationMultiplier*.6),"number"==typeof this.letterSpacing?e=this.letterSpacing:"string"==typeof this.letterSpacing&&(e=this.stringToNumber(this.letterSpacing),this.letterSpacing.endsWith("%")&&(e=i*(e/100))),h+=e,this.prioritizeHidingInvalidLetters&&this.validLetters&&i/h<s.length&&(s=this.validLetters),s="asonteaontehanth".split(""),this.visibleLetters=s}getNumHiddenHalves(t,i){return t>i/2?1+this.getNumHiddenHalves(t%(i/2),Math.ceil(i/2)):0}isValid(t){var i;return!1!==(null===(i=this.validLetters)||void 0===i?void 0:i.includes(t))||t===this.overflowDivider}focusEvent(t,i){var s,e,h,n;this._lastEmittedActive||this.isActive.emit(this._lastEmittedActive=!0),"click"===i?this._isComponentActive=!1:this._isComponentActive||(this._isComponentActive=!0),this.setLetterFromCoordinates(null!==(e=null===(s=t.touches)||void 0===s?void 0:s[0].clientX)&&void 0!==e?e:t.clientX,null!==(n=null===(h=t.touches)||void 0===h?void 0:h[0].clientY)&&void 0!==n?n:t.clientY),this._lastEmittedLetter===this.letterSelected||!this.navigateOnHover&&i.includes("mouse")||this.letterChange.emit(this._lastEmittedLetter=this.letterSelected)}focusEnd(){this.isActive.emit(this._isComponentActive=this._lastEmittedActive=!1)}setLetterFromCoordinates(t,i){if(this.exactX){const i=this.alphabetContainer.getBoundingClientRect().right,s=this.alphabetContainer.getBoundingClientRect().left;if(this._isInBounds=t>s&&t<i,!this._isInBounds)return void(this.visualLetterIndex=this.visualLetterIndex=null)}const s=this.alphabetContainer.clientHeight,e=Math.min(Math.max(0,i-this.alphabetContainer.getBoundingClientRect().top),s);let h=e/s*(this.visibleLetters.length-1);const n=Math.round(h)<h;h=Math.round(h),this.magIndex=h,this.visualLetterIndex=this.getClosestValidLetterIndex(this.visibleLetters,h,n),this.letterSelected=this._lettersShortened?this.validLetters?this.validLetters[Math.round(e/s*(this.validLetters.length-1))]:this.alphabet[this.getClosestValidLetterIndex(this.alphabet,h,n)]:this.visibleLetters[this.visualLetterIndex]}getClosestValidLetterIndex(t,i,s){const e=t.map((t=>t.toLowerCase())),h=this.validLetters.map((t=>t.toLowerCase())).map((t=>e.indexOf(t)));return h.length>0?h.reduce(((t,e)=>s?Math.abs(e-i)>Math.abs(t-i)?t:e:Math.abs(e-i)<Math.abs(t-i)?e:t)):null}stringToNumber(t){return Number(null==t?void 0:t.match(/[\.\d]+/)[0])}getLetterStyle(t){if(void 0===this.magIndex&&null===this.magIndex||!this.magnifyDividers&&this.visibleLetters[t]===this.overflowDivider||this.disableInvalidLetters&&!this.isValid(this.visibleLetters[t]))return{};const i=this.visibleLetters.filter((t=>t!==this.overflowDivider)),s=Math.round(t/this.visibleLetters.length*i.length),e=Math.round(this.magIndex/this.visibleLetters.length*i.length);let h=this.magnifyDividers?Math.abs(this.magIndex-t):Math.abs(e-s);return this._isInBounds&&this._isComponentActive&&this.letterMagnification?{transform:`scale(${h<this.magnificationCurve.length-1?this.magnificationCurve[h]*(this.magnificationMultiplier-1)+1:1})`,zIndex:this.magIndex===t?1:0}:{transform:"scale(1)",zIndex:0}}render(){var t;return s(e,null,s("div",{class:{container:!0,visible:!this.rendering}},null===(t=this.visibleLetters)||void 0===t?void 0:t.map(((t,i)=>s("div",{key:`${t}-${i}`,class:{letter:!0,"letter-disabled":this.disableInvalidLetters&&!this.isValid(t)},style:this.getLetterStyle(i),id:this.visibleLetters[i]},s("label",null," ",t))))))}get el(){return h(this)}static get watchers(){return{alphabet:["onAlphabetChange"],overflowDivider:["onOverflowDividerChange"],validLetters:["onValidLettersChange"],disableInvalidLetters:["onDisableInvalidLettersChange"],prioritizeHidingInvalidLetters:["onPrioritizeHidingInvalidLettersChange"],magnificationMultiplier:["onMagnificationMultiplierChange"],magnificationCurve:["onMagnificationCurveChange"],exactX:["onExactXChange"],letterSpacing:["onLetterSpacingChange"],offsetSizeCheckInterval:["onOffsetSizeCheckIntervalChange"]}}};n.style=":host{transition:opacity 0.2s ease-in-out;font-size:min(20px, max(12px, 1vh));padding:calc(2 * min(20px, max(12px, 1vh))) 0}:host .visible{opacity:1 !important}:host .container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}:host .container.cursor-pointer{cursor:pointer}:host .container .letter{padding:0 20px;position:relative;pointer-events:none;transition:transform 0.2s ease-in-out;transform-origin:60%}:host .container .letter label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .container .letter.letter-disabled{opacity:0.3}:host .container .letter.letter-is-hidden-value{transform-origin:center;transform:scale(2)}";export{n as index_scrollbar}

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Lines of code

6409

0.12%

Worsened metrics

Total package byte prevSize

402130

-0.02%

No dependency changes