← All changes | includes/extensions/Site_Preloader/assets/admin.js +95 -49 51.1.44 → 51.1.87 View file →

		@@ -1,9 +1,9 @@
1	1	/**
2	2	* Site Preloader Admin Script.
3	3	*
4	4	* Handles admin UI interactions, live preview, color pickers, media uploaders, and AJAX operations.
5		- * Apple-inspired smooth interactions.
	5	+ * Premium style inspired smooth interactions.
6	6	*
7	7	* @package King_Addons
8	8	* @since 1.0.0
9	9	*/
		@@ -55,13 +55,16 @@
55	55	/**
56	56	* Cache DOM elements
57	57	*/
58	58	cacheElements: function () {
59		- this.elements.form = $('#kng-preloader-settings-form');
	59	+ this.elements.form = $('#ka-preloader-settings-form');
	60	+ if (!this.elements.form.length) {
	61	+ this.elements.form = $('#kng-preloader-settings-form');
	62	+ }
60	63	this.elements.preview = $('.ka-preloader-live-preview');
61	64	this.elements.previewFrame = $('.ka-preloader-preview-frame');
62	65	this.elements.previewContent = $('.ka-preloader-preview-content');
63		- this.elements.colorPickers = $('.ka-preloader-color-input');
	66	+ this.elements.colorPickers = $('.ka-preloader-color-input, .ka-color-picker, .ka-preloader-wp-color-picker');
64	67	this.elements.mediaButtons = $('.ka-preloader-media-button');
65	68	this.elements.tabLinks = $('.ka-preloader-tab-link');
66	69	this.elements.rulesList = $('.ka-preloader-rules-list');
67	70	},
		@@ -69,32 +72,41 @@
