https://www.venasolutions.com/hubfs/hub_generated/module_assets/1/…/module_v3_-_Accordion_with_Image.min.js

1var module_190085650013=function(){const accordionInstances=document.querySelectorAll("#v3-accordion-with-image-and-video");accordionInstances?.forEach(accordionInstance=>{const elements={accordionItems:accordionInstance.querySelectorAll(".accordion__item"),displayImage:accordionInstance.querySelector("#accordion-image"),displayVideo:accordionInstance.querySelector("#accordion-video"),displayImageWrapper:accordionInstance.querySelector(".accordion__image-display-wrapper"),displayVideoWrapper:accordionInstance.querySelector(".accordion__video-display-wrapper"),videoPlayButton:accordionInstance.querySelector("#accordion-video-play-button"),videoPauseButton:accordionInstance.querySelector("#accordion-video-pause-button")};let currentlyOpenItem=null;const videoControls={init(){elements.videoPlayButton?.addEventListener("click",()=>this.play()),elements.videoPauseButton?.addEventListener("click",()=>this.pause())},play(){elements.displayVideo?.play(),elements.videoPlayButton?.classList.add("d-none"),elements.videoPauseButton?.classList.remove("d-none")},pause(){elements.displayVideo?.pause(),elements.videoPlayButton?.classList.remove("d-none"),elements.videoPauseButton?.classList.add("d-none")},reset(){elements.videoPlayButton?.classList.add("d-none"),elements.videoPauseButton?.classList.remove("d-none")}},mediaDisplay={updateImage(src,alt){elements.displayImage&&(src?(elements.displayImage.style.display="block",elements.displayImage.classList.add("is-changing"),setTimeout(()=>{elements.displayImage.src=src,elements.displayImage.alt=alt,elements.displayImage.onload=()=>{elements.displayImage.classList.remove("is-changing")},setTimeout(()=>elements.displayImage.classList.remove("is-changing"),50)},150)):elements.displayImage.style.display="none")},updateVideo(src,alt){elements.displayVideo&&(src?(elements.displayVideo.style.display="block",elements.displayVideo.classList.add("is-changing"),videoControls.reset(),setTimeout(()=>{const currentVideoAspectRatio=elements.displayVideo.offsetWidth/elements.displayVideo.offsetHeight;elements.displayVideo.style.aspectRatio=currentVideoAspectRatio,elements.displayVideo.src=src,elements.displayVideo.setAttribute("aria-label",alt),elements.displayVideo.oncanplay=()=>{elements.displayVideo.style.aspectRatio="auto",elements.displayVideo.classList.remove("is-changing")},setTimeout(()=>elements.displayVideo.classList.remove("is-changing"),50)},150)):elements.displayVideo.style.display="none")},switchDisplayType(newType){"image"===newType?(elements.displayVideoWrapper.style.display="none",elements.displayImageWrapper.style.display="block"):"video"===newType&&(elements.displayImageWrapper.style.display="none",elements.displayVideoWrapper.style.display="block")}},accordionManager={openItem(item,title,panel){item.classList.add("is-open"),title.setAttribute("aria-expanded","true"),title.setAttribute("aria-disabled","true"),panel.removeAttribute("hidden"),requestAnimationFrame(()=>{panel.style.maxHeight=panel.scrollHeight+"px"})},closeItem(item,title,panel){item.classList.remove("is-open"),title.setAttribute("aria-expanded","false"),title.setAttribute("aria-disabled","false"),panel.style.maxHeight="0px",panel.addEventListener("transitionend",function onTransitionEnd(){item.classList.contains("is-open")||panel.setAttribute("hidden",""),panel.removeEventListener("transitionend",onTransitionEnd)},{once:!0})},toggleItem(clickedItem){const clickedTitle=clickedItem.querySelector(".accordion__item-button"),clickedPanel=clickedItem.querySelector(".accordion__panel");if(!clickedTitle||!clickedPanel)return;const mediaType=clickedItem.dataset.mediaType,imageSrc=clickedItem.dataset.imageSrc,imageAlt=clickedItem.dataset.imageAlt,videoSrc=clickedItem.dataset.videoSrc,videoAlt=clickedItem.dataset.videoAlt,isClickedItemOpen=clickedItem.classList.contains("is-open");if(currentlyOpenItem&&currentlyOpenItem!==clickedItem){const openTitle=currentlyOpenItem.querySelector(".accordion__item-button"),openPanel=currentlyOpenItem.querySelector(".accordion__panel");openTitle&&openPanel&&this.closeItem(currentlyOpenItem,openTitle,openPanel)}if(!isClickedItemOpen){const clickedItemType=clickedItem.dataset.mediaType,currentlyOpenItemType=currentlyOpenItem?.dataset.mediaType;clickedItemType!==currentlyOpenItemType&&mediaDisplay.switchDisplayType(clickedItemType),this.openItem(clickedItem,clickedTitle,clickedPanel),"image"===mediaType&&imageSrc?mediaDisplay.updateImage(imageSrc,imageAlt):"video"===mediaType&&videoSrc&&mediaDisplay.updateVideo(videoSrc,videoAlt),currentlyOpenItem=clickedItem}}},initialize={setupInitialPanelHeights(){elements.accordionItems.forEac

1h(item=>{const panel=item.querySelector(".accordion__panel");item.classList.contains("is-open")?panel&&!panel.hasAttribute("hidden")&&(panel.style.maxHeight=panel.scrollHeight+"px"):panel&&(panel.style.maxHeight="0px",panel.setAttribute("hidden",""))})},setupInitialDisplay(){const initiallyOpenItem=Array.from(elements.accordionItems).find(item=>item.classList.contains("is-open"));if(initiallyOpenItem){const mediaType=initiallyOpenItem.dataset.mediaType;if("image"===mediaType){const imageSrc=initiallyOpenItem.dataset.imageSrc,imageAlt=initiallyOpenItem.dataset.imageAlt;imageSrc&&mediaDisplay.updateImage(imageSrc,imageAlt)}else if("video"===mediaType){const videoSrc=initiallyOpenItem.dataset.videoSrc,videoAlt=initiallyOpenItem.dataset.videoAlt;videoSrc&&mediaDisplay.updateVideo(videoSrc,videoAlt)}currentlyOpenItem=initiallyOpenItem}},setupEventListeners(){elements.accordionItems.forEach(item=>{const title=item.querySelector(".accordion__item-button"),panel=item.querySelector(".accordion__panel");if(!title||!panel)return;title.addEventListener("click",()=>{accordionManager.toggleItem(item)})})}};videoControls.init(),initialize.setupInitialPanelHeights(),initialize.setupInitialDisplay(),initialize.setupEventListeners()})}();
2//# sourceURL=https://7282783.fs1.hubspotusercontent-na1.net/hubfs/7282783/hub_generated/module_assets/1/190085650013/1776970553778/module_v3_-_Accordion_with_Image.js