https://farberwarecookware.com/cdn/shop/t/533/assets/layered-slideshow.js?v=30135417790894624731765914131

1import{Component}from"@theme/component";import{isMobileBreakpoint,mediaQueryLarge}from"@theme/utilities";const DRAG_THRESHOLD=5,MAX_DRAG_WIDTH_RATIO=.8,DRAG_COMPLETE_THRESHOLD=.5,INACTIVE_SIZE=56,INACTIVE_MOBILE_SIZE=44,FOCUSABLE_SELECTOR='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';export class LayeredSlideshowComponent extends Component{requiredRefs=["container"];#active=0;#drag=null;#abort=null;#isMobile=!1;#heightObserver=null;#contentObserver=null;#containerObserver=null;get#inactiveSize(){return this.#isMobile?INACTIVE_MOBILE_SIZE:INACTIVE_SIZE}connectedCallback(){super.connectedCallback();const{tabs}=this.refs;tabs?.length&&(this.#active=Math.max(0,tabs.findIndex(t=>t.getAttribute("aria-selected")==="true")),this.#isMobile=isMobileBreakpoint(),mediaQueryLarge.addEventListener("change",this.#handleMediaQueryChange),this.#containerObserver=new ResizeObserver(entries=>{for(const entry of entries)if(entry.contentBoxSize){const boxSize=entry.contentBoxSize[0],isMobile=this.#isMobile;let size;boxSize?size=isMobile?boxSize.blockSize:boxSize.inlineSize:size=isMobile?entry.contentRect.height:entry.contentRect.width,this.#updateGridSizes(size)}}),this.#containerObserver.observe(this.refs.container),this.#updateActiveTab(),this.#setupEventListeners(),this.#observeContentHeight())}#setupEventListeners(){this.#abort?.abort(),this.#abort=new AbortController;const opts={signal:this.#abort.signal},{container,tabs}=this.refs;this.addEventListener("keydown",e=>this.#handleKeydown(e),opts);for(const[i,tab]of tabs.entries())tab.addEventListener("click",e=>this.#handleTabClick(e,i),opts),tab.addEventListener("focus",e=>this.#handleTabFocus(e,i),opts);this.#setupPanelFocusManagement(opts),this.#isMobile||(container.addEventListener("pointerdown",e=>this.#startDrag(e),opts),container.addEventListener("click",e=>this.#preventClickDuringDrag(e),{...opts,capture:!0}))}#handleKeydown(e){const target=e.target;if(target.getAttribute("role")!=="tab")return;const{tabs}=this.refs;if(!tabs)return;const i=tabs.indexOf(target),offset={[this.#isMobile?"ArrowUp":"ArrowLeft"]:-1,[this.#isMobile?"ArrowDown":"ArrowRight"]:1,Home:-i,End:tabs.length-1-i}[e.key];if(offset!==void 0){e.preventDefault();const nextIndex=(i+offset+tabs.length)%tabs.length;tabs[nextIndex]?.focus(),this.#activate(nextIndex)}}#handleTabClick(e,index){e.preventDefault(),this.#activate(index)}#handleTabFocus(e,index){e.target.matches(":focus-visible")&&this.#activate(index)}#setupPanelFocusManagement(opts){const{panels}=this.refs;if(panels)for(const[index,panel]of panels.entries())panel.addEventListener("keydown",event=>this.#handlePanelKeydown(event,index),opts)}#handlePanelKeydown(event,index){if(event.key!=="Tab")return;const{panels}=this.refs,panel=event.currentTarget,focusable=this.#getFocusableElements(panel),firstFocusable=focusable[0],lastFocusable=focusable[focusable.length-1];if(event.shiftKey){(firstFocusable&&document.activeElement===firstFocusable||!focusable.length&&document.activeElement===panel)&&index>0&&(event.preventDefault(),this.#activate(index-1),this.#focusPanelEdge(index-1,"end"));return}(lastFocusable&&document.activeElement===lastFocusable||!focusable.length&&document.activeElement===panel)&&panels&&index<panels.length-1&&(event.preventDefault(),this.#activate(index+1),this.#focusPanelEdge(index+1,"start"))}#focusPanelEdge(index,position="start"){const panel=this.refs.panels?.[index];if(!panel)return;const focusable=this.#getFocusableElements(panel),target=position==="end"?focusable[focusable.length-1]:focusable[0];requestAnimationFrame(()=>(target??panel).focus())}#getFocusableElements(panel){return Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el=>!el.closest("[inert]")).map(el=>el)}#preventClickDuringDrag(e){const target=e.target;this.#drag?.prevent&&target.closest('[role="tab"]')&&(e.stopImmediatePropagation(),e.preventDefault())}#handleMediaQueryChange=()=>{const wasMobile=this.#isMobile;if(this.#isMobile=isMobileBreakpoint(),wasMobile!==this.#isMobile){const{container}=this.refs;container.setAttribute("data-instant-transitions",""),this.#clearHeightStyles(),this.#observeContentHeight(),this.#updateActiveTab(),this.#setupEventListeners(),requestAnimationFrame(()=>{container.removeAttribute("data-instant-transitions")})}};disconnectedCallback(){super.disconnectedCallback(),this.#abort?.abort(),this.#heightOb

1server?.disconnect(),this.#heightObserver=null,this.#contentObserver?.disconnect(),this.#contentObserver=null,this.#containerObserver?.disconnect(),this.#containerObserver=null,mediaQueryLarge.removeEventListener("change",this.#handleMediaQueryChange)}select(index,{instant=!1}={}){this.#activate(index,instant)}#activate(index,instant=!1){const{container,tabs}=this.refs;!tabs||index===this.#active||index<0||index>=tabs.length||(instant&&container.setAttribute("data-instant-transitions",""),this.#active=index,this.#updateActiveTab(),instant&&requestAnimationFrame(()=>{requestAnimationFrame(()=>{container.removeAttribute("data-instant-transitions")})}))}#updateActiveTab(){const{tabs,panels}=this.refs;for(const[i,tab]of tabs?.entries()??[]){const isActive=i===this.#active;tab.setAttribute("aria-selected",String(isActive)),tab.setAttribute("tabindex",isActive?"0":"-1")}for(const[i,panel]of panels?.entries()??[]){const isActive=i===this.#active;panel.toggleAttribute("inert",!isActive),panel.setAttribute("tabindex",isActive?"0":"-1");const video=panel.querySelector("video");video&&(isActive?video.play():video.pause())}this.#updateGridSizes()}#updateGridSizes(containerSize){const{container,tabs}=this.refs;if(!tabs)return;const inactiveSize=this.#inactiveSize,activeSize=(containerSize??(this.#isMobile?container.getBoundingClientRect().height:container.getBoundingClientRect().width))-inactiveSize*(tabs.length-1),sizes=tabs.map((_,i)=>i===this.#active?`${activeSize}px`:`${inactiveSize}px`);container.style.setProperty("--active-tab",sizes.join(" "))}#startDrag(event){if(this.#isMobile)return;const{tabs}=this.refs;if(!tabs)return;const tab=event.target.closest('[role="tab"]');if(tab){const i=tabs.indexOf(tab);if(i===this.#active)return;const target=i>this.#active?i+1:i;if(target>=tabs.length)return;this.#initializeDrag(event,target)}else this.#initializeDrag(event)}#initializeDrag(event,initialTarget){const{container,tabs}=this.refs;if(!tabs)return;const containerWidth=container.getBoundingClientRect().width,inactiveSize=this.#inactiveSize,activeSize=containerWidth-inactiveSize*(tabs.length-1);this.#drag={target:initialTarget??-1,start:event.clientX,max:containerWidth*MAX_DRAG_WIDTH_RATIO,activeSize,left:initialTarget!==void 0?initialTarget>this.#active:!1};const ac=new AbortController,opts={signal:ac.signal};document.addEventListener("pointermove",e=>this.#handleDrag(e),opts),document.addEventListener("pointerup",()=>this.#endDrag(ac),opts),document.addEventListener("pointercancel",()=>this.#endDrag(ac),opts),event.preventDefault()}#handleDrag(event){if(!this.#drag)return;const{container,tabs}=this.refs;if(!container||!tabs)return;const delta=event.clientX-this.#drag.start,move=Math.abs(delta);if(!this.#drag.dragging&&move>=DRAG_THRESHOLD){if(this.#drag.target===-1)if(delta>0&&this.#active>0)this.#drag.target=this.#active-1,this.#drag.left=!1;else if(delta<0&&this.#active<tabs.length-1)this.#drag.target=this.#active+1,this.#drag.left=!0;else return;this.#drag.dragging=!0,container.setAttribute("data-dragging","")}if(!this.#drag.dragging)return;const progress=(this.#drag.left?delta<0:delta>0)?Math.min(move/this.#drag.max,1):0,inactiveSize=this.#inactiveSize,activeSize=this.#drag.activeSize,range=activeSize-inactiveSize,sizes=tabs.map((_,i)=>i===this.#active?`${Math.max(inactiveSize,activeSize-range*progress)}px`:i===this.#drag?.target?`${inactiveSize+range*progress}px`:`${inactiveSize}px`);container.style.setProperty("--active-tab",sizes.join(" ")),this.#drag.progress=progress}#endDrag(ac){if(!this.#drag)return;const{container}=this.refs;container?.removeAttribute("data-dragging"),this.#drag.dragging?(this.#drag.prevent=!0,setTimeout(()=>this.#drag=null,100),this.#drag.progress&&this.#drag.progress>=DRAG_COMPLETE_THRESHOLD?this.#activate(this.#drag.target):this.#updateActiveTab()):this.#drag=null,ac.abort()}#observeContentHeight(){const{panels}=this.refs;this.#heightObserver?.disconnect(),this.#heightObserver=new ResizeObserver(()=>this.#syncHeight()),this.#contentObserver?.disconnect(),this.#contentObserver=new MutationObserver(()=>this.#syncHeight());for(const panel of panels??[]){const content=panel.querySelector(".layered-sli

1deshow__content"),inner=content?.querySelector(".group-block-content");inner&&this.#heightObserver.observe(inner),content&&this.#heightObserver.observe(content);const target=inner??content;target&&this.#contentObserver.observe(target,{childList:!0,subtree:!0,characterData:!0})}this.#syncHeight()}#syncHeight(){const{container}=this.refs,contentHeight=this.#getMaxContentHeight(),isAuto=container.getAttribute("size")==="auto";this.#isMobile?this.#syncMobileHeight(contentHeight,isAuto):this.#syncDesktopHeight(contentHeight,isAuto)}#syncDesktopHeight(contentHeight,isAuto){const{container}=this.refs;if(isAuto){let minHeightTemp=Math.max(contentHeight,150);container.style.height=`${minHeightTemp}px`,this.style.minHeight=`${minHeightTemp}px`}else{const savedMinHeight=this.style.minHeight;this.style.minHeight="";const cssMinHeight=parseFloat(getComputedStyle(this).minHeight)||0;this.style.minHeight=savedMinHeight,contentHeight>cssMinHeight?(this.style.minHeight=`${contentHeight}px`,container.style.height=`${contentHeight}px`):(this.style.minHeight="",container.style.height="")}}#syncMobileHeight(contentHeight,isAuto){const{container,tabs}=this.refs;if(!container||!tabs)return;const containerStyles=getComputedStyle(container),inactiveStackHeight=(tabs.length-1)*this.#inactiveSize;let minPanelHeight;if(isAuto)minPanelHeight=150;else{const inheritedValue=containerStyles.getPropertyValue("--layered-panel-height-mobile"),componentValue=getComputedStyle(this).getPropertyValue("--layered-panel-height-mobile");minPanelHeight=parseFloat(inheritedValue||componentValue)||260}const requiredActiveHeight=Math.max(minPanelHeight,contentHeight);container.style.setProperty("--active-panel-height",`${requiredActiveHeight}px`),container.style.height=`${requiredActiveHeight+inactiveStackHeight}px`}#clearHeightStyles(){const{container}=this.refs;this.style.minHeight="",container.style.height="",container.style.removeProperty("--active-panel-height")}#getMaxContentHeight(){const{panels}=this.refs;let max=0;for(const panel of panels??[]){const content=panel.querySelector(".layered-slideshow__content");if(!content)continue;const inner=content.querySelector(".group-block-content")??content,savedHeight=inner.style.height;inner.style.height="auto";const styles=getComputedStyle(content),paddingTop=parseFloat(styles.paddingBlockStart||styles.paddingTop)||0,paddingBottom=parseFloat(styles.paddingBlockEnd||styles.paddingBottom)||0,height=(inner.scrollHeight||0)+paddingTop+paddingBottom;height>max&&(max=height),inner.style.height=savedHeight}return max}}customElements.define("layered-slideshow-component",LayeredSlideshowComponent);
2//# sourceMappingURL=/cdn/shop/t/533/assets/layered-slideshow.js.map?v=30135417790894624731765914131