[FUNCTIONAL] Add Basic Admin UI Enhancements feature with toggle switch fixes

admin/css/wp-allstars-ui-enhancements.css

@@ -198,6 +198,62 @@
 /* 
  * Enhanced Toggle Styles 
  */
+/* Base toggle styles that apply even without enhanced UI */
+.wp-toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    vertical-align: middle;
+    margin-right: 8px;
+}
+
+.wp-toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+    z-index: 1;
+    cursor: pointer;
+}
+
+.wp-toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .3s;
+    border-radius: 34px;
+}
+
+.wp-toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    transition: .3s;
+    border-radius: 50%;
+}
+
+input:checked + .wp-toggle-slider {
+    background-color: #2271b1;
+}
+
+input:focus + .wp-toggle-slider {
+    box-shadow: 0 0 1px #2271b1;
+}
+
+input:checked + .wp-toggle-slider:before {
+    transform: translateX(20px);
+}
+
+/* Enhanced UI specific toggle styles - only apply additional styling */
 .wp-allstars-enhanced-ui .wp-toggle-switch {
     width: 46px;
     height: 24px;
@@ -215,7 +271,6 @@
     left: 3px;
     bottom: 3px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
 .wp-allstars-enhanced-ui input:checked + .wp-toggle-slider {

includes/class-wp-allstars-ui-enhancements.php

@@ -27,6 +27,9 @@ class WP_Allstars_UI_Enhancements {
         
         // Initialize UI components
         $this->init_components();
+        
+        // Ensure toggle functionality works
+        add_action('admin_footer', array($this, 'ensure_toggle_functionality'), 99);
     }
     
     /**
@@ -90,6 +93,139 @@ class WP_Allstars_UI_Enhancements {
         add_action('admin_footer', array($this, 'render_notification_template'));
     }
     
+    /**
+     * Ensure toggle switch functionality
+     * This adds JS to reinitialize toggle switch handlers after our enhanced UI is applied
+     */
+    public function ensure_toggle_functionality() {
+        // Only on WP Allstars pages
+        if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) {
+            return;
+        }
+        
+        ?>
+        <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() {
+                var $this = $(this);
+                var option = $this.attr('id');
+                var value = $this.is(':checked') ? 1 : 0;
+                
+                // Don't handle the admin color scheme toggle here - it has its own handler
+                if (option === 'wp_allstars_admin_color_scheme') {
+                    return;
+                }
+                
+                // Show update 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: wpAllstars.ajaxurl,
+                    type: 'POST',
+                    data: {
+                        action: 'wp_allstars_update_option',
+                        nonce: wpAllstars.nonce,
+                        option: option,
+                        value: value
+                    },
+                    success: function(response) {
+                        if (response.success) {
+                            $notification.text('Saved!');
+                            setTimeout(function() {
+                                $notification.fadeOut(300);
+                            }, 2000);
+                        } else {
+                            $notification.text('Error').addClass('error');
+                            console.error('Error saving option:', response.data);
+                        }
+                    },
+                    error: function(xhr, status, error) {
+                        $notification.text('Error').addClass('error');
+                        console.error('AJAX error:', error);
+                    }
+                });
+            });
+            
+            // Re-bind expandable panels
+            $('.wp-allstars-toggle-header').off('click').on('click', function() {
+                var $this = $(this);
+                var $settings = $this.next('.wp-allstars-toggle-settings');
+                var isExpanded = $this.attr('aria-expanded') === 'true';
+                
+                // Toggle aria-expanded attribute
+                $this.attr('aria-expanded', !isExpanded);
+                
+                // Toggle settings visibility
+                $settings.slideToggle(200);
+            });
+            
+            // 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');
+                                } else {
+                                    $('body').removeClass('wp-allstars-modern-admin');
+                                }
+                                
+                                $notification.text('Saved!');
+                                setTimeout(function() {
+                                    $notification.fadeOut(300);
+                                }, 2000);
+                            } else {
+                                $notification.text('Error').addClass('error');
+                                console.error('Error updating color scheme:', response.data);
+                                
+                                // 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>
+        <?php
+    }
+    
     /**
      * Render accordion template
      */