1"use strict";(self.webpackChunkpattern_library=self.webpackChunkpattern_library||[]).push([[122],{631: 2/*!******************************************************************************!*\ 3 !*** ./source/patterns/03-components/media/timeline/timeline.js + 1 modules ***! 4 \******************************************************************************/function(e,t,s){s.r(t),s.d(t,{Timeline:function(){return r},default:function(){return o}});const i={small:0,medium:841,large:1321};function n(){return window.innerWidth<(i[e="medium"]?i[e]:null);var e}class r{constructor(e){this.component=e,this.dropdown=this.component.querySelector(".js-dropdown"),this.leftControls=this.component.querySelectorAll(".js-timeline-left"),this.rightControls=this.component.querySelectorAll(".js-timeline-right"),this.timelineMarkers=this.component.querySelectorAll(".js-timeline-marker"),this.timelineMarkerContainer=this.component.querySelector(".js-marker-container"),this.timeLineMarkerPosPercent=n()?25:10,this.slides=this.component.querySelectorAll(".js-slide"),this.slideContainer=this.component.querySelector(".js-slide-container"),this.activeSlideIndex=0,this.disableDropdownChange=!1,this.addListeners()}addListeners(){this.timelineMarkers.forEach(e=>{e.addEventListener("click",()=>{this.showMilestone(parseInt(e.dataset.index,10))})}),this.dropdown.addEventListener("change",()=>{this.dropdownChanged()}),this.leftControls.forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),0!==this.activeSlideIndex&&this.showMilestone(parseInt(this.activeSlideIndex,10)-1)})}),this.rightControls.forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),this.showMilestone(parseInt(this.activeSlideIndex,10)+1)})}),window.addEventListener("resize",()=>{this.timeLineMarkerPosPercent=n()?25:10});const e={root:this.slideContainer,rootMargin:"100px",threshold:.5},t=new IntersectionObserver(e=>{for(let t=0;t<e.length;t++){const s=e[t];if(s.isIntersecting){const e=parseInt(s.target.dataset.slideIndex,10);e!==this.activeslideIndex&&(this.activeSlideIndex=e,this.setActiveMilestone(e)),s.target.classList.add("in-view")}else s.target.classList.remove("in-view")}},e);this.slides.forEach(e=>{t.observe(e)})}dropdownChanged(){const e=this.component.querySelector(`.js-timeline-marker[data-year='${this.dropdown.value}']`);e&&(this.disableDropdownChange=!0,this.showMilestone(parseInt(e.dataset.index,10)),window.setTimeout(()=>{this.disableDropdownChange=!1},1e3))}setActiveMilestone(e){this.hideCarouselControls(e),this.setActiveMarker(e),this.showMilestone(e),this.moveMarkers(e),this.disableDropdownChange||this.setDropdown(e)}hideCarouselControls(e){0===parseInt(e,10)?this.leftControls.forEach(e=>{e.classList.add("hidden")}):this.leftControls.forEach(e=>{e.classList.remove("hidden")}),parseInt(e,10)===this.slides.length-1?this.rightControls.forEach(e=>{e.classList.add("hidden")}):this.rightControls.forEach(e=>{e.classList.remove("hidden")})}setActiveMarker(e){this.timelineMarkers.forEach(t=>{t.classList.remove("active"),parseInt(t.dataset.index,10)===e&&t.classList.add("active"),parseInt(t.dataset.index,10)<=e?t.classList.add("viewed"):t.classList.remove("viewed")})}setDropdown(e){const t=this.timelineMarkers[e];this.dropdown.value!==t.dataset.year&&(this.dropdown.querySelector(`option[value='${t.dataset.year}']`).selected=!0)}showMilestone(e){if(!this.slides[e])return;if(e===this.activeSlideIndex)return;this.activeSlideIndex=e;let t=0;for(let e=0;e<this.activeSlideIndex;e++)t+=this.slides[e].offsetWidth;this.slideContainer.scrollLeft=t}moveMarkers(e){if(!this.slides[e])return;const t=this.timeLineMarkerPosPercent-this.timeLineMarkerPosPercent*(e+1);this.timelineMarkerContainer.style.transform=`translateX(${t}%)`}}var o=e=>new r(e)}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.