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

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

139 lines 6.0 KB

Raw Download Zip

1	<?php
2	/**
3	* Site Preloader Templates 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	$current_template = $settings['template'] ?? 'spinner-circle';
18	?>
19
20	<form action="<?php echo esc_url(admin_url('admin-post.php')); ?>" method="post" id="ka-preloader-templates-form">
21	<?php wp_nonce_field('king_addons_site_preloader_save'); ?>
22	<input type="hidden" name="action" value="king_addons_site_preloader_save" />
23	<input type="hidden" name="current_tab" value="templates" />
24	<input type="hidden" name="template" id="ka-selected-template" value="<?php echo esc_attr($current_template); ?>" />
25
26	<?php
27	// Preserve other settings
28	foreach ($settings as $key => $value) {
29	if ($key === 'template') continue;
30	if (is_array($value)) {
31	foreach ($value as $arr_val) {
32	echo '<input type="hidden" name="' . esc_attr($key) . '[]" value="' . esc_attr($arr_val) . '" />';
33	}
34	} else {
35	echo '<input type="hidden" name="' . esc_attr($key) . '" value="' . esc_attr($value) . '" />';
36	}
37	}
38	?>
39
40	<div class="ka-card">
41	<div class="ka-card-header">
42	<span class="dashicons dashicons-layout"></span>
43	<h2><?php esc_html_e('Animation Templates', 'king-addons'); ?></h2>
44	</div>
45	<div class="ka-card-body">
46	<p class="ka-preloader-templates-intro">
47	<?php esc_html_e('Select a preloader animation template. Click on any template to preview and select it.', 'king-addons'); ?>
48	</p>
49
50	<div class="ka-preloader-templates-grid">
51	<?php foreach ($presets as $preset_id => $preset): ?>
52	<div class="ka-preloader-template-card <?php echo $current_template === $preset_id ? 'active' : ''; ?> <?php echo !empty($preset['pro']) && !$is_pro ? 'pro-only' : ''; ?>"
53	data-template="<?php echo esc_attr($preset_id); ?>"
54	onclick="kaPreloaderSelectTemplate('<?php echo esc_attr($preset_id); ?>')">
55
56	<div class="ka-preloader-template-card__preview">
57	<div class="ka-preloader-template-card__animation" style="--kng-preloader-accent: <?php echo esc_attr($settings['accent_color']); ?>; --kng-preloader-size: 32px;">
58	<?php $this->render_preset_html($preset_id, array_merge($settings, ['logo_enabled' => false, 'text_enabled' => false])); ?>
59	</div>
60	</div>
61
62	<div class="ka-preloader-template-card__info">
63	<h4 class="ka-preloader-template-card__title">
64	<?php echo esc_html($preset['title']); ?>
65	<?php if (!empty($preset['pro']) && !$is_pro): ?>
66	<span class="ka-pro-badge">PRO</span>
67	<?php endif; ?>
68	</h4>
69	<p class="ka-preloader-template-card__desc"><?php echo esc_html($preset['description']); ?></p>
70	</div>
71
72	<?php if ($current_template === $preset_id): ?>
73	<div class="ka-preloader-template-card__check">
74	<span class="dashicons dashicons-yes-alt"></span>
75	</div>
76	<?php endif; ?>
77	</div>
78	<?php endforeach; ?>
79	</div>
80	</div>
81	</div>
82
83	<!-- Pro Templates Promo -->
84	<?php if (!$is_pro): ?>
85	<div class="ka-upgrade-card">
86	<h3><?php esc_html_e('Custom Preloader Builder', 'king-addons'); ?></h3>
87	<p><?php esc_html_e('Create fully custom preloaders with Pro features', 'king-addons'); ?></p>
88	<ul>
89	<li><?php esc_html_e('Layer-based visual builder', 'king-addons'); ?></li>
90	<li><?php esc_html_e('Lottie JSON animations', 'king-addons'); ?></li>
91	<li><?php esc_html_e('SVG and GIF support', 'king-addons'); ?></li>
92	<li><?php esc_html_e('Progress bar with real percentage', 'king-addons'); ?></li>
93	<li><?php esc_html_e('Custom HTML snippets', 'king-addons'); ?></li>
94	</ul>
95	<a href="https://kingaddons.com/pricing/?utm_source=kng-preloader-templates-upgrade&utm_medium=plugin&utm_campaign=kng" target="_blank" class="ka-btn ka-btn-pink">
96	<span class="dashicons dashicons-star-filled"></span>
97	<?php esc_html_e('Upgrade to Pro', 'king-addons'); ?>
98	</a>
99	</div>
100	<?php endif; ?>
101
102	<!-- Save Button -->
103	<div class="ka-submit ka-preloader-submit">
104	<button type="submit" class="ka-btn ka-btn-primary">
105	<span class="dashicons dashicons-saved"></span>
106	<?php esc_html_e('Save Template', 'king-addons'); ?>
107	</button>
108	</div>
109	</form>
110
111	<script>
112	function kaPreloaderSelectTemplate(templateId) {
113	// Check if it's a pro template and user doesn't have pro
114	const card = document.querySelector('[data-template="' + templateId + '"]');
115	if (card && card.classList.contains('pro-only')) {
116	alert('<?php echo esc_js(__('This template requires Pro version.', 'king-addons')); ?>');
117	return;
118	}
119
120	// Update hidden input
121	document.getElementById('ka-selected-template').value = templateId;
122
123	// Update visual selection
124	document.querySelectorAll('.ka-preloader-template-card').forEach(card => {
125	card.classList.remove('active');
126	const check = card.querySelector('.ka-preloader-template-card__check');
127	if (check) check.remove();
128	});
129
130	card.classList.add('active');
131
132	// Add checkmark
133	const checkDiv = document.createElement('div');
134	checkDiv.className = 'ka-preloader-template-card__check';
135	checkDiv.innerHTML = '<span class="dashicons dashicons-yes-alt"></span>';
136	card.appendChild(checkDiv);
137	}
138	</script>
139