| @@ -1,0 +1,593 @@ | ||
| 1 | +<?php | |
| 2 | +/** | |
| 3 | + * Settings admin page - V3 Premium style inspired design. | |
| 4 | + * | |
| 5 | + * @package King_Addons | |
| 6 | + */ | |
| 7 | + | |
| 8 | +if (!defined('ABSPATH')) { | |
| 9 | + exit; | |
| 10 | +} | |
| 11 | + | |
| 12 | +// Theme mode is per-user | |
| 13 | +$theme_mode = get_user_meta(get_current_user_id(), 'king_addons_theme_mode', true); | |
| 14 | +$allowed_theme_modes = ['dark', 'light', 'auto']; | |
| 15 | +if (!in_array($theme_mode, $allowed_theme_modes, true)) { | |
| 16 | + $theme_mode = 'auto'; | |
| 17 | +} | |
| 18 | + | |
| 19 | +// Handle form submission | |
| 20 | +if (isset($_POST['king_addons_settings_submit_settings'])) { | |
| 21 | + if ( | |
| 22 | + !isset($_POST['king_addons_settings_nonce_field']) || | |
| 23 | + !wp_verify_nonce($_POST['king_addons_settings_nonce_field'], 'king_addons_settings_save_settings') | |
| 24 | + ) { | |
| 25 | + wp_die('Security check failed.'); | |
| 26 | + } | |
| 27 | + | |
| 28 | + update_option('king_addons_google_map_api_key', sanitize_text_field($_POST['king_addons_google_map_api_key'])); | |
| 29 | + update_option('king_addons_mailchimp_api_key', sanitize_text_field($_POST['king_addons_mailchimp_api_key'])); | |
| 30 | + update_option('king_addons_recaptcha_v3_site_key', sanitize_text_field($_POST['king_addons_recaptcha_v3_site_key'])); | |
| 31 | + update_option('king_addons_recaptcha_v3_secret_key', sanitize_text_field($_POST['king_addons_recaptcha_v3_secret_key'])); | |
| 32 | + update_option('king_addons_recaptcha_v3_score_threshold', floatval($_POST['king_addons_recaptcha_v3_score_threshold'])); | |
| 33 | + | |
| 34 | + // Alternatives to reCAPTCHA, offered per form in the Form Builder panel. | |
| 35 | + update_option('king_addons_turnstile_site_key', sanitize_text_field($_POST['king_addons_turnstile_site_key'] ?? '')); | |
| 36 | + update_option('king_addons_turnstile_secret_key', sanitize_text_field($_POST['king_addons_turnstile_secret_key'] ?? '')); | |
| 37 | + update_option('king_addons_hcaptcha_site_key', sanitize_text_field($_POST['king_addons_hcaptcha_site_key'] ?? '')); | |
| 38 | + update_option('king_addons_hcaptcha_secret_key', sanitize_text_field($_POST['king_addons_hcaptcha_secret_key'] ?? '')); | |
| 39 | + | |
| 40 | + // Payment providers used by the Form Builder payment action. | |
| 41 | + update_option('king_addons_stripe_secret_key', sanitize_text_field($_POST['king_addons_stripe_secret_key'] ?? '')); | |
| 42 | + update_option('king_addons_stripe_webhook_secret', sanitize_text_field($_POST['king_addons_stripe_webhook_secret'] ?? '')); | |
| 43 | + update_option('king_addons_paypal_client_id', sanitize_text_field($_POST['king_addons_paypal_client_id'] ?? '')); | |
| 44 | + update_option('king_addons_paypal_secret', sanitize_text_field($_POST['king_addons_paypal_secret'] ?? '')); | |
| 45 | + $king_addons_paypal_env = sanitize_key($_POST['king_addons_paypal_environment'] ?? 'sandbox'); | |
| 46 | + update_option('king_addons_paypal_environment', 'live' === $king_addons_paypal_env ? 'live' : 'sandbox'); | |
| 47 | + | |
| 48 | + // Lightbox colors | |
| 49 | + update_option('king_addons_lightbox_bg_color', sanitize_text_field($_POST['king_addons_lightbox_bg_color'])); | |
| 50 | + update_option('king_addons_lightbox_toolbar_color', sanitize_text_field($_POST['king_addons_lightbox_toolbar_color'])); | |
| 51 | + update_option('king_addons_lightbox_caption_color', sanitize_text_field($_POST['king_addons_lightbox_caption_color'])); | |
| 52 | + update_option('king_addons_lightbox_gallery_color', sanitize_text_field($_POST['king_addons_lightbox_gallery_color'])); | |
| 53 | + update_option('king_addons_lightbox_pb_color', sanitize_text_field($_POST['king_addons_lightbox_pb_color'])); | |
| 54 | + update_option('king_addons_lightbox_ui_color', sanitize_text_field($_POST['king_addons_lightbox_ui_color'])); | |
| 55 | + update_option('king_addons_lightbox_ui_hover_color', sanitize_text_field($_POST['king_addons_lightbox_ui_hover_color'])); | |
| 56 | + update_option('king_addons_lightbox_text_color', sanitize_text_field($_POST['king_addons_lightbox_text_color'])); | |
| 57 | + | |
| 58 | + // Lightbox numbers | |
| 59 | + update_option('king_addons_lightbox_icon_size', intval($_POST['king_addons_lightbox_icon_size'])); | |
| 60 | + update_option('king_addons_lightbox_text_size', intval($_POST['king_addons_lightbox_text_size'])); | |
| 61 | + update_option('king_addons_lightbox_arrow_size', intval($_POST['king_addons_lightbox_arrow_size'])); | |
| 62 | + | |
| 63 | + // Import Performance | |
| 64 | + $improve_import = isset($_POST['king_addons_improve_import_performance']) ? '1' : '0'; | |
| 65 | + update_option('king_addons_improve_import_performance', $improve_import); | |
| 66 | + | |
| 67 | + // Template Catalog Button | |
| 68 | + if (function_exists('king_addons_freemius') && king_addons_freemius()->can_use_premium_code()) { | |
| 69 | + $disable_template_catalog = isset($_POST['king_addons_disable_template_catalog_button']) ? '1' : '0'; | |
| 70 | + update_option('king_addons_disable_template_catalog_button', $disable_template_catalog); | |
| 71 | + } | |
| 72 | + | |
| 73 | + add_settings_error('king_addons_messages', 'king_addons_message', esc_html__('Settings Saved', 'king-addons'), 'updated'); | |
| 74 | +} | |
| 75 | + | |
| 76 | +// Get existing values | |
| 77 | +$google_map_key = get_option('king_addons_google_map_api_key', ''); | |
| 78 | +$mailchimp_key = get_option('king_addons_mailchimp_api_key', ''); | |
| 79 | +$recaptcha_site_key = get_option('king_addons_recaptcha_v3_site_key', ''); | |
| 80 | +$recaptcha_secret_key = get_option('king_addons_recaptcha_v3_secret_key', ''); | |
| 81 | +$recaptcha_score_threshold = get_option('king_addons_recaptcha_v3_score_threshold', 0.5); | |
| 82 | +$turnstile_site_key = get_option('king_addons_turnstile_site_key', ''); | |
| 83 | +$turnstile_secret_key = get_option('king_addons_turnstile_secret_key', ''); | |
| 84 | +$hcaptcha_site_key = get_option('king_addons_hcaptcha_site_key', ''); | |
| 85 | +$hcaptcha_secret_key = get_option('king_addons_hcaptcha_secret_key', ''); | |
| 86 | +$stripe_secret_key = get_option('king_addons_stripe_secret_key', ''); | |
| 87 | +$stripe_webhook_secret = get_option('king_addons_stripe_webhook_secret', ''); | |
| 88 | +$paypal_client_id = get_option('king_addons_paypal_client_id', ''); | |
| 89 | +$paypal_secret = get_option('king_addons_paypal_secret', ''); | |
| 90 | +$paypal_environment = get_option('king_addons_paypal_environment', 'sandbox'); | |
| 91 | +$improve_import_performance = get_option('king_addons_improve_import_performance', '1'); | |
| 92 | +$disable_template_catalog_button = get_option('king_addons_disable_template_catalog_button', '0'); | |
| 93 | + | |
| 94 | +// Enqueue the shared CSS | |
| 95 | +$css_url = KING_ADDONS_URL . 'includes/admin/layouts/shared/admin-v3-styles.css'; | |
| 96 | +$css_path = KING_ADDONS_PATH . 'includes/admin/layouts/shared/admin-v3-styles.css'; | |
| 97 | +$css_version = file_exists($css_path) ? filemtime($css_path) : KING_ADDONS_VERSION; | |
| 98 | +?> | |
| 99 | + | |
| 100 | +<link rel="stylesheet" href="<?php echo esc_url($css_url); ?>?v=<?php echo esc_attr($css_version); ?>"> | |
| 101 | + | |
| 102 | +<script> | |
| 103 | +document.body.classList.add('ka-admin-v3'); | |
| 104 | +(function() { | |
| 105 | + const mode = '<?php echo esc_js($theme_mode); ?>'; | |
| 106 | + const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null; | |
| 107 | + const isDark = mode === 'auto' ? !!(mql && mql.matches) : mode === 'dark'; | |
| 108 | + document.body.classList.toggle('ka-v3-dark', isDark); | |
| 109 | + document.documentElement.classList.toggle('ka-v3-dark', isDark); | |
| 110 | +})(); | |
| 111 | +</script> | |
| 112 | + | |
| 113 | +<div class="ka-admin-wrap"> | |
| 114 | + <?php settings_errors('king_addons_messages'); ?> | |
| 115 | + <!-- Header --> | |
| 116 | + <div class="ka-admin-header"> | |
| 117 | + <div class="ka-admin-header-left"> | |
| 118 | + <div class="ka-admin-header-icon purple"> | |
| 119 | + <span class="dashicons dashicons-admin-generic"></span> | |
| 120 | + </div> | |
| 121 | + <div> | |
| 122 | + <h1 class="ka-admin-title"><?php esc_html_e('Settings', 'king-addons'); ?></h1> | |
| 123 | + <p class="ka-admin-subtitle"><?php esc_html_e('Configure API keys and global options for King Addons.', 'king-addons'); ?></p> | |
| 124 | + </div> | |
| 125 | + </div> | |
| 126 | + <div class="ka-admin-header-actions"> | |
| 127 | + <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); ?>"> | |
| 128 | + <span class="ka-v3-segmented-indicator" aria-hidden="true"></span> | |
| 129 | + <button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $theme_mode === 'light' ? 'true' : 'false'; ?>"> | |
| 130 | + <span class="ka-v3-segmented-icon" aria-hidden="true">☀︎</span> | |
| 131 | + <?php esc_html_e('Light', 'king-addons'); ?> | |
| 132 | + </button> | |
| 133 | + <button type="button" class="ka-v3-segmented-btn" data-theme="dark" aria-pressed="<?php echo $theme_mode === 'dark' ? 'true' : 'false'; ?>"> | |
| 134 | + <span class="ka-v3-segmented-icon" aria-hidden="true">☾</span> | |
| 135 | + <?php esc_html_e('Dark', 'king-addons'); ?> | |
| 136 | + </button> | |
| 137 | + <button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $theme_mode === 'auto' ? 'true' : 'false'; ?>"> | |
| 138 | + <span class="ka-v3-segmented-icon" aria-hidden="true">◐</span> | |
| 139 | + <?php esc_html_e('Auto', 'king-addons'); ?> | |
| 140 | + </button> | |
| 141 | + </div> | |
| 142 | + <a href="https://www.youtube.com/@kingaddons/videos" target="_blank" class="ka-btn ka-btn-secondary"> | |
| 143 | + <span class="dashicons dashicons-book"></span> | |
| 144 | + <?php esc_html_e('Guides', 'king-addons'); ?> | |
| 145 | + </a> | |
| 146 | + </div> | |
| 147 | + </div> | |
| 148 | + | |
| 149 | + <!-- Tabs Navigation --> | |
| 150 | + <div class="ka-tabs"> | |
| 151 | + <button type="button" class="ka-tab active" data-tab="integrations"><?php esc_html_e('Integrations', 'king-addons'); ?></button> | |
| 152 | + <button type="button" class="ka-tab" data-tab="lightbox"><?php esc_html_e('Lightbox', 'king-addons'); ?></button> | |
| 153 | + <button type="button" class="ka-tab" data-tab="performance"><?php esc_html_e('Performance', 'king-addons'); ?></button> | |
| 154 | + </div> | |
| 155 | + | |
| 156 | + <form method="post" action=""> | |
| 157 | + <?php wp_nonce_field('king_addons_settings_save_settings', 'king_addons_settings_nonce_field'); ?> | |
| 158 | + | |
| 159 | + <!-- Integrations Tab --> | |
| 160 | + <div class="ka-tab-content active" data-tab="integrations"> | |
| 161 | + <div class="ka-card"> | |
| 162 | + <div class="ka-card-header"> | |
| 163 | + <span class="dashicons dashicons-admin-plugins"></span> | |
| 164 | + <h2><?php esc_html_e('API Keys', 'king-addons'); ?></h2> | |
| 165 | + </div> | |
| 166 | + <div class="ka-card-body"> | |
| 167 | + <div class="ka-row"> | |
| 168 | + <div class="ka-row-label"><?php esc_html_e('Google Map API Key', 'king-addons'); ?></div> | |
| 169 | + <div class="ka-row-field"> | |
| 170 | + <input type="text" name="king_addons_google_map_api_key" value="<?php echo esc_attr($google_map_key); ?>" placeholder="Abc_42..." /> | |
| 171 | + <p class="ka-row-desc"> | |
| 172 | + <?php esc_html_e('Enter your Google Map API key from Google Cloud Platform.', 'king-addons'); ?> | |
| 173 | + <a href="https://www.youtube.com/watch?v=O5cUoVpVUjU" target="_blank"><?php esc_html_e('Learn how →', 'king-addons'); ?></a> | |
| 174 | + </p> | |
| 175 | + </div> | |
| 176 | + </div> | |
| 177 | + <div class="ka-row"> | |
| 178 | + <div class="ka-row-label"><?php esc_html_e('MailChimp API Key', 'king-addons'); ?></div> | |
| 179 | + <div class="ka-row-field"> | |
| 180 | + <input type="text" name="king_addons_mailchimp_api_key" value="<?php echo esc_attr($mailchimp_key); ?>" /> | |
| 181 | + <p class="ka-row-desc"> | |
| 182 | + <?php esc_html_e('Insert your MailChimp API key for mailing features.', 'king-addons'); ?> | |
| 183 | + <a href="https://mailchimp.com/help/about-api-keys/" target="_blank"><?php esc_html_e('Learn how →', 'king-addons'); ?></a> | |
| 184 | + </p> | |
| 185 | + </div> | |
| 186 | + </div> | |
| 187 | + </div> | |
| 188 | + </div> | |
| 189 | + | |
| 190 | + <div class="ka-card"> | |
| 191 | + <div class="ka-card-header"> | |
| 192 | + <span class="dashicons dashicons-shield"></span> | |
| 193 | + <h2><?php esc_html_e('reCAPTCHA v3', 'king-addons'); ?></h2> | |
| 194 | + </div> | |
| 195 | + <div class="ka-card-body"> | |
| 196 | + <div class="ka-row"> | |
| 197 | + <div class="ka-row-label"><?php esc_html_e('Site Key', 'king-addons'); ?></div> | |
| 198 | + <div class="ka-row-field"> | |
| 199 | + <input type="text" name="king_addons_recaptcha_v3_site_key" value="<?php echo esc_attr($recaptcha_site_key); ?>" /> | |
| 200 | + <p class="ka-row-desc"> | |
| 201 | + <?php esc_html_e('Enter your reCAPTCHA Site Key for Form Builder.', 'king-addons'); ?> | |
| 202 | + <a href="https://www.google.com/recaptcha/about/" target="_blank"><?php esc_html_e('Get keys →', 'king-addons'); ?></a> | |
| 203 | + </p> | |
| 204 | + </div> | |
| 205 | + </div> | |
| 206 | + <div class="ka-row"> | |
| 207 | + <div class="ka-row-label"><?php esc_html_e('Secret Key', 'king-addons'); ?></div> | |
| 208 | + <div class="ka-row-field"> | |
| 209 | + <input type="password" name="king_addons_recaptcha_v3_secret_key" value="<?php echo esc_attr($recaptcha_secret_key); ?>" /> | |
| 210 | + </div> | |
| 211 | + </div> | |
| 212 | + <div class="ka-row"> | |
| 213 | + <div class="ka-row-label"><?php esc_html_e('Score Threshold', 'king-addons'); ?></div> | |
| 214 | + <div class="ka-row-field"> | |
| 215 | + <input type="number" step="0.1" min="0" max="1" name="king_addons_recaptcha_v3_score_threshold" value="<?php echo esc_attr($recaptcha_score_threshold); ?>" style="max-width:100px" /> | |
| 216 | + <p class="ka-row-desc"><?php esc_html_e('Score threshold 0.0 to 1.0 (default 0.5). Higher values are more strict.', 'king-addons'); ?></p> | |
| 217 | + </div> | |
| 218 | + </div> | |
| 219 | + </div> | |
| 220 | + </div> | |
| 221 | + | |
| 222 | + <div class="ka-card"> | |
| 223 | + <div class="ka-card-header"> | |
| 224 | + <span class="dashicons dashicons-shield-alt"></span> | |
| 225 | + <h2><?php esc_html_e('Cloudflare Turnstile', 'king-addons'); ?></h2> | |
| 226 | + </div> | |
| 227 | + <div class="ka-card-body"> | |
| 228 | + <div class="ka-row"> | |
| 229 | + <div class="ka-row-label"><?php esc_html_e('Site Key', 'king-addons'); ?></div> | |
| 230 | + <div class="ka-row-field"> | |
| 231 | + <input type="text" name="king_addons_turnstile_site_key" value="<?php echo esc_attr($turnstile_site_key); ?>" /> | |
| 232 | + <p class="ka-row-desc"> | |
| 233 | + <?php esc_html_e('Pick Turnstile per form in the Form Builder panel.', 'king-addons'); ?> | |
| 234 | + <a href="https://www.cloudflare.com/products/turnstile/" target="_blank"><?php esc_html_e('Get keys →', 'king-addons'); ?></a> | |
| 235 | + </p> | |
| 236 | + </div> | |
| 237 | + </div> | |
| 238 | + <div class="ka-row"> | |
| 239 | + <div class="ka-row-label"><?php esc_html_e('Secret Key', 'king-addons'); ?></div> | |
| 240 | + <div class="ka-row-field"> | |
| 241 | + <input type="password" name="king_addons_turnstile_secret_key" value="<?php echo esc_attr($turnstile_secret_key); ?>" /> | |
| 242 | + </div> | |
| 243 | + </div> | |
| 244 | + </div> | |
| 245 | + </div> | |
| 246 | + | |
| 247 | + <div class="ka-card"> | |
| 248 | + <div class="ka-card-header"> | |
| 249 | + <span class="dashicons dashicons-shield-alt"></span> | |
| 250 | + <h2><?php esc_html_e('hCaptcha', 'king-addons'); ?></h2> | |
| 251 | + </div> | |
| 252 | + <div class="ka-card-body"> | |
| 253 | + <div class="ka-row"> | |
| 254 | + <div class="ka-row-label"><?php esc_html_e('Site Key', 'king-addons'); ?></div> | |
| 255 | + <div class="ka-row-field"> | |
| 256 | + <input type="text" name="king_addons_hcaptcha_site_key" value="<?php echo esc_attr($hcaptcha_site_key); ?>" /> | |
| 257 | + <p class="ka-row-desc"> | |
| 258 | + <?php esc_html_e('Pick hCaptcha per form in the Form Builder panel.', 'king-addons'); ?> | |
| 259 | + <a href="https://www.hcaptcha.com/" target="_blank"><?php esc_html_e('Get keys →', 'king-addons'); ?></a> | |
| 260 | + </p> | |
| 261 | + </div> | |
| 262 | + </div> | |
| 263 | + <div class="ka-row"> | |
| 264 | + <div class="ka-row-label"><?php esc_html_e('Secret Key', 'king-addons'); ?></div> | |
| 265 | + <div class="ka-row-field"> | |
| 266 | + <input type="password" name="king_addons_hcaptcha_secret_key" value="<?php echo esc_attr($hcaptcha_secret_key); ?>" /> | |
| 267 | + </div> | |
| 268 | + </div> | |
| 269 | + </div> | |
| 270 | + </div> | |
| 271 | + | |
| 272 | + <div class="ka-card"> | |
| 273 | + <div class="ka-card-header"> | |
| 274 | + <span class="dashicons dashicons-money-alt"></span> | |
| 275 | + <h2><?php esc_html_e('Stripe', 'king-addons'); ?></h2> | |
| 276 | + </div> | |
| 277 | + <div class="ka-card-body"> | |
| 278 | + <div class="ka-row"> | |
| 279 | + <div class="ka-row-label"><?php esc_html_e('Secret Key', 'king-addons'); ?></div> | |
| 280 | + <div class="ka-row-field"> | |
| 281 | + <input type="password" name="king_addons_stripe_secret_key" value="<?php echo esc_attr($stripe_secret_key); ?>" /> | |
| 282 | + <p class="ka-row-desc"> | |
| 283 | + <?php esc_html_e('Used to open a Stripe Checkout session. Visitors pay on Stripe, so no card details reach this site.', 'king-addons'); ?> | |
| 284 | + <a href="https://dashboard.stripe.com/apikeys" target="_blank"><?php esc_html_e('Get keys →', 'king-addons'); ?></a> | |
| 285 | + </p> | |
| 286 | + </div> | |
| 287 | + </div> | |
| 288 | + <div class="ka-row"> | |
| 289 | + <div class="ka-row-label"><?php esc_html_e('Webhook signing secret', 'king-addons'); ?></div> | |
| 290 | + <div class="ka-row-field"> | |
| 291 | + <input type="password" name="king_addons_stripe_webhook_secret" value="<?php echo esc_attr($stripe_webhook_secret); ?>" /> | |
| 292 | + <p class="ka-row-desc"> | |
| 293 | + <?php esc_html_e('Endpoint to add in the Stripe Dashboard:', 'king-addons'); ?> | |
| 294 | + <code><?php echo esc_html(class_exists('King_Addons\\Form_Payment_Confirm') ? \King_Addons\Form_Payment_Confirm::stripe_webhook_url() : rest_url('king-addons/v1/stripe-webhook')); ?></code> | |
| 295 | + </p> | |
| 296 | + </div> | |
| 297 | + </div> | |
| 298 | + </div> | |
| 299 | + </div> | |
| 300 | + | |
| 301 | + <div class="ka-card"> | |
| 302 | + <div class="ka-card-header"> | |
| 303 | + <span class="dashicons dashicons-money-alt"></span> | |
| 304 | + <h2><?php esc_html_e('PayPal', 'king-addons'); ?></h2> | |
| 305 | + </div> | |
| 306 | + <div class="ka-card-body"> | |
| 307 | + <div class="ka-row"> | |
| 308 | + <div class="ka-row-label"><?php esc_html_e('Client ID', 'king-addons'); ?></div> | |
| 309 | + <div class="ka-row-field"> | |
| 310 | + <input type="text" name="king_addons_paypal_client_id" value="<?php echo esc_attr($paypal_client_id); ?>" /> | |
| 311 | + </div> | |
| 312 | + </div> | |
| 313 | + <div class="ka-row"> | |
| 314 | + <div class="ka-row-label"><?php esc_html_e('Secret', 'king-addons'); ?></div> | |
| 315 | + <div class="ka-row-field"> | |
| 316 | + <input type="password" name="king_addons_paypal_secret" value="<?php echo esc_attr($paypal_secret); ?>" /> | |
| 317 | + </div> | |
| 318 | + </div> | |
| 319 | + <div class="ka-row"> | |
| 320 | + <div class="ka-row-label"><?php esc_html_e('Environment', 'king-addons'); ?></div> | |
| 321 | + <div class="ka-row-field"> | |
| 322 | + <select name="king_addons_paypal_environment"> | |
| 323 | + <option value="sandbox" <?php selected($paypal_environment, 'sandbox'); ?>><?php esc_html_e('Sandbox', 'king-addons'); ?></option> | |
| 324 | + <option value="live" <?php selected($paypal_environment, 'live'); ?>><?php esc_html_e('Live', 'king-addons'); ?></option> | |
| 325 | + </select> | |
| 326 | + </div> | |
| 327 | + </div> | |
| 328 | + </div> | |
| 329 | + </div> | |
| 330 | + </div> | |
| 331 | + | |
| 332 | + <!-- Lightbox Tab --> | |
| 333 | + <div class="ka-tab-content" data-tab="lightbox"> | |
| 334 | + <div class="ka-card"> | |
| 335 | + <div class="ka-card-header"> | |
| 336 | + <span class="dashicons dashicons-format-gallery"></span> | |
| 337 | + <h2><?php esc_html_e('Lightbox Colors', 'king-addons'); ?></h2> | |
| 338 | + </div> | |
| 339 | + <div class="ka-card-body"> | |
| 340 | + <div class="ka-grid-2"> | |
| 341 | + <div class="ka-row"> | |
| 342 | + <div class="ka-row-label"><?php esc_html_e('Text Color', 'king-addons'); ?></div> | |
| 343 | + <div class="ka-row-field"> | |
| 344 | + <div class="ka-color-wrap"> | |
| 345 | + <input type="text" name="king_addons_lightbox_text_color" data-alpha-enabled="true" data-default-color="#efefef" value="<?php echo esc_attr(get_option('king_addons_lightbox_text_color', '#efefef')); ?>" class="color-picker" /> | |
| 346 | + </div> | |
| 347 | + </div> | |
| 348 | + </div> | |
| 349 | + <div class="ka-row"> | |
| 350 | + <div class="ka-row-label"><?php esc_html_e('Background', 'king-addons'); ?></div> | |
| 351 | + <div class="ka-row-field"> | |
| 352 | + <div class="ka-color-wrap"> | |
| 353 | + <input type="text" name="king_addons_lightbox_bg_color" data-alpha-enabled="true" data-default-color="rgba(0,0,0,0.6)" value="<?php echo esc_attr(get_option('king_addons_lightbox_bg_color', 'rgba(0,0,0,0.6)')); ?>" class="color-picker" /> | |
| 354 | + </div> | |
| 355 | + </div> | |
| 356 | + </div> | |
| 357 | + <div class="ka-row"> | |
| 358 | + <div class="ka-row-label"><?php esc_html_e('Toolbar BG', 'king-addons'); ?></div> | |
| 359 | + <div class="ka-row-field"> | |
| 360 | + <div class="ka-color-wrap"> | |
| 361 | + <input type="text" name="king_addons_lightbox_toolbar_color" data-alpha-enabled="true" data-default-color="rgba(0,0,0,0.8)" value="<?php echo esc_attr(get_option('king_addons_lightbox_toolbar_color', 'rgba(0,0,0,0.8)')); ?>" class="color-picker" /> | |
| 362 | + </div> | |
| 363 | + </div> | |
| 364 | + </div> | |
| 365 | + <div class="ka-row"> | |
| 366 | + <div class="ka-row-label"><?php esc_html_e('Caption BG', 'king-addons'); ?></div> | |
| 367 | + <div class="ka-row-field"> | |
| 368 | + <div class="ka-color-wrap"> | |
| 369 | + <input type="text" name="king_addons_lightbox_caption_color" data-alpha-enabled="true" data-default-color="rgba(0,0,0,0.8)" value="<?php echo esc_attr(get_option('king_addons_lightbox_caption_color', 'rgba(0,0,0,0.8)')); ?>" class="color-picker" /> | |
| 370 | + </div> | |
| 371 | + </div> | |
| 372 | + </div> | |
| 373 | + <div class="ka-row"> | |
| 374 | + <div class="ka-row-label"><?php esc_html_e('Gallery BG', 'king-addons'); ?></div> | |
| 375 | + <div class="ka-row-field"> | |
| 376 | + <div class="ka-color-wrap"> | |
| 377 | + <input type="text" name="king_addons_lightbox_gallery_color" data-alpha-enabled="true" data-default-color="#444444" value="<?php echo esc_attr(get_option('king_addons_lightbox_gallery_color', '#444444')); ?>" class="color-picker" /> | |
| 378 | + </div> | |
| 379 | + </div> | |
| 380 | + </div> | |
| 381 | + <div class="ka-row"> | |
| 382 | + <div class="ka-row-label"><?php esc_html_e('Progress Bar', 'king-addons'); ?></div> | |
| 383 | + <div class="ka-row-field"> | |
| 384 | + <div class="ka-color-wrap"> | |
| 385 | + <input type="text" name="king_addons_lightbox_pb_color" data-alpha-enabled="true" data-default-color="#8a8a8a" value="<?php echo esc_attr(get_option('king_addons_lightbox_pb_color', '#8a8a8a')); ?>" class="color-picker" /> | |
| 386 | + </div> | |
| 387 | + </div> | |
| 388 | + </div> | |
| 389 | + <div class="ka-row"> | |
| 390 | + <div class="ka-row-label"><?php esc_html_e('UI Color', 'king-addons'); ?></div> | |
| 391 | + <div class="ka-row-field"> | |
| 392 | + <div class="ka-color-wrap"> | |
| 393 | + <input type="text" name="king_addons_lightbox_ui_color" data-alpha-enabled="true" data-default-color="#efefef" value="<?php echo esc_attr(get_option('king_addons_lightbox_ui_color', '#efefef')); ?>" class="color-picker" /> | |
| 394 | + </div> | |
| 395 | + </div> | |
| 396 | + </div> | |
| 397 | + <div class="ka-row"> | |
| 398 | + <div class="ka-row-label"><?php esc_html_e('UI Hover', 'king-addons'); ?></div> | |
| 399 | + <div class="ka-row-field"> | |
| 400 | + <div class="ka-color-wrap"> | |
| 401 | + <input type="text" name="king_addons_lightbox_ui_hover_color" data-alpha-enabled="true" data-default-color="#ffffff" value="<?php echo esc_attr(get_option('king_addons_lightbox_ui_hover_color', '#ffffff')); ?>" class="color-picker" /> | |
| 402 | + </div> | |
| 403 | + </div> | |
| 404 | + </div> | |
| 405 | + </div> | |
| 406 | + </div> | |
| 407 | + </div> | |
| 408 | + | |
| 409 | + <div class="ka-card"> | |
| 410 | + <div class="ka-card-header"> | |
| 411 | + <span class="dashicons dashicons-editor-expand"></span> | |
| 412 | + <h2><?php esc_html_e('Lightbox Sizes', 'king-addons'); ?></h2> | |
| 413 | + </div> | |
| 414 | + <div class="ka-card-body"> | |
| 415 | + <div class="ka-row"> | |
| 416 | + <div class="ka-row-label"><?php esc_html_e('Icon Size', 'king-addons'); ?></div> | |
| 417 | + <div class="ka-row-field"> | |
| 418 | + <input type="number" name="king_addons_lightbox_icon_size" value="<?php echo esc_attr(get_option('king_addons_lightbox_icon_size', '20')); ?>" style="max-width:100px" /> | |
| 419 | + <span style="color:#86868b;margin-left:8px">px</span> | |
| 420 | + </div> | |
| 421 | + </div> | |
| 422 | + <div class="ka-row"> | |
| 423 | + <div class="ka-row-label"><?php esc_html_e('Arrow Size', 'king-addons'); ?></div> | |
| 424 | + <div class="ka-row-field"> | |
| 425 | + <input type="number" name="king_addons_lightbox_arrow_size" value="<?php echo esc_attr(get_option('king_addons_lightbox_arrow_size', '35')); ?>" style="max-width:100px" /> | |
| 426 | + <span style="color:#86868b;margin-left:8px">px</span> | |
| 427 | + </div> | |
| 428 | + </div> | |
| 429 | + <div class="ka-row"> | |
| 430 | + <div class="ka-row-label"><?php esc_html_e('Text Size', 'king-addons'); ?></div> | |
| 431 | + <div class="ka-row-field"> | |
| 432 | + <input type="number" name="king_addons_lightbox_text_size" value="<?php echo esc_attr(get_option('king_addons_lightbox_text_size', '14')); ?>" style="max-width:100px" /> | |
| 433 | + <span style="color:#86868b;margin-left:8px">px</span> | |
| 434 | + </div> | |
| 435 | + </div> | |
| 436 | + </div> | |
| 437 | + </div> | |
| 438 | + </div> | |
| 439 | + | |
| 440 | + <!-- Performance Tab --> | |
| 441 | + <div class="ka-tab-content" data-tab="performance"> | |
| 442 | + <div class="ka-card"> | |
| 443 | + <div class="ka-card-header"> | |
| 444 | + <span class="dashicons dashicons-download"></span> | |
| 445 | + <h2><?php esc_html_e('Import Templates', 'king-addons'); ?></h2> | |
| 446 | + </div> | |
| 447 | + <div class="ka-card-body"> | |
| 448 | + <div class="ka-row"> | |
| 449 | + <div class="ka-row-label"><?php esc_html_e('Performance Mode', 'king-addons'); ?></div> | |
| 450 | + <div class="ka-row-field"> | |
| 451 | + <label class="ka-toggle"> | |
| 452 | + <input type="checkbox" name="king_addons_improve_import_performance" value="1" <?php checked($improve_import_performance, '1'); ?> /> | |
| 453 | + <span class="ka-toggle-slider"></span> | |
| 454 | + <span class="ka-toggle-label"><?php esc_html_e('Improve import on low-performance servers', 'king-addons'); ?></span> | |
| 455 | + </label> | |
| 456 | + <p class="ka-row-desc"><?php esc_html_e('Applies optimizations like increased PHP limits during import. Enabled by default.', 'king-addons'); ?></p> | |
| 457 | + </div> | |
| 458 | + </div> | |
| 459 | + <?php if (function_exists('king_addons_freemius') && king_addons_freemius()->can_use_premium_code()) : ?> | |
| 460 | + <div class="ka-row"> | |
| 461 | + <div class="ka-row-label"><?php esc_html_e('Template Button', 'king-addons'); ?><span class="ka-pro-badge">PRO</span></div> | |
| 462 | + <div class="ka-row-field"> | |
| 463 | + <label class="ka-toggle"> | |
| 464 | + <input type="checkbox" name="king_addons_disable_template_catalog_button" value="1" <?php checked($disable_template_catalog_button, '1'); ?> /> | |
| 465 | + <span class="ka-toggle-slider"></span> | |
| 466 | + <span class="ka-toggle-label"><?php esc_html_e('Hide "Start with a Template" button in editor', 'king-addons'); ?></span> | |
| 467 | + </label> | |
| 468 | + </div> | |
| 469 | + </div> | |
| 470 | + <?php endif; ?> | |
| 471 | + </div> | |
| 472 | + </div> | |
| 473 | + </div> | |
| 474 | + | |
| 475 | + <div class="ka-card"> | |
| 476 | + <div class="ka-submit"> | |
| 477 | + <button type="submit" name="king_addons_settings_submit_settings" class="ka-btn ka-btn-primary"> | |
| 478 | + <?php esc_html_e('Save Settings', 'king-addons'); ?> | |
| 479 | + </button> | |
| 480 | + </div> | |
| 481 | + </div> | |
| 482 | + </form> | |
| 483 | +</div> | |
| 484 | + | |
| 485 | +<?php | |
| 486 | +// Enqueue color picker | |
| 487 | +wp_enqueue_style('wp-color-picker'); | |
| 488 | +wp_enqueue_script('wp-color-picker'); | |
| 489 | +?> | |
| 490 | +<script> | |
| 491 | +(function($) { | |
| 492 | + 'use strict'; | |
| 493 | + | |
| 494 | + $(document).ready(function() { | |
| 495 | + const ajaxUrl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>'; | |
| 496 | + const nonce = '<?php echo esc_js(wp_create_nonce('king_addons_dashboard_ui')); ?>'; | |
| 497 | + | |
| 498 | + // Theme segmented control (dashboard-style) | |
| 499 | + const $themeSegment = $('#ka-v3-theme-segment'); | |
| 500 | + const $themeSegmentButtons = $themeSegment.find('.ka-v3-segmented-btn'); | |
| 501 | + const themeMql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null; | |
| 502 | + let themeMode = ($themeSegment.attr('data-active') || 'dark').toString(); | |
| 503 | + let themeMqlHandler = null; | |
| 504 | + | |
| 505 | + function saveUISetting(key, value) { | |
| 506 | + $.post(ajaxUrl, { | |
| 507 | + action: 'king_addons_save_dashboard_ui', | |
| 508 | + nonce: nonce, | |
| 509 | + key: key, | |
| 510 | + value: value | |
| 511 | + }); | |
| 512 | + } | |
| 513 | + | |
| 514 | + function updateSegment(mode) { | |
| 515 | + $themeSegment.attr('data-active', mode); | |
| 516 | + $themeSegmentButtons.each(function() { | |
| 517 | + const theme = $(this).data('theme'); | |
| 518 | + $(this).attr('aria-pressed', theme === mode ? 'true' : 'false'); | |
| 519 | + }); | |
| 520 | + } | |
| 521 | + | |
| 522 | + function applyThemeClass(isDark) { | |
| 523 | + $('body').toggleClass('ka-v3-dark', isDark); | |
| 524 | + document.documentElement.classList.toggle('ka-v3-dark', isDark); | |
| 525 | + } | |
| 526 | + | |
| 527 | + function setThemeMode(mode, save) { | |
| 528 | + themeMode = mode; | |
| 529 | + updateSegment(mode); | |
| 530 | + | |
| 531 | + if (themeMqlHandler && themeMql) { | |
| 532 | + if (themeMql.removeEventListener) { | |
| 533 | + themeMql.removeEventListener('change', themeMqlHandler); | |
| 534 | + } else if (themeMql.removeListener) { | |
| 535 | + themeMql.removeListener(themeMqlHandler); | |
| 536 | + } | |
| 537 | + themeMqlHandler = null; | |
| 538 | + } | |
| 539 | + | |
| 540 | + if (mode === 'auto') { | |
| 541 | + applyThemeClass(!!(themeMql && themeMql.matches)); | |
| 542 | + themeMqlHandler = function(e) { | |
| 543 | + if (themeMode !== 'auto') { | |
| 544 | + return; | |
| 545 | + } | |
| 546 | + applyThemeClass(!!e.matches); | |
| 547 | + }; | |
| 548 | + if (themeMql) { | |
| 549 | + if (themeMql.addEventListener) { | |
| 550 | + themeMql.addEventListener('change', themeMqlHandler); | |
| 551 | + } else if (themeMql.addListener) { | |
| 552 | + themeMql.addListener(themeMqlHandler); | |
| 553 | + } | |
| 554 | + } | |
| 555 | + } else { | |
| 556 | + applyThemeClass(mode === 'dark'); | |
| 557 | + } | |
| 558 | + | |
| 559 | + if (save) { | |
| 560 | + saveUISetting('theme_mode', mode); | |
| 561 | + } | |
| 562 | + } | |
| 563 | + | |
| 564 | + $themeSegment.on('click', '.ka-v3-segmented-btn', function(e) { | |
| 565 | + e.preventDefault(); | |
| 566 | + const mode = ($(this).data('theme') || 'dark').toString(); | |
| 567 | + setThemeMode(mode, true); | |
| 568 | + }); | |
| 569 | + | |
| 570 | + // Ensure mode applies for Auto (listener + system state) | |
| 571 | + setThemeMode(themeMode, false); | |
| 572 | + | |
| 573 | + // Tab navigation | |
| 574 | + $('.ka-tab').on('click', function() { | |
| 575 | + const target = $(this).data('tab'); | |
| 576 | + $('.ka-tab').removeClass('active'); | |
| 577 | + $(this).addClass('active'); | |
| 578 | + $('.ka-tab-content').removeClass('active'); | |
| 579 | + $(`.ka-tab-content[data-tab="${target}"]`).addClass('active'); | |
| 580 | + }); | |
| 581 | + | |
| 582 | + // Initialize color pickers | |
| 583 | + if ($.fn.wpColorPicker) { | |
| 584 | + $('.color-picker').each(function() { | |
| 585 | + var $input = $(this); | |
| 586 | + $input.wpColorPicker({ | |
| 587 | + defaultColor: $input.data('default-color') || '' | |
| 588 | + }); | |
| 589 | + }); | |
| 590 | + } | |
| 591 | + }); | |
| 592 | +})(jQuery); | |
| 593 | +</script> | |