69	72	/**
70	73	* Initialize color pickers
71	74	*/
72	75	initColorPickers: function () {
73		- this.elements.colorPickers.each(function () {
	76	+ // Legacy custom preview inputs (if any exist)
	77	+ $('.ka-preloader-color-input').each(function () {
74	78	const $input = $(this);
75	79	const $preview = $input.siblings('.ka-preloader-color-preview');
76	80
77		- // Update preview on input change
78		- $input.on('input change', function () {
	81	+ $input.off('input.kngPreloader change.kngPreloader');
	82	+ $input.on('input.kngPreloader change.kngPreloader', function () {
79	83	const color = $(this).val();
80	84	$preview.css('background-color', color);
81	85	KngPreloaderAdmin.updatePreview();
82	86	});
83	87
84		- // Initialize preview color
85	88	$preview.css('background-color', $input.val());
86	89	});
87	90
88		- // Initialize WordPress color picker if available
	91	+ // Alpha-enabled WordPress color picker
89	92	if ($.fn.wpColorPicker) {
90		- $('.ka-preloader-wp-color-picker').wpColorPicker({
91		- change: function (event, ui) {
92		- KngPreloaderAdmin.updatePreview();
93		- },
94		- clear: function () {
95		- KngPreloaderAdmin.updatePreview();
	93	+ const $pickers = $('.ka-color-picker, .ka-preloader-wp-color-picker');
	94	+ $pickers.each(function () {
	95	+ const $input = $(this);
	96	+ if ($input.hasClass('wp-color-picker')) {
	97	+ return;
96	98	}
	99	+
	100	+ $input.wpColorPicker({
	101	+ defaultColor: $input.data('default-color'),
	102	+ change: function () {
	103	+ KngPreloaderAdmin.updatePreview();
	104	+ },
	105	+ clear: function () {
	106	+ KngPreloaderAdmin.updatePreview();
	107	+ }
	108	+ });
97	109	});
98	110	}
99	111	},
100	112
		@@ -197,9 +209,9 @@
197	209	$('.ka-preloader-preset-card').removeClass('active');
198	210	$card.addClass('active');
199	211
200	212	// Update hidden input
201		- $('input[name="preset"]').val(presetId);
	213	+ $('input[name="template"], input[name="preset"]').val(presetId);
202	214
203	215	// Update preview
204	216	KngPreloaderAdmin.updatePreview();
205	217	});
		@@ -209,9 +221,9 @@
209	221	* Initialize live preview
210	222	*/
211	223	initLivePreview: function () {
212	224	// Collect all form inputs
213		- const $formInputs = this.elements.form.find('input, select, textarea');
	225	+ const $formInputs = this.elements.form.length ? this.elements.form.find('input, select, textarea') : $('input, select, textarea');
214	226
215	227	// Update preview on input change
216	228	$formInputs.on('input change', function () {
217	229	KngPreloaderAdmin.debounce(KngPreloaderAdmin.updatePreview, 150)();
		@@ -231,25 +243,29 @@
231	243
232	244	// Collect current settings
233	245	const settings = this.collectFormSettings();
234	246
	247	+ const bgColor = settings.bg_color || settings.background_color || 'rgba(0,0,0,0)';
	248	+ const presetId = settings.template || settings.preset || 'spinner-circle';
	249	+ const sizePx = (settings.spinner_size || settings.animation_size || 48) + 'px';
	250	+
235	251	// Update preview CSS variables
236	252	const $frame = this.elements.previewFrame;
237	253	$frame.css({
238	254	'--kng-preloader-accent': settings.accent_color || '#0071e3',
239		- '--kng-preloader-bg': settings.background_color || '#ffffff',
	255	+ '--kng-preloader-bg': bgColor,
240	256	'--kng-preloader-text': settings.text_color || '#1d1d1f',
241		- '--kng-preloader-size': (settings.animation_size || 48) + 'px'
	257	+ '--kng-preloader-size': sizePx
242	258	});
243	259
244	260	// Update background overlay
245	261	const $overlay = this.elements.previewContent.find('.ka-preloader-preview-overlay');
246	262	if ($overlay.length) {
247		- $overlay.css('background-color', settings.background_color || '#ffffff');
	263	+ $overlay.css('background-color', bgColor);
248	264	}
249	265
250	266	// Update preset animation
251		- this.updatePresetAnimation(settings.preset || 'spinner-circle');
	267	+ this.updatePresetAnimation(presetId);
252	268
253	269	// Update text
254	270	const $text = this.elements.previewContent.find('.ka-preloader-preview-text');
255	271	if (settings.text_content) {
		@@ -551,9 +567,9 @@
551	567
552	568	// Show saving state
553	569	$saveBtn.text('Saving...').prop('disabled', true);
554	570
555		- console.log('Saving rule:', ruleData);
	571	+ // console.log('Saving rule:', ruleData);
556	572
557	573	// Send AJAX request
558	574	$.ajax({
559	575	url: kngPreloaderAdmin.ajaxUrl,
		@@ -559,9 +575,9 @@
559	575	url: kngPreloaderAdmin.ajaxUrl,
560	576	type: 'POST',
561	577	data: ruleData,
562	578	success: function (response) {
563		- console.log('Save response:', response);
	579	+ // console.log('Save response:', response);
564	580	if (response.success) {
565	581	// Update rule ID if it was a new rule
566	582	if (response.data.rule && response.data.rule.id) {
567	583	$rule.attr('data-rule-id', response.data.rule.id);
		@@ -694,9 +710,9 @@
694	710	$rulesList = this.elements.rulesList;
695	711	}
696	712
697	713	if (!$rulesList.length) {
698		- console.error('Rules list container not found');
	714	+ // console.error('Rules list container not found');
699	715	return;
700	716	}
701	717
702	718	// Hide empty state
		@@ -769,8 +785,31 @@
769	785	}
770	786
771	787	$rulesList.append($newRule);
772	788
	789	+ // Initialize WP color picker on newly added rule (alpha-enabled)
	790	+ if ($newRule && $newRule.length) {
	791	+ const $newPickers = $newRule.find('.ka-color-picker, .ka-preloader-wp-color-picker');
	792	+ if ($.fn.wpColorPicker && $newPickers.length) {
	793	+ $newPickers.each(function () {
	794	+ const $input = $(this);
	795	+ if ($input.hasClass('wp-color-picker')) {
	796	+ return;
	797	+ }
	798	+
	799	+ $input.wpColorPicker({
	800	+ defaultColor: $input.data('default-color'),
	801	+ change: function () {
	802	+ KngPreloaderAdmin.updatePreview();
	803	+ },
	804	+ clear: function () {
	805	+ KngPreloaderAdmin.updatePreview();
	806	+ }
	807	+ });
	808	+ });
	809	+ }
	810	+ }
	811	+
773	812	// Scroll to new rule
774	813	if ($newRule && $newRule[0]) {
775	814	$newRule[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
776	815	}
		@@ -902,9 +941,9 @@
902	941	// Update preview
903	942	this.updatePreview();
904	943
905	944	// Update preset card selection
906		- const preset = settings.preset;
	945	+ const preset = settings.template || settings.preset;
907	946	if (preset) {
908	947	$('.ka-preloader-preset-card').removeClass('active');
909	948	$('.ka-preloader-preset-card[data-preset="' + preset + '"]').addClass('active');
910	949	}
		@@ -952,13 +991,8 @@
952	991	e.preventDefault();
953	992	KngPreloaderAdmin.openPreviewModal();
954	993	});
955	994
956		- $(document).on('click', '.ka-preloader-modal-close, .ka-preloader-modal-backdrop', function (e) {
957		- e.preventDefault();
958		- KngPreloaderAdmin.closePreviewModal();
959		- });
960		-
961	995	// Close on Escape key
962	996	$(document).on('keydown', function (e) {
963	997	if (e.key === 'Escape') {
964	998	KngPreloaderAdmin.closePreviewModal();
		@@ -969,35 +1003,35 @@
969	1003	/**
970	1004	* Open preview modal
971	1005	*/
972	1006	openPreviewModal: function () {
	1007	+ // Prefer template-provided modal implementation when available.
	1008	+ if (typeof window.kaPreloaderOpenPreview === 'function') {
	1009	+ window.kaPreloaderOpenPreview();
	1010	+ return;
	1011	+ }
	1012	+
973	1013	const settings = this.collectFormSettings();
974	1014	const $modal = $('.ka-preloader-preview-modal');
975	1015
976	1016	if (!$modal.length) {
977		- // Create modal if not exists
978		- const modalHtml = `
979		- <div class="ka-preloader-preview-modal">
980		- <div class="ka-preloader-modal-backdrop"></div>
981		- <div class="ka-preloader-modal-content">
982		- <button class="ka-preloader-modal-close">&times;</button>
983		- <div class="ka-preloader-modal-preview"></div>
984		- </div>
985		- </div>
986		- `;
987		- $('body').append(modalHtml);
	1017	+ return;
988	1018	}
989	1019
990	1020	// Build preview HTML
991		- const presetHtml = this.getPresetHtml(settings.preset || 'spinner-circle');
	1021	+ const bgColor = settings.bg_color || settings.background_color || 'rgba(0,0,0,0)';
	1022	+ const presetId = settings.template || settings.preset || 'spinner-circle';
	1023	+ const sizePx = (settings.spinner_size || settings.animation_size || 48) + 'px';
	1024	+
	1025	+ const presetHtml = this.getPresetHtml(presetId);
992	1026	const previewHtml = `
993	1027	<div class="kng-site-preloader" style="
994	1028	--kng-preloader-accent: ${settings.accent_color || '#0071e3'};
995		- --kng-preloader-bg: ${settings.background_color || '#ffffff'};
	1029	+ --kng-preloader-bg: ${bgColor};
996	1030	--kng-preloader-text: ${settings.text_color || '#1d1d1f'};
997		- --kng-preloader-size: ${settings.animation_size || 48}px;
	1031	+ --kng-preloader-size: ${sizePx};
998	1032	">
999		- <div class="kng-site-preloader__overlay" style="background: ${settings.background_color || '#ffffff'}"></div>
	1033	+ <div class="kng-site-preloader__overlay" style="background: ${bgColor}"></div>
1000	1034	<div class="kng-site-preloader__content">
1001	1035	<div class="kng-site-preloader__animation">${presetHtml}</div>
1002	1036	${settings.text_content ? '<div class="kng-site-preloader__text">' + settings.text_content + '</div>' : ''}
1003	1037	</div>
		@@ -1003,11 +1037,14 @@
1003	1037	</div>
1004	1038	</div>
1005	1039	`;
1006	1040
1007		- $('.ka-preloader-modal-preview').html(previewHtml);
1008		- $('.ka-preloader-preview-modal').addClass('active');
1009		- $('body').addClass('ka-preloader-modal-open');
	1041	+ const $container = $('#ka-preloader-preview-container');
	1042	+ if ($container.length) {
	1043	+ $container.html(previewHtml);
	1044	+ $modal.css('display', 'flex');
	1045	+ $('body').css('overflow', 'hidden');
	1046	+ }
1010	1047	},
1011	1048
1012	1049	/**
1013	1050	* Close preview modal
		@@ -1012,10 +1049,19 @@
1012	1049	/**
1013	1050	* Close preview modal
1014	1051	*/
1015	1052	closePreviewModal: function () {
1016		- $('.ka-preloader-preview-modal').removeClass('active');
1017		- $('body').removeClass('ka-preloader-modal-open');
	1053	+ // Prefer template-provided modal implementation when available.
	1054	+ if (typeof window.kaPreloaderClosePreview === 'function') {
	1055	+ window.kaPreloaderClosePreview();
	1056	+ return;
	1057	+ }
	1058	+
	1059	+ const $modal = $('.ka-preloader-preview-modal');
	1060	+ if ($modal.length) {
	1061	+ $modal.css('display', 'none').removeClass('active');
	1062	+ }
	1063	+ $('body').css('overflow', '').removeClass('ka-preloader-modal-open');
1018	1064	},
1019	1065
1020	1066	/**
1021	1067	* Debounce helper