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

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

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