@flowbase-co/boosters-tab-rotation-webflow/dist/tab-rotation.js

Rotate tab panes for tabs element

(function(){"use strict";class g{constructor(){this.data={}}set(e,t){this.data[e]=t}get(e){return this.data[e]}}const l={Booster:class{constructor(e){this.options=e}log(e,t){const i=`
      display: inline-block;
      padding: 4px 6px;
      border-radius: 4px;
      line-height: 1.5em;
      color: #282735;
      background: linear-gradient(45deg,
        rgba(185, 205, 255, 0.4) 0%,
        rgba(201, 182, 255, 0.4) 33%,
        rgba(239, 184, 255, 0.4) 66%,
        rgba(255, 210, 177, 0.4) 100%);
        `,a=[`%c[${this.options.title}] ${e}. Link to documentation ${this.options.documentationLink}`,i];t?(console.group(...a),Array.isArray(t)?console.log(...t):console.log(t),console.groupEnd()):console.log(...a)}validate(e,t,i){if(!e.validate)return!0;if(typeof e.validate=="function"){if(!e.validate(i))return this.log(`Invalid value "${i}" for attribute "${t}"`),!1}else if(!e.validate.includes(i))return this.log(`Invalid value "${i}" for attribute "${t}"`,[`%cPossible values:%c
`+e.validate.map(a=>`• ${a}`).join(`
`),"font-weight: 700;","font-weight: initial;"]),!1;return!0}parse(e){const t=new g;for(const i in this.options.attributes){const a=this.options.attributes[i],s=e.getAttribute(i);if(!s){t.set(i,a.defaultValue);continue}if(!this.validate(a,i,s))continue;let d=s;a.parse&&(d=a.parse(s)??a.defaultValue),t.set(i,d)}this.options.apply.call(this,e,t)}getElements(){return document.querySelectorAll(`[${this.options.name}]`)}init(){this.getElements().forEach(t=>this.parse(t))}},parse:{stringToBoolean:r=>r!=="false"},validation:{isBoolean:r=>/^(true|false)$/.test(r),isNumber:r=>!isNaN(Number(r))}},h="--fb-tab-progress";class m{constructor(e,t,i){this.cb=e,this.delay=t,this.tick=i,this.remaining=t,this.start=0}clear(){clearInterval(this.intervalId),clearTimeout(this.timerId),this.intervalId=void 0,this.timerId=void 0}reset(){this.clear(),this.remaining=this.delay,this.start=0}pause(){this.start&&(this.remaining-=Date.now()-this.start,this.start=0,this.clear())}resume(){this.timerId||(this.timerId=setTimeout(()=>this.cb(),this.remaining),this.tick&&(this.start=Date.now(),this.intervalId=setInterval(()=>{const e=this.start+this.remaining-Date.now(),t=Math.ceil((this.delay-e)*100/this.delay);this.tick(t)},1)))}}const v=new l.Booster({name:"fb-tabs",attributes:{"fb-tabs-pauseable":{defaultValue:!1,validate:l.validation.isBoolean,parse:l.parse.stringToBoolean},"fb-tabs-progress":{defaultValue:!1,validate:l.validation.isBoolean,parse:l.parse.stringToBoolean},"fb-tabs-speed":{defaultValue:5e3,validate:l.validation.isNumber,parse:Number}},apply(r,e){const t=Array.from(r.querySelectorAll(".w-tab-link"));if(!t.length)return this.log("Required attribute is missing");const i=e.get("fb-tabs-speed"),a=e.get("fb-tabs-progress");let s=t.find(o=>o.classList.contains("w--current"));const d=()=>{if(!s)return;let n=t.indexOf(s)+1;n>t.length-1&&(n=0);const c=t[n],b=c.href;c.removeAttribute("href"),c.click(),s=c,b&&(c.href=b)},w=o=>{requestAnimationFrame(()=>s==null?void 0:s.style.setProperty(h,o+"%"))},u=new m(d,i,a?w:void 0),p=o=>{o!==s&&(a&&(s==null||s.style.removeProperty(h)),s=o),u.reset(),u.resume()};if(t.forEach(o=>{o.addEventListener("click",n=>{n.isTrusted||n.stopPropagation(),p(o)},{passive:!0}),o.addEventListener("focus",()=>{o!==s&&p(o)},{passive:!0})}),e.get("fb-tabs-pauseable")){const o=()=>u.pause(),n=()=>u.resume();r.addEventListener("mouseenter",o,{passive:!0}),r.addEventListener("mouseleave",n,{passive:!0}),r.addEventListener("touchstart",o,{passive:!0}),r.addEventListener("touchend",n,{passive:!0}),r.addEventListener("touchcancel",n,{passive:!0})}s&&u.resume()},title:"Auto Tab Rotation Booster",documentationLink:"https://www.flowbase.co/booster/webflow-auto-tab-rotation"}),f=()=>v.init();document.readyState==="complete"?f():window.addEventListener("load",f)})();