https://www.yosisamra.com/cdn/shop/t/145/assets/sticky-images-and-text.js?v=83822530242831481786491696

1!function(){"use strict";const t=.5,e={horizontal:"horizontal",horizontalReversed:"horizontal-reversed",vertical:"vertical",verticalReversed:"vertical-reversed"},i={maxVisibility:"maximum-visibility-of-each-image-in-viewport",middleOfViewport:"image-in-the-middle-of-viewport"};customElements.get("sticky-images-and-text")||customElements.define("sticky-images-and-text",class extends HTMLElement{constructor(){super(),this.performAnimation=null,this.lastOffset=0,this.activeIndex=0,this.lastActiveIndex=this.activeIndex,this.onScrollCallback=()=>this.onScroll(),this.onResizeCallback=()=>this.onResize(),this.calculateImagesOffsetCallback=()=>this.calculateImagesOffset()}connectedCallback(){if(this.scrollDirection=this.dataset.scrollDirection,this.horizontalScroll=this.scrollDirection===e.horizontal||this.scrollDirection===e.horizontalReversed,this.verticalScroll=this.scrollDirection===e.vertical||this.scrollDirection===e.verticalReversed,this.reverseDirection=this.scrollDirection===e.horizontalReversed||this.scrollDirection===e.verticalReversed,this.direction=this.reverseDirection?1:-1,this.withGaps=this.hasAttribute("data-sticky-with-gaps"),this.singleText=this.hasAttribute("data-sticky-single-text"),this.image=this.querySelectorAll(".js-only [data-sticky-image]"),this.text=this.querySelectorAll(".js-only [data-sticky-text]"),this.textInner=this.querySelectorAll(".js-only [data-sticky-text-inner]"),this.images=this.querySelector("[data-sticky-images]"),this.dot=this.querySelectorAll("[data-sticky-dot]"),this.aside=this.querySelector("[data-sticky-aside]"),this.inner=this.querySelector("[data-sticky-inner]"),this.content=this.querySelector("[data-sticky-content]"),this.wrapper=this.querySelector("[data-sticky-wrapper]"),this.textHighlight=this.querySelectorAll("text-highlight"),!this.wrapper)return;this.getTypeOfIntersecting(),this.observeImagesIntersecting();const t=()=>{this.isConnected&&(this.calculateHeights(),this.performAnimation=requestAnimationFrame(this.calculateImagesOffsetCallback),requestAnimationFrame((()=>{requestAnimationFrame((()=>this.calculateHeights()))})))},i=()=>{requestAnimationFrame((()=>{requestAnimationFrame(t)}))};"complete"===document.readyState?i():window.addEventListener("load",i,{once:!0}),document.addEventListener("theme:scroll",this.onScrollCallback),document.addEventListener("theme:resize:width",this.onResizeCallback),this.syncDots()}getTypeOfIntersecting(){this.typeOfIntersecting=i.maxVisibility,this.fractionOfViewport=this.image[0].offsetHeight/window.innerHeight,this.verticalScroll&&!window.theme.isMobile()&&this.fractionOfViewport<.6&&(this.typeOfIntersecting=i.middleOfViewport)}observeImagesIntersecting(){this.observersCollection=new Set,this.compareIntersectionRatio=[],this.maxVisibility=0,this.observer=new IntersectionObserver(((e,s)=>{e.forEach((e=>{const s=e.target.offsetHeight,o=e.intersectionRatio,h=e.isIntersecting,n={target:e.target,intersectionRatio:e.intersectionRatio},r=this.typeOfIntersecting===i.maxVisibility;let a=t;this.windowHeight<=s&&(a=0),r&&h&&(this.observersCollection.forEach((t=>{t.target===e.target&&this.observersCollection.delete(t)})),this.observersCollection.add(n),this.compareIntersectionRatio=[...this.observersCollection].map((t=>t.intersectionRatio)),this.maxVisibility=Math.max(...this.compareIntersectionRatio)),h&&o>a&&r&&this.maxVisibility===o&&(this.maxVisibilityItem=[...this.observersCollection].find((t=>t.intersectionRatio===this.maxVisibility)),this.activeIndex=Number(this.maxVisibilityItem.target.dataset.index),this.lastActiveIndex!==this.activeIndex&&(this.sync(),this.lastActiveIndex=this.activeIndex))}))}),{root:null,rootMargin:"0px",threshold:[0,.15,.3,.35,.4,.45,.5,.55,.6,.65,.7,.85,1]}),this.image.forEach((t=>this.observer.observe(t)))}onScroll(){this.performAnimation||(this.performAnimation=requestAnimationFrame(this.calculateImagesOffsetCallback)),this.typeOfIntersecting===i.middleOfViewport&&this.image.forEach((t=>this.checkImagePositionInViewport(t)))}removeAnimationFrame(){this.performAnimation&&(cancelAnimationFrame(this.performAnimation),this.performAnimation=null)}checkImagePositionInViewport(t){if(!t)return;const e=window.innerHeight,i=window.scrollY,s=i+e/2,o=i+e,h=Math.round(t.getBoundingClientRect().top+i),n=h+t.offsetHeight;h<o&&!(n<i)&&s>h&&n>s&&(this.activeIndex=Number(t.dataset.index),this.lastActiveIndex!==this.activeIndex&&(this.sync(),this.lastActiveIndex=this.activeIndex))}calculateImagesOffset(){const t=this.aside.getBoundingClientRect().top-this.headerHeight,e=t-this.innerStickyTop;let i=0,s=0;const o=this.hasShortImages?e:t;i=o<0?o/this.bottomEndingPoint*-1*100:o>=0?0:100,s=i>100?100:i,s*=this.image.length-1,(window.theme.isMobile()||this.horizontalScroll)&&this.aside.style.setProperty("--translateX",`${Number(s*this.direction).toFixed(2)}%`),this.lastOffset!==s?this.performAnimation=requestAnimationFrame(this.calculateImagesOffsetCallback):this.performAnimation&&this.removeAnimationFrame(),this.lastOffset=s}calculateHeights(){let{stickyHeaderHeight:t,windowHeight:e}=window.theme.readHeights();if(this.headerHeight=t||0,this.windowHeight=e||window.innerHeight,this.text.length>0){const t=this.content?parseInt(window.getComputedStyle(this.content).getPropertyValue("padding-top")):0,e=this.content?parseInt(window.getComputedStyle(this.content).getPropertyValue("padding-bottom")):0,i=[...this.text].map((i=>i.offsetHeight+t+e)),s=[...this.textInner].map((t=>t.offsetHeight)),o=Math.max(...i),h=Math.max(...s),n=window.theme.isMobile()?h:o,r=i.reduce(((t,e)=>t+e),0),a=Math.floor(r/i.length)||this.text[0].offsetHeight;this.style.removeProperty("--average-text-height"),this.style.setProperty("--average-text-height",`${a}px`),this.style.removeProperty("--highest-text"),this.style.setProperty("--highest-text",`${n}px`)}if(this.imagesHeight=this.images.offsetHeight,this.hasShortImages=!1,this.image.length>0){const t=this.image[0].querySelector(".image-wrapper"),e=this.image[0].querySelector(".sticky-images-and-text__video-wrapper"),i=t||e;this.imgHeight=i?i.offsetHeight:0,this.imgPadding=parseInt(window.getComputedStyle(this.image[0]).getPropertyValue("padding-top")),this.style.removeProperty("--images-height"),this.style.setProperty("--images-height",`${this.imagesHeight}px`),this.style.removeProperty("--img-height"),this.style.setProperty("--img-height",`${this.imgHeight+2*this.imgPadding}px`)}this.asideHeight=this.aside.offsetHeight,this.asidePadding=parseInt(window.getComputedStyle(this.aside).getPropertyValue("padding-top")),this.breathingSpace=(this.windowHeight-this.imagesHeight)/2/2,this.innerStickyTop=parseInt(window.getComputedStyle(this.inner).getPropertyValue("top"))-this.headerHeight-this.breathingSpace,this.gutters=this.withGaps?2*this.asidePadding:0,this.additionalSpace=window.theme.isMobile()?this.withGaps?this.asidePadding+10:10:this.gutters,this.minHeightForEndingPoing=this.imagesHeight+this.additionalSpace,!window.theme.isMobile()&&this.horizontalScroll&&(this.minHeightForEndingPoing=this.windowHeight-this.headerHeight,this.hasShortImages=this.fractionOfViewport<=.6,this.hasShortImages&&(this.minHeightForEndingPoing=this.imagesHeight-this.innerStickyTop+3*this.breathingSpace)),this.bottomEndingPoint=this.asideHeight-this.minHeightForEndingPoing}refreshImagesOffsetValues(){requestAnimationFrame((()=>{requestAnimationFrame((()=>{document.dispatchEvent(new CustomEvent("theme:scroll"))}))}))}onResize(){this.calculateHeights(),requestAnimationFrame((()=>

1this.calculateHeights())),this.getTypeOfIntersecting(),this.refreshImagesOffsetValues()}sync(){const t=this.singleText?[]:this.text;[...this.image,...t,...this.dot].forEach((t=>{const e=Number(t.getAttribute("data-index"));t.classList.toggle("is-active",e===Number(this.activeIndex))})),this.textHighlight.forEach((t=>t.shouldAnimate()))}syncDots(){this.dot.forEach((t=>{t.addEventListener("click",(t=>{t.preventDefault(),this.scrollTo(this.image[Number(t.target.dataset.index)])}))}))}scrollTo(t,e=0){if(!t)return;const s=Number(t.dataset.index),o=Math.round(t.getBoundingClientRect().top+window.scrollY),h=t.offsetHeight,n=Math.round(this.wrapper.getBoundingClientRect().top+window.scrollY),r=this.aside.getBoundingClientRect().top-this.headerHeight,a=n+this.images.offsetHeight*s,l=Boolean((this.image[0].offsetHeight+this.gutters)/(window.innerHeight-this.headerHeight)>=1);let c=a-this.headerHeight;if(window.theme.isMobile()){c=r+window.scrollY+this.bottomEndingPoint/(this.image.length-1)*s}if(this.horizontalScroll&&window.theme.isDesktop()&&!l){const t=r-this.innerStickyTop;c=(this.hasShortImages?t+window.scrollY:r+window.scrollY)+this.bottomEndingPoint/(this.image.length-1)*s}this.verticalScroll&&window.theme.isDesktop()&&(c=o-this.headerHeight,this.typeOfIntersecting===i.middleOfViewport&&(c=o-window.innerHeight/2+h/2-this.headerHeight));const g={top:c,left:0,behavior:"smooth"};e>0?setTimeout((()=>window.scrollTo(g)),e):window.scrollTo(g)}disconnectedCallback(){this.image.forEach((t=>this.observer.unobserve(t))),document.removeEventListener("theme:scroll",this.onScrollCallback),document.removeEventListener("theme:resize:width",this.onResizeCallback)}})}();