Fix toggle switches and expandable panels

This commit is contained in:
Marcus Quinn
2025-03-16 04:33:15 +00:00
parent 12d069e5cd
commit 0985f31014

View File

@ -29,9 +29,9 @@ jQuery(document).ready(function($) {
url: ajaxurl, url: ajaxurl,
type: 'POST', type: 'POST',
data: { data: {
action: 'wp_allstars_update_option', action: 'wp_allstars_update_option',
option: option, option: option,
value: value, value: value,
_wpnonce: wpAllstars.nonce _wpnonce: wpAllstars.nonce
} }
}).then(function(response) { }).then(function(response) {
@ -42,26 +42,55 @@ jQuery(document).ready(function($) {
}); });
} }
// Toggle settings panel // Handle toggle switch clicks
$('.wp-allstars-toggle-switch').on('click', function(e) { $('.wp-toggle-switch').on('click', function(e) {
e.stopPropagation(); e.stopPropagation();
$(this).closest('.wp-allstars-toggle-main').find('.wp-allstars-toggle-settings').slideToggle(200); var $checkbox = $(this).find('input[type="checkbox"]');
$(this).closest('.wp-allstars-toggle-main').toggleClass('expanded'); var isChecked = $checkbox.is(':checked');
$checkbox.prop('checked', !isChecked).trigger('change');
}); });
// Handle click on the main toggle area (but not on the switch itself) // Prevent label clicks from toggling the checkbox directly
$('.wp-allstars-toggle-main').on('click', function(e) { $('.wp-setting-label, .wp-allstars-toggle-left label').on('click', function(e) {
if (!$(e.target).hasClass('wp-allstars-toggle-switch') && e.stopPropagation();
!$(e.target).closest('.wp-allstars-toggle-switch').length && });
!$(e.target).closest('.wp-allstars-toggle-label').length) {
$(this).find('.wp-allstars-toggle-settings').slideToggle(200); // Handle checkbox changes
$(this).toggleClass('expanded'); $('.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', $input.closest('.wp-setting-left, .wp-allstars-toggle-left'));
})
.catch(function() {
showNotification('Error saving settings', $input.closest('.wp-setting-left, .wp-allstars-toggle-left'), true);
});
});
// Toggle expandable panels
$('.wp-allstars-toggle-header').on('click', function(e) {
if (!$(e.target).closest('.wp-toggle-switch').length &&
!$(e.target).closest('label').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(200);
} }
}); });
// Prevent toggle when clicking on the label // Set initial panel states
$('.wp-allstars-toggle-label').on('click', function(e) { $('.wp-allstars-toggle-header').each(function() {
e.stopPropagation(); var $settings = $(this).closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
var isExpanded = $(this).attr('aria-expanded') === 'true';
if (!isExpanded) {
$settings.hide();
}
}); });
// Remove JavaScript-based tab switching - let the native WordPress tab links work // Remove JavaScript-based tab switching - let the native WordPress tab links work