← All changes | includes/extensions/Site_Preloader/templates/admin-page.php +134 -20 51.1.44 → 51.1.87 View file →

		@@ -1,9 +1,9 @@
1	1	<?php
2	2	/**
3	3	* Site Preloader Admin Page Template.
4	4	*
5		- * Apple-inspired admin UI for Site Preloader settings.
	5	+ * Premium style inspired admin UI for Site Preloader settings.
6	6	*
7	7	* @package King_Addons
8	8	* @since 1.0.0
9	9	*
		@@ -36,9 +36,9 @@
36	36	// Theme mode is per-user
37	37	$theme_mode = get_user_meta(get_current_user_id(), 'king_addons_theme_mode', true);
38	38	$allowed_theme_modes = ['dark', 'light', 'auto'];
39	39	if (!in_array($theme_mode, $allowed_theme_modes, true)) {
40		- $theme_mode = 'dark';
	40	+ $theme_mode = 'auto';
41	41	}
42	42	?>
43	43
44	44	<script>
		@@ -45,11 +45,30 @@
45	45	(function() {
46	46	const mode = '<?php echo esc_js($theme_mode); ?>';
47	47	const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
48	48	const isDark = mode === 'auto' ? !!(mql && mql.matches) : mode === 'dark';
	49	+
	50	+ function applyThemeClasses(nextIsDark) {
	51	+ document.documentElement.classList.toggle('ka-v3-dark', nextIsDark);
	52	+ if (document.body) {
	53	+ document.body.classList.add('ka-admin-v3');
	54	+ document.body.classList.toggle('ka-v3-dark', nextIsDark);
	55	+ }
	56	+ }
	57	+
	58	+ function ensureBodyReady(fn) {
	59	+ if (document.body) {
	60	+ fn();
	61	+ return;
	62	+ }
	63	+ document.addEventListener('DOMContentLoaded', fn, { once: true });
	64	+ }
	65	+
	66	+ // Apply to <html> immediately to avoid flash; apply to body when ready.
49	67	document.documentElement.classList.toggle('ka-v3-dark', isDark);
50		- document.body.classList.add('ka-admin-v3');
51		- document.body.classList.toggle('ka-v3-dark', isDark);
	68	+ ensureBodyReady(function() {
	69	+ applyThemeClasses(isDark);
	70	+ });
52	71	})();
53	72
54	73	// Theme segmented control (dashboard-style)
55	74	(function() {
		@@ -54,11 +73,10 @@
54	73	// Theme segmented control (dashboard-style)
55	74	(function() {
56	75	const ajaxUrl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>';
57	76	const nonce = '<?php echo esc_js(wp_create_nonce('king_addons_dashboard_ui')); ?>';
58		- const segment = document.getElementById('ka-v3-theme-segment');
59	77	const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
60		- let mode = (segment && segment.getAttribute('data-active') ? segment.getAttribute('data-active') : 'dark').toString();
	78	+ let mode = 'dark';
61	79	let mqlHandler = null;
62	80
63	81	function saveUISetting(key, value) {
64	82	const body = new URLSearchParams();
		@@ -73,8 +91,9 @@
73	91	});
74	92	}
75	93
76	94	function updateSegment(activeMode) {
	95	+ const segment = document.getElementById('ka-v3-theme-segment');
77	96	if (!segment) {
78	97	return;
79	98	}
80	99	segment.setAttribute('data-active', activeMode);
		@@ -83,11 +102,22 @@
83	102	btn.setAttribute('aria-pressed', theme === activeMode ? 'true' : 'false');
84	103	});
85	104	}
86	105
	106	+ function ensureBodyReady(fn) {
	107	+ if (document.body) {
	108	+ fn();
	109	+ return;
	110	+ }
	111	+ document.addEventListener('DOMContentLoaded', fn, { once: true });
	112	+ }
	113	+
87	114	function applyTheme(isDark) {
88		- document.body.classList.toggle('ka-v3-dark', isDark);
89	115	document.documentElement.classList.toggle('ka-v3-dark', isDark);
	116	+ if (document.body) {
	117	+ document.body.classList.add('ka-admin-v3');
	118	+ document.body.classList.toggle('ka-v3-dark', isDark);
	119	+ }
90	120	}
91	121
92	122	function setThemeMode(nextMode, save) {
93	123	mode = nextMode;
		@@ -102,9 +132,11 @@
102	132	mqlHandler = null;
103	133	}
104	134
105	135	if (nextMode === 'auto') {
106		- applyTheme(!!(mql && mql.matches));
	136	+ ensureBodyReady(function() {
	137	+ applyTheme(!!(mql && mql.matches));
	138	+ });
107	139	mqlHandler = (e) => {
108	140	if (mode !== 'auto') {
109	141	return;
110	142	}
		@@ -117,9 +149,11 @@
117	149	mql.addListener(mqlHandler);
118	150	}
119	151	}
120	152	} else {
121		- applyTheme(nextMode === 'dark');
	153	+ ensureBodyReady(function() {
	154	+ applyTheme(nextMode === 'dark');
	155	+ });
122	156	}
123	157
124	158	if (save) {
125	159	saveUISetting('theme_mode', nextMode);
		@@ -130,19 +164,33 @@
130	164	const isDark = document.body.classList.contains('ka-v3-dark');
131	165	setThemeMode(isDark ? 'light' : 'dark', true);
132	166	};
133	167
134		- if (segment) {
135		- segment.addEventListener('click', function(e) {
136		- const btn = e.target.closest('.ka-v3-segmented-btn');
137		- if (!btn) return;
	168	+ function initThemeSegment() {
	169	+ const segment = document.getElementById('ka-v3-theme-segment');
	170	+ if (!segment) {
	171	+ return;
	172	+ }
	173	+
	174	+ mode = (segment.getAttribute('data-active') || 'dark').toString();
	175	+
	176	+ // Use event delegation to avoid edge-cases where the element gets re-rendered.
	177	+ document.addEventListener('click', function(e) {
	178	+ const btn = e.target && e.target.closest ? e.target.closest('#ka-v3-theme-segment .ka-v3-segmented-btn') : null;
	179	+ if (!btn) {
	180	+ return;
	181	+ }
138	182	e.preventDefault();
139	183	setThemeMode((btn.getAttribute('data-theme') || 'dark').toString(), true);
140	184	});
	185	+
	186	+ setThemeMode(mode, false);
141	187	}
142	188
143		- if (segment) {
144		- setThemeMode(mode, false);
	189	+ if (document.readyState === 'loading') {
	190	+ document.addEventListener('DOMContentLoaded', initThemeSegment, { once: true });
	191	+ } else {
	192	+ initThemeSegment();
145	193	}
146	194	})();
147	195
148	196	// Tab switching
		@@ -173,9 +221,66 @@
173	221	document.body.style.overflow = '';
174	222	}
175	223
176	224	function kaPreloaderUpdatePreview() {
177		- // This will be implemented in admin.js
	225	+ const container = document.getElementById('ka-preloader-preview-container');
	226	+ if (!container) {
	227	+ return;
	228	+ }
	229	+
	230	+ const form = document.getElementById('ka-preloader-settings-form');
	231	+
	232	+ function getVal(name, fallback) {
	233	+ if (!form) {
	234	+ return fallback;
	235	+ }
	236	+ const el = form.querySelector('[name="' + name + '"]');
	237	+ if (!el) {
	238	+ return fallback;
	239	+ }
	240	+ if (el.type === 'checkbox') {
	241	+ return el.checked ? '1' : '';
	242	+ }
	243	+ return (el.value ?? fallback);
	244	+ }
	245	+
	246	+ // Try to re-use existing preview HTML so animations always match PHP output.
	247	+ const liveWrapper = document.getElementById('ka-live-preview-wrapper');
	248	+ const dashWrapper = document.querySelector('#ka-dashboard-preview .ka-preloader-preview-wrapper');
	249	+ const activeTemplateCard = document.querySelector('.ka-preloader-template-card.active .ka-preloader-template-card__animation');
	250	+ const source = liveWrapper || dashWrapper || activeTemplateCard;
	251	+
	252	+ const accent = getVal('accent_color', '#0071e3') || '#0071e3';
	253	+ const textColor = getVal('text_color', '#1d1d1f') || '#1d1d1f';
	254	+ const spinnerSize = parseInt(getVal('spinner_size', '48'), 10) || 48;
	255	+ const bgType = getVal('bg_type', 'solid') || 'solid';
	256	+ const bgColor = getVal('bg_color', '#ffffff') || '#ffffff';
	257	+ const bgStart = getVal('bg_gradient_start', '#ffffff') || '#ffffff';
	258	+ const bgEnd = getVal('bg_gradient_end', '#f5f5f7') || '#f5f5f7';
	259	+ const bgImage = getVal('bg_image', '') || '';
	260	+ const overlayOpacity = Math.max(0, Math.min(1, parseFloat(getVal('overlay_opacity', '1')) || 1));
	261	+
	262	+ let overlayStyle = '';
	263	+ if (bgType === 'gradient') {
	264	+ overlayStyle = 'background: linear-gradient(135deg, ' + bgStart + ' 0%, ' + bgEnd + ' 100%);';
	265	+ } else if (bgType === 'image' && bgImage) {
	266	+ overlayStyle = 'background-image: url(' + bgImage + '); background-size: cover; background-position: center;';
	267	+ } else {
	268	+ overlayStyle = 'background: ' + bgColor + ';';
	269	+ }
	270	+ overlayStyle += ' opacity: ' + overlayOpacity + ';';
	271	+
	272	+ const contentHtml = source ? source.innerHTML : '';
	273	+
	274	+ container.innerHTML = '';
	275	+ const preloader = document.createElement('div');
	276	+ preloader.className = 'kng-site-preloader';
	277	+ preloader.setAttribute('aria-label', 'Preloader Preview');
	278	+ preloader.style.cssText = '--kng-preloader-accent: ' + accent + '; --kng-preloader-text: ' + textColor + '; --kng-preloader-bg: ' + bgColor + '; --kng-preloader-size: ' + spinnerSize + 'px;';
	279	+ preloader.innerHTML = '' +
	280	+ '<div class="kng-site-preloader__overlay" style="' + overlayStyle + '"></div>' +
	281	+ '<div class="kng-site-preloader__content">' + contentHtml + '</div>';
	282	+ container.appendChild(preloader);
178	283	}
179	284
180	285	// Template selection
181	286	function kaPreloaderSelectTemplate(templateId) {
		@@ -208,13 +313,22 @@
208	313	<span class="ka-status <?php echo !empty($settings['enabled']) ? 'ka-status-enabled' : 'ka-status-disabled'; ?>">
209	314	<span class="ka-status-dot"></span>
210	315	<?php echo !empty($settings['enabled']) ? esc_html__('Enabled', 'king-addons') : esc_html__('Disabled', 'king-addons'); ?>
211	316	</span>
212		- <div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup" aria-label="Theme" data-active="<?php echo esc_attr($theme_mode); ?>">
	317	+ <div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup" aria-label="<?php echo esc_attr(esc_html__('Theme', 'king-addons')); ?>" data-active="<?php echo esc_attr($theme_mode); ?>">
213	318	<span class="ka-v3-segmented-indicator" aria-hidden="true"></span>
214		- <button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $theme_mode === 'light' ? 'true' : 'false'; ?>"><?php esc_html_e('Light', 'king-addons'); ?></button>
215		- <button type="button" class="ka-v3-segmented-btn" data-theme="dark" aria-pressed="<?php echo $theme_mode === 'dark' ? 'true' : 'false'; ?>"><?php esc_html_e('Dark', 'king-addons'); ?></button>
216		- <button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $theme_mode === 'auto' ? 'true' : 'false'; ?>"><?php esc_html_e('Auto', 'king-addons'); ?></button>
	319	+ <button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $theme_mode === 'light' ? 'true' : 'false'; ?>">
	320	+ <span class="ka-v3-segmented-icon" aria-hidden="true">☀︎</span>
	321	+ <?php esc_html_e('Light', 'king-addons'); ?>
	322	+ </button>
	323	+ <button type="button" class="ka-v3-segmented-btn" data-theme="dark" aria-pressed="<?php echo $theme_mode === 'dark' ? 'true' : 'false'; ?>">
	324	+ <span class="ka-v3-segmented-icon" aria-hidden="true">☾</span>
	325	+ <?php esc_html_e('Dark', 'king-addons'); ?>
	326	+ </button>
	327	+ <button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $theme_mode === 'auto' ? 'true' : 'false'; ?>">
	328	+ <span class="ka-v3-segmented-icon" aria-hidden="true">◐</span>
	329	+ <?php esc_html_e('Auto', 'king-addons'); ?>
	330	+ </button>
217	331	</div>
218	332	</div>
219	333	</div>
220	334