← All changes | assets/build/blocks/content-timeline/view.js +6 -0 2.7.4 → 2.15.0 View file →

		@@ -1,0 +1,6 @@
	1	+(()=>{"use strict";const t=(t,e)=>{if("string"==typeof t&&t.startsWith(`var:${e}`)){const i=t.split("|");if(3===i.length)return{source:i[0],color:i[1]||"",..."preset"===e?{slug:i[2]}:{id:i[2]}}}return!1},e=e=>{if(e){const i=t(e,"preset"),n=t(e,"global");return i?`var(--wp--preset--color--${i?.slug})`:n?`var(--ablocks-${n?.id})`:e}return""},i=t=>"undefined"!=typeof window&&window.requestAnimationFrame?window.requestAnimationFrame(t):setTimeout(t,16);class n{constructor(t,e=!1){this.contentTimeline=t,this.timelineElement=t.querySelector(".ablocks-block-content-timeline"),this.blockTopHeight=this.contentTimeline.getBoundingClientRect().top+window.scrollY,this.editor=e,this.arrowAlignment=this.timelineElement.getAttribute("data-arrow-alignment"),this.animationColor=this.timelineElement.getAttribute("data-animation-color"),this.showAnimation=this.timelineElement.getAttribute("data-show-animation"),this.lineElement=this.contentTimeline.querySelector(".ablocks-block-content-timeline__line"),
	2	+this.lineInnerElement=this.contentTimeline.querySelector(".ablocks-block-content-timeline__line__inner"),this.childBlocks=Array.from(this.contentTimeline.querySelectorAll(".ablocks-block-content-timeline-child")),this.handleScroll=this.handleScroll.bind(this),this.updateTimeline=this.updateTimeline.bind(this);const i=document.querySelector(".interface-navigable-region.interface-interface-skeleton__content");this.editorDiv=i,this.init()}init(){this.updateTimeline(),this.handleScroll(),window.addEventListener("scroll",this.handleScroll),void 0!==window.ResizeObserver&&(this.resizeObserver=new window.ResizeObserver(()=>i(()=>{(this.hasHorizontalPosition()||this.wasHorizontal)&&(this.updateTimeline(),this.handleScroll())})),this.resizeObserver.observe(this.timelineElement))}updateTimeline(){if(0===this.childBlocks.length||!this.lineElement)return;if(this.wasHorizontal=this.isHorizontal(),this.wasHorizontal)return void this.updateHorizontalTimeline();if(this.resetHorizontalLineStyles(),
	3	+this.hasHorizontalPosition())return void this.updateStackedTimeline();const[t,e]=[this.childBlocks[0],this.childBlocks[this.childBlocks.length-1]],[i,n]=[t.getBoundingClientRect().height,e.getBoundingClientRect().height];switch(this.arrowAlignment){case"center":this.lineElement.style.top=i/2+"px",this.lineElement.style.bottom=n/2+"px";break;case"bottom":this.lineElement.style.top=`${i}px`,this.lineElement.style.bottom=n/n+"px";break;case"top":this.lineElement.style.top=i/i+"px",this.lineElement.style.bottom=`${n}px`}this.lineInnerElement.style.height="0px"}hasHorizontalPosition(){return this.timelineElement.classList.contains("ablocks-block-content-timeline--top")||this.timelineElement.classList.contains("ablocks-block-content-timeline--bottom")}isHorizontal(){return!(!this.hasHorizontalPosition()||!this.childBlocks[0]?.parentElement)&&"row"===window.getComputedStyle(this.childBlocks[0].parentElement).flexDirection}resetHorizontalLineStyles(){
	4	+["left","width","height","marginLeft","marginRight"].forEach(t=>{this.lineElement.style[t]=""}),this.lineInnerElement.style.width=""}updateHorizontalTimeline(){const t=this.childBlocks.map(t=>t.querySelector(".ablocks__in-view-icon")).filter(Boolean);if(0===t.length)return;this.resetHorizontalLineStyles();const e=parseFloat(window.getComputedStyle(this.lineElement).width)||3,i=this.timelineElement.getBoundingClientRect(),n=t[0].getBoundingClientRect(),l=t[t.length-1].getBoundingClientRect(),o=n.left+n.width/2,s=l.left+l.width/2,h=n.top+n.height/2;this.lineElement.style.top=h-i.top-e/2+"px",this.lineElement.style.bottom="auto",this.lineElement.style.left=o-i.left+"px",this.lineElement.style.width=`${Math.max(s-o,0)}px`,this.lineElement.style.height=`${e}px`,this.lineElement.style.marginLeft="0px",this.lineElement.style.marginRight="0px",this.lineInnerElement.style.height="100%",this.lineInnerElement.style.width="0px"}updateStackedTimeline(){
	5	+const t=this.childBlocks.map(t=>t.querySelector(".ablocks__in-view-icon")).filter(Boolean);if(0===t.length)return;const e=this.timelineElement.getBoundingClientRect(),i=t[0].getBoundingClientRect(),n=t[t.length-1].getBoundingClientRect();this.lineElement.style.top=i.top+i.height/2-e.top+"px",this.lineElement.style.bottom=e.bottom-(n.top+n.height/2)+"px",this.lineInnerElement.style.height="0px"}handleHorizontalScroll(){const t="true"===this.showAnimation&&!this.editor&&this.timelineElement.getBoundingClientRect().top<window.innerHeight/2;this.childBlocks.forEach(i=>{const n=i.querySelector(".ablocks-icon-wrap");n&&(n.style.backgroundColor=t?e(this.animationColor):"")}),this.lineInnerElement&&("true"===this.showAnimation&&(this.lineInnerElement.style.backgroundColor=e(this.animationColor)),this.lineInnerElement.style.width=t?"100%":"0px")}handleScroll(){i(()=>{if(this.isHorizontal())return void this.handleHorizontalScroll();let t=0;const i=window.scrollY;this.childBlocks.forEach(n=>{
	6	+t+=n.getBoundingClientRect().height;const l=n.querySelector(".ablocks-icon-wrap");i-this.blockTopHeight>t-n.getBoundingClientRect().height?"true"===this.showAnimation&&!1===this.editor&&(l.style.backgroundColor=e(this.animationColor)):l.style.backgroundColor=""}),this.lineInnerElement&&("true"===this.showAnimation&&(this.lineInnerElement.style.backgroundColor=e(this.animationColor)),this.editor||(this.lineInnerElement.style.height=i-this.blockTopHeight+"px"))})}destroy(){window.removeEventListener("scroll",this.handleScroll),this.resizeObserver&&this.resizeObserver.disconnect()}}document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll(".ablocks-block--content-timeline").forEach(t=>{new n(t,!1)})})})();