king-addons / includes / extensions / Site_Preloader / templates / partials / tab-advanced.php

tab-advanced.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.78, at includes/extensions/Site_Preloader/templates/partials/tab-advanced.php

204 lines 10.2 KB

Raw Download Zip

1	<?php
2	/**
3	* Site Preloader Advanced Tab.
4	*
5	* @package King_Addons
6	* @since 1.0.0
7	*
8	* @var array $settings Current settings.
9	* @var bool $is_pro Whether Pro version is active.
10	* @var array $presets Available presets.
11	*/
12
13	if (!defined('ABSPATH')) {
14	exit;
15	}
16	?>
17
18	<form action="<?php echo esc_url(admin_url('admin-post.php')); ?>" method="post" id="ka-preloader-advanced-form">
19	<?php wp_nonce_field('king_addons_site_preloader_save'); ?>
20	<input type="hidden" name="action" value="king_addons_site_preloader_save" />
21	<input type="hidden" name="current_tab" value="advanced" />
22
23	<?php
24	// Preserve all settings
25	foreach ($settings as $key => $value) {
26	if (in_array($key, ['show_animation', 'hide_animation', 'transition_duration', 'easing', 'z_index', 'custom_css'])) continue;
27	if (is_array($value)) {
28	foreach ($value as $arr_val) {
29	echo '<input type="hidden" name="' . esc_attr($key) . '[]" value="' . esc_attr($arr_val) . '" />';
30	}
31	} else {
32	echo '<input type="hidden" name="' . esc_attr($key) . '" value="' . esc_attr($value) . '" />';
33	}
34	}
35	?>
36
37	<!-- Transitions -->
38	<div class="ka-card">
39	<div class="ka-card-header">
40	<span class="dashicons dashicons-controls-play"></span>
41	<h2><?php esc_html_e('Transitions & Timing', 'king-addons'); ?></h2>
42	</div>
43	<div class="ka-card-body">
44	<div class="ka-row">
45	<div class="ka-row-label"><?php esc_html_e('Show Animation', 'king-addons'); ?></div>
46	<div class="ka-row-field">
47	<select name="show_animation">
48	<option value="none" <?php selected($settings['show_animation'], 'none'); ?>><?php esc_html_e('None', 'king-addons'); ?></option>
49	<option value="fade" <?php selected($settings['show_animation'], 'fade'); ?>><?php esc_html_e('Fade In', 'king-addons'); ?></option>
50	<option value="scale" <?php selected($settings['show_animation'], 'scale'); ?>><?php esc_html_e('Scale Up', 'king-addons'); ?></option>
51	</select>
52	<p class="ka-row-desc"><?php esc_html_e('Animation when preloader appears.', 'king-addons'); ?></p>
53	</div>
54	</div>
55
56	<div class="ka-row">
57	<div class="ka-row-label"><?php esc_html_e('Hide Animation', 'king-addons'); ?></div>
58	<div class="ka-row-field">
59	<select name="hide_animation">
60	<option value="none" <?php selected($settings['hide_animation'], 'none'); ?>><?php esc_html_e('None', 'king-addons'); ?></option>
61	<option value="fade" <?php selected($settings['hide_animation'], 'fade'); ?>><?php esc_html_e('Fade Out', 'king-addons'); ?></option>
62	<option value="slide-up" <?php selected($settings['hide_animation'], 'slide-up'); ?>><?php esc_html_e('Slide Up', 'king-addons'); ?></option>
63	<option value="blur" <?php selected($settings['hide_animation'], 'blur'); ?>><?php esc_html_e('Blur Out', 'king-addons'); ?></option>
64	<option value="scale" <?php selected($settings['hide_animation'], 'scale'); ?>><?php esc_html_e('Scale Down', 'king-addons'); ?></option>
65	</select>
66	<p class="ka-row-desc"><?php esc_html_e('Animation when preloader disappears.', 'king-addons'); ?></p>
67	</div>
68	</div>
69
70	<div class="ka-row">
71	<div class="ka-row-label"><?php esc_html_e('Transition Duration', 'king-addons'); ?></div>
72	<div class="ka-row-field">
73	<input type="number" name="transition_duration" value="<?php echo esc_attr($settings['transition_duration']); ?>" min="0" max="2000" step="50" /> <span class="ka-unit">ms</span>
74	<p class="ka-row-desc"><?php esc_html_e('Duration of show/hide animations.', 'king-addons'); ?></p>
75	</div>
76	</div>
77
78	<div class="ka-row">
79	<div class="ka-row-label"><?php esc_html_e('Easing Function', 'king-addons'); ?></div>
80	<div class="ka-row-field">
81	<select name="easing">
82	<option value="linear" <?php selected($settings['easing'], 'linear'); ?>><?php esc_html_e('Linear', 'king-addons'); ?></option>
83	<option value="ease" <?php selected($settings['easing'], 'ease'); ?>><?php esc_html_e('Ease', 'king-addons'); ?></option>
84	<option value="ease-in" <?php selected($settings['easing'], 'ease-in'); ?>><?php esc_html_e('Ease In', 'king-addons'); ?></option>
85	<option value="ease-out" <?php selected($settings['easing'], 'ease-out'); ?>><?php esc_html_e('Ease Out', 'king-addons'); ?></option>
86	<option value="ease-in-out" <?php selected($settings['easing'], 'ease-in-out'); ?>><?php esc_html_e('Ease In Out', 'king-addons'); ?></option>
87	<option value="cubic-bezier(0.25, 1, 0.5, 1)" <?php selected($settings['easing'], 'cubic-bezier(0.25, 1, 0.5, 1)'); ?>><?php esc_html_e('Smooth', 'king-addons'); ?></option>
88	</select>
89	</div>
90	</div>
91	</div>
92	</div>
93
94	<!-- Technical Settings -->
95	<div class="ka-card">
96	<div class="ka-card-header">
97	<span class="dashicons dashicons-admin-tools"></span>
98	<h2><?php esc_html_e('Technical Settings', 'king-addons'); ?></h2>
99	</div>
100	<div class="ka-card-body">
101	<div class="ka-row">
102	<div class="ka-row-label"><?php esc_html_e('Z-Index', 'king-addons'); ?></div>
103	<div class="ka-row-field">
104	<input type="number" name="z_index" value="<?php echo esc_attr($settings['z_index']); ?>" min="1" max="2147483647" />
105	<p class="ka-row-desc"><?php esc_html_e('Stack order of the preloader. Higher values appear on top.', 'king-addons'); ?></p>
106	</div>
107	</div>
108
109	<div class="ka-row">
110	<div class="ka-row-label"><?php esc_html_e('Auto-Exclude', 'king-addons'); ?></div>
111	<div class="ka-row-field">
112	<div class="ka-info-box">
113	<span class="dashicons dashicons-info"></span>
114	<p><?php esc_html_e('The preloader is automatically hidden on:', 'king-addons'); ?></p>
115	<ul>
116	<li><?php esc_html_e('WordPress Admin pages', 'king-addons'); ?></li>
117	<li><?php esc_html_e('Login page (wp-login.php)', 'king-addons'); ?></li>
118	<li><?php esc_html_e('Elementor Editor & Preview modes', 'king-addons'); ?></li>
119	<li><?php esc_html_e('AJAX requests', 'king-addons'); ?></li>
120	<li><?php esc_html_e('REST API calls', 'king-addons'); ?></li>
121	</ul>
122	</div>
123	</div>
124	</div>
125	</div>
126	</div>
127
128	<!-- Custom CSS -->
129	<div class="ka-card">
130	<div class="ka-card-header">
131	<span class="dashicons dashicons-editor-code"></span>
132	<h2>
133	<?php esc_html_e('Custom CSS', 'king-addons'); ?>
134	<?php if (!$is_pro): ?><span class="ka-pro-badge">PRO</span><?php endif; ?>
135	</h2>
136	</div>
137	<div class="ka-card-body">
138	<?php if ($is_pro): ?>
139	<div class="ka-row">
140	<div class="ka-row-field" style="width: 100%;">
141	<textarea name="custom_css" rows="12" class="ka-code-textarea" placeholder="/* Your custom CSS here */"><?php echo esc_textarea($settings['custom_css'] ?? ''); ?></textarea>
142	<p class="ka-row-desc">
143	<?php esc_html_e('Add custom CSS to style the preloader. Use', 'king-addons'); ?>
144	<code>.kng-site-preloader</code>
145	<?php esc_html_e('as the main selector.', 'king-addons'); ?>
146	</p>
147	</div>
148	</div>
149	<?php else: ?>
150	<div class="ka-pro-notice" style="padding: 20px; margin: 0;">
151	<p><?php esc_html_e('Custom CSS is available in the Pro version.', 'king-addons'); ?></p>
152	<a href="https://kingaddons.com/pricing/?utm_source=kng-preloader-css-upgrade&utm_medium=plugin&utm_campaign=kng" target="_blank" class="ka-btn ka-btn-primary ka-btn-sm">
153	<?php esc_html_e('Upgrade to Pro', 'king-addons'); ?>
154	</a>
155	</div>
156	<?php endif; ?>
157	</div>
158	</div>
159
160	<!-- Pro: JavaScript Hooks -->
161	<?php if ($is_pro): ?>
162	<div class="ka-card">
163	<div class="ka-card-header">
164	<span class="dashicons dashicons-editor-code"></span>
165	<h2><?php esc_html_e('JavaScript API', 'king-addons'); ?></h2>
166	</div>
167	<div class="ka-card-body">
168	<div class="ka-row">
169	<div class="ka-row-field" style="width: 100%;">
170	<div class="ka-info-box">
171	<span class="dashicons dashicons-info"></span>
172	<p><?php esc_html_e('Use the JavaScript API for manual control and AJAX navigation integration:', 'king-addons'); ?></p>
173	<pre><code>// Show preloader
174	window.KngPreloader.show();
175
176	// Hide preloader
177	window.KngPreloader.hide();
178
179	// Check if visible
180	window.KngPreloader.isVisible();
181
182	// Listen for events
183	document.addEventListener('kngPreloaderShown', function() {
184	console.log('Preloader shown');
185	});
186	document.addEventListener('kngPreloaderHidden', function() {
187	console.log('Preloader hidden');
188	});</code></pre>
189	</div>
190	</div>
191	</div>
192	</div>
193	</div>
194	<?php endif; ?>
195
196	<!-- Save Button -->
197	<div class="ka-submit ka-preloader-submit">
198	<button type="submit" class="ka-btn ka-btn-primary">
199	<span class="dashicons dashicons-saved"></span>
200	<?php esc_html_e('Save Settings', 'king-addons'); ?>
201	</button>
202	</div>
203	</form>
204