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 --tab-indicator-border-radius: 0.3rem;\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: var(--tab-indicator-border-radius);\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.prevTab,this.allTabs,this.activeTab,this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header"),this.changeTab=this.changeTab.bind(this),this.handleClick=this.handleClick.bind(this),this.handlePanelChange=this.handlePanelChange.bind(this)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedtab${this.target}`,{bubbles:!0,detail:{index:parseInt(t)}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}changeTab(t){t!==this.prevTab&&t.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.classList.add("active"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.moveIndiactor(t.getBoundingClientRect()),this.prevTab=t,this.activeTab=t)}handleClick(t){t.target.closest("sm-tab")&&(this.changeTab(t.target),this.fireEvent(t.target.dataset.index))}handlePanelChange(t){console.log(this.allTabs),this.changeTab(this.allTabs[t.detail.index])}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.target=this.getAttribute("target"),this.tabSlot.addEventListener("slotchange",()=>{this.allTabs=this.tabSlot.assignedElements(),this.allTabs.forEach((t,n)=>{t.dataset.index=n})}),this.addEventListener("click",this.handleClick),document.addEventListener(`switchedpanel${this.target}`,this.handlePanelChange);let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let n=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.fireEvent(0),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});n.observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),document.removeEventListener(`switchedpanel${this.target}`,this.handlePanelChange)}});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;\n scroll-snap-type: x mandatory;\n content-visibility: auto;\n}\n::slotted(*){\n min-width: 100%;\n scroll-snap-align: center;\n}\n@media (any-hover: none) {\n .panel-container{\n overflow-x: auto;\n scrollbar-width: none;\n }\n .container {\n overflow-y: scroll;\n }\n ::-webkit-scrollbar {\n width: 0;\n height: 0;\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.isTransitioning=!1,this.panelContainer=this.shadowRoot.querySelector(".panel-container"),this.panelSlot=this.shadowRoot.querySelector("slot"),this.handleTabChange=this.handleTabChange.bind(this)}handleTabChange(t){this.isTransitioning=!0,this.panelContainer.scrollTo({left:this.allPanels[t.detail.index].getBoundingClientRect().left-this.panelContainer.getBoundingClientRect().left+this.panelContainer.scrollLeft,behavior:"smooth"}),setTimeout(()=>{this.isTransitioning=!1},300)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedpanel${this.id}`,{bubbles:!0,detail:{index:parseInt(t)}}))}connectedCallback(){this.panelSlot.addEventListener("slotchange",()=>{this.allPanels=this.panelSlot.assignedElements(),this.allPanels.forEach((n,e)=>{n.dataset.index=e,t.observe(n)})}),document.addEventListener(`switchedtab${this.id}`,this.handleTabChange);const t=new IntersectionObserver(t=>{t.forEach(t=>{!this.isTransitioning&&t.isIntersecting&&this.fireEvent(t.target.dataset.index)})},{threshold:.6})}disconnectedCallback(){intersectionObserver.disconnect(),document.removeEventListener(`switchedtab${this.id}`,this.handleTabChange)}}); |