marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor settings components for better reusability

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 03:15:17 +00:00
parent 71564d0444
commit 15c3ada0fa
3 changed files with 150 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
admin/css/wp-allstars-admin.css
View File

@ -83,7 +83,7 @@
font-weight: 600; font-weight: 600;
} }
/* Toggle Switches */ /* Base Toggle Switch Component */
.wp-toggle-switch { .wp-toggle-switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -135,25 +135,48 @@ input:checked + .wp-toggle-slider:before {
transform: translateX(16px); transform: translateX(16px);
} }
/* Settings Container */ /* Simple Setting Row (No Panel) */
.wpa-settings-container { .wp-setting-row {
padding: 0; display: flex;
max-width: none; 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; margin: 0;
line-height: 1.4;
} }
.wpa-settings-content { .wp-setting-description {
margin-top: 25px; margin: 4px 0 0;
padding: 0 20px; color: #50575e;
font-size: 13px;
line-height: 1.5;
} }
/* Toggle Sections */ /* Expandable Panel Component */
.wp-allstars-toggle { .wp-allstars-toggle {
background: #fff; background: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 8px; border-radius: 8px;
margin-bottom: 15px; margin-bottom: 15px;
position: relative;
} }
.wp-allstars-toggle:hover { .wp-allstars-toggle:hover {

141
admin/js/wp-allstars-admin.js
View File

@ -16,13 +16,17 @@ jQuery(document).ready(function($) {
}, 2000); }, 2000);
} }
// Handle all settings changes // Handle option updates
function updateOption(option, value) { function updateOption(option, value) {
return $.post(wpAllstars.ajaxurl, { return $.ajax({
action: 'wp_allstars_update_option', url: ajaxurl,
option: option, type: 'POST',
value: value, data: {
nonce: wpAllstars.nonce action: 'wp_allstars_update_option',
option: option,
value: value,
_wpnonce: wpAllstars.nonce
}
}).then(function(response) { }).then(function(response) {
if (!response.success) { if (!response.success) {
throw new Error(response.data || 'Error saving setting'); throw new Error(response.data || 'Error saving setting');
@ -31,80 +35,79 @@ jQuery(document).ready(function($) {
}); });
} }
// Handle toggle switch clicks // Initialize all toggle switches
$('.wp-toggle-switch').on('click', function(e) { function initToggleSwitches() {
e.stopPropagation(); // Handle toggle switch clicks
var $checkbox = $(this).find('input[type="checkbox"]'); $('.wp-toggle-switch').on('click', function(e) {
var isChecked = $checkbox.is(':checked'); e.stopPropagation();
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop('checked', !isChecked).trigger('change'); var isChecked = $checkbox.is(':checked');
}); $checkbox.prop('checked', !isChecked).trigger('change');
});
// Handle checkbox changes // Handle checkbox changes
$('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) { $('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) {
e.stopPropagation(); e.stopPropagation();
var $input = $(this); var $input = $(this);
var option = $input.attr('name'); var option = $input.attr('name');
var value = $input.is(':checked') ? 1 : 0; var value = $input.is(':checked') ? 1 : 0;
$.ajax({ updateOption(option, value)
url: ajaxurl, .then(function() {
type: 'POST',
data: {
action: 'wp_allstars_update_option',
option: option,
value: value,
_wpnonce: wpAllstars.nonce
},
success: function(response) {
if (response.success) {
showNotification('Saved'); showNotification('Saved');
} else { })
.catch(function() {
showNotification('Error saving settings', true); 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 // Set initial panel states
$('.wp-allstars-toggle-header').on('click', function(e) { $('.wp-allstars-toggle-header').each(function() {
if (!$(e.target).closest('.wp-toggle-switch').length) {
var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
var isExpanded = $(this).attr('aria-expanded') === 'true'; var isExpanded = $(this).attr('aria-expanded') === 'true';
$(this).attr('aria-expanded', !isExpanded); if (!isExpanded) {
$settings.slideToggle(); $settings.hide();
} }
}); });
}
// Set initial state // Initialize text inputs
$('.wp-allstars-toggle-header').each(function() { function initTextInputs() {
var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); $('.wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea').on('change', function() {
var isExpanded = $(this).attr('aria-expanded') === 'true'; var $input = $(this);
var option = $input.attr('name');
if (!isExpanded) { var value = $input.val();
$settings.hide();
} 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 // Initialize all components
$('.wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea').on('change', function() { initToggleSwitches();
var $input = $(this); initExpandablePanels();
var option = $input.attr('name'); initTextInputs();
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 form submission // Handle form submission
$('form').on('submit', function() { $('form').on('submit', function() {

49
admin/settings.php
View File

@ -672,8 +672,8 @@ function wp_allstars_settings_page() {
</div> </div>
<label for="wp_allstars_auto_upload_images"> <label for="wp_allstars_auto_upload_images">
<?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?> <?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?>
</label> </label>
</div> </div>
</div> </div>
<p class="description"> <p class="description">
<?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?> <?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>
@ -957,13 +957,54 @@ function wp_allstars_settings_page() {
<?php elseif ($active_tab == 'general'): ?> <?php elseif ($active_tab == 'general'): ?>
<div class="wp-allstars-settings-section"> <div class="wp-allstars-settings-section">
<div class="wp-allstars-settings-grid"> <div class="wp-allstars-settings-grid">
<!-- Lazy load toggle removed --> <!-- Example of a simple toggle setting (no panel) -->
<div class="wp-setting-row">
<div class="wp-toggle-switch">
<input type="checkbox"
id="wp_allstars_simple_setting"
name="wp_allstars_simple_setting"
value="1"
<?php checked(get_option('wp_allstars_simple_setting', false)); ?>
/>
<span class="wp-toggle-slider"></span>
</div>
<div class="wp-setting-content">
<h4 class="wp-setting-title"><?php esc_html_e('Simple Toggle Setting', 'wp-allstars'); ?></h4>
<p class="wp-setting-description"><?php esc_html_e('This is an example of a simple toggle setting without an expandable panel.', 'wp-allstars'); ?></p>
</div>
</div>
</div> </div>
</div> </div>
<?php elseif ($active_tab == 'advanced'): ?> <?php elseif ($active_tab == 'advanced'): ?>
<div class="wp-allstars-settings-section"> <div class="wp-allstars-settings-section">
<div class="wp-allstars-settings-grid"> <div class="wp-allstars-settings-grid">
<!-- Minification toggles removed --> <!-- Example of an expandable panel setting -->
<div class="wp-allstars-toggle">
<div class="wp-allstars-toggle-header" aria-expanded="false">
<div class="wp-allstars-toggle-main">
<div class="wp-allstars-toggle-left">
<div class="wp-toggle-switch">
<input type="checkbox"
id="wp_allstars_auto_upload_images"
name="wp_allstars_auto_upload_images"
value="1"
<?php checked(get_option('wp_allstars_auto_upload_images', false)); ?>
/>
<span class="wp-toggle-slider"></span>
</div>
<label for="wp_allstars_auto_upload_images">
<?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?>
</label>
</div>
</div>
<p class="description">
<?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>
</p>
</div>
<div class="wp-allstars-toggle-settings">
<!-- Additional settings content here -->
</div>
</div>
</div> </div>
</div> </div>
<?php endif; ?> <?php endif; ?>