diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css index 2b81338..751dc8f 100644 --- a/admin/css/wp-allstars-admin.css +++ b/admin/css/wp-allstars-admin.css @@ -83,7 +83,7 @@ font-weight: 600; } -/* Toggle Switches */ +/* Base Toggle Switch Component */ .wp-toggle-switch { position: relative; display: inline-block; @@ -135,25 +135,48 @@ input:checked + .wp-toggle-slider:before { transform: translateX(16px); } -/* Settings Container */ -.wpa-settings-container { - padding: 0; - max-width: none; +/* Simple Setting Row (No Panel) */ +.wp-setting-row { + display: flex; + align-items: center; + padding: 15px; + background: #fff; + border: 1px solid #ccc; + border-radius: 8px; + margin-bottom: 15px; +} + +.wp-setting-row:hover { + border-color: #2271b1; + box-shadow: 0 2px 6px rgba(0,0,0,0.15); +} + +.wp-setting-content { + flex-grow: 1; + margin-left: 10px; +} + +.wp-setting-title { + font-size: 14px; + font-weight: 600; + color: #1d2327; margin: 0; + line-height: 1.4; } -.wpa-settings-content { - margin-top: 25px; - padding: 0 20px; +.wp-setting-description { + margin: 4px 0 0; + color: #50575e; + font-size: 13px; + line-height: 1.5; } -/* Toggle Sections */ +/* Expandable Panel Component */ .wp-allstars-toggle { background: #fff; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 15px; - position: relative; } .wp-allstars-toggle:hover { diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js index 53b24b8..e4eb622 100644 --- a/admin/js/wp-allstars-admin.js +++ b/admin/js/wp-allstars-admin.js @@ -16,13 +16,17 @@ jQuery(document).ready(function($) { }, 2000); } - // Handle all settings changes + // Handle option updates function updateOption(option, value) { - return $.post(wpAllstars.ajaxurl, { - action: 'wp_allstars_update_option', - option: option, - value: value, - nonce: wpAllstars.nonce + return $.ajax({ + url: ajaxurl, + type: 'POST', + data: { + action: 'wp_allstars_update_option', + option: option, + value: value, + _wpnonce: wpAllstars.nonce + } }).then(function(response) { if (!response.success) { throw new Error(response.data || 'Error saving setting'); @@ -31,80 +35,79 @@ jQuery(document).ready(function($) { }); } - // Handle toggle switch clicks - $('.wp-toggle-switch').on('click', function(e) { - e.stopPropagation(); - var $checkbox = $(this).find('input[type="checkbox"]'); - var isChecked = $checkbox.is(':checked'); - - $checkbox.prop('checked', !isChecked).trigger('change'); - }); + // Initialize all toggle switches + function initToggleSwitches() { + // Handle toggle switch clicks + $('.wp-toggle-switch').on('click', function(e) { + e.stopPropagation(); + var $checkbox = $(this).find('input[type="checkbox"]'); + var isChecked = $checkbox.is(':checked'); + $checkbox.prop('checked', !isChecked).trigger('change'); + }); - // Handle checkbox changes - $('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) { - e.stopPropagation(); - var $input = $(this); - var option = $input.attr('name'); - var value = $input.is(':checked') ? 1 : 0; - - $.ajax({ - url: ajaxurl, - type: 'POST', - data: { - action: 'wp_allstars_update_option', - option: option, - value: value, - _wpnonce: wpAllstars.nonce - }, - success: function(response) { - if (response.success) { + // Handle checkbox changes + $('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) { + e.stopPropagation(); + var $input = $(this); + var option = $input.attr('name'); + var value = $input.is(':checked') ? 1 : 0; + + updateOption(option, value) + .then(function() { showNotification('Saved'); - } else { + }) + .catch(function() { showNotification('Error saving settings', true); - } - }, - error: function() { - showNotification('Error saving settings', true); + }); + }); + } + + // Initialize expandable panels + function initExpandablePanels() { + // Handle panel toggle + $('.wp-allstars-toggle-header').on('click', function(e) { + if (!$(e.target).closest('.wp-toggle-switch').length) { + var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); + var isExpanded = $(this).attr('aria-expanded') === 'true'; + + $(this).attr('aria-expanded', !isExpanded); + $settings.slideToggle(); } }); - }); - // Handle panel toggle - $('.wp-allstars-toggle-header').on('click', function(e) { - if (!$(e.target).closest('.wp-toggle-switch').length) { + // Set initial panel states + $('.wp-allstars-toggle-header').each(function() { var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); var isExpanded = $(this).attr('aria-expanded') === 'true'; - $(this).attr('aria-expanded', !isExpanded); - $settings.slideToggle(); - } - }); + if (!isExpanded) { + $settings.hide(); + } + }); + } - // Set initial state - $('.wp-allstars-toggle-header').each(function() { - var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); - var isExpanded = $(this).attr('aria-expanded') === 'true'; - - if (!isExpanded) { - $settings.hide(); - } - }); + // Initialize text inputs + function initTextInputs() { + $('.wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea').on('change', function() { + var $input = $(this); + var option = $input.attr('name'); + var value = $input.val(); + + updateOption(option, value) + .then(function() { + showNotification('Setting saved'); + }) + .catch(function(error) { + console.error('Error:', error); + showNotification('Error saving setting', true); + }); + }); + } - // Handle text, number, and textarea inputs - $('.wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea').on('change', function() { - var $input = $(this); - var option = $input.attr('name'); - var value = $input.val(); - - updateOption(option, value) - .then(function() { - showNotification('Setting saved'); - }) - .catch(function(error) { - console.error('Error:', error); - showNotification('Error saving setting', true); - }); - }); + // Initialize all components + initToggleSwitches(); + initExpandablePanels(); + initTextInputs(); // Handle form submission $('form').on('submit', function() { diff --git a/admin/settings.php b/admin/settings.php index a8a8825..05cdf91 100644 --- a/admin/settings.php +++ b/admin/settings.php @@ -672,8 +672,8 @@ function wp_allstars_settings_page() { - + +

@@ -957,13 +957,54 @@ function wp_allstars_settings_page() {

- + +
+
+ + /> + +
+
+

+

+
+
- + +
+ +
+ +
+