@evermade/overflow-slider
Version:
Accessible slider that is powered by overflow: auto.
2 lines (1 loc) • 3.54 kB
JavaScript
function e(e){return t=>{var n,o,l,a,i,r,s,u,d,c,v,p,m,y,f;const h={delayInMs:null!==(n=null==e?void 0:e.delayInMs)&&void 0!==n?n:5e3,texts:{play:null!==(l=null===(o=null==e?void 0:e.texts)||void 0===o?void 0:o.play)&&void 0!==l?l:"Play",pause:null!==(i=null===(a=null==e?void 0:e.texts)||void 0===a?void 0:a.pause)&&void 0!==i?i:"Pause"},icons:{play:null!==(s=null===(r=null==e?void 0:e.icons)||void 0===r?void 0:r.play)&&void 0!==s?s:'<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/></svg>',pause:null!==(d=null===(u=null==e?void 0:e.icons)||void 0===u?void 0:u.pause)&&void 0!==d?d:'<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5"/></svg>'},container:null!==(c=null==e?void 0:e.container)&&void 0!==c?c:null,classNames:{autoplayButton:null!==(p=null===(v=null==e?void 0:e.classNames)||void 0===v?void 0:v.autoplayButton)&&void 0!==p?p:"overflow-slider__autoplay"},movementType:null!==(m=null==e?void 0:e.movementType)&&void 0!==m?m:"view",stopOnHover:null===(y=null==e?void 0:e.stopOnHover)||void 0===y||y,loop:null===(f=null==e?void 0:e.loop)||void 0===f||f};let g=null,w=null,I=0,x=!1;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;const M=(()=>{var e;const n=document.createElement("button");n.type="button",n.className=h.classNames.autoplayButton,E(n),n.style.setProperty("--autoplay-delay-progress","0"),h.container?h.container.appendChild(n):null===(e=t.container.parentElement)||void 0===e||e.insertBefore(n,t.container),n.addEventListener("click",()=>{g?(x=!0,C()):(x=!1,T())});const o=["focusin"];h.stopOnHover&&o.push("mouseenter");const l=["focusout"];return h.stopOnHover&&l.push("mouseleave"),o.forEach(e=>t.container.addEventListener(e,()=>{g&&C()})),l.forEach(e=>t.container.addEventListener(e,()=>{g||x||T()})),n})();function b(){if("view"===h.movementType){t.getScrollLeft()+t.getInclusiveClientWidth()>=t.getInclusiveScrollWidth()?h.loop?t.moveToSlide(0):(C(),M.style.setProperty("--autoplay-delay-progress","0")):t.moveToDirection("next")}else{const e=(t.activeSlideIdx+1)%t.details.slideCount;t.canMoveToSlide(e)?t.moveToSlide(e):h.loop?t.moveToSlide(0):(C(),M.style.setProperty("--autoplay-delay-progress","0"))}I=performance.now(),null!==w&&cancelAnimationFrame(w),A()}function A(){const e=performance.now(),t=Math.min((e-I)/h.delayInMs*100,100);M.style.setProperty("--autoplay-delay-progress",`${Math.round(t)}`),t<100&&(w=requestAnimationFrame(A))}function T(){g&&clearInterval(g),w&&cancelAnimationFrame(w),function(e){e.setAttribute("aria-pressed","true"),e.setAttribute("aria-label",h.texts.pause);const t=document.createRange().createContextualFragment(h.icons.pause);e.innerHTML="",e.appendChild(t)}(M),I=performance.now(),A(),g=window.setInterval(b,h.delayInMs)}function C(e=!1){g&&clearInterval(g),w&&cancelAnimationFrame(w),g=w=null,e&&(x=!0),E(M)}function E(e){e.setAttribute("aria-pressed","false"),e.setAttribute("aria-label",h.texts.play);const t=document.createRange().createContextualFragment(h.icons.play);e.innerHTML="",e.appendChild(t),e.style.setProperty("--autoplay-delay-progress","0")}T(),new IntersectionObserver(e=>{for(const t of e)!t.isIntersecting&&g?C():!t.isIntersecting||g||x||T()},{threshold:0}).observe(t.container)}}export{e as default};