https://bulgarianroseotto.com/cdn/shop/t/11/assets/timeline-component.js?v=25828140184624228211780044765

1class TimelineComponent extends HTMLElement{constructor(){super();const ds=this.dataset;this.animationSpeed=parseInt(ds.animationSpeed||"",10)||800,this.sectionHeight=parseInt(ds.height||"",10)||500,this.showDots=ds.showDots==="true",this.timelineBg=ds.timelineBg||"#1a1a1a",this.contentBg=ds.contentBg||"#ffffff",this.accentColor=ds.accentColor||"#ff6b35",this.dateColor=ds.dateColor||"#cccccc",this.textColor=ds.textColor||"#ffffff",this.slides=[],this.timelineItems=[],this.timelineDot=null,this.currentSlideIndex=-1,this.totalSlides=0,this.windowHeight=0,this.isInViewport=!1,this.touchStartY=0,this.touchEndY=0,this._raf=null,this._abort=new AbortController,this._resizeObserver=null,this._io=null,this._manualSlideChange=!1}connectedCallback(){this._init()}disconnectedCallback(){this._cleanup()}_init(){this._setupElements(),this._applyCustomStyles(),this._setupObservers(),this._setupEventListeners(),this._updateDimensions(),this._updateActiveSlide(0)}_cleanup(){this._abort.abort(),this._resizeObserver?.disconnect(),this._io?.disconnect(),this._raf&&cancelAnimationFrame(this._raf)}_setupElements(){this.timelineSection=this.closest(".timeline-section")||this,this.slides=Array.from(this.querySelectorAll(".slide")),this.timelineItems=Array.from(this.querySelectorAll(".timeline-item")),this.timelineDot=this.querySelector(".timeline-dot"),this.totalSlides=this.slides.length,this.timelineSection&&(this.timelineSection.style.height=`${this.sectionHeight}vh`)}_applyCustomStyles(){const timelinePanel=this.querySelector(".timeline-panel"),contentPanel=this.querySelector(".content-panel");timelinePanel&&(timelinePanel.style.backgroundColor=this.timelineBg),contentPanel&&(contentPanel.style.backgroundColor=this.contentBg),this.querySelectorAll(".source-link").forEach(a=>a.style.color=this.accentColor),this.style.setProperty("--timeline-accent-color",this.accentColor),this.style.setProperty("--timeline-animation-speed",`${this.animationSpeed}ms`),this.style.setProperty("--timeline-date-color",this.dateColor),this.style.setProperty("--timeline-text-color",this.textColor)}_setupObservers(){this._resizeObserver=new ResizeObserver(()=>this._handleResize()),this._resizeObserver.observe(document.documentElement),this._io=new IntersectionObserver(entries=>{for(const entry of entries){const target=entry.target;if(target===this.timelineSection){this.isInViewport=entry.isIntersecting,this.isInViewport&&this._updateActiveSlide(this._getCurrentSlideIndex());continue}if(entry.isIntersecting&&target.tagName==="IMG"){const img=target,src=img.dataset.src;src&&(img.src=src,img.removeAttribute("data-src"),img.decoding="async",img.loading="eager"),this._io.unobserve(img)}}},{root:null,rootMargin:"50px",threshold:.1}),this._io.observe(this.timelineSection),this.querySelectorAll('img[loading="lazy"]').forEach(img=>this._io.observe(img))}_setupEventListeners(){const{signal}=this._abort;window.addEventListener("scroll",()=>this._handleScroll(),{passive:!0,signal}),window.addEventListener("resize",()=>this._handleResize(),{passive:!0,signal}),document.addEventListener("keydown",e=>this._handleKeydown(e),{signal}),this.addEventListener("touchstart",e=>{this.touchStartY=e.touches[0].clientY},{passive:!0,signal}),this.addEventListener("touchend",e=>{this.touchEndY=e.changedTouches[0].clientY,this._handleSwipe()},{passive:!0,signal})}_updateDimensions(){this.windowHeight=window.innerHeight||document.documentElement.clientHeight}_getCurrentSlideIndex(){if(!this.isInViewport||this.totalSlides<=1)return Math.max(0,this.currentSlideIndex);const rect=this.timelineSection.getBoundingClientRect(),sectionPx=Math.max(1,rect.height-this.windowHeight),progress=this._clamp((0-rect.top)/sectionPx,0,1),idx=Math.round(progress*(this.totalSlides-1));return this._clamp(idx,0,this.totalSlides-1)}_updateActiveSlide(slideIndex){if(slideIndex===this.currentSlideIndex)return;this.currentSlideIndex=slideIndex,this.slides.forEach(el=>el.classList.remove("active")),this.timelineItems.forEach(el=>el.classList.remove("active")),this.timelineDot?.classList.remove("active");

1const activeSlide=this.querySelector(`.slide[data-slide="${slideIndex}"]`),activeItem=this.querySelector(`.timeline-item[data-slide="${slideIndex}"]`);activeSlide?.classList.add("active"),activeItem?.classList.add("active"),this.timelineDot?.classList.add("active"),requestAnimationFrame(()=>{this.slides.forEach(slide=>{const i=parseInt(slide.dataset.slide||"0",10);i<slideIndex?(slide.style.transform="translateY(-10%)",slide.style.opacity="0"):i===slideIndex?(slide.style.transform="translateY(-1px)",slide.style.opacity="1"):(slide.style.transform="translateY(100%)",slide.style.opacity="0")}),this.timelineItems.forEach(item=>{const i=parseInt(item.dataset.slide||"0",10);i<slideIndex?(item.style.transform="translateY(100%)",item.style.opacity="0"):i===slideIndex?(item.style.transform="translateY(-50%)",item.style.opacity="1"):(item.style.transform="translateY(-100%)",item.style.opacity="0")})}),this.dispatchEvent(new CustomEvent("slidechange",{detail:{slideIndex,totalSlides:this.totalSlides},bubbles:!0}))}_handleScroll(){this.isInViewport&&(this._raf||this._manualSlideChange||(this._raf=requestAnimationFrame(()=>{this._raf=null,this._updateActiveSlide(this._getCurrentSlideIndex())})))}_handleResize(){this._updateDimensions(),this._updateActiveSlide(this._getCurrentSlideIndex())}_handleKeydown(e){if(!this.isInViewport)return;const idx=this.currentSlideIndex;switch(e.key){case"ArrowUp":case"ArrowLeft":e.preventDefault(),idx>0&&this.scrollToSlide(idx-1);break;case"ArrowDown":case"ArrowRight":e.preventDefault(),idx<this.totalSlides-1&&this.scrollToSlide(idx+1);break;case" ":case"Spacebar":e.preventDefault(),this.scrollToSlide((idx+1)%this.totalSlides);break;default:break}}_handleSwipe(){const idx=this.currentSlideIndex;this.touchEndY<this.touchStartY-50&&idx<this.totalSlides-1?this.scrollToSlide(idx+1):this.touchEndY>this.touchStartY+50&&idx>0&&this.scrollToSlide(idx-1)}scrollToSlide(slideIndex){if(!this.timelineSection||this.totalSlides<=1)return;const rect=this.timelineSection.getBoundingClientRect(),sectionTopAbs=window.scrollY+rect.top,sectionScrollSpan=Math.max(1,this.timelineSection.scrollHeight-this.windowHeight),ratio=slideIndex/(this.totalSlides-1),target=sectionTopAbs+sectionScrollSpan*ratio;window.scrollTo({top:target,behavior:"smooth"})}goToSlide(i){i>=0&&i<this.totalSlides&&this.scrollToSlide(i)}goToSlideImmediate(i){if(i>=0&&i<this.totalSlides)if(this._manualSlideChange=!0,this._updateActiveSlide(i),this.timelineSection){const rect=this.timelineSection.getBoundingClientRect(),targetScrollTop=window.scrollY+rect.top-100;window.scrollTo({top:targetScrollTop,behavior:"smooth"}),setTimeout(()=>{this._manualSlideChange=!1},1e3)}else this._manualSlideChange=!1}nextSlide(){this.goToSlide(Math.min(this.currentSlideIndex+1,this.totalSlides-1))}previousSlide(){this.goToSlide(Math.max(this.currentSlideIndex-1,0))}getCurrentSlide(){return this.currentSlideIndex}getTotalSlides(){return this.totalSlides}_clamp(n,a,b){return Math.min(b,Math.max(a,n))}}customElements.get("timeline-component")||customElements.define("timeline-component",TimelineComponent);
2//# sourceMappingURL=/cdn/shop/t/11/assets/timeline-component.js.map?v=25828140184624228211780044765