https://sparkrochestermn.org/wp-content/plugins/ultimate-addons-for-gutenberg/assets/js/timeline.js?ver=2.20.3

1window.addEventListener( 'DOMContentLoaded', uagbTimelineInit );
2window.addEventListener( 'resize', uagbTimelineInit );
3window.addEventListener( 'scroll', uagbTimelineInit );
4document.addEventListener( 'UAGTimelineEditor', uagbTimelineInit );
5// Callback function for all event listeners.
6function uagbTimelineInit() {
7	const iframeEl = document.querySelector( `iframe[name='editor-canvas']` );
8	let mainDiv;
9	if ( iframeEl ) {
10		mainDiv = iframeEl.contentDocument.querySelectorAll( '.uagb-timeline' );
11	} else {
12		mainDiv = document.querySelectorAll( '.uagb-timeline' );
13	}
14
15	const timeline = mainDiv;
16	if ( timeline.length === 0 ) {
17		return;
18	}
19
20	for ( const content of timeline ) {
21		const lineInner = content.querySelector( '.uagb-timeline__line__inner' );
22		const lineOuter = content.querySelector( '.uagb-timeline__line' );
23		const iconClass = content.querySelectorAll( '.uagb-timeline__marker' );
24		const timelineField = content.querySelector( '.uagb-timeline__field:nth-last-child(2)' );
25		const cardLast = timelineField
26			? timelineField
27			: content.querySelector( '.block-editor-block-list__block:last-child' );
28		const timelineStartIcon = iconClass[ 0 ];
29		const timelineEndIcon = iconClass[ iconClass.length - 1 ];
30
31		setTimeout( () => {
32			lineOuter.style.top = timelineStartIcon?.offsetTop + 'px';
33		}, 300 );
34		const timelineCardHeight = cardLast?.offsetHeight;
35
36		if ( content.classList.contains( 'uagb-timeline__arrow-center' ) ) {
37			lineOuter.style.bottom = timelineEndIcon?.offsetTop + 'px';
38		} else if ( content.classList.contains( 'uagb-timeline__arrow-top' ) ) {
39			const topHeight = timelineCardHeight - timelineEndIcon?.offsetTop;
40			lineOuter.style.bottom = topHeight + 'px';
41		} else if ( content.classList.contains( 'uagb-timeline__arrow-bottom' ) ) {
42			const bottomHeight = timelineCardHeight - timelineEndIcon?.offsetTop;
43			lineOuter.style.bottom = bottomHeight + 'px';
44		}
45
46		const connectorHeight = 3 * iconClass[ 0 ]?.offsetHeight;
47
48		const viewportHeight = document?.documentElement?.clientHeight;
49
50		const viewportHeightHalf = viewportHeight / 2 + connectorHeight;
51
52		const body = document.body;
53		const html = document.documentElement;
54
55		const height = Math.max(
56			body.scrollHeight,
57			body.offsetHeight,
58			html.clientHeight,
59			html.scrollHeight,
60			html.offsetHeight
61		);
62
63		const timelineEndIconOffsetBottom = height - timelineEndIcon?.getBoundingClientRect()?.top;
64
65		const totalTimelineLineHeight =
66			height - timelineStartIcon?.getBoundingClientRect()?.top - timelineEndIconOffsetBottom;
67
68		const startFlag =
69			timelineStartIcon?.getBoundingClientRect()?.top +
70			window?.scrollY -
71			( window?.innerHeight - window?.innerHeight / 3 );
72
73		if ( startFlag < document?.documentElement?.scrollTop ) {
74			const tscrollPerc =
75				( ( document?.documentElement?.scrollTop - startFlag ) / totalTimelineLineHeight ) * 100;
76			const percHeight = ( totalTimelineLineHeight / 100 ) * tscrollPerc;
77
78			if ( percHeight < totalTimelineLineHeight + 60 ) {
79				lineInner.style.height = percHeight + 'px';
80			}
81		}
82
83		// Icon bg color and icon color
84
85		let timelineIconPos, timelineCardPos;
86		let timelineIconTop, timelineCardTop;
87		const timelineIcon = content.querySelectorAll( '.uagb-timeline__marker' );
88
89		let animateBorder = content.querySelectorAll( '.uagb-timeline__field' );
90
91		if ( animateBorder.length === 0 ) {
92			animateBorder = content.querySelectorAll( '.uagb-timeline__animate-border' );
93		}
94
95		for ( let j = 0; j < timelineIcon.length; j++ ) {
96			timelineIconPos = timelineIcon[ j ].lastElementChild.getBoundingClientRect().top + window.scrollY;
97			timelineCardPos = animateBorder[ j ].lastElementChild.getBoundingClientRect().top + window.scrollY;
98
99			timelineIconTop = timelineIconPos - document.documentElement.scrollTop;
100			timelineCardTop = timelineCardPos - document.documentElement.scrollTop;
101
102			if ( timelineCardTop < viewportHeightHalf ) {
103				animateBorder[ j ].classList.remove( 'out-view' );
104				animateBorder[ j ].classList.add( 'in-view' );
105			} else {
106				// Remove classes if element is below than half of viewport.
107				animateBorder[ j ].classList.add( 'out-view' );
108				animateBorder[ j ].classList.remove( 'in-view' );
109			}
110

111			if ( timelineIconTop < viewportHeightHalf ) {
112				// Add classes if element is above than half of viewport.
113				timelineIcon[ j ].classList.remove( 'uagb-timeline__out-view-icon' );
114				timelineIcon[ j ].classList.add( 'uagb-timeline__in-view-icon' );
115			} else {
116				// Remove classes if element is below than half of viewport.
117				timelineIcon[ j ].classList.add( 'uagb-timeline__out-view-icon' );
118				timelineIcon[ j ].classList.remove( 'uagb-timeline__in-view-icon' );
119			}
120		}
121	}
122}
123
124// eslint-disable-next-line no-unused-vars
125function UAGBTimelineClasses( attributes, id ) {
126	const timeline = document.querySelectorAll( id );
127
128	if ( timeline.length === 0 ) {
129		return;
130	}
131
132	const deviceWidth = Math.max( window.screen.width, window.innerWidth );
133
134	for ( const content of timeline ) {
135		content.classList.remove(
136			'uagb-timeline__left-block',
137			'uagb-timeline__right-block',
138			'uagb-timeline__center-block'
139		);
140
141		let device = '';
142
143		if ( deviceWidth <= uagb_timeline_data.mobile_breakpoint ) {
144			device = 'Mobile';
145		} else if ( deviceWidth <= uagb_timeline_data.tablet_breakpoint ) {
146			device = 'Tablet';
147		}
148
149		if ( 'left' === attributes[ 'timelinAlignment' + device ] ) {
150			content.classList.add( 'uagb-timeline__left-block' );
151		} else if ( 'right' === attributes[ 'timelinAlignment' + device ] ) {
152			content.classList.add( 'uagb-timeline__right-block' );
153		} else {
154			content.classList.add( 'uagb-timeline__center-block' );
155		}
156
157		let timelineChild = content.querySelectorAll( '.wp-block-uagb-content-timeline-child' );
158		let childIndex = 0;
159
160		if ( 0 === timelineChild.length ) {
161			timelineChild = content.querySelectorAll( '.uagb-timeline__field' );
162		}
163
164		for ( const child of timelineChild ) {
165			child.classList.remove( 'uagb-timeline__left', 'uagb-timeline__right' );
166			const timelineMarker = child.querySelectorAll( '.uagb-timeline__marker' )[ 0 ];
167			timelineMarker.classList.remove( 'uagb-timeline__left', 'uagb-timeline__right' );
168
169			const timeLineEventInner = child.querySelectorAll( '.uagb-timeline__events-inner-new' )[ 0 ];
170
171			timeLineEventInner.classList.remove( 'uagb-timeline__day-right', 'uagb-timeline__day-left' );
172
173			if ( 'left' === attributes[ 'timelinAlignment' + device ] ) {
174				child.classList.add( 'uagb-timeline__left' );
175				timelineMarker.classList.add( 'uagb-timeline__left' );
176				timeLineEventInner.classList.add( 'uagb-timeline__day-left' );
177			} else if ( 'right' === attributes[ 'timelinAlignment' + device ] ) {
178				child.classList.add( 'uagb-timeline__right' );
179				timelineMarker.classList.add( 'uagb-timeline__left' );
180				timeLineEventInner.classList.add( 'uagb-timeline__day-right' );
181			} else if ( 'center' === attributes[ 'timelinAlignment' + device ] ) {
182				if ( childIndex % 2 === 0 ) {
183					child.classList.add( 'uagb-timeline__right' );
184					timelineMarker.classList.add( 'uagb-timeline__right' );
185					timeLineEventInner.classList.add( 'uagb-timeline__day-right' );
186				} else {
187					child.classList.add( 'uagb-timeline__left' );
188					timelineMarker.classList.add( 'uagb-timeline__left' );
189					timeLineEventInner.classList.add( 'uagb-timeline__day-left' );
190				}
191			}
192
193			childIndex++;
194		}
195	}
196}