From 478be700fc707c1bbf42c740300b879166d2e891 Mon Sep 17 00:00:00 2001
From: marcusquinn <6428977+marcusquinn@users.noreply.github.com>
Date: Tue, 8 Apr 2025 01:25:26 +0100
Subject: [PATCH] [FIX] Resolve toggle switch functionality in UI enhancements

---
 admin/css/wp-allstars-ui-enhancements.css     |  14 ++-
 .../class-wp-allstars-ui-enhancements.php     | 116 ++++++++++--------
 2 files changed, 76 insertions(+), 54 deletions(-)

diff --git a/admin/css/wp-allstars-ui-enhancements.css b/admin/css/wp-allstars-ui-enhancements.css
index 9859fb2..abfd71a 100644
--- a/admin/css/wp-allstars-ui-enhancements.css
+++ b/admin/css/wp-allstars-ui-enhancements.css
@@ -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 {
diff --git a/includes/class-wp-allstars-ui-enhancements.php b/includes/class-wp-allstars-ui-enhancements.php
index e660eb1..baed8b9 100644
--- a/includes/class-wp-allstars-ui-enhancements.php
+++ b/includes/class-wp-allstars-ui-enhancements.php
@@ -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');
-                    
-                    // 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();
-                    }
-                    
-                    // 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');
+            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 = $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');
+                                    } 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);
+                                    
+                                    // Revert toggle
+                                    $colorToggle.prop('checked', !isModern);
                                 }
-                                
-                                $notification.text('Saved!');
-                                setTimeout(function() {
-                                    $notification.fadeOut(300);
-                                }, 2000);
-                            } else {
+                            },
+                            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>