https://junglueck.de/cdn/shop/t/676/assets/tab-drawer-v2.js?v=66819270706491340681788421978

1(()=>{if(window.customElements.get("tab-drawer-v2"))return;const SCROLL_LOCK_CLASS="tab-drawer-v2-scroll-lock",FOCUSABLE=["a[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");class TabDrawerV2 extends HTMLElement{constructor(){super(),this.tabs=[],this.activeIndex=-1,this.previousFocus=null,this.boundOnKeydown=this.onKeydown.bind(this)}connectedCallback(){this.drawer=this.querySelector(".tab-drawer-v2__drawer"),this.overlay=this.querySelector(".tab-drawer-v2__overlay"),this.panel=this.querySelector("[data-tdv2-panel]"),this.activeTitleEl=this.querySelector("[data-tdv2-active-title]"),this.triggerList=this.querySelector("[data-tdv2-trigger-list]"),this.navList=this.querySelector("[data-tdv2-nav-list]"),this.iconArrow=this.iconHTML("[data-tdv2-icon-arrow]"),!(!this.drawer||!this.overlay||!this.panel)&&(this.collectTabs(),this.renderTriggers(),this.renderNav(),this.bindCloseHandlers(),this.setupRabatte())}disconnectedCallback(){document.removeEventListener("keydown",this.boundOnKeydown),this.boundRabatteChange&&document.removeEventListener("change",this.boundRabatteChange),this.boundRabatteClick&&document.removeEventListener("click",this.boundRabatteClick),this.boundRabatteActionClick&&document.removeEventListener("click",this.boundRabatteActionClick),document.body.classList.remove(SCROLL_LOCK_CLASS)}iconHTML(selector){const tpl=this.querySelector(selector);return tpl?tpl.innerHTML:""}collectTabs(){const sources=this.querySelectorAll("[data-tab-v2-source]");this.tabs=Array.from(sources).map(src=>(src.removeAttribute("hidden"),this.bindUpsellToggles(src),{id:src.getAttribute("data-tab-v2-id"),title:src.getAttribute("data-tab-v2-title")||"",titleHtml:src.getAttribute("data-tab-v2-title-html")||"",tabType:src.getAttribute("data-tab-v2-tab-type")||"",hiddenTrigger:src.getAttribute("data-tab-v2-hidden-trigger")==="true",sourceEl:src})).filter(t=>t.id&&t.title)}refreshFromHTML(html){const template=document.createElement("template");template.innerHTML=html.trim(),template.content.querySelectorAll("[data-tab-v2-source]").forEach(newSourceEl=>{const tabId=newSourceEl.getAttribute("data-tab-v2-id"),tab=this.tabs.find(t=>t.id===tabId);if(!tab)return;const container=this.activeIndex>=0&&this.tabs[this.activeIndex]===tab?this.panel:tab.sourceEl;for(;container.firstChild;)container.removeChild(container.firstChild);for(;newSourceEl.firstChild;)container.appendChild(newSourceEl.firstChild);this.bindUpsellToggles(container),tab.tabType==="rabatte"&&this.bindRabatteRadioGroups(container)})}renderTriggers(){this.triggerList&&(this.triggerList.innerHTML="",this.tabs.forEac

1h((tab,idx)=>{if(tab.hiddenTrigger)return;const li=document.createElement("li");li.className="tab-drawer-v2__trigger-item";const btn=document.createElement("button");btn.type="button",btn.className="tab-drawer-v2__trigger",btn.setAttribute("data-tab-target",tab.id),btn.setAttribute("data-tab-index",String(idx)),btn.setAttribute("aria-expanded","false"),btn.innerHTML=`
2          <h5 class="tab-drawer-v2__trigger-label"></h5>
3          <span class="tab-drawer-v2__trigger-icon" aria-hidden="true">${this.iconArrow}</span>
4        `;const labelEl=btn.querySelector(".tab-drawer-v2__trigger-label");tab.titleHtml?labelEl.innerHTML=tab.titleHtml:labelEl.textContent=tab.title,btn.addEventListener("click",e=>{e.preventDefault(),this.open(tab.id)}),li.appendChild(btn),this.triggerList.appendChild(li)}))}renderNav(){this.navList&&(this.navList.innerHTML="",this.navList.setAttribute("role","tablist"),this.tabs.forEach((tab,idx)=>{if(tab.hiddenTrigger&&tab.tabType!=="rabatte")return;const li=document.createElement("li");li.className="tab-drawer-v2__nav-item",tab.tabType==="rabatte"&&(li.classList.add("tab-drawer-v2__nav-item--rabatte"),li.classList.add("is-hidden-nav"));const btn=document.createElement("button");btn.type="button",btn.className="tab-drawer-v2__nav-link",btn.setAttribute("role","tab"),btn.setAttribute("aria-selected","false"),btn.setAttribute("data-tab-target",tab.id),btn.setAttribute("data-tab-index",String(idx)),tab.tabType==="rabatte"&&btn.setAttribute("data-tab-type","rabatte"),btn.textContent=tab.title,btn.addEventListener("click",e=>{e.preventDefault(),this.setActive(idx)}),li.appendChild(btn),this.navList.appendChild(li)}))}bindCloseHandlers(){this.querySelectorAll("[data-tdv2-close]").forEach(btn=>{btn.hasAttribute("aria-label")||btn.setAttribute("aria-label","Close"),btn.addEventListener("click",e=>{e.preventDefault(),this.close()})})}open(id){const idx=this.tabs.findIndex(t=>t.id===id);if(idx===-1)return;const wasOpen=this.classList.contains("is-open");this.setActive(idx),wasOpen||(this.previousFocus=document.activeElement,this.previousFocus&&this.previousFocus.matches(".tab-drawer-v2__trigger")&&this.previousFocus.setAttribute("aria-expanded","true"),this.classList.add("is-open"),this.setAttribute("data-state","open"),document.body.classList.add(SCROLL_LOCK_CLASS),document.addEventListener("keydown",this.boundOnKeydown),requestAnimationFrame(()=>this.focusFirst()))}openTabType(type){const tab=this.tabs.find(t=>t.tabType===type);return tab?(this.open(tab.id),!0):!1}close(){this.classList.contains("is-open")&&(this.classList.remove("is-open"),this.setAttribute("data-state","closed"),document.body.classList.remove(SCROLL_LOCK_CLASS),document.removeEventListener("keydown",this.boundOnKeydown),this.returnPanelToSource(),this.previousFocus&&this.previousFocus.matches(".tab-drawer-v2__trigger")&&this.previousFocus.setAttribute("aria-expanded","false"),this.previousFocus&&typeof this.previousFocus.focus=="function"&&this.previousFocus.focus({preventScroll:!0}))}returnPanelToSource(){if(this.activeIndex<0)return;const prev=this.tabs[this.activeIndex];if(prev){for(;this.panel.firstChild;)prev.sourceEl.appendChild(this.panel.firstChild);this.activeIndex=-1}}setActive(idx){const tab=this.tabs[idx];if(tab&&this.activeIndex!==idx){if(this.activeIndex>=0){const prev=this.tabs[this.activeIndex];if(prev)for(;this.panel.firstChild;)prev.sourceEl.appendChild(this.panel.firstChild)}for(;tab.sourceEl.firstChild;)this.panel.appendChild(tab.sourceEl.firstChild);this.activeIndex=idx,this.activeTitleEl&&(this.activeTitleEl.textContent=tab.title),this.panel.scrollTop=0,this.querySelectorAll("[data-tab-target]").forEach(el=>{const isActive=el.getAttribute("data-tab-target")===tab.id;el.classList.toggle("is-active",isActive),el.matches(".tab-drawer-v2__nav-link")&&(el.setAttribute("aria-current",isActive?"true":"false"),el.setAttribute("aria-selected",isActive?"true":"false"))}),this.scrollActiveNavIntoView(tab.id),this.dispatchEvent(new CustomEvent("tab-drawer-v2:change",{detail:{id:tab.id,index:idx},bubbles:!0}))}}scrollActiveNavIntoView(tabId){if(!this.navList)return;const activeItem=this.navList.querySelector(`[data-tab-target="${tabId}"]`);if(!activeItem)return;const target=activeItem.closest(".tab-drawer-v2__nav-item")||activeItem,itemLeft=target.offsetLeft,itemRight=itemLeft+target.offsetWidth,viewLeft=this.navList.scrollLeft,viewRight=viewLeft+this.navList.clientWidth;let nextScroll=viewLeft;if(itemLeft<viewLeft)nextScroll=itemLeft;else if(itemRight>viewRight)nextScroll=itemRight-this.navList.clientWidth;else return;this.navList.scrollTo({left:nextScroll,behavior:"smooth"})}setupRabatte(){const rabatte=this.tabs.find(t=>t.tabType==="rabatte");if(!rabatte)return;this.rabatteTab=rabatte,document.body.classList.add("has-rabatte-drawer"),this.boundRabatteChange=this.onPurchaseOptionChange.bind(this),this.boundRabatteClick=this.onSubscriptionLabelClick.bind(this),this.boundRabatteActionClick=this.onRabatteActionClick.bind(this),document.addEventListener("change",this.boundRabatteChange),document.addEventListener("click",this.boundRabatteClick),document.addEventListener("click",this.boundRabatteActionClick);const initialSub=document.querySelector('input[name="purchase-option"][type="radio"][value="subscription"]');initialSub&&initialSub.checked&&this.showRabatteNav(),this.bindRabatteRadioGroups(rabatte.sourceEl)}bindRabatteRadioGroups(scope){scope.querySelectorAll("[data-tdv2-rabatte-radio-group]").forEach(group=>{group.addEventListener("change",e=>{const radio=e.target;radio&&radio.type==="radio"&&this.syncSellingPlanFromDrawer(group,radio.value)})})}onRabatteActionClick(e){if(!e.target||!e.target.closest)return;const subscribeBtn=e.target.closest("[data-tdv2-rabatte-subscribe]");if(subscribeBtn){e.preventDefault(),this.onRabatteSubscribeClick(subscribeBtn);return}e.target.closest("[data-tdv2-rabatte-onetime]")&&(e.preventDefault(),this.onRabatteOnetimeClick())}onRabatteSubscribeClick(btn){const groupId=btn.getAttribute("data-tdv2-rabatte-group"),subRadio=groupId?document.getElementById(`sellingplan-group-${groupId}`):document.querySelector('input[name="purchase-option"][value="subscription"]');subRadio&&!subRadio.checked&&(subRadio.checked=!0,subRadio.dispatchEvent(new Event("change",{bubbles:!0})));const drawerGroup=btn.closest(".tab-rabatte-v2__group")?btn.closest(".tab-rabatte-v2__group").querySelector("[data-tdv2-rabatte-radio-group]"):null;if(drawerGroup){const checked=drawerGroup.querySelector('input[type="radio"]:checked');checked&&this.syncSellingPlanFromDrawer(drawerGroup,checked.value)}this.close();const atc=document.querySelector(".shopify-section-product-main .add-to-cart-button:not([disabled])");atc&&atc.click()}onRabatteOnetimeClick(){const oneTimeRadio=document.getElementById("onetime-purchase")||document.querySelector('input[name="purchase-option"][value="onetime"]');oneTimeRadio&&!oneTimeRadio.checked?(oneTimeRadio.checked=!0,oneTimeRadio.dispatchEvent(new Event("change",{bubbles:!0}))):(this.hideRabatteNav(),this.close())}onPurchaseOptionChange(e){const target=e.target;!target||!target.matches('input[name="purchase-option"][type="radio"]')||target.checked&&(target.value==="subscription"?(this.showRabatteNav(),this.openRabatte()):(this.hideRabatteNav(),this.close()))}onSubscriptionLabelClick(e){const label=e.target&&e.target.closest?e.target.closest('label[for^="sellingplan-group-"]'):null;if(!label)return;const radio=document.getElementById(label.getAttribute("for"));radio&&radio.checked&&(this.showRabatteNav(),this.openRabatte())}openRabatte(){if(!this.rabatteTab)return;const isOpen=this.classList.contains("is-open"),isRabatteActive=this.activeIndex>=0&&this.tabs[this.activeIndex]===this.rabatteTab;if(!(isOpen&&isRabatteActive)){if(isOpen&&!isRabatteActive){this.setActive(this.tabs.indexOf(this.rabatteTab));return}this.activeIndex>=0&&this.tabs[this.activeIndex]===this.rabatteTab&&(this.activeIndex=-1),this.open(this.rabatteTab.id)}}showRabatteNav(){if(!this.navList)return;this.navList.querySelectorAll(".tab-drawer-v2__nav-item--rabatte").forEach(el=>el.classList.remove("is-hidden-nav"))}hideRabatteNav(){if(!this.navList)return;this.navList.querySelectorAll(".tab-drawer-v2__nav-item--rabatte").forEach(el=>el.classList.add("is-hidden-nav"))}syncSellingPlanFromDrawer(group,newValue){if(newValue==null)return;const mirrorId=group.getAttribute("data-tdv2-rabatte-mirror");

4if(mirrorId){const original=document.getElementById(mirrorId);original&&"value"in original&&original.value!==newValue&&(original.value=newValue,original.dispatchEvent(new Event("change",{bubbles:!0})))}const formInput=document.querySelector('selling-plan-picker input[name="selling_plan"]');formInput&&(formInput.disabled=!1,formInput.value=newValue,formInput.dispatchEvent(new Event("change",{bubbles:!0})));const checkedRadio=group.querySelector(`input[value="${newValue}"]`);if(checkedRadio){const priceStr=checkedRadio.getAttribute("data-selling-plan-price");if(priceStr){const groupEl=group.closest(".tab-rabatte-v2__group");if(groupEl){const priceEl=groupEl.querySelector(".tab-rabatte-v2__group-name strong");priceEl&&(priceEl.textContent=priceStr)}}}}bindUpsellToggles(scope){const triggers=scope.querySelectorAll("[data-upsell-target]"),panes=scope.querySelectorAll("[data-upsell-pane]");!triggers.length||!panes.length||triggers.forEach(trigger=>{trigger.dataset.tdv2Bound!=="1"&&(trigger.dataset.tdv2Bound="1",trigger.addEventListener("click",()=>{const target=trigger.getAttribute("data-upsell-target");triggers.forEach(t=>t.classList.toggle("is-active",t===trigger)),panes.forEach(p=>{p.classList.toggle("is-active",p.getAttribute("data-upsell-pane")===target)})}))})}onKeydown(e){if(e.key==="Escape"){this.close();return}e.key==="Tab"&&this.trapFocus(e)}focusFirst(){(this.drawer.querySelectorAll(FOCUSABLE)[0]||this.drawer).focus({preventScroll:!0})}trapFocus(e){const focusable=Array.from(this.drawer.querySelectorAll(FOCUSABLE)).filter(el=>el.offsetParent!==null);if(!focusable.length)return;const first=focusable[0],last=focusable[focusable.length-1];e.shiftKey&&document.activeElement===first?(e.preventDefault(),last.focus()):!e.shiftKey&&document.activeElement===last&&(e.preventDefault(),first.focus())}}customElements.define("tab-drawer-v2",TabDrawerV2);function visibleDrawer(){return Array.from(document.querySelectorAll("tab-drawer-v2")).find(el=>el.offsetParent!==null)||null}document.addEventListener("click",e=>{const el=e.target.closest('[data-open-tab-type], a[href="#product-reviews-tab"]');if(!el)return;const type=el.getAttribute("data-open-tab-type")||"reviews",drawer=visibleDrawer();!drawer||typeof drawer.openTabType!="function"||drawer.openTabType(type)&&(e.preventDefault(),e.stopPropagation())},!0);function openFromHash(){if(window.location.hash!=="#reviews")return;const drawer=visibleDrawer();drawer&&typeof drawer.openTabType=="function"&&drawer.openTabType("reviews")}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",openFromHash):openFromHash(),window.addEventListener("hashchange",openFromHash)})();
5//# sourceMappingURL=/cdn/shop/t/676/assets/tab-drawer-v2.js.map?v=66819270706491340681788421978