1 line
8.7 KiB
JavaScript
1 line
8.7 KiB
JavaScript
const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n<style>\n *{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n :host{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n }\n .tabs{\n position: relative;\n display: -ms-grid;\n display: grid;\n width: 100%;\n }\n .tab-header{\n display: -ms-grid;\n display: grid;\n grid-auto-flow: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n gap: 1rem;\n position: relative;\n overflow: auto hidden;\n max-width: 100%;\n scrollbar-width: 0;\n }\n .indicator{\n position: absolute;\n left: 0;\n bottom: 0;\n height: 0.15rem;\n border-radius: 1rem 1rem 0 0; \n background: var(--accent-color);\n -webkit-transition: width 0.3s, -webkit-transform 0.3s;\n transition: width 0.3s, -webkit-transform 0.3s;\n -o-transition: transform 0.3s, width 0.3s;\n transition: transform 0.3s, width 0.3s;\n transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;\n pointer-events: none;\n }\n :host([variant="tab"]) .indicator{\n height: 100%;\n border-radius: 0.3rem;\n }\n :host(.round) .indicator{\n border-radius: 3rem;\n }\n :host([variant="tab"]) .tab-header{\n border-bottom: none; \n }\n .hide-completely{\n display: none;\n }\n :host([variant="tab"]) .tab-header{\n gap: 0.2rem;\n display: -ms-inline-grid;\n display: inline-grid;\n justify-self: flex-start;\n border-radius: 0.3rem;\n }\n :host([variant="tab"]) slot::slotted(.active){\n color: rgba(var(--background-color), 1);\n }\n slot::slotted(.active){\n color: var(--accent-color);\n opacity: 1;\n }\n @media (hover: none){\n .tab-header::-webkit-scrollbar-track {\n -webkit-box-shadow: none !important;\n background-color: transparent !important;\n }\n .tab-header::-webkit-scrollbar {\n height: 0;\n background-color: transparent;\n }\n } \n</style>\n<div part="tab-container" class="tabs">\n <div part="tab-header" class="tab-header">\n <slot></slot>\n <div part="indicator" class="indicator"></div>\n </div>\n</div>\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header")}sendDetails(t){this.dispatchEvent(new CustomEvent("switchtab",{bubbles:!0,detail:{target:this.target,rank:parseInt(t.getAttribute("rank"))}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.prevTab,this.allTabs,this.activeTab,this.isTab=!1,this.target=this.getAttribute("target"),this.hasAttribute("variant")&&"tab"===this.getAttribute("variant")&&(this.isTab=!0),this.tabSlot.addEventListener("slotchange",()=>{this.tabSlot.assignedElements().forEach((t,e)=>{t.setAttribute("rank",e)})}),this.allTabs=this.tabSlot.assignedElements(),this.tabSlot.addEventListener("click",t=>{t.target!==this.prevTab&&t.target.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.target.classList.add("active"),t.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.moveIndiactor(t.target.getBoundingClientRect()),this.sendDetails(t.target),this.prevTab=t.target,this.activeTab=t.target)});let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let e=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.sendDetails(this.allTabs[0]),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});e.observe(this)}});const smTab=document.createElement("template");smTab.innerHTML='\n<style>\n *{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n :host{\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n z-index: 1;\n }\n .tab{\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n white-space: nowrap;\n padding: 0.4rem 0.8rem;\n font-weight: 500;\n word-spacing: 0.1rem;\n text-align: center;\n -webkit-transition: color 0.3s;\n -o-transition: color 0.3s;\n transition: color 0.3s;\n text-transform: capitalize;\n height: 100%;\n }\n @media (hover: hover){\n :host(.active) .tab{\n opacity: 1;\n }\n .tab{\n opacity: 0.7\n }\n .tab:hover{\n opacity: 1\n }\n }\n</style>\n<div part="tab" class="tab">\n<slot></slot>\n</div>\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n<style>\n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n width: 100%;\n}\n.panel-container{\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden auto;\n}\nslot::slotted(.hide-completely){\n display: none;\n}\n@media (hover: none){\n .tab-header::-webkit-scrollbar-track {\n -webkit-box-shadow: none !important;\n background-color: transparent !important;\n }\n .tab-header::-webkit-scrollbar {\n height: 0;\n background-color: transparent;\n }\n} \n</style>\n<div part="panel-container" class="panel-container">\n <slot>Nothing to see here.</slot>\n</div>\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.panelSlot=this.shadowRoot.querySelector("slot")}connectedCallback(){let t=[{opacity:0,transform:"translateX(-1rem)"},{opacity:1,transform:"none"}],e=[{opacity:0,transform:"translateX(1rem)"},{opacity:1,transform:"none"}],n=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(-1rem)"}],a=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(1rem)"}],i={duration:300,fill:"forwards",easing:"ease"};this.prevPanel,this.allPanels,this.previousRank,this.panelSlot.addEventListener("slotchange",()=>{this.panelSlot.assignedElements().forEach(t=>{t.classList.add("hide-completely")})}),this.allPanels=this.panelSlot.assignedElements(),this._targetBodyFlyRight=(t=>{t.classList.remove("hide-completely"),t.animate(e,i)}),this._targetBodyFlyLeft=(e=>{e.classList.remove("hide-completely"),e.animate(t,i)}),document.addEventListener("switchtab",t=>{if(t.detail.target===this.id){if(this.prevPanel){let e=this.allPanels[t.detail.rank],s=this.prevPanel;this.previousRank<t.detail.rank?s&&!e?s.animate(n,i).onfinish=(()=>{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyRight(e):s&&e&&(s.animate(n,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyRight(e)})):s&&!e?s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyLeft(e):s&&e&&(s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyLeft(e)}))}else this.allPanels[t.detail.rank].classList.remove("hide-completely");this.previousRank=t.detail.rank,this.prevPanel=this.allPanels[t.detail.rank]}})}}); |