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

Fix admin color scheme toggle to refresh page and show success notification

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-25 03:18:53 +00:00
parent ee5881ab57
commit 39c8560f1e
1 changed files with 50 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
includes/class-wp-allstars-admin-colors.php
View File

@ -45,14 +45,41 @@ class WP_Allstars_Admin_Colors {
// Set up hooks // Set up hooks
add_action('admin_init', array($this, 'set_admin_color_scheme')); add_action('admin_init', array($this, 'set_admin_color_scheme'));
add_action('wp_ajax_wp_allstars_update_option', array($this, 'handle_color_scheme_update'), 5); add_action('wp_ajax_wp_allstars_update_option', array($this, 'handle_color_scheme_update'), 5);
add_action('wp_ajax_wp_allstars_get_admin_colors', array($this, 'get_admin_colors_ajax'));
// Add script to handle dynamic color changes // Add script to handle the toggle
add_action('admin_enqueue_scripts', array($this, 'enqueue_color_scripts')); add_action('admin_enqueue_scripts', array($this, 'enqueue_color_scripts'));
// Add admin notice for setting saved feedback
add_action('admin_notices', array($this, 'show_saved_notice'));
} }
/** /**
* Enqueue JavaScript to handle dynamic color scheme changes * Show saved notice when color scheme has been updated
*/
public function show_saved_notice() {
// Only show on our settings page
$screen = get_current_screen();
if (!$screen || strpos($screen->id, 'wp-allstars') === false) {
return;
}
// Check if we have a transient indicating a recent save
$user_id = get_current_user_id();
$transient_name = 'wp_allstars_colors_updated_' . $user_id;
if (get_transient($transient_name)) {
// Show the notice
echo '<div class="notice notice-success is-dismissible"><p>' .
esc_html__('Color scheme setting saved successfully.', 'wp-allstars') .
'</p></div>';
// Delete the transient so it only shows once
delete_transient($transient_name);
}
}
/**
* Enqueue JavaScript to handle toggle and page refresh
*/ */
public function enqueue_color_scripts($hook) { public function enqueue_color_scripts($hook) {
// Only load on the plugin settings page // Only load on the plugin settings page
@ -60,157 +87,29 @@ class WP_Allstars_Admin_Colors {
return; return;
} }
// Get the available color schemes // Add inline JS for handling toggle and refresh
global $_wp_admin_css_colors;
// Get URLs for the fresh and modern schemes
$fresh_url = '';
$modern_url = '';
if (isset($_wp_admin_css_colors['fresh'])) {
$fresh_url = $_wp_admin_css_colors['fresh']->url;
}
if (isset($_wp_admin_css_colors['modern'])) {
$modern_url = $_wp_admin_css_colors['modern']->url;
}
// Add inline JS for handling dynamic color scheme changes
$color_js = ' $color_js = '
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
// Store color scheme URLs for direct access
var colorSchemes = {
"fresh": "' . esc_js($fresh_url) . '",
"modern": "' . esc_js($modern_url) . '"
};
// Special handler for admin color scheme toggle // Special handler for admin color scheme toggle
$("#wp_allstars_simple_setting").on("change", function() { $("#wp_allstars_simple_setting").on("change", function() {
var isEnabled = $(this).is(":checked"); var isEnabled = $(this).is(":checked");
// Apply the color scheme dynamically // Save setting via AJAX and refresh page
if (isEnabled) {
switchColorScheme("modern");
} else {
switchColorScheme("fresh");
}
});
// Function to switch admin color scheme without page reload
function switchColorScheme(newScheme) {
console.log("Switching to color scheme:", newScheme);
// Exit if we dont have URL for this scheme
if (!colorSchemes[newScheme]) {
console.error("No URL found for color scheme:", newScheme);
return;
}
try {
// 1. Update the body class first
var $body = $("body");
$body.removeClass(function(index, className) {
return (className.match(/(^|\s)admin-color-\S+/g) || []).join(" ");
});
$body.addClass("admin-color-" + newScheme);
// 2. Directly replace color stylesheet URLs
var baseUrl = colorSchemes[newScheme];
if (!baseUrl) return;
// Force cache-busting
var cacheBuster = "?_=" + new Date().getTime();
// Replace all stylesheets with colors in their URL
var $adminColorLinks = $("link[href*=\'colors-\'], link[href*=\'/colors.\'], link#colors, link#colors-css, link#admin-colors-css");
// Log what we found
console.log("Found admin color links:", $adminColorLinks.length);
$adminColorLinks.each(function() {
console.log(" - Link:", $(this).attr("href"));
});
// For each stylesheet, create and inject a new one with the correct scheme
$adminColorLinks.each(function() {
var $oldLink = $(this);
var oldHref = $oldLink.attr("href");
var id = $oldLink.attr("id") || "";
// Skip if not a stylesheet
if (!oldHref || $oldLink.attr("rel") !== "stylesheet") return;
// Determine what file is being loaded
var fileType = "";
if (oldHref.indexOf("colors-rtl") !== -1) {
fileType = "colors-rtl.min.css";
} else if (oldHref.indexOf("colors.min") !== -1) {
fileType = "colors.min.css";
} else {
fileType = "colors.css";
}
// Create the new URL
var newUrl = baseUrl + fileType + cacheBuster;
console.log("Replacing", oldHref, "with", newUrl);
// Create a new stylesheet element
var $newLink = $("<link />", {
rel: "stylesheet",
type: "text/css",
id: id,
href: newUrl
});
// Insert new stylesheet and remove old one
$oldLink.after($newLink);
setTimeout(function() {
$oldLink.remove();
}, 100);
});
// If we found no stylesheets, inject the main one
if ($adminColorLinks.length === 0) {
console.log("No admin color stylesheets found, injecting new one");
$("head").append(
$("<link />", {
rel: "stylesheet",
type: "text/css",
id: "colors-css",
href: baseUrl + "colors.min.css" + cacheBuster
})
);
}
// 3. Save the setting via AJAX
saveColorScheme(newScheme);
} catch (e) {
console.error("Error switching color scheme:", e);
}
}
function saveColorScheme(scheme) {
// AJAX request to save the color scheme setting
$.ajax({ $.ajax({
url: ajaxurl, url: ajaxurl,
type: "POST", type: "POST",
data: { data: {
action: "wp_allstars_update_admin_colors", action: "wp_allstars_update_option",
scheme: scheme, option: "wp_allstars_simple_setting",
_wpnonce: wpAllstars.nonce value: isEnabled ? 1 : 0,
nonce: "' . wp_create_nonce('wp-allstars-nonce') . '"
}, },
success: function(response) { success: function() {
if (response.success) { // Refresh the page after successful update
console.log("Color scheme updated successfully"); window.location.reload();
} else {
console.error("Error updating color scheme:", response);
}
},
error: function(xhr, status, error) {
console.error("AJAX error:", error);
} }
}); });
} });
}); });
'; ';
@ -239,14 +138,16 @@ class WP_Allstars_Admin_Colors {
/** /**
* Handle color scheme update via AJAX * Handle color scheme update via AJAX
* Runs early to apply the color scheme change before the general option update handler
*/ */
public function handle_color_scheme_update() { public function handle_color_scheme_update() {
// Check for required params // Check for required params
if (!isset($_POST['option']) || !isset($_POST['value'])) { if (!isset($_POST['option']) || !isset($_POST['value']) || !isset($_POST['nonce'])) {
return; return;
} }
// Verify nonce
check_ajax_referer('wp-allstars-nonce', 'nonce');
// Only process our specific option // Only process our specific option
if ($_POST['option'] !== $this->option_name) { if ($_POST['option'] !== $this->option_name) {
return; return;
@ -264,52 +165,14 @@ class WP_Allstars_Admin_Colors {
// Update the user's color scheme // Update the user's color scheme
update_user_meta($user_id, 'admin_color', $scheme); update_user_meta($user_id, 'admin_color', $scheme);
}
/** // Update the option
* AJAX handler to update and get admin color schemes - similar to WordPress core update_option($this->option_name, $value ? 1 : 0);
*/
public function get_admin_colors_ajax() {
// Register handler for our new AJAX action
add_action('wp_ajax_wp_allstars_update_admin_colors', array($this, 'update_admin_colors_ajax'));
}
/** // Set a transient to show the saved notice
* AJAX handler to update admin color scheme and return class names set_transient('wp_allstars_colors_updated_' . $user_id, true, 30);
*/
public function update_admin_colors_ajax() {
check_ajax_referer('wp-allstars-nonce', '_wpnonce');
$user_id = get_current_user_id(); // Return success
if (!$user_id) { wp_send_json_success();
wp_send_json_error('Not logged in');
}
// Get the old scheme
$old_scheme = get_user_meta($user_id, 'admin_color', true);
if (!$old_scheme) {
$old_scheme = 'fresh'; // Default WordPress admin color scheme
}
// Get the new scheme
$scheme = isset($_POST['scheme']) ? sanitize_text_field($_POST['scheme']) : 'fresh';
// Validate scheme
global $_wp_admin_css_colors;
if (!isset($_wp_admin_css_colors[$scheme])) {
wp_send_json_error('Invalid color scheme');
}
// Update user meta
update_user_meta($user_id, 'admin_color', $scheme);
// Also update our plugin option
update_option($this->option_name, $scheme === $this->modern_scheme ? 1 : 0);
// Return success with old and new scheme names for CSS class updates
wp_send_json_success(array(
'previousScheme' => 'admin-color-' . $old_scheme,
'currentScheme' => 'admin-color-' . $scheme
));
} }
} }