https://a2zdrivingschooldallas.com/wp-content/plugins/season-vibe-isoftmark/assets/js/season-vibe.js

1/**
2 * Season Vibe by iSoftMark - front-end animation.
3 * Vanilla JS, no dependencies. Reads settings from the localized
4 * `svibeSettings` object and populates #svibe-overlay.
5 */
6( function () {
7	'use strict';
8
9	if ( typeof window.svibeSettings === 'undefined' ) {
10		return;
11	}
12
13	var settings = window.svibeSettings;
14
15	var DEFAULT_ICONS = {
16		summer: [ '☀️', '🌴', '🍉', '🕶️', '🍹', '🏖️' ],
17		winter: [ '❄️', '❅', '❆' ],
18		fall: [ '🍁', '🍂' ],
19		spring: [ '🌸', '🌷' ]
20	};
21
22	var BUTTERFLIES = [ '🦋' ];
23
24	function prefersReducedMotion() {
25		return (
26			settings.reducedMotion &&
27			window.matchMedia &&
28			window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches
29		);
30	}
31
32	function isMobileViewport() {
33		return window.innerWidth < 768;
34	}
35
36	function randomBetween( min, max ) {
37		return Math.random() * ( max - min ) + min;
38	}
39
40	function pick( arr ) {
41		return arr[ Math.floor( Math.random() * arr.length ) ];
42	}
43
44	function makeItem( content, isImage ) {
45		var el = document.createElement( 'span' );
46		el.className = 'svibe-item';
47
48		if ( isImage ) {
49			var img = document.createElement( 'img' );
50			img.src = content;
51			img.alt = '';
52			img.loading = 'lazy';
53			el.appendChild( img );
54		} else {
55			el.textContent = content;
56		}
57
58		return el;
59	}
60
61	function buildFallingOrFading( overlay, season ) {
62		var useCustom = settings.icons && settings.icons.length > 0;
63		var pool = useCustom ? settings.icons : DEFAULT_ICONS[ season ] || [];
64
65		if ( ! pool.length ) {
66			return;
67		}
68
69		var isFalling = season === 'winter' || season === 'fall';
70
71		for ( var i = 0; i < settings.count; i++ ) {
72			var content = pick( pool );
73			var el = makeItem( content, useCustom );
74
75			var size = randomBetween( settings.sizeMin, settings.sizeMax );
76			if ( ! useCustom ) {
77				el.style.fontSize = size + 'px';
78			} else {
79				el.style.width = size + 'px';
80			}
81
82			el.style.left = randomBetween( 0, 96 ) + '%';
83
84			var duration = randomBetween( settings.duration * 0.7, settings.duration * 1.3 );
85			var delay = randomBetween( -settings.duration, 0 );
86
87			if ( isFalling ) {
88				el.classList.add( 'svibe-fall' );
89				el.style.setProperty( '--svibe-drift', randomBetween( -40, 40 ) + 'px' );
90			} else {
91				el.classList.add( 'svibe-fade' );
92				el.style.top = randomBetween( 5, 90 ) + '%';
93				duration = randomBetween( 2.5, 5 );
94				delay = randomBetween( -5, 0 );
95			}
96
97			el.style.animationDuration = duration + 's';
98			el.style.animationDelay = delay + 's';
99
100			overlay.appendChild( el );
101		}
102	}
103
104	function buildSpring( overlay ) {
105		var useCustom = settings.icons && settings.icons.length > 0;
106		var petalPool = useCustom ? settings.icons : DEFAULT_ICONS.spring;
107
108		var petalCount = Math.round( settings.count * 0.75 );
109		var butterflyCount = Math.max( 3, Math.round( settings.count * 0.2 ) );
110
111		for ( var i = 0; i < petalCount; i++ ) {
112			var petal = makeItem( pick( petalPool ), useCustom );
113			var size = randomBetween( settings.sizeMin, settings.sizeMax );
114
115			if ( ! useCustom ) {
116				petal.style.fontSize = size + 'px';
117			} else {
118				petal.style.width = size + 'px';
119			}
120
121			petal.style.left = randomBetween( 0, 96 ) + '%';
122			petal.classList.add( 'svibe-fall' );
123			petal.style.setProperty( '--svibe-drift', randomBetween( -50, 50 ) + 'px' );
124
125			var duration = randomBetween( settings.duration * 0.7, settings.duration * 1.3 );
126			petal.style.animationDuration = duration + 's';
127			petal.style.animationDelay = randomBetween( -settings.duration, 0 ) + 's';
128
129			overlay.appendChild( petal );
130		}
131
132		for ( var b = 0; b < butterflyCount; b++ ) {
133			var butterfly = makeItem( pick( BUTTERFLIES ), false );
134			var bSize = randomBetween( settings.sizeMin, settings.sizeMax );
135			butterfly.style.fontSize = bSize + 'px';
136			butterfly.style.setProperty( '--svibe-top', randomBetween( 5, 80 ) + '%' );
137			butterfly.classList.add( 'svibe-flutter' );
138
139			var bDuration = randomBetween( 10, 20 );
140			butterfly.style.animationDuration = bDuration + 's';
141			butterfly.style.animationDelay = randomBetween( -bDuration, 0 ) + 's';
142
143			overlay.appendChild( butterfly );
144		}
145	}
146

147	function init() {
148		if ( ! settings.season || 'off' === settings.season ) {
149			return;
150		}
151
152		if ( settings.disableMobile && isMobileViewport() ) {
153			return;
154		}
155
156		if ( prefersReducedMotion() ) {
157			return;
158		}
159
160		var overlay = document.getElementById( 'svibe-overlay' );
161		if ( ! overlay ) {
162			return;
163		}
164
165		if ( settings.reducedMotion ) {
166			overlay.classList.add( 'svibe-respect-reduced-motion' );
167		}
168
169		if ( settings.season === 'spring' ) {
170			buildSpring( overlay );
171		} else {
172			buildFallingOrFading( overlay, settings.season );
173		}
174	}
175
176	if ( document.readyState === 'loading' ) {
177		document.addEventListener( 'DOMContentLoaded', init );
178	} else {
179		init();
180	}
181} )();