https://jarpodcasts.com/wp-content/plugins/ele-custom-skin-pro/assets/js/ecs-scheme-selector.js?ver=4.2.1

1/**
2 * ECS Scheme Selector — frontend handler
3 *
4 * Listens to <select class="ecs-scheme-sel-select"> change events and applies
5 * the chosen color/font scheme CSS variables via an injected <style> element.
6 *
7 * Works for both display types:
8 *   data-type="color" → ecs_color_scheme_selector widget (selector mode)
9 *   data-type="font"  → ecs_font_scheme_selector widget  (selector mode)
10 *
11 * Specificity strategy: PHP implicit mode uses
12 *   body.elementor-kit-N.elementor-page-N { ... }  (0,2,1)
13 * We match that so our dynamic overrides beat Elementor's kit (0,1,1).
14 */
15(function () {
16	'use strict';
17
18	/**
19	 * Build a CSS selector that beats the Elementor kit rule (0,1,1).
20	 * Falls back to :root when body classes are unavailable.
21	 */
22	function getPageSelector() {
23		var body     = document.body;
24		var kitMatch  = body.className.match( /elementor-kit-(\d+)/ );
25		var pageMatch = body.className.match( /elementor-page-(\d+)/ );
26
27		if ( kitMatch && pageMatch ) {
28			return 'body.elementor-kit-' + kitMatch[1] + '.elementor-page-' + pageMatch[1];
29		}
30		return ':root';
31	}
32
33	/**
34	 * Inject or update the live <style> block for this scheme type.
35	 *
36	 * @param {string} type     'color' | 'font'
37	 * @param {string} cssVars  Raw CSS variable declarations (no selector wrapper).
38	 */
39	function setLiveStyle( type, cssVars ) {
40		var id      = 'ecs-scheme-sel-live-' + type;
41		var styleEl = document.getElementById( id );
42
43		if ( styleEl && styleEl.parentNode ) {
44			styleEl.parentNode.removeChild( styleEl );
45		}
46
47		if ( ! styleEl ) {
48			styleEl    = document.createElement( 'style' );
49			styleEl.id = id;
50		}
51
52		// Always re-append to end of body so we beat any inline implicit widget
53		// <style> elements (same specificity, document order decides the winner).
54		document.body.appendChild( styleEl );
55
56		if ( ! cssVars ) {
57			styleEl.textContent = '';
58			return;
59		}
60
61		styleEl.textContent = getPageSelector() + ' { ' + cssVars + ' }';
62	}
63
64	/**
65	 * Inject a Google Fonts <link> for each font-family found in a CSS vars string.
66	 * No-ops for fonts already loaded or non-Latin-named fonts.
67	 *
68	 * @param {string} cssVars  Raw CSS variable declarations.
69	 */
70	function loadFontsFromCss( cssVars ) {
71		var seen = {};
72		var re   = /font-family:\s*([^;]+)/g;
73		var m;
74		while ( ( m = re.exec( cssVars ) ) !== null ) {
75			var family = m[1].trim().replace( /^['"]|['"]$/g, '' );
76			if ( ! family || seen[ family ] ) { continue; }
77			seen[ family ] = true;
78
79			var linkId = 'ecs-gf-' + family.replace( /\s+/g, '-' ).toLowerCase();
80			if ( document.getElementById( linkId ) ) { continue; }
81
82			var link  = document.createElement( 'link' );
83			link.id   = linkId;
84			link.rel  = 'stylesheet';
85			link.href = 'https://fonts.googleapis.com/css2?family='
86				+ encodeURIComponent( family ) + ':wght@400;500;600;700&display=swap';
87			document.head.appendChild( link );
88		}
89	}
90
91	/**
92	 * Handle a change on a scheme selector <select>.
93	 */
94	function handleChange( event ) {
95		var select = event.target;
96		if ( ! select.classList.contains( 'ecs-scheme-sel-select' ) ) {
97			return;
98		}
99
100		var wrap = select.closest( '.ecs-scheme-sel-wrap' );
101		if ( ! wrap ) {
102			return;
103		}
104
105		var type      = wrap.dataset.type || 'color';
106		var schemeId  = select.value;
107
108		if ( ! schemeId ) {
109			setLiveStyle( type, '' );
110			return;
111		}
112
113		var schemes;
114		try {
115			schemes = JSON.parse( wrap.dataset.schemes || '[]' );
116		} catch ( e ) {
117			return;
118		}
119
120		var scheme = schemes.find( function ( s ) { return s.id === schemeId; } );
121		if ( ! scheme ) {
122			return;
123		}
124
125		if ( type === 'font' && scheme.css ) {
126			loadFontsFromCss( scheme.css );
127		}
128
129		setLiveStyle( type, scheme.css || '' );
130	}
131
132	// Delegated listener — works even if widgets are added dynamically (Elementor lazy).
133	document.addEventListener( 'change', handleChange );
134})();