scrolling-tabs-bootstrap-5
Version:
A simple plugin to create scrollable tabs with Bootstrap 5.
1 lines • 1.62 kB
JavaScript
function initializeScrollableTabs(e){const t=e.querySelector(".scroller-right"),l=e.querySelector(".scroller-left"),r=e.querySelector(".list"),n=r.querySelectorAll(".nav-item.nav-link")[r.querySelectorAll(".nav-item.nav-link").length-1];let i=!1,a=function(){let e=0;return r.querySelectorAll("a").forEach((t=>{let l=getOuterWidth(t);e+=l})),e},d=()=>getOuterLeft(r)-getOuterLeft(e.querySelector(".wrapper-nav")),o=()=>{let r=document.body.clientWidth-(getOuterLeft(n)+getOuterWidth(n));getOuterWidth(e.querySelector(".wrapper-nav"))<a()&&r<0?(t.style.display="flex",unfade(t)):t.style.display="none",d()<0?(l.style.display="flex",unfade(l)):l.style.display="none",i=!1};t.addEventListener("click",(()=>{if(i)return;i=!0,fade(l),unfade(t);let u=getOuterWidth(t);move(r).add("left",+function(t){t=t||0;const l=getOuterWidth(e.querySelector(".wrapper-nav"))-t,r=parseFloat((0-l).toFixed(3)),i=l-a()-d()-40,o=document.body.clientWidth-(getOuterLeft(n)+getOuterWidth(n))-t;return r>i?o>r?o:r:o>i?o:i}(u),200).end().then((()=>{o()}))})),l.addEventListener("click",(()=>{if(i)return;i=!0,fade(t),unfade(l);let e=getOuterWidth(l);move(r).add("left",-d()+e,200).end().then((()=>{o()}))})),window.addEventListener("resize",(()=>{o()}),!0),o()}let getOuterLeft=e=>e.getBoundingClientRect().left,getOuterWidth=e=>parseFloat(window.getComputedStyle(e).width);function fade(e){e.style.display="none",e.style.transition="opacity 0.6s",e.style.opacity=0}function unfade(e){e.style.display="block",e.style.transition="opacity 0.6s",e.style.opacity=1}document.querySelectorAll(".tab-wrapper").forEach((e=>{initializeScrollableTabs(e)}));