| @@ -1,13 +1,24 @@ | ||
| 1 | 1 | <?php |
| 2 | +/** | |
| 3 | + * Settings admin page - V3 Premium style inspired design. | |
| 4 | + * | |
| 5 | + * @package King_Addons | |
| 6 | + */ | |
| 2 | 7 | |
| 3 | 8 | if (!defined('ABSPATH')) { |
| 4 | - exit; // Exit if accessed directly. | |
| 9 | + exit; | |
| 5 | 10 | } |
| 6 | 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 | + | |
| 7 | 19 | // Handle form submission |
| 8 | 20 | if (isset($_POST['king_addons_settings_submit_settings'])) { |
| 9 | - // Verify nonce for security | |
| 10 | 21 | if ( |
| 11 | 22 | !isset($_POST['king_addons_settings_nonce_field']) || |
| 12 | 23 | !wp_verify_nonce($_POST['king_addons_settings_nonce_field'], 'king_addons_settings_save_settings') |
| 13 | 24 | ) { |
| @@ -13,9 +24,8 @@ | ||
| 13 | 24 | ) { |
| 14 | 25 | wp_die('Security check failed.'); |
| 15 | 26 | } |
| 16 | 27 | |
| 17 | - // Sanitize and save the submitted data | |
| 18 | 28 | update_option('king_addons_google_map_api_key', sanitize_text_field($_POST['king_addons_google_map_api_key'])); |
| 19 | 29 | update_option('king_addons_mailchimp_api_key', sanitize_text_field($_POST['king_addons_mailchimp_api_key'])); |
| 20 | 30 | update_option('king_addons_recaptcha_v3_site_key', sanitize_text_field($_POST['king_addons_recaptcha_v3_site_key'])); |
| 21 | 31 | update_option('king_addons_recaptcha_v3_secret_key', sanitize_text_field($_POST['king_addons_recaptcha_v3_secret_key'])); |
| @@ -20,9 +30,23 @@ | ||
| 20 | 30 | update_option('king_addons_recaptcha_v3_site_key', sanitize_text_field($_POST['king_addons_recaptcha_v3_site_key'])); |
| 21 | 31 | update_option('king_addons_recaptcha_v3_secret_key', sanitize_text_field($_POST['king_addons_recaptcha_v3_secret_key'])); |
| 22 | 32 | update_option('king_addons_recaptcha_v3_score_threshold', floatval($_POST['king_addons_recaptcha_v3_score_threshold'])); |
| 23 | 33 | |
| 24 | - // Lightbox - colors | |
| 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 | |
| 25 | 49 | update_option('king_addons_lightbox_bg_color', sanitize_text_field($_POST['king_addons_lightbox_bg_color'])); |
| 26 | 50 | update_option('king_addons_lightbox_toolbar_color', sanitize_text_field($_POST['king_addons_lightbox_toolbar_color'])); |
| 27 | 51 | update_option('king_addons_lightbox_caption_color', sanitize_text_field($_POST['king_addons_lightbox_caption_color'])); |
| 28 | 52 | update_option('king_addons_lightbox_gallery_color', sanitize_text_field($_POST['king_addons_lightbox_gallery_color'])); |
| @@ -30,9 +54,9 @@ | ||
| 30 | 54 | update_option('king_addons_lightbox_ui_color', sanitize_text_field($_POST['king_addons_lightbox_ui_color'])); |
| 31 | 55 | update_option('king_addons_lightbox_ui_hover_color', sanitize_text_field($_POST['king_addons_lightbox_ui_hover_color'])); |
| 32 | 56 | update_option('king_addons_lightbox_text_color', sanitize_text_field($_POST['king_addons_lightbox_text_color'])); |
| 33 | 57 | |
| 34 | - // Lightbox - numbers | |
| 58 | + // Lightbox numbers | |
| 35 | 59 | update_option('king_addons_lightbox_icon_size', intval($_POST['king_addons_lightbox_icon_size'])); |
| 36 | 60 | update_option('king_addons_lightbox_text_size', intval($_POST['king_addons_lightbox_text_size'])); |
| 37 | 61 | update_option('king_addons_lightbox_arrow_size', intval($_POST['king_addons_lightbox_arrow_size'])); |
| 38 | 62 | |
| @@ -39,415 +63,531 @@ | ||
| 39 | 63 | // Import Performance |
| 40 | 64 | $improve_import = isset($_POST['king_addons_improve_import_performance']) ? '1' : '0'; |
| 41 | 65 | update_option('king_addons_improve_import_performance', $improve_import); |
| 42 | 66 | |
| 43 | - // Template Catalog Button (Premium only) | |
| 67 | + // Template Catalog Button | |
| 44 | 68 | if (function_exists('king_addons_freemius') && king_addons_freemius()->can_use_premium_code()) { |
| 45 | 69 | $disable_template_catalog = isset($_POST['king_addons_disable_template_catalog_button']) ? '1' : '0'; |
| 46 | 70 | update_option('king_addons_disable_template_catalog_button', $disable_template_catalog); |
| 47 | 71 | } |
| 48 | 72 | |
| 49 | - // Show a success message | |
| 50 | 73 | add_settings_error('king_addons_messages', 'king_addons_message', esc_html__('Settings Saved', 'king-addons'), 'updated'); |
| 51 | - settings_errors('king_addons_messages'); | |
| 52 | 74 | } |
| 53 | 75 | |
| 54 | -// Get existing values from the database | |
| 76 | +// Get existing values | |
| 55 | 77 | $google_map_key = get_option('king_addons_google_map_api_key', ''); |
| 56 | 78 | $mailchimp_key = get_option('king_addons_mailchimp_api_key', ''); |
| 57 | 79 | $recaptcha_site_key = get_option('king_addons_recaptcha_v3_site_key', ''); |
| 58 | 80 | $recaptcha_secret_key = get_option('king_addons_recaptcha_v3_secret_key', ''); |
| 59 | 81 | $recaptcha_score_threshold = get_option('king_addons_recaptcha_v3_score_threshold', 0.5); |
| 60 | - | |
| 61 | -// Import Performance | |
| 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'); | |
| 62 | 91 | $improve_import_performance = get_option('king_addons_improve_import_performance', '1'); |
| 63 | - | |
| 64 | -// Template Catalog Button (Premium only) | |
| 65 | 92 | $disable_template_catalog_button = get_option('king_addons_disable_template_catalog_button', '0'); |
| 66 | 93 | |
| 67 | -// Render the settings form | |
| 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; | |
| 68 | 98 | ?> |
| 69 | -<style> | |
| 70 | - #wpwrap, | |
| 71 | - #wpcontent, | |
| 72 | - .king-addons-settings { | |
| 73 | - display: none; | |
| 74 | - } | |
| 75 | 99 | |
| 76 | - #wpcontent { | |
| 77 | - min-height: 100vh; | |
| 78 | - overflow-x: hidden; | |
| 79 | - } | |
| 100 | +<link rel="stylesheet" href="<?php echo esc_url($css_url); ?>?v=<?php echo esc_attr($css_version); ?>"> | |
| 80 | 101 | |
| 81 | - #wpwrap, | |
| 82 | - html, | |
| 83 | - body, | |
| 84 | - #wpcontent { | |
| 85 | - background: #101112; | |
| 86 | - } | |
| 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> | |
| 87 | 112 | |
| 88 | - .wrap { | |
| 89 | - margin: 0; | |
| 90 | - } | |
| 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> | |
| 91 | 148 | |
| 92 | - .king-addons-settings { | |
| 93 | - max-width: 1200px; | |
| 94 | - margin: 10px 20px 0 0; | |
| 95 | - padding: 20px; | |
| 96 | - border-radius: 30px; | |
| 97 | - font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 98 | - } | |
| 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> | |
| 99 | 155 | |
| 100 | - h1.title { | |
| 101 | - font-size: 25px; | |
| 102 | - font-weight: 600; | |
| 103 | - line-height: 1.5; | |
| 104 | - display: inline-block; | |
| 105 | - margin-top: 0; | |
| 106 | - margin-bottom: 20px; | |
| 107 | - padding: 0; | |
| 108 | - background: linear-gradient(45deg, #E1CBFF, #9B62FF 50%, #5B03FF); | |
| 109 | - background-clip: text; /* Standard property for compatibility */ | |
| 110 | - -webkit-background-clip: text; | |
| 111 | - -webkit-text-fill-color: transparent; | |
| 112 | - } | |
| 156 | + <form method="post" action=""> | |
| 157 | + <?php wp_nonce_field('king_addons_settings_save_settings', 'king_addons_settings_nonce_field'); ?> | |
| 113 | 158 | |
| 114 | - h2.king-addons-settings-group-title { | |
| 115 | - font-size: 22px; | |
| 116 | - color: #646970; | |
| 117 | - font-weight: 600; | |
| 118 | - } | |
| 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> | |
| 119 | 189 | |
| 120 | - .king-addons-settings-table-wrap { | |
| 121 | - padding: 30px 40px; | |
| 122 | - border-radius: 30px; | |
| 123 | - background: #1a1b1b; | |
| 124 | - } | |
| 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> | |
| 125 | 221 | |
| 126 | - th label { | |
| 127 | - color: white; | |
| 128 | - font-size: 15px; | |
| 129 | - } | |
| 130 | - | |
| 131 | - .form-table td p, | |
| 132 | - .form-table td p span { | |
| 133 | - font-size: 15px; | |
| 134 | - line-height: 1.4705882353; | |
| 135 | - font-weight: 500; | |
| 136 | - letter-spacing: normal; | |
| 137 | - margin-top: 13px; | |
| 138 | - color: #646970; | |
| 139 | - } | |
| 140 | - | |
| 141 | - input[type=text], | |
| 142 | - input[type=number] { | |
| 143 | - background: #262829; | |
| 144 | - font-size: 16px; | |
| 145 | - color: white; | |
| 146 | - border: 1px solid #484c4e; | |
| 147 | - padding: 3px 14px; | |
| 148 | - } | |
| 149 | - | |
| 150 | - .king-addons-premium-badge { | |
| 151 | - display: inline-block; | |
| 152 | - background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%); | |
| 153 | - background-clip: padding-box; /* Standard property for compatibility */ | |
| 154 | - -webkit-background-clip: padding-box; | |
| 155 | - color: white; | |
| 156 | - font-size: 10px; | |
| 157 | - font-weight: 600; | |
| 158 | - padding: 2px 6px; | |
| 159 | - border-radius: 3px; | |
| 160 | - text-transform: uppercase; | |
| 161 | - letter-spacing: 0.5px; | |
| 162 | - box-shadow: 0 1px 3px rgba(255, 107, 53, 0.3); | |
| 163 | - } | |
| 164 | -</style> | |
| 165 | -<div class="wrap"> | |
| 166 | - <div class="king-addons-settings"> | |
| 167 | - <h1 class="title"><?php echo esc_html__('Settings', 'king-addons'); ?></h1> | |
| 168 | - <form method="post" action=""> | |
| 169 | - <?php | |
| 170 | - // Nonce field for security | |
| 171 | - wp_nonce_field('king_addons_settings_save_settings', 'king_addons_settings_nonce_field'); | |
| 172 | - ?> | |
| 173 | - <div class="king-addons-settings-table-wrap"> | |
| 174 | - | |
| 175 | - <h2 class="king-addons-settings-group-title"><?php esc_html_e('Integrations', 'king-addons'); ?></h2> | |
| 176 | - <table class="form-table"> | |
| 177 | - <tr> | |
| 178 | - <th scope="row"> | |
| 179 | - <label for="king_addons_google_map_api_key"><?php echo esc_html__('Google Map API Key', 'king-addons'); ?></label> | |
| 180 | - </th> | |
| 181 | - <td> | |
| 182 | - <input | |
| 183 | - type="text" | |
| 184 | - name="king_addons_google_map_api_key" | |
| 185 | - id="king_addons_google_map_api_key" | |
| 186 | - value="<?php echo esc_attr($google_map_key); ?>" | |
| 187 | - class="regular-text"> | |
| 188 | - <p class="description"> | |
| 189 | - <span><?php echo esc_html__('Enter your Google Map API key. You can obtain it from the Google Cloud Platform.', 'king-addons'); ?></span> | |
| 190 | - <br> | |
| 191 | - <a href="https://www.youtube.com/watch?v=O5cUoVpVUjU" | |
| 192 | - target="_blank"><?php esc_html_e('How to get Google Map API Key?', 'king-addons'); ?></a> | |
| 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> | |
| 193 | 235 | </p> |
| 194 | - </td> | |
| 195 | - </tr> | |
| 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> | |
| 196 | 246 | |
| 197 | - <tr> | |
| 198 | - <th scope="row"> | |
| 199 | - <label for="king_addons_mailchimp_api_key"><?php echo esc_html__('MailChimp API Key', 'king-addons'); ?></label> | |
| 200 | - </th> | |
| 201 | - <td> | |
| 202 | - <input | |
| 203 | - type="text" | |
| 204 | - name="king_addons_mailchimp_api_key" | |
| 205 | - id="king_addons_mailchimp_api_key" | |
| 206 | - value="<?php echo esc_attr($mailchimp_key); ?>" | |
| 207 | - class="regular-text"> | |
| 208 | - <p class="description"> | |
| 209 | - <span><?php echo esc_html__('Insert your MailChimp API key here to integrate mailing features.', 'king-addons'); ?></span> | |
| 210 | - <br> | |
| 211 | - <a href="https://mailchimp.com/help/about-api-keys/" | |
| 212 | - target="_blank"><?php esc_html_e('How to get MailChimp API Key?', 'king-addons'); ?></a> | |
| 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> | |
| 213 | 260 | </p> |
| 214 | - </td> | |
| 215 | - </tr> | |
| 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> | |
| 216 | 271 | |
| 217 | - <tr> | |
| 218 | - <th scope="row"> | |
| 219 | - <label for="king_addons_recaptcha_v3_site_key"><?php echo esc_html__('reCAPTCHA - Site Key', 'king-addons'); ?></label> | |
| 220 | - </th> | |
| 221 | - <td> | |
| 222 | - <input | |
| 223 | - type="text" | |
| 224 | - name="king_addons_recaptcha_v3_site_key" | |
| 225 | - id="king_addons_recaptcha_v3_site_key" | |
| 226 | - value="<?php echo esc_attr($recaptcha_site_key); ?>" | |
| 227 | - class="regular-text"> | |
| 228 | - <p class="description"> | |
| 229 | - <span><?php echo esc_html__('Enter your reCAPTCHA Site Key from the Google reCAPTCHA admin console. Add a reCAPTCHA element to the Form Builder fields to make it work.', 'king-addons'); ?></span> | |
| 230 | - <br> | |
| 231 | - <a href="https://www.google.com/recaptcha/about/" | |
| 232 | - target="_blank"><?php esc_html_e('How to get reCAPTCHA Site Key?', 'king-addons'); ?></a> | |
| 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> | |
| 233 | 285 | </p> |
| 234 | - </td> | |
| 235 | - </tr> | |
| 236 | - | |
| 237 | - <tr> | |
| 238 | - <th scope="row"> | |
| 239 | - <label for="king_addons_recaptcha_v3_secret_key"><?php echo esc_html__('reCAPTCHA - Secret Key', 'king-addons'); ?></label> | |
| 240 | - </th> | |
| 241 | - <td> | |
| 242 | - <input | |
| 243 | - type="text" | |
| 244 | - name="king_addons_recaptcha_v3_secret_key" | |
| 245 | - id="king_addons_recaptcha_v3_secret_key" | |
| 246 | - value="<?php echo esc_attr($recaptcha_secret_key); ?>" | |
| 247 | - class="regular-text"> | |
| 248 | - <p class="description"> | |
| 249 | - <span><?php echo esc_html__('Your reCAPTCHA Secret Key. Make sure to keep this secure.', 'king-addons'); ?></span> | |
| 250 | - <br> | |
| 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> | |
| 251 | 295 | </p> |
| 252 | - </td> | |
| 253 | - </tr> | |
| 296 | + </div> | |
| 297 | + </div> | |
| 298 | + </div> | |
| 299 | + </div> | |
| 254 | 300 | |
| 255 | - <tr> | |
| 256 | - <th scope="row"> | |
| 257 | - <label for="king_addons_recaptcha_v3_score_threshold"><?php echo esc_html__('reCAPTCHA - Score Threshold', 'king-addons'); ?></label> | |
| 258 | - </th> | |
| 259 | - <td> | |
| 260 | - <input | |
| 261 | - type="number" | |
| 262 | - step="0.1" | |
| 263 | - min="0" | |
| 264 | - max="1" | |
| 265 | - placeholder="0.5" | |
| 266 | - name="king_addons_recaptcha_v3_score_threshold" | |
| 267 | - id="king_addons_recaptcha_v3_score_threshold" | |
| 268 | - value="<?php echo esc_attr($recaptcha_score_threshold); ?>" | |
| 269 | - class="regular-text"> | |
| 270 | - <p class="description"> | |
| 271 | - <?php echo esc_html__('Set a score threshold (0.0 to 1.0) for reCAPTCHA.', 'king-addons'); ?> | |
| 272 | - </p> | |
| 273 | - </td> | |
| 274 | - </tr> | |
| 275 | - </table> | |
| 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> | |
| 276 | 331 | |
| 277 | - <hr class="king-addons-settings-separator"> | |
| 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> | |
| 278 | 408 | |
| 279 | - <h2 class="king-addons-settings-group-title"><?php esc_html_e('Lightbox', 'king-addons'); ?></h2> | |
| 280 | - <table class="form-table"> | |
| 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> | |
| 281 | 439 | |
| 282 | - <tr> | |
| 283 | - <th scope="row"><label | |
| 284 | - for="king_addons_lightbox_text_color"><?php esc_html_e('Text Color', 'king-addons'); ?></label> | |
| 285 | - </th> | |
| 286 | - <td><input type="text" name="king_addons_lightbox_text_color" | |
| 287 | - id="king_addons_lightbox_text_color" data-alpha-enabled="true" | |
| 288 | - data-default-color="#efefef" | |
| 289 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_text_color', '#efefef')); ?>"> | |
| 290 | - </td> | |
| 291 | - </tr> | |
| 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> | |
| 292 | 474 | |
| 293 | - <tr> | |
| 294 | - <th scope="row"><label | |
| 295 | - for="king_addons_lightbox_bg_color"><?php esc_html_e('Background Color', 'king-addons'); ?></label> | |
| 296 | - </th> | |
| 297 | - <td><input type="text" name="king_addons_lightbox_bg_color" | |
| 298 | - id="king_addons_lightbox_bg_color" | |
| 299 | - data-alpha-enabled="true" data-default-color="rgba(0,0,0,0.6)" | |
| 300 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_bg_color', 'rgba(0,0,0,0.6)')); ?>"> | |
| 301 | - </td> | |
| 302 | - </tr> | |
| 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> | |
| 303 | 484 | |
| 304 | - <tr> | |
| 305 | - <th scope="row"><label | |
| 306 | - for="king_addons_lightbox_toolbar_color"><?php esc_html_e('Toolbar BG Color', 'king-addons'); ?></label> | |
| 307 | - </th> | |
| 308 | - <td><input type="text" name="king_addons_lightbox_toolbar_color" | |
| 309 | - id="king_addons_lightbox_toolbar_color" data-alpha-enabled="true" | |
| 310 | - data-default-color="rgba(0,0,0,0.8)" | |
| 311 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_toolbar_color', 'rgba(0,0,0,0.8)')); ?>"> | |
| 312 | - </td> | |
| 313 | - </tr> | |
| 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')); ?>'; | |
| 314 | 497 | |
| 315 | - <tr> | |
| 316 | - <th scope="row"><label | |
| 317 | - for="king_addons_lightbox_caption_color"><?php esc_html_e('Caption BG Color', 'king-addons'); ?></label> | |
| 318 | - </th> | |
| 319 | - <td><input type="text" name="king_addons_lightbox_caption_color" | |
| 320 | - id="king_addons_lightbox_caption_color" data-alpha-enabled="true" | |
| 321 | - data-default-color="rgba(0,0,0,0.8)" | |
| 322 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_caption_color', 'rgba(0,0,0,0.8)')); ?>"> | |
| 323 | - </td> | |
| 324 | - </tr> | |
| 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; | |
| 325 | 504 | |
| 326 | - <tr> | |
| 327 | - <th scope="row"><label | |
| 328 | - for="king_addons_lightbox_gallery_color"><?php esc_html_e('Gallery BG Color', 'king-addons'); ?></label> | |
| 329 | - </th> | |
| 330 | - <td><input type="text" name="king_addons_lightbox_gallery_color" | |
| 331 | - id="king_addons_lightbox_gallery_color" data-alpha-enabled="true" | |
| 332 | - data-default-color="#444444" | |
| 333 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_gallery_color', '#444444')); ?>"> | |
| 334 | - </td> | |
| 335 | - </tr> | |
| 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 | + } | |
| 336 | 513 | |
| 337 | - <tr> | |
| 338 | - <th scope="row"><label | |
| 339 | - for="king_addons_lightbox_pb_color"><?php esc_html_e('Progress Bar Color', 'king-addons'); ?></label> | |
| 340 | - </th> | |
| 341 | - <td><input type="text" name="king_addons_lightbox_pb_color" | |
| 342 | - id="king_addons_lightbox_pb_color" | |
| 343 | - data-alpha-enabled="true" data-default-color="#8a8a8a" | |
| 344 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_pb_color', '#8a8a8a')); ?>"> | |
| 345 | - </td> | |
| 346 | - </tr> | |
| 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 | + } | |
| 347 | 521 | |
| 348 | - <tr> | |
| 349 | - <th scope="row"><label | |
| 350 | - for="king_addons_lightbox_ui_color"><?php esc_html_e('UI Color', 'king-addons'); ?></label> | |
| 351 | - </th> | |
| 352 | - <td><input type="text" name="king_addons_lightbox_ui_color" | |
| 353 | - id="king_addons_lightbox_ui_color" | |
| 354 | - data-alpha-enabled="true" data-default-color="#efefef" | |
| 355 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_ui_color', '#efefef')); ?>"> | |
| 356 | - </td> | |
| 357 | - </tr> | |
| 522 | + function applyThemeClass(isDark) { | |
| 523 | + $('body').toggleClass('ka-v3-dark', isDark); | |
| 524 | + document.documentElement.classList.toggle('ka-v3-dark', isDark); | |
| 525 | + } | |
| 358 | 526 | |
| 359 | - <tr> | |
| 360 | - <th scope="row"><label | |
| 361 | - for="king_addons_lightbox_ui_hover_color"><?php esc_html_e('UI Hover Color', 'king-addons'); ?></label> | |
| 362 | - </th> | |
| 363 | - <td><input type="text" name="king_addons_lightbox_ui_hover_color" | |
| 364 | - id="king_addons_lightbox_ui_hover_color" data-alpha-enabled="true" | |
| 365 | - data-default-color="#ffffff" | |
| 366 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_ui_hover_color', '#ffffff')); ?>"> | |
| 367 | - </td> | |
| 368 | - </tr> | |
| 527 | + function setThemeMode(mode, save) { | |
| 528 | + themeMode = mode; | |
| 529 | + updateSegment(mode); | |
| 369 | 530 | |
| 370 | - <tr> | |
| 371 | - <th scope="row"><label | |
| 372 | - for="king_addons_lightbox_icon_size"><?php esc_html_e('UI Icon Size', 'king-addons'); ?></label> | |
| 373 | - </th> | |
| 374 | - <td><input type="number" name="king_addons_lightbox_icon_size" | |
| 375 | - id="king_addons_lightbox_icon_size" | |
| 376 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_icon_size', '20')); ?>"> | |
| 377 | - </td> | |
| 378 | - </tr> | |
| 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 | + } | |
| 379 | 539 | |
| 380 | - <tr> | |
| 381 | - <th scope="row"><label | |
| 382 | - for="king_addons_lightbox_arrow_size"><?php esc_html_e('Navigation Arrow Size', 'king-addons'); ?></label> | |
| 383 | - </th> | |
| 384 | - <td><input type="number" name="king_addons_lightbox_arrow_size" | |
| 385 | - id="king_addons_lightbox_arrow_size" | |
| 386 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_arrow_size', '35')); ?>"> | |
| 387 | - </td> | |
| 388 | - </tr> | |
| 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 | + } | |
| 389 | 558 | |
| 390 | - <tr> | |
| 391 | - <th scope="row"><label | |
| 392 | - for="king_addons_lightbox_text_size"><?php esc_html_e('Text Size', 'king-addons'); ?></label> | |
| 393 | - </th> | |
| 394 | - <td><input type="number" name="king_addons_lightbox_text_size" | |
| 395 | - id="king_addons_lightbox_text_size" | |
| 396 | - value="<?php echo esc_attr(get_option('king_addons_lightbox_text_size', '14')); ?>"> | |
| 397 | - </td> | |
| 398 | - </tr> | |
| 559 | + if (save) { | |
| 560 | + saveUISetting('theme_mode', mode); | |
| 561 | + } | |
| 562 | + } | |
| 399 | 563 | |
| 400 | - </table> | |
| 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 | + }); | |
| 401 | 569 | |
| 402 | - <hr class="king-addons-settings-separator"> | |
| 570 | + // Ensure mode applies for Auto (listener + system state) | |
| 571 | + setThemeMode(themeMode, false); | |
| 403 | 572 | |
| 404 | - <h2 class="king-addons-settings-group-title"><?php esc_html_e('Import Templates', 'king-addons'); ?></h2> | |
| 405 | - <table class="form-table"> | |
| 406 | - <tr> | |
| 407 | - <th scope="row"> | |
| 408 | - <label for="king_addons_improve_import_performance"><?php echo esc_html__('Improve import on low-performance servers', 'king-addons'); ?></label> | |
| 409 | - </th> | |
| 410 | - <td> | |
| 411 | - <input | |
| 412 | - type="checkbox" | |
| 413 | - name="king_addons_improve_import_performance" | |
| 414 | - id="king_addons_improve_import_performance" | |
| 415 | - value="1" | |
| 416 | - <?php checked($improve_import_performance, '1'); ?> | |
| 417 | - > | |
| 418 | - <p class="description"> | |
| 419 | - <?php echo esc_html__('Enable this to apply optimizations like increased PHP execution time limits and disabling intermediate image generation during template import. Recommended for servers with limited resources. Enabled by default.', 'king-addons'); ?> | |
| 420 | - </p> | |
| 421 | - </td> | |
| 422 | - </tr> | |
| 423 | - <?php if (function_exists('king_addons_freemius') && king_addons_freemius()->can_use_premium_code()) : ?> | |
| 424 | - <tr> | |
| 425 | - <th scope="row"> | |
| 426 | - <label for="king_addons_disable_template_catalog_button"><?php echo esc_html__('Disable Template Catalog Button in Elementor Editor', 'king-addons'); ?> | |
| 427 | - <span class="king-addons-premium-badge"><?php echo esc_html__('PREMIUM', 'king-addons'); ?></span> | |
| 428 | - </label> | |
| 429 | - </th> | |
| 430 | - <td> | |
| 431 | - <input | |
| 432 | - type="checkbox" | |
| 433 | - name="king_addons_disable_template_catalog_button" | |
| 434 | - id="king_addons_disable_template_catalog_button" | |
| 435 | - value="1" | |
| 436 | - <?php checked($disable_template_catalog_button, '1'); ?> | |
| 437 | - > | |
| 438 | - <p class="description"> | |
| 439 | - <?php echo esc_html__('Check this to hide the "Start with a Template" button that appears in the Elementor editor. This is useful if you prefer a cleaner editing interface without template suggestions.', 'king-addons'); ?> | |
| 440 | - </p> | |
| 441 | - </td> | |
| 442 | - </tr> | |
| 443 | - <?php endif; ?> | |
| 444 | - </table> | |
| 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 | + }); | |
| 445 | 581 | |
| 446 | - </div> | |
| 447 | - <div class="kng-btn-submit-wrap"> | |
| 448 | - <button type="submit" name="king_addons_settings_submit_settings" id="submit" class="kng-btn-submit" | |
| 449 | - value="submit"><?php echo esc_html__('SAVE SETTINGS', 'king-addons'); ?></button> | |
| 450 | - </div> | |
| 451 | - </form> | |
| 452 | - </div> | |
| 453 | -</div> | |
| 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> | |
