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 {

34
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,16 +184,17 @@ class WP_Allstars_UI_Enhancements {
}); });
// Special handling for admin color scheme toggle if exists // Special handling for admin color scheme toggle if exists
if (typeof wpAllstarsColors !== 'undefined') {
var $colorToggle = $('#wp_allstars_admin_color_scheme'); var $colorToggle = $('#wp_allstars_admin_color_scheme');
if ($colorToggle.length && typeof wpAllstarsColors !== 'undefined') { if ($colorToggle.length) {
$colorToggle.off('change').on('change', function() { $colorToggle.off('change').on('change', function() {
var isModern = $(this).is(':checked'); var isModern = $(this).is(':checked');
// Show saving notification // Show saving notification
var $notification = $(this).closest('label').find('.wp-setting-notification'); var $notification = $colorToggle.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); $colorToggle.closest('.wp-setting-left').append($notification);
} else { } else {
$notification.text('Saving...').removeClass('error').show(); $notification.text('Saving...').removeClass('error').show();
} }
@ -221,6 +238,7 @@ class WP_Allstars_UI_Enhancements {
}); });
}); });
} }
}
}); });
</script> </script>
<?php <?php