https://calzadospitillos.com/cdn/shop/t/27/assets/blog-tag-tabs.js?v=122959314924490860701783938432

1class BlogTagTabs extends HTMLElement{#abortController=new AbortController;#resizeObserver;#dragStart=null;#thumbDragStart=null;connectedCallback(){this.#abortController.abort(),this.#resizeObserver?.disconnect(),this.#abortController=new AbortController;const signal=this.#abortController.signal,section=this.closest(".shopify-section"),buttons=[...this.querySelectorAll(".blog-tag-tabs__tab")],viewport=this.querySelector(".blog-tag-tabs__viewport"),list=this.querySelector(".blog-tag-tabs__list"),scrollbar=this.querySelector(".blog-tag-tabs__scrollbar"),thumb=this.querySelector(".blog-tag-tabs__scrollbar-thumb");if(!section||buttons.length===0||!viewport||!list||!scrollbar||!thumb)return;buttons.forEach(button=>{button.addEventListener("click",()=>this.#selectTag(button,buttons,section,!0),{signal}),button.addEventListener("keydown",event=>this.#handleKeydown(event,buttons),{signal})}),viewport.addEventListener("scroll",()=>this.#updateScrollbar(viewport,scrollbar,thumb),{signal,passive:!0}),viewport.addEventListener("pointerdown",event=>this.#startViewportDrag(event,viewport),{signal}),viewport.addEventListener("pointermove",event=>this.#moveViewportDrag(event,viewport),{signal}),viewport.addEventListener("pointerup",()=>this.#endViewportDrag(viewport),{signal}),viewport.addEventListener("pointercancel",()=>this.#endViewportDrag(viewport),{signal}),scrollbar.addEventListener("pointerdown",event=>{event.target!==thumb&&this.#moveFromScrollbar(event,viewport,scrollbar,thumb)},{signal}),thumb.addEventListener("pointerdown",event=>this.#startThumbDrag(event,thumb,viewport),{signal}),thumb.addEventListener("pointermove",event=>this.#moveThumbDrag(event,viewport,scrollbar,thumb),{signal}),thumb.addEventListener("pointerup",()=>this.#endThumbDrag(thumb),{signal}),thumb.addEventListener("pointercancel",()=>this.#endThumbDrag(thumb),{signal}),this.#resizeObserver=new ResizeObserver(()=>this.#updateSlider(viewport,list,scrollbar,thumb)),this.#resizeObserver.observe(viewport),this.#resizeObserver.observe(list),this.#updateSlider(viewport,list,scrollbar,thumb);const selectedButton=buttons.find(button=>button.getAttribute("aria-selected")==="true")||buttons[0];this.#selectTag(selectedButton,buttons,section,!1)}disconnectedCallback(){this.#abortController.abort(),this.#resizeObserver?.disconnect()}#selectTag(selectedButton,buttons,section,shouldScroll){const selectedTag=this.#normalize(selectedButton.dataset.blogTag||""),items=[...section.querySelectorAll("[data-blog-tags]")];let visibleCount=0;buttons.forEach(button=>{button.setAttribute("aria-selected",String(button===selectedButton)),button.tabIndex=button===selectedButton?0:-1}),items.forEach(item=>{const tags=this.#readTags(item.dataset.blogTags),isVisible=selectedTag===""||tags.includes(selectedTag);item.hidden=!isVisible,isVisible&&(visibleCount+=1)});const emptyMessage=this.querySelector(".blog-tag-tabs__empty");emptyMessage&&(emptyMessage.hidden=visibleCount>0),shouldScroll&&selectedButton.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}),window.dispatchEvent(new Event("resize"))}#readTags(value){try{const tags=JSON.parse(value||"[]");return Array.isArray(tags)?tags.map(tag=>this.#normalize(tag)):[]}catch{return[]}}#normalize(value){return String(value).trim().toLocaleLowerCase()}#handleKeydown(event,buttons){const currentIndex=buttons.indexOf(event.currentTarget);let nextIndex=currentIndex;if(event.key==="ArrowRight"||event.key==="ArrowDown")nextIndex=(currentIndex+1)%buttons.length;else if(event.key==="ArrowLeft"||event.key==="ArrowUp")nextIndex=(currentIndex-1+buttons.length)%buttons.length;else if(event.key==="Home")nextIndex=0;else if(event.key==="End")nextIndex=buttons.length-1;else return;event.preventDefault(),buttons[nextIndex].focus(),buttons[nextIndex].click()}#updateSlider(viewport,list,scrollbar,thumb){const isActive=list.scrollWidth>viewport.clientWidth+1;this.querySelector(".blog-tag-tabs__slider")?.classList.toggle("blog-tag-tabs__slider--active",isActive),isActive||(viewport.scrollLeft=0),this.#updateScrollbar(viewport,scrollbar,thumb)}#updateScrollbar(viewport,scrollbar,thumb){const maxScroll=viewport.scrollWidth-viewport.clientWidth,trackWidth=scrollbar.clientWidth,thumbWidth=maxScroll>0?Math.max(32,trackWidth*(viewport.clientWidth/viewport.scrollWidth)):trackWidth,maxThumbOffset=Math.max(0,trackWidth-thumbWidth),offset=maxScroll>0?viewport.scrollLeft/maxScroll*maxThumbOffset:0;thumb.style.width=`${thumbWidth}px`,thumb.style.transform=`translate3d(${offset}px, 0, 0)`}#startViewportDrag(event,viewport){event.pointerType!=="mouse"||event.target.closest("button")||(this.#dragStart={x:event.clientX,scrollLeft:viewport.scrollLeft},viewport.setPointerCapture(event.pointerId),viewport.classList.add("blog-tag-tabs__viewport--dragging"))}#moveViewportDrag(event,viewport){this.#dragStart&&(viewport.scrollLeft=this.#dragStart.scrollLeft-(event.clientX-this.#dragStart.x))}#endViewportDrag(viewport){this.#dragStart=null,viewport.classList.remove("blog-tag-tabs__viewport--dragging")}#startThumbDrag(event,thumb,viewport){event.stopPropagation(),this.#thumbDragStart={x:event.clientX,scrollLeft:viewport.scrollLeft},thumb.setPointerCapture(event.pointerId),thumb.classList.add("blog-tag-tabs__scrollbar-thumb--dragging")}#moveThumbDrag(event,viewport,scrollbar,thumb){if(!this.#thumbDragStart)return;const maxScroll=viewport.scrollWidth-viewport.clientWidth,maxThumbOffset=scrollbar.clientWidth-thumb.offsetWidth;if(maxThumbOffset<=0)return;const scrollDelta=(event.clientX-this.#thumbDragStart.x)/maxThumbOffset*maxScroll;viewport.scrollLeft=this.#thumbDragStart.scrollLeft+scrollDelta}#endThumbDrag(thumb){this.#thumbDragStart=null,thumb.classList.remove("blog-tag-tabs__scrollbar-thumb--dragging")}#moveFromScrollbar(event,viewport,scrollbar,thumb){const rect=scrollbar.getBoundingClientRect(),maxScroll=viewport.scrollWidth-viewport.clientWidth,maxThumbOffset=scrollbar.clientWidth-thumb.offsetWidth,targetOffset=Math.max(0,Math.min(maxThumbOffset,event.clientX-rect.left-thumb.offsetWidth/2));viewport.scrollLeft=maxThumbOffset>0?targetOffset/maxThumbOffset*maxScroll:0}}customElements.get("blog-tag-tabs")||customElements.define("blog-tag-tabs",BlogTagTabs);
2//# sourceMappingURL=/cdn/shop/t/27/assets/blog-tag-tabs.js.map?v=122959314924490860701783938432