@evermade/overflow-slider
Version:
Accessible slider that is powered by overflow: auto.
2 lines (1 loc) • 3.1 kB
JavaScript
const t={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function e(e){return o=>{var n,r,i;const a={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(n=null==e?void 0:e.container)&&void 0!==n?n:null},s=document.createElement("div");s.setAttribute("class",a.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(r=o.container.getAttribute("id"))&&void 0!==r?r:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const l=document.createElement("div");l.setAttribute("class",a.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",a.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",o.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/o.details.containerWidth,e=o.getScrollLeft()*t;return o.options.rtl?l.offsetWidth-c.offsetWidth-e:e};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame(()=>{const t=o.details.containerWidth/o.container.scrollWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const n=o.getScrollLeft()/(o.getInclusiveScrollWidth()-o.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(n)?0:n).toString())})};a.container?a.container.appendChild(s):null===(i=o.container.parentNode)||void 0===i||i.insertBefore(s,o.container.nextSibling),v(),o.on("scroll",v),o.on("contentsChanged",v),o.on("containerSizeChanged",v),o.on("detailsChanged",d),s.addEventListener("keydown",t=>{"ArrowLeft"===t.key?o.moveToDirection("prev"):"ArrowRight"===t.key&&o.moveToDirection("next")});let b=!1,h=0,g=o.getScrollLeft();s.addEventListener("click",t=>{if(t.target==c)return;const e=c.offsetWidth,n=u(),r=n+e,i=t.pageX-s.getBoundingClientRect().left;Math.floor(i)<Math.floor(n)?(console.log("move left"),o.moveToDirection(o.options.rtl?"next":"prev")):Math.floor(i)>Math.floor(r)&&(console.log("move right"),o.moveToDirection(o.options.rtl?"prev":"next"))});const m=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;h=e-s.offsetLeft,g=o.getScrollLeft(),c.style.cursor="grabbing",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},p=t=>{if(!b)return;t.preventDefault();const e=(t.pageX||t.touches[0].pageX)-s.offsetLeft,n=o.details.scrollableAreaWidth/s.offsetWidth,r=(e-h)*n,i=o.options.rtl?g-r:g+r;o.setScrollLeft(i)},w=()=>{b=!1,c.style.cursor="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",m),c.addEventListener("touchstart",m),window.addEventListener("mousemove",p),window.addEventListener("touchmove",p,{passive:!1}),window.addEventListener("mouseup",w),window.addEventListener("touchend",w)}}export{e as default};