/* ===================================================== ======================================================== SENIORENBED JS ======================================================== ===================================================== */ /* IN PAGE MENU */ (function(){function initInpageMenu(){const menuItems=document.querySelectorAll('.seniorenbed-inpage-menu-item');if(!menuItems.length)return;menuItems.forEach((item)=>{if(item.dataset.inpageMenuInitialized==='true')return;item.dataset.inpageMenuInitialized='true';item.addEventListener('click',()=>{menuItems.forEach((menuItem)=>{menuItem.classList.remove('seniorenbed-inpage-menu-item-active')});item.classList.add('seniorenbed-inpage-menu-item-active')})})}initInpageMenu();const observer=new MutationObserver(initInpageMenu);observer.observe(document.body,{childList:true,subtree:true})})(); /* STICKYNESS INPAGE MENU */ (function(){function initInpageMenuObserver(){var menu=document.querySelector('.seniorenbed-inpage-menu');var menuItems=Array.prototype.slice.call(document.querySelectorAll('.seniorenbed-inpage-menu-item[href^="#"]'));if(!menuItems.length||document.body.dataset.inpageMenuObserverInitialized==='true')return;document.body.dataset.inpageMenuObserverInitialized='true';var sections=menuItems.map(function(item){var id=item.getAttribute('href');return document.querySelector(id)}).filter(Boolean);function setActiveSection(id){menuItems.forEach(function(item){var isActive=item.getAttribute('href')==='#'+id;item.classList.toggle('seniorenbed-inpage-menu-item-active',isActive);if(isActive&&menu){item.scrollIntoView({behavior:'smooth',inline:'center',block:'nearest'})}})}var observer=new IntersectionObserver(function(entries){entries.forEach(function(entry){if(entry.isIntersecting){setActiveSection(entry.target.id)}})},{root:null,rootMargin:'-35% 0px -55% 0px',threshold:0});sections.forEach(function(section){observer.observe(section)})}initInpageMenuObserver();var mutationObserver=new MutationObserver(initInpageMenuObserver);mutationObserver.observe(document.body,{childList:true,subtree:true})})(); /* STICKY FOOTER */ (function(){function initStickyFooter(){const stickyFooter=document.querySelector('.seniorenbed-sticky-footer');if(!stickyFooter||stickyFooter.dataset.stickyFooterInitialized==='true')return;stickyFooter.dataset.stickyFooterInitialized='true';function toggleStickyFooter(){stickyFooter.classList.toggle('is-visible',window.scrollY>1120)}window.addEventListener('scroll',toggleStickyFooter,{passive:true});window.addEventListener('resize',toggleStickyFooter);toggleStickyFooter()}initStickyFooter();const observer=new MutationObserver(initStickyFooter);observer.observe(document.body,{childList:true,subtree:true})})(); /* FILTER CATEGORIE PAGINA */ (()=>{const e=11,t=Array.from(document.querySelectorAll(".seniorenbed-filter-button")),n=Array.from(document.querySelectorAll(".seniorenbed-categorie-card")),r=document.querySelector(".seniorenbed-categorie-grid"),i=document.querySelector(".js-seniorenbed-result-count"),a=document.querySelector(".js-seniorenbed-sort"),s=document.querySelector(".seniorenbed-categorie-pagination"),o=document.querySelector(".js-seniorenbed-pagination-pages"),l=document.querySelector(".js-seniorenbed-page-prev"),d=document.querySelector(".js-seniorenbed-page-next"),c=document.querySelector(".seniorenbed-categorie-filterbar");let g="all",u=1,m=[];const p=e=>e.classList.contains("seniorenbed-categorie-card--guide"),f=e=>Number(e.dataset.price||999999),h=e=>Number(e.dataset.popular||0),v=e=>Number(e.dataset.features||0),b=()=>window.matchMedia("(max-width: 767px)").matches,y=()=>Math.max(1,Math.ceil(m.length/e)),C=()=>{if(!r)return;let e=(c?c.offsetHeight:0)+18,t=r.getBoundingClientRect().top+window.pageYOffset-e;window.scrollTo({top:t,behavior:"smooth"})},P=e=>{let t=a?a.value:"popular",n=[...e];return n.sort((e,n)=>"price-asc"===t?f(e)-f(n):"price-desc"===t?f(n)-f(e):"features-desc"===t?v(n)-v(e):h(n)-h(e)),n},k=()=>{let e=y();if(!s||!o||!l||!d)return;s.hidden=!1,o.innerHTML="",l.disabled=1===u,d.disabled=u===e;for(let t=1;t<=e;t++){let n=document.createElement("button");n.type="button",n.className="seniorenbed-categorie-pagination-page",n.textContent=String(t),n.setAttribute("aria-label","Ga naar pagina "+t),t===u&&(n.classList.add("is-active"),n.setAttribute("aria-current","page")),n.addEventListener("click",()=>{t!==u&&(u=t,w(),C())}),o.appendChild(n)}},w=()=>{if(!r)return;let t=n.filter(p),i=P(m),a=y();u>a&&(u=a);let s=(u-1)*e,o=s+e,l=i.slice(s,o);n.forEach(e=>{e.hidden=!0}),l.forEach(e=>{e.hidden=!1});let d=[...l];if(1===u){let e=t.filter(e=>{let t=(e.dataset.category||"").split(" ");return"all"===g||t.includes(g)||t.includes("all")}),n=b()?1:2;e.forEach(e=>{e.hidden=!1,d.splice(n,0,e)})}let c=n.filter(e=>e.hidden);[...d,...c].forEach(e=>r.appendChild(e)),k()},q=e=>{g=e,u=1,t.forEach(t=>{let n=t.dataset.filter===e;t.classList.toggle("is-active",n),t.setAttribute("aria-selected",String(n))}),m=n.filter(t=>{if(p(t))return!1;let n=(t.dataset.category||"").split(" ");return"all"===e||n.includes(e)||n.includes("all")}),i&&(i.textContent=String(m.length)),w()},L=()=>{if(!c)return;let e=c.getBoundingClientRect();e.top<=0?c.classList.add("is-stuck"):c.classList.remove("is-stuck")};t.forEach(e=>{e.addEventListener("click",()=>q(e.dataset.filter))}),a&&a.addEventListener("change",()=>{u=1,w()}),l&&l.addEventListener("click",()=>{u>1&&(u--,w(),C())}),d&&d.addEventListener("click",()=>{let e=y();uMath.abs(diffX))return;if(diffX<0&&activeIndex0&&activeIndex>0){updateGallery(activeIndex-1)}},{passive:true})}updateGallery(activeIndex)}initProductGallery();const observer=new MutationObserver(initProductGallery);observer.observe(document.body,{childList:true,subtree:true})})(); /* SPECIFICATIES */ (function(){function t(t){if(!(t=t||document.getElementById("specificaties"))||"true"===t.dataset.specificatiesInitialized)return;var e=t.querySelector(".seniorenbed-specificaties-toggle"),i=t.querySelector(".seniorenbed-specificaties-search-input"),n=Array.prototype.slice.call(t.querySelectorAll(".seniorenbed-specificaties-row")),o=Array.prototype.slice.call(t.querySelectorAll(".seniorenbed-specificaties-category")),r=t.querySelector(".seniorenbed-specificaties-no-results");if(!n.length)return;t.dataset.specificatiesInitialized="true";var s=7,a=!1;function c(t){return(t||"").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[-–—]/g," ").replace(/[^\w\s]/g," ").replace(/\s+/g," ").trim()}function l(t){return c(t.textContent+" "+(t.getAttribute("data-spec-search")||""))}function d(t){return c(t).split(" ").filter(Boolean)}function h(t,e){var i=l(t);return e.every(function(t){return-1=s,o++}),u(),r&&(r.hidden=!0),e&&(e.hidden=n.length<=s,e.setAttribute("aria-expanded","false"),e.textContent="Toon alle specificaties"),a=!1}function f(){n.forEach(function(t){t.hidden=!1}),u(),r&&(r.hidden=!0),e&&(e.hidden=!1,e.setAttribute("aria-expanded","true"),e.textContent="Toon minder specificaties"),a=!0}function g(){t.scrollIntoView({behavior:"smooth",block:"start"})}function m(){var t=d(i?i.value:""),o=!1;t.length?(n.forEach(function(e){var i=h(e,t);e.hidden=!i,i&&(o=!0)}),u(),r&&(r.hidden=o),e&&(e.hidden=!0)):a?f():p()}e&&e.addEventListener("click",function(){a?(p(),g()):f()}),i&&i.addEventListener("input",m),p()}function e(){document.querySelectorAll("#specificaties").forEach(function(e){t(e)})}e(),new MutationObserver(function(){e()}).observe(document.body,{childList:!0,subtree:!0})})(); /* CARD GIDS OP CATEOGRIE PAGINA */ (function(){function initGuideCard(){if(document.body.dataset.guideCardInitialized==='true')return;document.body.dataset.guideCardInitialized='true';document.documentElement.classList.add('js');var guideCard=document.querySelector('.seniorenbed-categorie-card--guide');if(!guideCard)return;function showGuide(){guideCard.classList.add('is-visible')}if(!('IntersectionObserver'in window)){showGuide();return}var observer=new IntersectionObserver(function(entries){entries.forEach(function(entry){if(entry.isIntersecting){showGuide();observer.disconnect()}})},{threshold:.1,rootMargin:'0px 0px -10% 0px'});observer.observe(guideCard);setTimeout(showGuide,1200)}initGuideCard();var observer=new MutationObserver(initGuideCard);observer.observe(document.body,{childList:true,subtree:true})})(); /* =============================== DS2 COMPONENTS JS =============================== */ /* DS2 CAROUSEL */ function initDs2Carousel(e=document){e.querySelectorAll(".ds2-carousel").forEach(function(e){if("true"===e.dataset.ds2CarouselBound)return;e.dataset.ds2CarouselBound="true";var t=e.querySelector("[data-ds2-viewport]"),r=e.querySelector(".ds2-carousel__track"),o=e.querySelector("[data-ds2-prev]"),n=e.querySelector("[data-ds2-next]");if(!t||!r||!o||!n)return;function i(){var e=r.querySelector(".ds2-card");if(!e)return 0;var o=getComputedStyle(r),n=e.getBoundingClientRect().width,a=parseFloat(o.columnGap||o.gap||"0")||0;return n+a}function a(e){var r=i();r&&t.scrollBy({left:e*r,behavior:"smooth"})}function l(){var e=t.scrollWidth-t.clientWidth,r=t.scrollLeft;o.disabled=r<=1,n.disabled=r>=e-1}o.addEventListener("click",function(){a(-1)}),n.addEventListener("click",function(){a(1)}),t.addEventListener("scroll",function(){requestAnimationFrame(l)},{passive:!0}),window.addEventListener("resize",l),l()})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){initDs2Carousel()}):initDs2Carousel(); /* DS2 GALLERY (SIMPLE GALERY) */ (function(){const g=document.querySelector(".js-ds2-gallery");if(!g)return;const v=g.querySelector(".js-ds2-gallery-viewport"),p=g.querySelector(".js-ds2-gallery-prev"),n=g.querySelector(".js-ds2-gallery-next"),slides=Array.from(v.querySelectorAll("img")),r=window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(!v||!slides.length)return;const w=()=>slides[0].getBoundingClientRect().width,wrap=i=>{const n=slides.length;return(i%n+n)%n},nearest=()=>{const x=v.scrollLeft;let b=0,d=Math.abs(slides[0].offsetLeft-x);for(let i=1;i{const t=wrap(i);v.scrollTo({left:slides[t].offsetLeft,behavior:r?"auto":"smooth"})};p&&p.addEventListener("click",()=>go(nearest()-1)),n&&n.addEventListener("click",()=>go(nearest()+1)),v.addEventListener("keydown",e=>{"ArrowLeft"===e.key&&(e.preventDefault(),go(nearest()-1)),"ArrowRight"===e.key&&(e.preventDefault(),go(nearest()+1))})})(); /* DS2 BEDMODEL GALLERY IN HERO */ (function(){const g=document.querySelector(".js-ds2-bedmodel-gallery");if(!g)return;const v=g.querySelector(".js-ds2-bedmodel-gallery-viewport"),p=g.querySelector(".js-ds2-bedmodel-gallery-prev"),n=g.querySelector(".js-ds2-bedmodel-gallery-next");if(!v)return;const slides=Array.from(g.querySelectorAll(".ds2-bedmodel-gallery__img"));if(!slides.length)return;const prefersReduced=window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;let targetIndex=0;const maxIndex=()=>slides.length-1,wrapIndex=i=>{const n=slides.length;return(i%n+n)%n},getNearestIndex=()=>{const x=v.scrollLeft;let best=0,bestDist=Math.abs(slides[0].offsetLeft-x);for(let i=1;i{targetIndex=wrapIndex(i),v.scrollTo({left:slides[targetIndex].offsetLeft,behavior:prefersReduced?"auto":"smooth"})};p&&p.addEventListener("click",()=>goTo(getNearestIndex()-1)),n&&n.addEventListener("click",()=>goTo(getNearestIndex()+1)),v.addEventListener("keydown",e=>{"ArrowLeft"===e.key&&(e.preventDefault(),goTo(targetIndex-1)),"ArrowRight"===e.key&&(e.preventDefault(),goTo(targetIndex+1))});let raf=0;v.addEventListener("scroll",()=>{raf||(raf=requestAnimationFrame(()=>{raf=0,targetIndex=getNearestIndex()}))},{passive:!0}),window.addEventListener("resize",()=>{targetIndex=getNearestIndex()}),targetIndex=getNearestIndex()})(); /* DS2 ACCORDION GALLERY */ function initDs2AccordionGallery(e=document){e.querySelectorAll(".ds2-accordion-gallery").forEach(function(e){if("true"===e.dataset.ds2AgBound)return;e.dataset.ds2AgBound="true";var t=e.querySelector("[data-ds2-ag-accordion]"),n=e.querySelector("[data-ds2-ag-viewport]"),r=e.querySelector("[data-ds2-ag-prev]"),i=e.querySelector("[data-ds2-ag-next]");if(!t||!n)return;var a=Array.from(t.querySelectorAll(".ds2-ag-item[data-slide]")),o=Array.from(n.querySelectorAll("[data-slide]"));if(!a.length||!o.length)return;var l=window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,s=!1;function d(){return window.innerWidth<=1024}function c(){s||!d()||(e.querySelectorAll(".ds2-ag-item__media img").forEach(function(e,t){if(0===t)e.loading="eager",e.setAttribute("fetchpriority","high"),e.decoding="async";else{var n=new Image;n.src=e.currentSrc||e.src}}),s=!0)}function u(){return Math.min(a.length,o.length)-1}function f(e){var t=u();return e<0?0:e>t?t:e}function m(e){var t=u()+1;return(e%t+t)%t}function v(){for(var e=n.scrollLeft,t=0,r=1/0,i=0;it?t:e}function u(e){var t=l()+1;return(e%t+t)%t}function d(){for(var e=t.scrollLeft,n=0,r=1/0,i=0;iwindow.innerWidth<=breakpoint;let imagesPreloaded=!1;function preloadMobileImages(){if(imagesPreloaded||!isMobile())return;root.querySelectorAll(".ds2-bedguide__media img").forEach((img,index)=>{if(index===0){img.loading="eager";img.setAttribute("fetchpriority","high");img.decoding="async"}else{const preloader=new Image;preloader.src=img.currentSrc||img.src}});imagesPreloaded=!0}function closeAll(){tabs.forEach(tab=>tab.classList.remove("is-active"));sections.forEach(section=>section.classList.remove("is-active"))}function openSection(index){closeAll();tabs[index]&&tabs[index].classList.add("is-active");sections[index]&§ions[index].classList.add("is-active")}isMobile()?closeAll():openSection(0);tabs.forEach((tab,index)=>{tab.addEventListener("click",()=>{if(isMobile())return;openSection(index)})});triggers.forEach((trigger,index)=>{trigger.addEventListener("click",()=>{if(!isMobile())return;const section=sections[index],wasOpen=section.classList.contains("is-active");closeAll();if(!wasOpen)section.classList.add("is-active")})});let wasMobile=isMobile();preloadMobileImages();window.addEventListener("resize",()=>{const nowMobile=isMobile();if(nowMobile!==wasMobile){nowMobile?closeAll():openSection(0);wasMobile=nowMobile}preloadMobileImages()},{passive:!0})})})(); /* DS2 MATTRESS FEATURES – MOBILE CAROUSEL */ !function(){function e(){document.querySelectorAll(".ds2-mattress-features__container").forEach(function(e){if(window.innerWidth>1024)return;let n=!1;e.addEventListener("scroll",function(){if(n)return;n=!0,requestAnimationFrame(function(){n=!1})},{passive:!0})})}window.addEventListener("resize",e),e()}(); /* PRODUCT HERO GALLERY */ !function(){const e=document.querySelector(".js-ds2-product-hero-gallery");if(!e)return;const t=e.querySelector(".js-ds2-product-hero-gallery-viewport"),n=e.querySelector(".js-ds2-product-hero-gallery-prev"),o=e.querySelector(".js-ds2-product-hero-gallery-next"),i=Array.from(e.querySelectorAll(".ds2-product-hero-slide"));if(!t||!i.length)return;const r=window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;let l=0;const s=e=>{const t=i.length;return(e%t+t)%t},c=()=>{const e=t.scrollLeft;let n=0,o=Math.abs(i[0].offsetLeft-e);for(let t=1;t{l=s(e),t.scrollTo({left:i[l].offsetLeft,behavior:r?"auto":"smooth"})};n&&n.addEventListener("click",()=>{a(c()-1)}),o&&o.addEventListener("click",()=>{a(c()+1)}),t.addEventListener("keydown",e=>{"ArrowLeft"===e.key&&(e.preventDefault(),a(l-1)),"ArrowRight"===e.key&&(e.preventDefault(),a(l+1))});let d=0;t.addEventListener("scroll",()=>{d||(d=requestAnimationFrame(()=>{d=0,l=c()}))},{passive:!0}),window.addEventListener("resize",()=>{l=c()}),l=c()}(); /* INPAGE MENU STICKY ONDER */ (function(){const e=document.querySelector(".js-ds2-inpage-menu");if(!e)return;const t=e.querySelector(".js-ds2-inpage-menu-toggle"),n=e.querySelector(".js-ds2-inpage-menu-dropdown"),o=document.querySelector(".ds2-inpage-sentinel");if(t&&n){function i(){t.setAttribute("aria-expanded","true"),n.hidden=!1,e.classList.add("is-open")}function s(){t.setAttribute("aria-expanded","false"),n.hidden=!0,e.classList.remove("is-open")}t.addEventListener("click",()=>{"true"===t.getAttribute("aria-expanded")?s():i()}),n.querySelectorAll("a").forEach(e=>{e.addEventListener("click",s)}),window.addEventListener("resize",()=>{window.innerWidth>1250&&s()})}if(!o)return;new IntersectionObserver(([t])=>{e.classList.toggle("is-sticky",!t.isIntersecting)},{root:null,threshold:0}).observe(o)})(); /* PRODUCT MENU STICKY BOVEN (MOBILE) */ !function(){document.querySelectorAll(".ds2-product-menu").forEach(function(e){var t=e.querySelector(".ds2-product-menu__toggle"),n=e.querySelector(".ds2-product-menu__dropdown");if(!t||!n)return;var o=90;function i(){var t=e.getBoundingClientRect(),n=window.innerHeight;return t.top/n>.15}function r(){var r=i();if(e.classList.toggle("is-open-up",r),e.classList.contains("is-open")&&r){var l=n.scrollHeight+o;e.style.setProperty("--ds2-dropdown-offset",l+"px")}else e.style.removeProperty("--ds2-dropdown-offset")}function l(){t.setAttribute("aria-expanded","true"),n.hidden=!1,e.classList.add("is-open"),r()}function a(){t.setAttribute("aria-expanded","false"),n.hidden=!0,e.classList.remove("is-open"),e.style.removeProperty("--ds2-dropdown-offset")}t.addEventListener("click",function(){"true"===t.getAttribute("aria-expanded")?a():l()}),n.querySelectorAll("a").forEach(function(e){e.addEventListener("click",a)}),r(),window.addEventListener("scroll",r,{passive:!0}),window.addEventListener("resize",function(){r(),window.innerWidth>1199&&a()})})}(); /* FEATURE ONE – SCROLL LOCK (1025–1400) */ !function(){const e=document.querySelector(".js-ds2-feature-one-lock");if(!e)return;const t=e.querySelector(".js-ds2-feature-one-scroll"),n=e.querySelector(".ds2-feature-one__media img");if(!t||!n)return;const i=window.matchMedia("(min-width:1025px) and (max-width:1400px)");let o=!1,r=!1;function l(e,t,n){return Math.max(t,Math.min(n,e))}function a(){if(!i.matches)return;const e=n.getBoundingClientRect(),o=Math.max(200,Math.round(e.height));t.style.maxHeight=o+"px"}function c(){const t=e.getBoundingClientRect(),n=window.innerHeight,i=.4*n;return t.top<=i&&t.bottom>=i}function s(e){const n=t.scrollHeight-t.clientHeight;if(n<=1)return!1;const i=t.scrollTop<=0,o=t.scrollTop>=n-1;return e>0?!o:e<0&&!i}function d(n){if(!o||!r||!e.contains(n.target))return;const i=n.deltaY;s(i)&&(n.preventDefault(),t.scrollTop+=i)}function u(){i.matches?(r=c(),a()):r=!1}function m(){o||(o=!0,a(),r=c(),window.addEventListener("wheel",d,{passive:!1}),window.addEventListener("scroll",u,{passive:!0}),window.addEventListener("resize",u))}function f(){o&&(o=!1,r=!1,window.removeEventListener("wheel",d,{passive:!1}),window.removeEventListener("scroll",u,{passive:!0}),window.removeEventListener("resize",u),t.style.maxHeight="")}n.complete&&a(),n.addEventListener("load",a);const v=()=>{i.matches?m():f()};v(),i.addEventListener?i.addEventListener("change",v):i.addListener(v)}(); /* DS2 MATERIAL COLOR SWITCH */ (function(){const e=document.querySelectorAll(".ds2-material-card");if(!e.length)return;e.forEach(e=>{const t=e.querySelector(".ds2-material-card__image"),o=e.querySelector(".ds2-material-card__label"),a=e.querySelectorAll(".ds2-material-swatch");if(!t||!o||!a.length)return;const r=e.getAttribute("data-material");a.forEach(e=>{const t=e.getAttribute("data-image");if(!t)return;new Image().src=t}),a.forEach(e=>{e.addEventListener("click",()=>{const a=e.getAttribute("data-image"),n=e.getAttribute("aria-label");if(!a||!n)return;t.src=a,t.alt=`${r} – ${n}`;const l=r.charAt(0).toUpperCase()+r.slice(1);o.textContent=`${l} – ${n}`,a.forEach(e=>e.classList.remove("is-active")),e.classList.add("is-active")})})})})(); /* MATERIAL SCROLL – VERTICAL → HORIZONTAL (CENTER LOCK + PIN) */ (function(){const e=document.querySelector(".js-ds2-material-scroll");if(!e)return;const t=e.querySelector(".ds2-material-scroll__viewport"),o=e.querySelector(".ds2-material-scroll__track");if(!t||!o)return;const n=window.matchMedia("(pointer: coarse)").matches||"ontouchstart"in window;if(n){t.style.overflowX="auto",t.style.webkitOverflowScrolling="touch";return}function l(){return Math.max(0,o.scrollWidth-t.clientWidth)}function r(){const t=e.getBoundingClientRect(),o=window.innerHeight/2,n=t.top+t.height/2;return Math.abs(n-o)<30}let i=!1,c=!1,s=0;function a(){i=r(),i||u()}function d(){c||(c=!0,s=window.scrollY)}function u(){c=!1}function f(e){if(!i)return;const o=l();if(o<=0)return;const n=e.deltaY,r=t.scrollLeft,m=r<=0,p=r>=o-1;(n>0&&!p||n<0&&!m)?(e.preventDefault(),d(),t.scrollLeft+=n,window.scrollTo(0,s)):u()}window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a),window.addEventListener("wheel",f,{passive:!1}),a()})(); /* PROJECT HERO GALLERY */ (function(){const g=document.querySelector(".js-ds2-project-hero-gallery");if(!g)return;const v=g.querySelector(".js-ds2-project-hero-gallery-viewport"),s=Array.from(g.querySelectorAll(".ds2-project-hero-slide")),p=g.querySelector(".js-ds2-project-hero-gallery-prev"),n=g.querySelector(".js-ds2-project-hero-gallery-next");if(!v||!s.length)return;const r=window.matchMedia("(prefers-reduced-motion: reduce)").matches;function i(){const x=v.scrollLeft;let e=0,d=1/0;s.forEach((t,o)=>{const a=Math.abs(t.offsetLeft-x);ao(i()-1));n&&n.addEventListener("click",()=>o(i()+1));v.addEventListener("keydown",e=>{e.key==="ArrowLeft"&&o(i()-1);e.key==="ArrowRight"&&o(i()+1)})})(); /* DS2 FAQ */ function initDs2Faq(scope=document){const faqs=scope.querySelectorAll(".ds2-faq");faqs.forEach(faq=>{const items=faq.querySelectorAll(".ds2-faq-item");items.forEach(item=>{const trigger=item.querySelector(".ds2-faq-item__trigger"),panel=item.querySelector(".ds2-faq-item__panel"),icon=item.querySelector(".ds2-faq-item__icon");if(!trigger||!panel||!icon)return;if(trigger.dataset.faqBound==="true")return;trigger.dataset.faqBound="true";trigger.addEventListener("click",()=>{const isOpen=item.classList.contains("is-open");items.forEach(i=>{const iTrigger=i.querySelector(".ds2-faq-item__trigger"),iPanel=i.querySelector(".ds2-faq-item__panel"),iIcon=i.querySelector(".ds2-faq-item__icon");i.classList.remove("is-open");if(iPanel)iPanel.hidden=!0;if(iTrigger)iTrigger.setAttribute("aria-expanded","false");if(iIcon)iIcon.textContent="+"});if(!isOpen){item.classList.add("is-open");panel.hidden=!1;trigger.setAttribute("aria-expanded","true");icon.textContent="–"}})})})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>initDs2Faq()):initDs2Faq(); /* DS2 BED DESIGN FILTER */ function initBedOverviewFiltersWithFaq(){const overview=document.querySelector(".ds2-bed-overview");if(!overview)return;const filterButtons=overview.querySelectorAll(".ds2-bed-overview__filter"),cards=overview.querySelectorAll(".ds2-bed-card"),filterSections=document.querySelectorAll("[data-filter-section]"),filterFaqs=document.querySelectorAll("[data-filter-faq]"),mobileToggle=overview.querySelector(".ds2-bed-overview__mobile-toggle"),filterbar=overview.querySelector(".ds2-bed-overview__filterbar"),filtersWrap=overview.querySelector(".ds2-bed-overview__filters-wrap"),activeFilterLabels=document.querySelectorAll(".ds2-bed-overview__active-filter-label"),faqFiles={modellen:"/fragments/faq-modellen.html",deelbaar:"/fragments/faq-deelbaar.html","hoog-laag":"/fragments/faq-hoog-laag.html",senioren:"/fragments/faq-senioren.html",twijfelaar:"/fragments/faq-twijfelaar.html",houten:"/fragments/faq-houten.html",design:"/fragments/faq-design.html"},defaultFilter="modellen";if(!filterButtons.length)return;function isMobileFilter(){return window.innerWidth<=1024}function openMobileMenu(){if(!filterbar||!mobileToggle||!filtersWrap)return;filterbar.classList.add("is-open");mobileToggle.setAttribute("aria-expanded","true");filtersWrap.hidden=!1}function closeMobileMenu(){if(!filterbar||!mobileToggle||!filtersWrap)return;filterbar.classList.remove("is-open");mobileToggle.setAttribute("aria-expanded","false");filtersWrap.hidden=!0}function syncMobileMenuState(){if(!filtersWrap)return;if(isMobileFilter()){if(!filterbar||!filterbar.classList.contains("is-open")){filtersWrap.hidden=!0}}else{filtersWrap.hidden=!1;if(filterbar){filterbar.classList.remove("is-open")}if(mobileToggle){mobileToggle.setAttribute("aria-expanded","false")}}}function updateActiveFilterLabel(filterName){activeFilterLabels.forEach(label=>{label.hidden=label.dataset.filterSection!==filterName})}async function loadFaqForFilter(filterName){const faqSection=document.querySelector('[data-filter-faq="'+filterName+'"]');if(!faqSection)return;const mount=faqSection.querySelector(".ds2-bed-overview__faq-mount");if(!mount)return;if(mount.dataset.loaded==="true"){if(typeof initDs2Faq==="function"){initDs2Faq(mount)}return}const file=faqFiles[filterName];if(!file)return;try{const response=await fetch(file,{credentials:"same-origin"});if(!response.ok){throw new Error("FAQ fragment niet gevonden: "+file)}const html=await response.text(),temp=document.createElement("div");temp.innerHTML=html;const faq=temp.querySelector("#faq.ds2-faq")||temp.querySelector("section.ds2-faq")||temp.querySelector(".ds2-faq");if(!faq){throw new Error("Geen FAQ-sectie gevonden in: "+file)}mount.innerHTML=faq.outerHTML;mount.dataset.loaded="true";if(typeof initDs2Faq==="function"){initDs2Faq(mount)}}catch(error){console.error(error)}}function setActiveFilter(filterName){filterButtons.forEach(button=>{const isActive=button.dataset.filter===filterName;button.classList.toggle("is-active",isActive);button.setAttribute("aria-selected",String(isActive))});cards.forEach(card=>{const categories=(card.dataset.category||"").split(" ").map(item=>item.trim()).filter(Boolean);card.hidden=!categories.includes(filterName)});filterSections.forEach(section=>{section.hidden=section.dataset.filterSection!==filterName});filterFaqs.forEach(faq=>{faq.hidden=faq.dataset.filterFaq!==filterName});updateActiveFilterLabel(filterName);if(faqFiles[filterName]){loadFaqForFilter(filterName)}if(isMobileFilter()){closeMobileMenu()}}filterButtons.forEach(button=>{if(button.dataset.filterBound==="true")return;button.dataset.filterBound="true";button.addEventListener("click",function(){setActiveFilter(button.dataset.filter)})});if(mobileToggle&&mobileToggle.dataset.mobileToggleBound!=="true"){mobileToggle.dataset.mobileToggleBound="true";mobileToggle.addEventListener("click",function(){const isOpen=mobileToggle.getAttribute("aria-expanded")==="true";if(isOpen){closeMobileMenu()}else{openMobileMenu()}})}if(!window.__ds2BedOverviewResizeBound){window.__ds2BedOverviewResizeBound=!0;window.addEventListener("resize",syncMobileMenuState)}syncMobileMenuState();setActiveFilter(defaultFilter)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",initBedOverviewFiltersWithFaq):initBedOverviewFiltersWithFaq(); /* DS2 BED DESIGN CARD CURSORS */ (function(){document.querySelectorAll(".js-ds2-bed-card-gallery").forEach(function(gallery){const viewport=gallery.querySelector(".js-ds2-bed-card-gallery-viewport"),prevBtn=gallery.querySelector(".js-ds2-bed-card-gallery-prev"),nextBtn=gallery.querySelector(".js-ds2-bed-card-gallery-next"),slides=Array.from(gallery.querySelectorAll(".ds2-bed-card__image"));if(!viewport||!slides.length)return;const reducedMotion=window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;let currentIndex=0;function wrap(index){const total=slides.length;return(index%total+total)%total}function nearest(){const scrollLeft=viewport.scrollLeft;let bestIndex=0,bestDistance=Math.abs(slides[0].offsetLeft-scrollLeft);for(let i=1;i{const r=t.dataset.filter===e;t.classList.toggle("is-active",r),t.setAttribute("aria-selected",r?"true":"false")}),r.forEach(t=>{const r=(t.dataset.category||"").trim().split(/\s+/);t.hidden=!r.includes(e)}),l.forEach(t=>{t.hidden=t.dataset.filterSection!==e})}t.forEach(e=>{e.addEventListener("click",()=>{o(e.dataset.filter)})});const n=e.querySelector(".ds2-bed-overview__filter.is-active");o(n?n.dataset.filter:"alle")}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",initProjectOverviewFilter):initProjectOverviewFilter(); /* DS2 BLOG FILTER */ function initBlogOverviewFilter(){const e=document.querySelector("#blog-overview-filter");if(!e)return;const t=e.querySelectorAll(".ds2-bed-overview__filter"),r=e.querySelectorAll(".ds2-bed-card"),l=e.querySelectorAll(".ds2-bed-overview__active-filter-label");function o(e){t.forEach(t=>{const r=t.dataset.filter===e;t.classList.toggle("is-active",r),t.setAttribute("aria-selected",r?"true":"false")}),r.forEach(t=>{const r=(t.dataset.category||"").trim().split(/\s+/);t.hidden=!r.includes(e)}),l.forEach(t=>{t.hidden=t.dataset.filterSection!==e})}t.forEach(e=>{e.addEventListener("click",()=>{o(e.dataset.filter)})});const n=e.querySelector('.ds2-bed-overview__filter[data-filter="alle"]')||e.querySelector(".ds2-bed-overview__filter.is-active");o(n?n.dataset.filter:"alle")}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",initBlogOverviewFilter):initBlogOverviewFilter(); /* DS2 VIDEO HERO */ !function(){document.querySelectorAll(".ds2-hero-video").forEach(function(e){var t=e.querySelector("video"),a=e.querySelector(".ds2-hero-video__play");if(!t||!a)return;var o=!1;function r(){o||(o=!0,e.classList.add("is-ready"),e.classList.remove("is-loading"))}async function n(){try{e.classList.add("is-loading"),await t.play(),e.classList.add("is-playing")}catch(o){e.classList.remove("is-loading"),console.error(o)}}var s=new IntersectionObserver(function(a,o){a.forEach(function(a){a.isIntersecting&&(t.preload="auto",t.load(),o.unobserve(e))})},{threshold:.25});s.observe(e),t.addEventListener("loadeddata",r),t.addEventListener("canplay",r),a.addEventListener("click",async function(e){e.stopPropagation(),t.paused?await n():t.pause()}),e.addEventListener("click",async function(e){if(e.target.closest(".ds2-hero-video__play"))return;t.paused?await n():t.pause()}),t.addEventListener("playing",function(){e.classList.add("is-playing"),e.classList.remove("is-loading"),r()}),t.addEventListener("pause",function(){e.classList.remove("is-playing"),e.classList.remove("is-loading")}),t.addEventListener("ended",function(){e.classList.remove("is-playing"),e.classList.remove("is-loading"),t.currentTime=0})})}(); /* DS2 MIDPAGE GUIDE */ (function(){document.querySelectorAll(".ds2-midpage-guide").forEach(function(root){const desktopTabs=root.querySelectorAll(".ds2-midpage-guide__tab"),mobileTabs=root.querySelectorAll(".ds2-midpage-guide__mobile-tab"),sections=root.querySelectorAll(".ds2-midpage-guide__section"),mobileBar=root.querySelector(".ds2-midpage-guide__mobile-bar"),mobileToggle=root.querySelector(".ds2-midpage-guide__mobile-toggle"),breakpoint=1025,isMobile=()=>window.innerWidth<=breakpoint;function closeAll(){desktopTabs.forEach(tab=>tab.classList.remove("is-active"));mobileTabs.forEach(tab=>tab.classList.remove("is-active"));sections.forEach(section=>section.classList.remove("is-active"))}function openSection(index){closeAll();desktopTabs[index]&&desktopTabs[index].classList.add("is-active");mobileTabs[index]&&mobileTabs[index].classList.add("is-active");sections[index]&§ions[index].classList.add("is-active")}function closeMobileMenu(){mobileBar&&mobileBar.classList.remove("is-open")}function toggleMobileMenu(){mobileBar&&mobileBar.classList.toggle("is-open")}openSection(0);desktopTabs.forEach((tab,index)=>{tab.addEventListener("click",()=>{if(isMobile())return;openSection(index)})});mobileTabs.forEach((tab,index)=>{tab.addEventListener("click",()=>{if(!isMobile())return;openSection(index);closeMobileMenu()})});mobileToggle&&mobileToggle.addEventListener("click",()=>{if(!isMobile())return;toggleMobileMenu()});let wasMobile=isMobile();window.addEventListener("resize",()=>{const nowMobile=isMobile();if(nowMobile!==wasMobile){closeMobileMenu();openSection(0);wasMobile=nowMobile}},{passive:true})})})(); /* DS2 FILTER PRIJS CONFIGURATORS */ function initDs2PriceConfigs(){const e=document.querySelector(".ds2-price-configs");if(!e)return;const t=e.querySelector(".ds2-price-configs__filterbar"),i=e.querySelector(".ds2-price-configs__mobile-toggle"),o=e.querySelectorAll("[data-config-filter]"),n=e.querySelectorAll("[data-config-panel]"),r=e.querySelectorAll("[data-config-label]");function c(c){o.forEach(function(e){const t=e.dataset.configFilter===c;e.classList.toggle("is-active",t),e.setAttribute("aria-selected",String(t))}),n.forEach(function(e){e.hidden=e.dataset.configPanel!==c}),r.forEach(function(e){e.hidden=e.dataset.configLabel!==c}),i&&function(){const t=e.querySelector("[data-config-filter].is-active"),o=i.querySelector(".ds2-price-configs__mobile-toggle-label");t&&o&&(o.textContent=t.textContent.trim())}(),t&&t.classList.remove("is-open"),i&&i.setAttribute("aria-expanded","false")}o.forEach(function(e){"true"!==e.dataset.configBound&&(e.dataset.configBound="true",e.addEventListener("click",function(){c(this.dataset.configFilter)}))}),i&&t&&"true"!==i.dataset.toggleBound&&(i.dataset.toggleBound="true",i.addEventListener("click",function(){const e=t.classList.toggle("is-open");i.setAttribute("aria-expanded",String(e))}));const a=e.querySelector("[data-config-filter].is-active")||o[0];a&&c(a.dataset.configFilter)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",initDs2PriceConfigs):initDs2PriceConfigs(); /* DS2 BLOG FAQ */ function initDs2BlogFaq(scope=document){const faqs=scope.querySelectorAll(".ds2-blog-faq");faqs.forEach(faq=>{const items=faq.querySelectorAll(".ds2-blog-faq-item");items.forEach(item=>{const trigger=item.querySelector(".ds2-blog-faq-item__trigger");const panel=item.querySelector(".ds2-blog-faq-item__panel");const icon=item.querySelector(".ds2-blog-faq-item__icon");if(!trigger||!panel||!icon)return;if(trigger.dataset.faqBound==="true")return;trigger.dataset.faqBound="true";trigger.addEventListener("click",()=>{const isOpen=item.classList.contains("is-open");items.forEach(i=>{const iTrigger=i.querySelector(".ds2-blog-faq-item__trigger");const iPanel=i.querySelector(".ds2-blog-faq-item__panel");const iIcon=i.querySelector(".ds2-blog-faq-item__icon");i.classList.remove("is-open");if(iPanel)iPanel.hidden=true;if(iTrigger)iTrigger.setAttribute("aria-expanded","false");if(iIcon)iIcon.textContent="+"});if(!isOpen){item.classList.add("is-open");panel.hidden=false;trigger.setAttribute("aria-expanded","true");icon.textContent="–"}})})})}if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",()=>initDs2BlogFaq())}else{initDs2BlogFaq()} /* DS2 SPECIFICATIES */ function initDs2Specifications(t=document){const e=[];t.matches&&t.matches(".ds2-specifications")&&e.push(t),t.querySelectorAll(".ds2-specifications").forEach(t=>{e.push(t)}),e.forEach(function(t){if("true"===t.dataset.ds2SpecificationsBound)return;t.dataset.ds2SpecificationsBound="true";const e=t.querySelector(".ds2-specifications__toggle");e&&e.addEventListener("click",function(e){e.preventDefault();const n=t.classList.toggle("is-open");e.target.textContent=n?"Bekijk minder specificaties":"Bekijk alle specificaties"})})}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",function(){initDs2Specifications()}):initDs2Specifications(); /* DS2 FRAGMENT MOUNTS */ !function(){async function t(e=document){const n=e.querySelectorAll("[data-ds2-mount]");if(!n.length)return;for(const e of n){const n=e.getAttribute("data-ds2-mount");if(!n||"true"===e.dataset.loaded)continue;try{const o=await fetch(n,{credentials:"same-origin"});if(!o.ok)throw new Error("Fragment niet gevonden: "+n);const t=document.createElement("div");t.innerHTML=await o.text();const a=t.querySelector("[data-ds2-fragment-content]");e.innerHTML=a?a.innerHTML:t.innerHTML,e.dataset.loaded="true","function"==typeof initDs2Functies&&initDs2Functies(e),"function"==typeof initDs2AccordionGallery&&initDs2AccordionGallery(e),"function"==typeof initDs2Carousel&&initDs2Carousel(e),"function"==typeof initDs2Specifications&&initDs2Specifications(e),"function"==typeof initDs2StickyFooterCta&&initDs2StickyFooterCta(),await t(e)}catch(t){console.error(t)}}}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(function(){t()})):t()}(); /* DS2 STICKY FOOTER */ function initDs2StickyFooterCta(){const t=document.querySelector(".ds2-sticky-footer-cta");if(!t||"true"===t.dataset.ds2StickyFooterBound)return;t.dataset.ds2StickyFooterBound="true";const e=120;function o(){t.classList.toggle("is-visible",window.scrollY>e)}o(),window.addEventListener("scroll",o,{passive:!0})}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",initDs2StickyFooterCta):initDs2StickyFooterCta(); /* ===================================================== ======================================================== CONFIGURATOR N01 DEELBARE BOX(SPRING) ======================================================== ===================================================== */ (() => { /* ===================================================== 0) MOUNT / INJECT (ongewijzigd) ===================================================== */ const PARTIAL_CANDIDATES = [ "/partials/ds2-configurator.html", "../partials/ds2-configurator.html", ]; async function fetchFirstWorking(urls) { for (const url of urls) { try { const res = await fetch(url, { cache: "no-store" }); if (!res.ok) throw new Error(); return await res.text(); } catch {} } throw new Error("No configurator partial found"); } function mountHTML(html) { const roots = []; const temp = document.createElement("div"); temp.innerHTML = html; const configurator = temp.querySelector("section.ds2-configurator[data-ds2-configurator]") || temp.querySelector("[data-ds2-configurator]") || temp.querySelector(".ds2-configurator"); if (!configurator) { console.warn("[DS2 Configurator] Geen configurator gevonden in partial"); return roots; } document .querySelectorAll("[data-ds2-configurator-mount]") .forEach(mount => { mount.innerHTML = configurator.outerHTML; mount .querySelectorAll("[data-ds2-configurator]") .forEach(r => roots.push(r)); }); return roots; } /* ===================================================== 1) ASSETS (ongewijzigd) ===================================================== */ const ASSETS = { bedroom: { base: "https://de-suite.vercel.app/media/configurator-hoog-laag-bed-achtergrond-1.webp", }, headboard: { base: "https://de-suite.vercel.app/media/backpanel-without-cabinets", with_nightstands: "https://de-suite.vercel.app/media/backpanel-nightstands", with_lamps: "https://de-suite.vercel.app/media/backpanel-lamps", with_nightstands_lamps: "https://de-suite.vercel.app/media/backpanel-nightstands-lamps", }, leftNightstandTop: { coupled: "https://de-suite.vercel.app/media/backpanel-nightstand-left-top", split: "" }, base: { coupled: "https://de-suite.vercel.app/media/base-coupled", split: "https://de-suite.vercel.app/media/base-split", }, /* ========================= FLAT ========================= */ flat: { left: { coupled: "https://de-suite.vercel.app/media/mattress-left-coupled", split: "https://de-suite.vercel.app/media/mattress-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/mattress-right-coupled", split: "https://de-suite.vercel.app/media/matress-right-split", }, }, /* ========================= 3 LIFTEN ========================= */ liften: { left: { coupled: "https://de-suite.vercel.app/media/3liften-left-coupled", split: "https://de-suite.vercel.app/media/3liften-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/3liften-right-coupled", split: "https://de-suite.vercel.app/media/3liften-right-split", }, }, /* ========================= HOOG LAAG ========================= */ hooglaag: { left: { coupled: "https://de-suite.vercel.app/media/hoog-laag-left-coupled", split: "https://de-suite.vercel.app/media/hoog-laag-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/hoog-laag-right-coupled", split: "https://de-suite.vercel.app/media/hoog-laag-right-split", }, }, /* ========================= HOOGLAAG + 3 LIFTEN ========================= */ hooglaag_liften: { left: { coupled: "https://de-suite.vercel.app/media/hooglaag-3liften-left-coupled", split: "https://de-suite.vercel.app/media/hooglaag-3liften-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/hooglaag-3liften-right-coupled", split: "https://de-suite.vercel.app/media/hooglaag-3liften-right-split", }, }, /* ========================= ANTI-TRENDELENBURG (AT) ========================= */ anti: { left: { coupled: "https://de-suite.vercel.app/media/at-left-coupled-trans", split: "https://de-suite.vercel.app/media/at-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/at-right-coupled-trans", split: "https://de-suite.vercel.app/media/at-right-split", }, }, /* ========================= AT + 3 LIFTEN ========================= */ anti_liften: { left: { coupled: "https://de-suite.vercel.app/media/at-3liften-left-coupled-m", split: "https://de-suite.vercel.app/media/at-3liften-left-split-m", }, right: { coupled: "https://de-suite.vercel.app/media/at-3liften-right-coupled-m", split: "https://de-suite.vercel.app/media/at-3liften-right-split-m", }, }, /* ========================= AT + HOOG LAAG ========================= */ anti_hooglaag: { left: { coupled: "https://de-suite.vercel.app/media/at-hooglaag-left-coupled", split: "https://de-suite.vercel.app/media/at-hooglaag-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/at-hooglaag-right-coupled", split: "https://de-suite.vercel.app/media/at-hooglaag-right-split", }, }, /* ========================= AT + HOOG LAAG + 3 LIFTEN ========================= */ anti_hooglaag_liften: { left: { coupled: "https://de-suite.vercel.app/media/at-hooglaag-3liften-left-coupled", split: "https://de-suite.vercel.app/media/at-hooglaag-3liften-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/at-hooglaag-3liften-right-coupled", split: "https://de-suite.vercel.app/media/at-hooglaag-3liften-right-split", }, }, /* ========================= FOOT PANEL ========================= */ footpanel: { coupled: "https://de-suite.vercel.app/media/feetpanels-coupled", split: "https://de-suite.vercel.app/media/feetpanels-split", } }; /* ===================================================== 2) STATE (ongewijzigd) ===================================================== */ const state = { mode: "coupled", left: "flat", right: "flat", headboard: "with", nightstands: false, lamps: false, footpanel: false, }; /* ===================================================== 2B) PRICES ===================================================== */ const PRICES = { base: 4157, mode: { coupled: 0, split: 0, }, left: { flat: 0, "3liften": 990, "hooglaag": 2466, "anti": 3866, "hooglaag+3liften": 2466, "3liften+anti": 3866, "hooglaag+anti": 3866, "hooglaag+3liften+anti": 3866, }, right: { flat: 0, "3liften": 990, "hooglaag": 2466, "anti": 3866, "hooglaag+3liften": 2466, "3liften+anti": 3866, "hooglaag+anti": 3866, "hooglaag+3liften+anti": 3866, }, headboard: { none: 0, with: 920, nightstands: 1820, lamps: 1500, nightstands_lamps: 2400, }, footpanel: { false: 0, true: 900, }, }; /* ===================================================== 3) LAYER ORDER (hard) ===================================================== */ const LAYER_ORDER = [ "bedroom", "headboard", "base", "right", "left", "footpanel", "leftNightstandTop", ]; /* ===================================================== HEADBOARD → PRICE KEY ===================================================== */ function getHeadboardPriceKey(){ if (state.headboard === "none") { return "none"; } const hasNight = !!state.nightstands; const hasLamps = !!state.lamps; if (hasNight && hasLamps) { return "nightstands_lamps"; } if (hasNight) { return "nightstands"; } if (hasLamps) { return "lamps"; } return "with"; } /* ===================================================== PRICE CALCULATION ===================================================== */ function getCurrentPrice(){ let total = PRICES.base; // MODE total += PRICES.mode[state.mode] || 0; // LINKS total += PRICES.left[state.left] || 0; // RECHTS total += PRICES.right[state.right] || 0; // HOOFDPANEEL const headboardKey = getHeadboardPriceKey(); total += PRICES.headboard[headboardKey] || 0; // VOETPANEEL total += PRICES.footpanel[state.footpanel] || 0; return total; } /* ===================================================== UPDATE PRICE ===================================================== */ function updatePrice(root){ const priceEl = root.querySelector("[data-configurator-price]"); if (!priceEl) return; const price = getCurrentPrice(); priceEl.textContent = formatPrice(price); } /* ===================================================== PRICE FORMATTER ===================================================== */ function formatPrice(value){ return "€ " + value .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ".") + ",-"; } /* ===================================================== 4) STATE → RENDERPLAN ===================================================== */ function resolveSideOverlay(side) { const v = state[side]; if (v === "flat") { return ASSETS.flat[side][state.mode]; } if (v === "3liften") { return ASSETS.liften[side][state.mode]; } if (v === "hooglaag") { return ASSETS.hooglaag[side][state.mode]; } if (v === "anti") { return ASSETS.anti[side][state.mode]; } if (v === "hooglaag+3liften") { return ASSETS.hooglaag_liften[side][state.mode]; } if (v === "3liften+anti") { return ASSETS.anti_liften[side][state.mode]; } if (v === "hooglaag+anti") { return ASSETS.anti_hooglaag[side][state.mode]; } if (v === "hooglaag+3liften+anti") { return ASSETS.anti_hooglaag_liften[side][state.mode]; } return ""; } /* ========================= HEADBOARD RESOLVER ========================= */ function resolveHeadboard() { if (state.headboard !== "with") return ""; const hasNight = !!state.nightstands; const hasLamps = !!state.lamps; if (hasNight && hasLamps) { return ASSETS.headboard.with_nightstands_lamps; } if (hasNight) { return ASSETS.headboard.with_nightstands; } if (hasLamps) { return ASSETS.headboard.with_lamps; } return ASSETS.headboard.base; } /* ========================= LAYER RESOLUTION ========================= */ function resolveLayers(state) { return { bedroom: ASSETS.bedroom.base, headboard: resolveHeadboard(), base: ASSETS.base[state.mode], right: resolveSideOverlay("right"), left: resolveSideOverlay("left"), footpanel: state.footpanel ? ASSETS.footpanel[state.mode] : "", leftNightstandTop: state.mode === "coupled" && state.nightstands ? ASSETS.leftNightstandTop.coupled : "", }; } /* ===================================================== 5) PRELOAD (cache + decode) ===================================================== */ const LOAD_CACHE = new Map(); function preload(src) { if (!src) return Promise.resolve(); if (LOAD_CACHE.has(src)) return LOAD_CACHE.get(src); const p = new Promise((resolve, reject) => { const img = new Image(); img.onload = async () => { if (img.decode) { try { await img.decode(); } catch {} } resolve(); }; img.onerror = reject; img.src = src; }); LOAD_CACHE.set(src, p); return p; } /* ===================================================== 6) DOUBLE BUFFER HELPERS ===================================================== */ function normalize(src) { return src ? new URL(src, location.href).href : ""; } function getBuffers(layer) { const a = layer.querySelector(".is-a"); const b = layer.querySelector(".is-b"); if (a.classList.contains("is-active")) { return { active: a, inactive: b }; } return { active: b, inactive: a }; } function hardResetLayer(layer) { const a = layer.querySelector(".is-a"); const b = layer.querySelector(".is-b"); a.classList.add("is-active"); b.classList.remove("is-active"); a.src = ""; b.src = ""; } /* ===================================================== 7) ATOMIC RENDER (🔥 FIX) ===================================================== */ let renderToken = 0; let lastMode = state.mode; async function render(root) { const myToken = ++renderToken; const plan = resolveLayers(state); const urls = Object.values(plan).filter(Boolean); await Promise.all(urls.map(preload)).catch(() => {}); if (myToken !== renderToken) return; requestAnimationFrame(() => { if (myToken !== renderToken) return; const modeChanged = state.mode !== lastMode; lastMode = state.mode; /* 🔥 HARD RESET BIJ MODE-WISSEL */ if (modeChanged) { ["left", "right"].forEach(key => { const layer = root.querySelector(`[data-layer="${key}"]`); if (layer) hardResetLayer(layer); }); } const commits = []; LAYER_ORDER.forEach(key => { const layer = root.querySelector(`[data-layer="${key}"]`); if (!layer) return; const { active, inactive } = getBuffers(layer); const next = normalize(plan[key]); const current = normalize(active.getAttribute("src")); if (current === next) return; inactive.src = next; commits.push(() => { inactive.classList.add("is-active"); active.classList.remove("is-active"); }); }); requestAnimationFrame(() => { if (myToken !== renderToken) return; commits.forEach(fn => fn()); }); updatePrice(root); }); } function updateDropdownLabel(dropdown) { const trigger = dropdown.querySelector(".ds2-configurator__dropdown-trigger"); if (!trigger) return; trigger.textContent = "MAAK KEUZE"; } function updateHeadboardDropdownLabel(dropdown){ const trigger = dropdown.querySelector(".ds2-configurator__dropdown-trigger"); if (!trigger) return; trigger.textContent = "MAAK KEUZE"; } /* ===================================================== 8) INIT ===================================================== */ function init(root) { /* ========================= HELPER: sync UI met state ========================= */ function syncSegmented(group, predicate) { if (!group) return; group.querySelectorAll(".ds2-configurator__seg").forEach(btn => { btn.classList.toggle("is-active", predicate(btn)); }); } // Eerste render bij init render(root); /* ========================= INIT: UI sync (🔥 belangrijk) ========================= */ // MODE const modeGroup = root.querySelector('[data-mode]')?.closest('.ds2-configurator__segmented'); syncSegmented(modeGroup, btn => btn.dataset.mode === state.mode ); root.querySelectorAll('.ds2-configurator__dropdown[data-side]').forEach(dropdown => { updateDropdownLabel(dropdown); }); // VOETPANEEL const footpanelGroup = root.querySelector('[data-footpanel]') ?.closest('.ds2-configurator__segmented'); syncSegmented(footpanelGroup, btn => (btn.dataset.footpanel === "on") === state.footpanel ); /* ========================= MODE: coupled / split ========================= */ root.querySelectorAll("[data-mode]").forEach(btn => { btn.addEventListener("click", () => { const value = btn.dataset.mode; if (state.mode === value) return; state.mode = value; btn .closest(".ds2-configurator__segmented") .querySelectorAll(".ds2-configurator__seg") .forEach(b => b.classList.toggle("is-active", b === btn)); render(root); }); }); /* =================================================== BEDZIJDE: left / right (flat / 3-liften / hooglaag) =================================================== */ function sideHas(side, flag) { const v = state[side]; if (flag === "3liften") { return v === "3liften" || v === "hooglaag+3liften" || v === "3liften+anti" || v === "hooglaag+3liften+anti"; } if (flag === "hooglaag") { return v === "hooglaag" || v === "hooglaag+3liften" || v === "hooglaag+anti" || v === "hooglaag+3liften+anti"; } if (flag === "anti") { return v === "anti" || v === "3liften+anti" || v === "hooglaag+anti" || v === "hooglaag+3liften+anti"; } return v === "flat"; } function setSideFromToggles(side, next3, nextH, nextA) { if (!next3 && !nextH && !nextA) { state[side] = "flat"; return; } // canonieke opbouw (vaste volgorde) const parts = []; if (nextH) parts.push("hooglaag"); if (next3) parts.push("3liften"); if (nextA) parts.push("anti"); state[side] = parts.join("+"); } /* ========================= VOETPANEEL: on / off ========================= */ root.querySelectorAll("[data-footpanel]").forEach(btn => { btn.addEventListener("click", () => { const value = btn.dataset.footpanel === "on"; if (state.footpanel === value) return; state.footpanel = value; btn .closest(".ds2-configurator__segmented") .querySelectorAll(".ds2-configurator__seg") .forEach(b => b.classList.toggle("is-active", b === btn)); render(root); }); }); /* ========================= DROPDOWN CHECKBOX SIDES ========================= */ root.querySelectorAll('.ds2-configurator__dropdown[data-side]').forEach(dropdown => { const side = dropdown.dataset.side; dropdown.querySelectorAll("input").forEach(input => { input.addEventListener("change", () => { const flat = dropdown.querySelector('input[value="flat"]'); const liften = dropdown.querySelector('input[value="3liften"]'); const hoog = dropdown.querySelector('input[value="hooglaag"]'); const anti = dropdown.querySelector('input[value="anti"]'); if (input.value === "flat" && input.checked) { liften.checked = false; hoog.checked = false; anti.checked = false; } if (input.value !== "flat" && input.checked) { flat.checked = false; } const next3 = liften.checked; const nextH = hoog.checked; const nextA = anti.checked; setSideFromToggles(side, next3, nextH, nextA); updateDropdownLabel(dropdown); render(root); }); }); }); /* ========================= DROPDOWN HOOFDPANEEL ========================= */ const headboardDropdown = root.querySelector('[data-headboard-dropdown]'); if (headboardDropdown){ headboardDropdown.querySelectorAll("input").forEach(input => { input.addEventListener("change", () => { const value = input.value; if (value === "none") { state.headboard = "none"; state.nightstands = false; state.lamps = false; } if (value === "with") { state.headboard = "with"; state.nightstands = false; state.lamps = false; } if (value === "nightstands") { state.headboard = "with"; state.nightstands = true; state.lamps = false; } if (value === "lamps") { state.headboard = "with"; state.nightstands = false; state.lamps = true; } if (value === "nightstands_lamps") { state.headboard = "with"; state.nightstands = true; state.lamps = true; } updateHeadboardDropdownLabel(headboardDropdown); headboardDropdown.classList.remove("is-open"); render(root); }); }); } function closeAllDropdowns() { root.querySelectorAll(".ds2-configurator__dropdown").forEach(dropdown => { dropdown.classList.remove("is-open"); }); } /* ===================================================== DROPDOWN ===================================================== */ root.querySelectorAll(".ds2-configurator__dropdown-trigger").forEach(btn => { btn.addEventListener("click", (event) => { event.stopPropagation(); const dropdown = btn.closest(".ds2-configurator__dropdown"); const wasOpen = dropdown.classList.contains("is-open"); closeAllDropdowns(); if (!wasOpen) { dropdown.classList.add("is-open"); } }); }); document.addEventListener("click", (event) => { if (!root.contains(event.target)) return; if (!event.target.closest(".ds2-configurator__dropdown")) { closeAllDropdowns(); } }); root.querySelectorAll(".ds2-configurator__dropdown-done") .forEach(btn => { btn.addEventListener("click", () => { const dropdown = btn.closest(".ds2-configurator__dropdown"); dropdown.classList.remove("is-open"); }); }); } /* ===================================================== 9) BOOT ===================================================== */ async function boot() { const existing = document.querySelectorAll("[data-ds2-configurator]"); if (existing.length) { existing.forEach(init); return; } try { const html = await fetchFirstWorking(PARTIAL_CANDIDATES); mountHTML(html).forEach(init); } catch (e) { console.warn("[DS2 Configurator]", e); } } document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", boot) : boot(); })(); /* ===================================================== ======================================================== CONFIGURATOR N02 DEELBAAR HOUTEN BED ======================================================== ===================================================== */ (() => { /* ===================================================== 0) MOUNT / INJECT ===================================================== */ const PARTIAL_CANDIDATES = [ "/partials/ds2-configurator-wood.html", "../partials/ds2-configurator-wood.html", ]; async function fetchFirstWorking(urls) { for (const url of urls) { try { const res = await fetch(url, { cache: "no-store" }); if (!res.ok) throw new Error(); return await res.text(); } catch {} } throw new Error("No wood configurator partial found"); } function mountHTML(html) { const roots = []; const temp = document.createElement("div"); temp.innerHTML = html; const configurator = temp.querySelector("section.ds2-configurator-wood[data-ds2-configurator-wood]") || temp.querySelector("[data-ds2-configurator-wood]") || temp.querySelector(".ds2-configurator-wood"); if (!configurator) { console.warn("[DS2 Configurator Wood] Geen wood configurator gevonden in partial"); return roots; } document .querySelectorAll("[data-ds2-configurator-wood-mount]") .forEach(mount => { mount.innerHTML = configurator.outerHTML; mount .querySelectorAll("[data-ds2-configurator-wood]") .forEach(root => roots.push(root)); }); return roots; } /* ===================================================== 1) ASSETS ===================================================== */ const ASSETS = { bedroom: { base: "https://de-suite.vercel.app/media/configurator-hoog-laag-bed-achtergrond-1.webp", }, headboard: { base: "https://de-suite.vercel.app/media/backpanel-wood-without-cabinets-v3.webp", with_nightstands: "https://de-suite.vercel.app/media/backpanel-wood-nightstands-v2.webp", with_lamps: "https://de-suite.vercel.app/media/backpanel-wood-lamps-v2.webp", with_nightstands_lamps: "https://de-suite.vercel.app/media/backpanel-wood-nightstands-lamps-v2.webp", }, leftNightstandTop: { coupled: "https://de-suite.vercel.app/media/backpanel-wood-nightstand-left-top-v2.webp", split: "" }, base: { coupled: "https://de-suite.vercel.app/media/bed-wood-coupled.webp", split: "https://de-suite.vercel.app/media/bed-wood-split.webp", }, flat: { left: { coupled: "https://de-suite.vercel.app/media/mattress-left-coupled", split: "https://de-suite.vercel.app/media/mattress-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/mattress-right-coupled", split: "https://de-suite.vercel.app/media/matress-right-split", }, }, liften: { left: { coupled: "https://de-suite.vercel.app/media/3liften-left-coupled", split: "https://de-suite.vercel.app/media/3liften-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/3liften-right-coupled", split: "https://de-suite.vercel.app/media/3liften-right-split", }, }, hooglaag: { left: { coupled: "https://de-suite.vercel.app/media/hoog-laag-left-coupled", split: "https://de-suite.vercel.app/media/hoog-laag-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/hoog-laag-right-coupled", split: "https://de-suite.vercel.app/media/hoog-laag-right-split", }, }, hooglaag_liften: { left: { coupled: "https://de-suite.vercel.app/media/hooglaag-3liften-left-coupled", split: "https://de-suite.vercel.app/media/hooglaag-3liften-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/hooglaag-3liften-right-coupled", split: "https://de-suite.vercel.app/media/hooglaag-3liften-right-split", }, }, anti: { left: { coupled: "https://de-suite.vercel.app/media/at-left-coupled-trans", split: "https://de-suite.vercel.app/media/at-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/at-right-coupled-trans", split: "https://de-suite.vercel.app/media/at-right-split", }, }, anti_liften: { left: { coupled: "https://de-suite.vercel.app/media/at-3liften-left-coupled-m", split: "https://de-suite.vercel.app/media/at-3liften-left-split-m", }, right: { coupled: "https://de-suite.vercel.app/media/at-3liften-right-coupled-m", split: "https://de-suite.vercel.app/media/at-3liften-right-split-m", }, }, anti_hooglaag: { left: { coupled: "https://de-suite.vercel.app/media/at-hooglaag-left-coupled", split: "https://de-suite.vercel.app/media/at-hooglaag-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/at-hooglaag-right-coupled", split: "https://de-suite.vercel.app/media/at-hooglaag-right-split", }, }, anti_hooglaag_liften: { left: { coupled: "https://de-suite.vercel.app/media/at-hooglaag-3liften-left-coupled", split: "https://de-suite.vercel.app/media/at-hooglaag-3liften-left-split", }, right: { coupled: "https://de-suite.vercel.app/media/at-hooglaag-3liften-right-coupled", split: "https://de-suite.vercel.app/media/at-hooglaag-3liften-right-split", }, }, footpanel: { coupled: "https://de-suite.vercel.app/media/feetpanels-wood-coupled-v2.webp", split: "https://de-suite.vercel.app/media/feetpanels-wood-split-v2.webp", } }; /* ===================================================== 2) STATE ===================================================== */ const state = { mode: "coupled", left: "flat", right: "flat", headboard: "with", nightstands: false, lamps: false, footpanel: false, }; /* ===================================================== 2B) PRICES ===================================================== */ const PRICES = { base: 4749, mode: { coupled: 0, split: 0, }, left: { flat: 0, "3liften": 990, "hooglaag": 2466, "anti": 3866, "hooglaag+3liften": 2466, "3liften+anti": 3866, "hooglaag+anti": 3866, "hooglaag+3liften+anti": 3866, }, right: { flat: 0, "3liften": 990, "hooglaag": 2466, "anti": 3866, "hooglaag+3liften": 2466, "3liften+anti": 3866, "hooglaag+anti": 3866, "hooglaag+3liften+anti": 3866, }, headboard: { none: 0, with: 1320, nightstands: 2220, lamps: 1900, nightstands_lamps: 2800, }, footpanel: { false: 0, true: 900, }, }; /* ===================================================== 3) LAYER ORDER ===================================================== */ const LAYER_ORDER = [ "bedroom", "headboard", "base", "right", "left", "footpanel", "leftNightstandTop", ]; /* ===================================================== HEADBOARD → PRICE KEY ===================================================== */ function getHeadboardPriceKey() { if (state.headboard === "none") return "none"; const hasNight = !!state.nightstands; const hasLamps = !!state.lamps; if (hasNight && hasLamps) return "nightstands_lamps"; if (hasNight) return "nightstands"; if (hasLamps) return "lamps"; return "with"; } /* ===================================================== PRICE CALCULATION ===================================================== */ function getCurrentPrice() { let total = PRICES.base; total += PRICES.mode[state.mode] || 0; total += PRICES.left[state.left] || 0; total += PRICES.right[state.right] || 0; const headboardKey = getHeadboardPriceKey(); total += PRICES.headboard[headboardKey] || 0; total += PRICES.footpanel[state.footpanel] || 0; return total; } function formatPrice(value) { return "€ " + value .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ".") + ",-"; } function updatePrice(root) { const priceEl = root.querySelector("[data-configurator-price]"); if (!priceEl) return; priceEl.textContent = formatPrice(getCurrentPrice()); } /* ===================================================== 4) STATE → RENDERPLAN ===================================================== */ function resolveSideOverlay(side) { const v = state[side]; if (v === "flat") return ASSETS.flat[side][state.mode]; if (v === "3liften") return ASSETS.liften[side][state.mode]; if (v === "hooglaag") return ASSETS.hooglaag[side][state.mode]; if (v === "anti") return ASSETS.anti[side][state.mode]; if (v === "hooglaag+3liften") return ASSETS.hooglaag_liften[side][state.mode]; if (v === "3liften+anti") return ASSETS.anti_liften[side][state.mode]; if (v === "hooglaag+anti") return ASSETS.anti_hooglaag[side][state.mode]; if (v === "hooglaag+3liften+anti") return ASSETS.anti_hooglaag_liften[side][state.mode]; return ""; } function resolveHeadboard() { if (state.headboard !== "with") return ""; const hasNight = !!state.nightstands; const hasLamps = !!state.lamps; if (hasNight && hasLamps) return ASSETS.headboard.with_nightstands_lamps; if (hasNight) return ASSETS.headboard.with_nightstands; if (hasLamps) return ASSETS.headboard.with_lamps; return ASSETS.headboard.base; } function resolveLayers() { return { bedroom: ASSETS.bedroom.base, headboard: resolveHeadboard(), base: ASSETS.base[state.mode], right: resolveSideOverlay("right"), left: resolveSideOverlay("left"), footpanel: state.footpanel ? ASSETS.footpanel[state.mode] : "", leftNightstandTop: state.mode === "coupled" && state.nightstands ? ASSETS.leftNightstandTop.coupled : "", }; } /* ===================================================== 5) PRELOAD ===================================================== */ const LOAD_CACHE = new Map(); function preload(src) { if (!src) return Promise.resolve(); if (LOAD_CACHE.has(src)) return LOAD_CACHE.get(src); const p = new Promise((resolve, reject) => { const img = new Image(); img.onload = async () => { if (img.decode) { try { await img.decode(); } catch {} } resolve(); }; img.onerror = reject; img.src = src; }); LOAD_CACHE.set(src, p); return p; } /* ===================================================== 6) DOUBLE BUFFER HELPERS ===================================================== */ function normalize(src) { return src ? new URL(src, location.href).href : ""; } function getBuffers(layer) { const a = layer.querySelector(".is-a"); const b = layer.querySelector(".is-b"); if (a.classList.contains("is-active")) { return { active: a, inactive: b }; } return { active: b, inactive: a }; } function hardResetLayer(layer) { const a = layer.querySelector(".is-a"); const b = layer.querySelector(".is-b"); a.classList.add("is-active"); b.classList.remove("is-active"); a.src = ""; b.src = ""; } /* ===================================================== 7) ATOMIC RENDER ===================================================== */ let renderToken = 0; let lastMode = state.mode; async function render(root) { const myToken = ++renderToken; const plan = resolveLayers(); const urls = Object.values(plan).filter(Boolean); await Promise.all(urls.map(preload)).catch(() => {}); if (myToken !== renderToken) return; requestAnimationFrame(() => { if (myToken !== renderToken) return; const modeChanged = state.mode !== lastMode; lastMode = state.mode; if (modeChanged) { ["left", "right"].forEach(key => { const layer = root.querySelector(`[data-layer="${key}"]`); if (layer) hardResetLayer(layer); }); } const commits = []; LAYER_ORDER.forEach(key => { const layer = root.querySelector(`[data-layer="${key}"]`); if (!layer) return; const { active, inactive } = getBuffers(layer); const next = normalize(plan[key]); const current = normalize(active.getAttribute("src")); if (current === next) return; inactive.src = next; commits.push(() => { inactive.classList.add("is-active"); active.classList.remove("is-active"); }); }); requestAnimationFrame(() => { if (myToken !== renderToken) return; commits.forEach(fn => fn()); }); updatePrice(root); }); } /* ===================================================== LABEL HELPERS ===================================================== */ function updateDropdownLabel(dropdown) { const trigger = dropdown.querySelector(".ds2-configurator-wood__dropdown-trigger"); if (!trigger) return; trigger.textContent = "MAAK KEUZE"; } function updateHeadboardDropdownLabel(dropdown) { const trigger = dropdown.querySelector(".ds2-configurator-wood__dropdown-trigger"); if (!trigger) return; trigger.textContent = "MAAK KEUZE"; } /* ===================================================== 8) INIT ===================================================== */ function init(root) { function syncSegmented(group, predicate) { if (!group) return; group.querySelectorAll(".ds2-configurator-wood__seg").forEach(btn => { btn.classList.toggle("is-active", predicate(btn)); }); } render(root); const modeGroup = root.querySelector('[data-mode]')?.closest('.ds2-configurator-wood__segmented'); syncSegmented(modeGroup, btn => btn.dataset.mode === state.mode); root.querySelectorAll('.ds2-configurator-wood__dropdown[data-side]').forEach(dropdown => { updateDropdownLabel(dropdown); }); const footpanelGroup = root.querySelector('[data-footpanel]')?.closest('.ds2-configurator-wood__segmented'); syncSegmented(footpanelGroup, btn => (btn.dataset.footpanel === "on") === state.footpanel ); root.querySelectorAll("[data-mode]").forEach(btn => { btn.addEventListener("click", () => { const value = btn.dataset.mode; if (state.mode === value) return; state.mode = value; btn .closest(".ds2-configurator-wood__segmented") .querySelectorAll(".ds2-configurator-wood__seg") .forEach(b => b.classList.toggle("is-active", b === btn)); render(root); }); }); function sideHas(side, flag) { const v = state[side]; if (flag === "3liften") { return v === "3liften" || v === "hooglaag+3liften" || v === "3liften+anti" || v === "hooglaag+3liften+anti"; } if (flag === "hooglaag") { return v === "hooglaag" || v === "hooglaag+3liften" || v === "hooglaag+anti" || v === "hooglaag+3liften+anti"; } if (flag === "anti") { return v === "anti" || v === "3liften+anti" || v === "hooglaag+anti" || v === "hooglaag+3liften+anti"; } return v === "flat"; } function setSideFromToggles(side, next3, nextH, nextA) { if (!next3 && !nextH && !nextA) { state[side] = "flat"; return; } const parts = []; if (nextH) parts.push("hooglaag"); if (next3) parts.push("3liften"); if (nextA) parts.push("anti"); state[side] = parts.join("+"); } root.querySelectorAll("[data-footpanel]").forEach(btn => { btn.addEventListener("click", () => { const value = btn.dataset.footpanel === "on"; if (state.footpanel === value) return; state.footpanel = value; btn .closest(".ds2-configurator-wood__segmented") .querySelectorAll(".ds2-configurator-wood__seg") .forEach(b => b.classList.toggle("is-active", b === btn)); render(root); }); }); root.querySelectorAll('.ds2-configurator-wood__dropdown[data-side]').forEach(dropdown => { const side = dropdown.dataset.side; dropdown.querySelectorAll("input").forEach(input => { input.addEventListener("change", () => { const flat = dropdown.querySelector('input[value="flat"]'); const liften = dropdown.querySelector('input[value="3liften"]'); const hoog = dropdown.querySelector('input[value="hooglaag"]'); const anti = dropdown.querySelector('input[value="anti"]'); if (input.value === "flat" && input.checked) { liften.checked = false; hoog.checked = false; anti.checked = false; } if (input.value !== "flat" && input.checked) { flat.checked = false; } const next3 = liften.checked; const nextH = hoog.checked; const nextA = anti.checked; setSideFromToggles(side, next3, nextH, nextA); updateDropdownLabel(dropdown); render(root); }); }); }); const headboardDropdown = root.querySelector('[data-headboard-dropdown]'); if (headboardDropdown) { headboardDropdown.querySelectorAll("input").forEach(input => { input.addEventListener("change", () => { const value = input.value; if (value === "none") { state.headboard = "none"; state.nightstands = false; state.lamps = false; } if (value === "with") { state.headboard = "with"; state.nightstands = false; state.lamps = false; } if (value === "nightstands") { state.headboard = "with"; state.nightstands = true; state.lamps = false; } if (value === "lamps") { state.headboard = "with"; state.nightstands = false; state.lamps = true; } if (value === "nightstands_lamps") { state.headboard = "with"; state.nightstands = true; state.lamps = true; } updateHeadboardDropdownLabel(headboardDropdown); headboardDropdown.classList.remove("is-open"); render(root); }); }); } function closeAllDropdowns() { root.querySelectorAll(".ds2-configurator-wood__dropdown").forEach(dropdown => { dropdown.classList.remove("is-open"); }); } root.querySelectorAll(".ds2-configurator-wood__dropdown-trigger").forEach(btn => { btn.addEventListener("click", event => { event.stopPropagation(); const dropdown = btn.closest(".ds2-configurator-wood__dropdown"); const wasOpen = dropdown.classList.contains("is-open"); closeAllDropdowns(); if (!wasOpen) { dropdown.classList.add("is-open"); } }); }); document.addEventListener("click", event => { if (!root.contains(event.target)) return; if (!event.target.closest(".ds2-configurator-wood__dropdown")) { closeAllDropdowns(); } }); } /* ===================================================== 9) BOOT ===================================================== */ async function boot() { const existing = document.querySelectorAll("[data-ds2-configurator-wood]"); if (existing.length) { existing.forEach(init); return; } try { const html = await fetchFirstWorking(PARTIAL_CANDIDATES); mountHTML(html).forEach(init); } catch (error) { console.warn("[DS2 Configurator Wood]", error); } } document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", boot) : boot(); })(); /* ===================================================== ======================================================== CONFIGURATOR N03 TWIJFELAAR BED ======================================================== ===================================================== */ (() => { /* ===================================================== 0) MOUNT / INJECT ===================================================== */ const PARTIAL_CANDIDATES = [ "/partials/ds2-twijfelaar-configurator.html", "../partials/ds2-twijfelaar-configurator.html", ]; async function fetchFirstWorking(urls) { for (const url of urls) { try { const res = await fetch(url, { cache: "no-store" }); if (!res.ok) throw new Error(); return await res.text(); } catch {} } throw new Error("No twijfelaar configurator partial found"); } function mountHTML(html) { const roots = []; document .querySelectorAll("[data-ds2-configurator-twijfelaar-mount]") .forEach(mount => { mount.innerHTML = html; mount .querySelectorAll("[data-ds2-twijfelaar-configurator]") .forEach(r => roots.push(r)); }); return roots; } /* ===================================================== 1) ASSETS ===================================================== */ const ASSETS = { bedroom: { base: "https://de-suite.vercel.app/media/configurator-hoog-laag-bed-achtergrond-1.webp", }, headboard: { base: "https://de-suite.vercel.app/media/twijfelaar-bed-headboard", with_nightstands: "https://de-suite.vercel.app/media/twijfelaar-bed-headboard", with_lamps: "https://de-suite.vercel.app/media/twijfelaar-bed-headboard-lamps", with_nightstands_lamps: "https://de-suite.vercel.app/media/twijfelaar-bed-headboard-lamps", }, leftNightstandTop: "https://de-suite.vercel.app/media/twijfelaar-bed-nightstand", base: "https://de-suite.vercel.app/media/twijfelaar-base", flat: "https://de-suite.vercel.app/media/twijfelaar-bed-flat", liften: "https://de-suite.vercel.app/media/twijfelaar-bed-3liften", hooglaag: "https://de-suite.vercel.app/media/twijfelaar-bed-hooglaag", anti: "https://de-suite.vercel.app/media/twijfelaar-bed-anti", hooglaag_liften: "https://de-suite.vercel.app/media/twijfelaar-bed-3liften-hooglaag", anti_liften: "https://de-suite.vercel.app/media/twijfelaar-bed-3liften-anti", anti_hooglaag: "https://de-suite.vercel.app/media/twijfelaar-bed-hooglaag-anti", anti_hooglaag_liften: "https://de-suite.vercel.app/media/twijfelaar-bed-3liften-hooglaag-anti", footpanel: "https://de-suite.vercel.app/media/twijfelaar-bed-footpanel" }; /* ===================================================== 2) STATE ===================================================== */ const state = { variant: "flat", headboard: true, nightstands: false, lamps: false, footpanel: false, }; /* ===================================================== 2B) PRICES ===================================================== */ const PRICES = { base: 2974, variant: { flat: 0, "3liften": 800, "hooglaag": 2339, "anti": 3667, "hooglaag+3liften": 2339, "3liften+anti": 3667, "hooglaag+anti": 3667, "hooglaag+3liften+anti": 3667, }, headboard: { false: 0, true: 650, }, nightstands: { false: 0, true: 720, }, lamps: { false: 0, true: 420, }, footpanel: { false: 0, true: 450, }, }; /* ===================================================== 3) LAYER ORDER ===================================================== */ const LAYER_ORDER = [ "bedroom", "headboard", "base", "overlay", "footpanel", "leftNightstandTop", ]; /* ===================================================== 4) PRICE ===================================================== */ function getCurrentPrice() { let total = PRICES.base; total += PRICES.variant[state.variant] || 0; total += PRICES.headboard[String(state.headboard)] || 0; total += PRICES.nightstands[String(state.nightstands)] || 0; total += PRICES.lamps[String(state.lamps)] || 0; total += PRICES.footpanel[String(state.footpanel)] || 0; return total; } function formatPrice(value) { return "€ " + value .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ".") + ",-"; } function updatePrice(root) { const priceEl = root.querySelector("[data-configurator-price]"); if (!priceEl) return; priceEl.textContent = formatPrice(getCurrentPrice()); } /* ===================================================== 5) RESOLVE LOGIC ===================================================== */ function resolveOverlay() { const v = state.variant; if (v === "flat") return ASSETS.flat; if (v === "3liften") return ASSETS.liften; if (v === "hooglaag") return ASSETS.hooglaag; if (v === "anti") return ASSETS.anti; if (v === "hooglaag+3liften") return ASSETS.hooglaag_liften; if (v === "3liften+anti") return ASSETS.anti_liften; if (v === "hooglaag+anti") return ASSETS.anti_hooglaag; if (v === "hooglaag+3liften+anti") return ASSETS.anti_hooglaag_liften; return ""; } function resolveHeadboard() { if (!state.headboard) return ""; const hasNight = !!state.nightstands; const hasLamps = !!state.lamps; if (hasNight && hasLamps) { return ASSETS.headboard.with_nightstands_lamps; } if (hasNight) { return ASSETS.headboard.with_nightstands; } if (hasLamps) { return ASSETS.headboard.with_lamps; } return ASSETS.headboard.base; } function resolveLayers() { return { bedroom: ASSETS.bedroom.base, headboard: resolveHeadboard(), base: ASSETS.base, overlay: resolveOverlay(), footpanel: state.footpanel ? ASSETS.footpanel : "", leftNightstandTop: state.nightstands ? ASSETS.leftNightstandTop : "", }; } /* ===================================================== 6) PRELOAD ===================================================== */ const LOAD_CACHE = new Map(); function preload(src) { if (!src) return Promise.resolve(); if (LOAD_CACHE.has(src)) return LOAD_CACHE.get(src); const p = new Promise((resolve, reject) => { const img = new Image(); img.onload = async () => { if (img.decode) { try { await img.decode(); } catch {} } resolve(); }; img.onerror = reject; img.src = src; }); LOAD_CACHE.set(src, p); return p; } /* ===================================================== 7) DOUBLE BUFFER ===================================================== */ function normalize(src) { return src ? new URL(src, location.href).href : ""; } function getBuffers(layer) { const a = layer.querySelector(".is-a"); const b = layer.querySelector(".is-b"); return a.classList.contains("is-active") ? { active: a, inactive: b } : { active: b, inactive: a }; } /* ===================================================== 8) ATOMIC RENDER ===================================================== */ let renderToken = 0; async function render(root) { const myToken = ++renderToken; const plan = resolveLayers(); const urls = Object.values(plan).filter(Boolean); await Promise.all(urls.map(preload)).catch(() => {}); if (myToken !== renderToken) return; requestAnimationFrame(() => { if (myToken !== renderToken) return; const commits = []; LAYER_ORDER.forEach(key => { const layer = root.querySelector(`[data-layer="${key}"]`); if (!layer) return; const { active, inactive } = getBuffers(layer); const next = normalize(plan[key]); const current = normalize(active.getAttribute("src")); if (current === next) return; inactive.src = next; commits.push(() => { inactive.classList.add("is-active"); active.classList.remove("is-active"); }); }); requestAnimationFrame(() => { if (myToken !== renderToken) return; commits.forEach(fn => fn()); updatePrice(root); }); }); } /* ===================================================== 9) DROPDOWN LABEL ===================================================== */ function updateVariantDropdownLabel(dropdown) { const trigger = dropdown.querySelector(".ds2-twijfelaar-configurator__dropdown-trigger"); if (!trigger) return; trigger.textContent = "MAAK KEUZE"; } /* ===================================================== 10) INIT ===================================================== */ function init(root) { function syncSegmented(group, predicate) { if (!group) return; group.querySelectorAll(".ds2-twijfelaar-configurator__seg").forEach(btn => { btn.classList.toggle("is-active", predicate(btn)); }); } function variantHas(flag) { const v = state.variant; if (flag === "3liften") { return v === "3liften" || v === "hooglaag+3liften" || v === "3liften+anti" || v === "hooglaag+3liften+anti"; } if (flag === "hooglaag") { return v === "hooglaag" || v === "hooglaag+3liften" || v === "hooglaag+anti" || v === "hooglaag+3liften+anti"; } if (flag === "anti") { return v === "anti" || v === "3liften+anti" || v === "hooglaag+anti" || v === "hooglaag+3liften+anti"; } return v === "flat"; } function setVariantFromToggles(next3, nextH, nextA) { if (!next3 && !nextH && !nextA) { state.variant = "flat"; return; } const parts = []; if (nextH) parts.push("hooglaag"); if (next3) parts.push("3liften"); if (nextA) parts.push("anti"); state.variant = parts.join("+"); } function closeAllDropdowns() { root.querySelectorAll(".ds2-twijfelaar-configurator__dropdown").forEach(dropdown => { dropdown.classList.remove("is-open"); }); } render(root); /* ========================= INIT UI ========================= */ const variantDropdown = root.querySelector("[data-variant-dropdown]"); if (variantDropdown) { updateVariantDropdownLabel(variantDropdown); } const headboardGroup = root.querySelector("[data-headboard]")?.closest(".ds2-twijfelaar-configurator__segmented"); syncSegmented(headboardGroup, btn => (btn.dataset.headboard === "on") === state.headboard ); const nightstandsGroup = root.querySelector("[data-nightstands]")?.closest(".ds2-twijfelaar-configurator__segmented"); syncSegmented(nightstandsGroup, btn => (btn.dataset.nightstands === "on") === state.nightstands ); const lampsGroup = root.querySelector("[data-lamps]")?.closest(".ds2-twijfelaar-configurator__segmented"); syncSegmented(lampsGroup, btn => (btn.dataset.lamps === "on") === state.lamps ); const footpanelGroup = root.querySelector("[data-footpanel]")?.closest(".ds2-twijfelaar-configurator__segmented"); syncSegmented(footpanelGroup, btn => (btn.dataset.footpanel === "on") === state.footpanel ); /* ========================= DROPDOWN TRIGGER ========================= */ root.querySelectorAll(".ds2-twijfelaar-configurator__dropdown-trigger").forEach(btn => { btn.addEventListener("click", (event) => { event.stopPropagation(); const dropdown = btn.closest(".ds2-twijfelaar-configurator__dropdown"); const wasOpen = dropdown.classList.contains("is-open"); closeAllDropdowns(); if (!wasOpen) { dropdown.classList.add("is-open"); } }); }); document.addEventListener("click", (event) => { if (!root.contains(event.target)) return; if (!event.target.closest(".ds2-twijfelaar-configurator__dropdown")) { closeAllDropdowns(); } }); /* ========================= VERSTELBARE OPTIES ========================= */ if (variantDropdown) { variantDropdown.querySelectorAll("input").forEach(input => { input.addEventListener("change", () => { const flat = variantDropdown.querySelector('input[value="flat"]'); const liften = variantDropdown.querySelector('input[value="3liften"]'); const hoog = variantDropdown.querySelector('input[value="hooglaag"]'); const anti = variantDropdown.querySelector('input[value="anti"]'); if (input.value === "flat" && input.checked) { liften.checked = false; hoog.checked = false; anti.checked = false; } if (input.value !== "flat" && input.checked) { flat.checked = false; } const next3 = liften.checked; const nextH = hoog.checked; const nextA = anti.checked; if (!next3 && !nextH && !nextA) { flat.checked = true; } setVariantFromToggles( liften.checked, hoog.checked, anti.checked ); updateVariantDropdownLabel(variantDropdown); render(root); }); }); } /* ========================= HOOFDPANEEL ========================= */ root.querySelectorAll("[data-headboard]").forEach(btn => { btn.addEventListener("click", () => { const value = btn.dataset.headboard === "on"; if (state.headboard === value) return; state.headboard = value; syncSegmented( btn.closest(".ds2-twijfelaar-configurator__segmented"), b => (b.dataset.headboard === "on") === state.headboard ); render(root); }); }); /* ========================= NACHTKASTJES ========================= */ root.querySelectorAll("[data-nightstands]").forEach(btn => { btn.addEventListener("click", () => { const value = btn.dataset.nightstands === "on"; if (state.nightstands === value) return; state.nightstands = value; syncSegmented( btn.closest(".ds2-twijfelaar-configurator__segmented"), b => (b.dataset.nightstands === "on") === state.nightstands ); render(root); }); }); /* ========================= BEDLAMPEN ========================= */ root.querySelectorAll("[data-lamps]").forEach(btn => { btn.addEventListener("click", () => { const value = btn.dataset.lamps === "on"; if (state.lamps === value) return; state.lamps = value; syncSegmented( btn.closest(".ds2-twijfelaar-configurator__segmented"), b => (b.dataset.lamps === "on") === state.lamps ); render(root); }); }); /* ========================= VOETPANEEL ========================= */ root.querySelectorAll("[data-footpanel]").forEach(btn => { btn.addEventListener("click", () => { const value = btn.dataset.footpanel === "on"; if (state.footpanel === value) return; state.footpanel = value; syncSegmented( btn.closest(".ds2-twijfelaar-configurator__segmented"), b => (b.dataset.footpanel === "on") === state.footpanel ); render(root); }); }); } /* ===================================================== 11) BOOT ===================================================== */ async function boot() { const existing = document.querySelectorAll("[data-ds2-twijfelaar-configurator]"); if (existing.length) { existing.forEach(init); return; } try { const html = await fetchFirstWorking(PARTIAL_CANDIDATES); mountHTML(html).forEach(init); } catch (e) { console.warn("[DS2 Twijfelaar Configurator]", e); } } document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", boot) : boot(); })();

ROMA