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

[FIX] Resolve toggle switch functionality in UI enhancements

Browse Source
This commit is contained in:
Marcus Quinn
2025-04-08 01:25:26 +01:00
parent b5aeeaf2c4
commit 478be700fc
2 changed files with 76 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
admin/css/wp-allstars-ui-enhancements.css
View File

@ -208,13 +208,17 @@
margin-right: 8px; margin-right: 8px;
} }
.wp-toggle-switch input { .wp-toggle-switch input[type="checkbox"] {
opacity: 0; opacity: 0;
width: 0; width: 100%;
height: 0; height: 100%;
position: absolute; position: absolute;
z-index: 1; z-index: 2;
cursor: pointer; cursor: pointer;
margin: 0;
padding: 0;
top: 0;
left: 0;
} }
.wp-toggle-slider { .wp-toggle-slider {
@ -227,6 +231,7 @@
background-color: #ccc; background-color: #ccc;
transition: .3s; transition: .3s;
border-radius: 34px; border-radius: 34px;
z-index: 1;
} }
.wp-toggle-slider:before { .wp-toggle-slider:before {
@ -262,7 +267,6 @@ input:checked + .wp-toggle-slider:before {
.wp-allstars-enhanced-ui .wp-toggle-slider { .wp-allstars-enhanced-ui .wp-toggle-slider {
border-radius: 24px; border-radius: 24px;
background-color: #ccc; background-color: #ccc;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
} }
.wp-allstars-enhanced-ui .wp-toggle-slider:before { .wp-allstars-enhanced-ui .wp-toggle-slider:before {

116
includes/class-wp-allstars-ui-enhancements.php
View File

@ -103,11 +103,27 @@ class WP_Allstars_UI_Enhancements {
return; return;
} }
// Get the nonce value
$nonce = wp_create_nonce('wp-allstars-nonce');
?> ?>
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
// Re-bind toggle switch handlers to ensure they work with enhanced UI // Make sure the wpAllstars object is available
$('.wp-toggle-switch input[type="checkbox"]').off('change').on('change', function() { if (typeof wpAllstars === 'undefined') {
window.wpAllstars = {
ajaxurl: '<?php echo esc_url(admin_url('admin-ajax.php')); ?>',
nonce: '<?php echo esc_js($nonce); ?>'
};
}
// Remove any existing handlers first to prevent duplicates
$('.wp-toggle-switch input[type="checkbox"]').off('change');
$('.wp-allstars-toggle-header').off('click');
// Re-bind toggle switch handlers
$('.wp-toggle-switch input[type="checkbox"]').on('change', function() {
console.log('Toggle switch changed:', this.id);
var $this = $(this); var $this = $(this);
var option = $this.attr('id'); var option = $this.attr('id');
var value = $this.is(':checked') ? 1 : 0; var value = $this.is(':checked') ? 1 : 0;
@ -118,10 +134,10 @@ class WP_Allstars_UI_Enhancements {
} }
// Show update notification // Show update notification
var $notification = $this.closest('label').find('.wp-setting-notification'); var $notification = $this.closest('.wp-setting-left').find('.wp-setting-notification');
if ($notification.length === 0) { if ($notification.length === 0) {
$notification = $('<span class="wp-setting-notification">Saving...</span>'); $notification = $('<span class="wp-setting-notification">Saving...</span>');
$this.closest('label').append($notification); $this.closest('.wp-setting-left').append($notification);
} else { } else {
$notification.text('Saving...').removeClass('error').show(); $notification.text('Saving...').removeClass('error').show();
} }
@ -155,7 +171,7 @@ class WP_Allstars_UI_Enhancements {
}); });
// Re-bind expandable panels // Re-bind expandable panels
$('.wp-allstars-toggle-header').off('click').on('click', function() { $('.wp-allstars-toggle-header').on('click', function() {
var $this = $(this); var $this = $(this);
var $settings = $this.next('.wp-allstars-toggle-settings'); var $settings = $this.next('.wp-allstars-toggle-settings');
var isExpanded = $this.attr('aria-expanded') === 'true'; var isExpanded = $this.attr('aria-expanded') === 'true';
@ -168,58 +184,60 @@ class WP_Allstars_UI_Enhancements {
}); });
// Special handling for admin color scheme toggle if exists // Special handling for admin color scheme toggle if exists
var $colorToggle = $('#wp_allstars_admin_color_scheme'); if (typeof wpAllstarsColors !== 'undefined') {
if ($colorToggle.length && typeof wpAllstarsColors !== 'undefined') { var $colorToggle = $('#wp_allstars_admin_color_scheme');
$colorToggle.off('change').on('change', function() { if ($colorToggle.length) {
var isModern = $(this).is(':checked'); $colorToggle.off('change').on('change', function() {
var isModern = $(this).is(':checked');
// Show saving notification
var $notification = $(this).closest('label').find('.wp-setting-notification'); // Show saving notification
if ($notification.length === 0) { var $notification = $colorToggle.closest('.wp-setting-left').find('.wp-setting-notification');
$notification = $('<span class="wp-setting-notification">Saving...</span>'); if ($notification.length === 0) {
$(this).closest('label').append($notification); $notification = $('<span class="wp-setting-notification">Saving...</span>');
} else { $colorToggle.closest('.wp-setting-left').append($notification);
$notification.text('Saving...').removeClass('error').show(); } else {
} $notification.text('Saving...').removeClass('error').show();
}
// Save the option via AJAX
$.ajax({ // Save the option via AJAX
url: wpAllstarsColors.ajaxurl, $.ajax({
type: 'POST', url: wpAllstarsColors.ajaxurl,
data: { type: 'POST',
action: 'wp_allstars_update_color_scheme', data: {
nonce: wpAllstarsColors.nonce, action: 'wp_allstars_update_color_scheme',
is_modern: isModern ? 1 : 0 nonce: wpAllstarsColors.nonce,
}, is_modern: isModern ? 1 : 0
success: function(response) { },
if (response.success) { success: function(response) {
if (isModern) { if (response.success) {
$('body').addClass('wp-allstars-modern-admin'); if (isModern) {
$('body').addClass('wp-allstars-modern-admin');
} else {
$('body').removeClass('wp-allstars-modern-admin');
}
$notification.text('Saved!');
setTimeout(function() {
$notification.fadeOut(300);
}, 2000);
} else { } else {
$('body').removeClass('wp-allstars-modern-admin'); $notification.text('Error').addClass('error');
console.error('Error updating color scheme:', response.data);
// Revert toggle
$colorToggle.prop('checked', !isModern);
} }
},
$notification.text('Saved!'); error: function(xhr, status, error) {
setTimeout(function() {
$notification.fadeOut(300);
}, 2000);
} else {
$notification.text('Error').addClass('error'); $notification.text('Error').addClass('error');
console.error('Error updating color scheme:', response.data); console.error('AJAX error:', error);
// Revert toggle // Revert toggle
$colorToggle.prop('checked', !isModern); $colorToggle.prop('checked', !isModern);
} }
}, });
error: function(xhr, status, error) {
$notification.text('Error').addClass('error');
console.error('AJAX error:', error);
// Revert toggle
$colorToggle.prop('checked', !isModern);
}
}); });
}); }
} }
}); });
</script> </script>