Fix admin color scheme toggle to work consistently in both directions
This commit is contained in:
Marcus Quinn
@ -60,92 +60,136 @@ class WP_Allstars_Admin_Colors {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Get the available color schemes
|
||||||
|
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
|
// 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
|
// Apply the color scheme dynamically
|
||||||
applyAdminColorScheme(isEnabled);
|
if (isEnabled) {
|
||||||
|
switchColorScheme("modern");
|
||||||
|
} else {
|
||||||
|
switchColorScheme("fresh");
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Function to dynamically apply admin color scheme
|
// Function to switch admin color scheme without page reload
|
||||||
function applyAdminColorScheme(enableModern) {
|
function switchColorScheme(newScheme) {
|
||||||
console.log("Applying admin color scheme:", enableModern ? "modern" : "default");
|
console.log("Switching to color scheme:", newScheme);
|
||||||
|
|
||||||
// Define the color schemes
|
// Exit if we dont have URL for this scheme
|
||||||
var scheme = enableModern ? "modern" : "fresh";
|
if (!colorSchemes[newScheme]) {
|
||||||
|
console.error("No URL found for color scheme:", newScheme);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Get all admin color stylesheets currently in the DOM
|
try {
|
||||||
var colorStylesheets = [];
|
// 1. Update the body class first
|
||||||
$("link[href*=\'colors\']").each(function() {
|
var $body = $("body");
|
||||||
var href = $(this).attr("href");
|
$body.removeClass(function(index, className) {
|
||||||
colorStylesheets.push({
|
return (className.match(/(^|\s)admin-color-\S+/g) || []).join(" ");
|
||||||
element: this,
|
|
||||||
href: href
|
|
||||||
});
|
});
|
||||||
});
|
$body.addClass("admin-color-" + newScheme);
|
||||||
|
|
||||||
console.log("Found color stylesheets:", colorStylesheets.length);
|
// 2. Directly replace color stylesheet URLs
|
||||||
|
var baseUrl = colorSchemes[newScheme];
|
||||||
|
if (!baseUrl) return;
|
||||||
|
|
||||||
// Immediately apply color change by forcing stylesheet reload
|
// Force cache-busting
|
||||||
colorStylesheets.forEach(function(sheet) {
|
var cacheBuster = "?_=" + new Date().getTime();
|
||||||
// Create the replacement URL by substituting scheme name
|
|
||||||
var newHref = sheet.href.replace(
|
|
||||||
/\/([^\/]+)\/colors/,
|
|
||||||
"/" + scheme + "/colors"
|
|
||||||
);
|
|
||||||
|
|
||||||
console.log("Replacing stylesheet:", sheet.href, "with", newHref);
|
// 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");
|
||||||
|
|
||||||
// Forcefully reload the stylesheet by adding timestamp
|
// Log what we found
|
||||||
var timestamp = "?t=" + new Date().getTime();
|
console.log("Found admin color links:", $adminColorLinks.length);
|
||||||
|
$adminColorLinks.each(function() {
|
||||||
|
console.log(" - Link:", $(this).attr("href"));
|
||||||
|
});
|
||||||
|
|
||||||
// Create and append the new stylesheet
|
// For each stylesheet, create and inject a new one with the correct scheme
|
||||||
var newStyle = document.createElement("link");
|
$adminColorLinks.each(function() {
|
||||||
newStyle.rel = "stylesheet";
|
var $oldLink = $(this);
|
||||||
newStyle.type = "text/css";
|
var oldHref = $oldLink.attr("href");
|
||||||
newStyle.href = newHref + timestamp;
|
var id = $oldLink.attr("id") || "";
|
||||||
document.head.appendChild(newStyle);
|
|
||||||
|
|
||||||
// Remove the old stylesheet immediately
|
// Skip if not a stylesheet
|
||||||
sheet.element.parentNode.removeChild(sheet.element);
|
if (!oldHref || $oldLink.attr("rel") !== "stylesheet") return;
|
||||||
});
|
|
||||||
|
|
||||||
// Also update the admin-css colors
|
// Determine what file is being loaded
|
||||||
$("#colors-css, #colors-rtl-css, #admin-colors-css").each(function() {
|
var fileType = "";
|
||||||
var $this = $(this);
|
if (oldHref.indexOf("colors-rtl") !== -1) {
|
||||||
var href = $this.attr("href");
|
fileType = "colors-rtl.min.css";
|
||||||
if (href) {
|
} else if (oldHref.indexOf("colors.min") !== -1) {
|
||||||
var newHref = href.replace(
|
fileType = "colors.min.css";
|
||||||
/\/([^\/]+)\/colors/,
|
} else {
|
||||||
"/" + scheme + "/colors"
|
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
|
||||||
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
console.log("Replacing admin colors:", href, "with", newHref);
|
|
||||||
|
|
||||||
// Create timestamp to prevent caching
|
|
||||||
var timestamp = "?t=" + new Date().getTime();
|
|
||||||
|
|
||||||
// Force reload by creating new element
|
|
||||||
var newStyle = document.createElement("link");
|
|
||||||
newStyle.rel = "stylesheet";
|
|
||||||
newStyle.id = $this.attr("id");
|
|
||||||
newStyle.href = newHref + timestamp;
|
|
||||||
document.head.appendChild(newStyle);
|
|
||||||
|
|
||||||
// Remove the old stylesheet
|
|
||||||
$this.remove();
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
// Add body class for the new scheme
|
// 3. Save the setting via AJAX
|
||||||
$("body")
|
saveColorScheme(newScheme);
|
||||||
.removeClass("admin-color-fresh admin-color-modern")
|
|
||||||
.addClass("admin-color-" + scheme);
|
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error switching color scheme:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveColorScheme(scheme) {
|
||||||
// AJAX request to save the color scheme setting
|
// AJAX request to save the color scheme setting
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: ajaxurl,
|
url: ajaxurl,
|
||||||
@ -159,7 +203,7 @@ class WP_Allstars_Admin_Colors {
|
|||||||
if (response.success) {
|
if (response.success) {
|
||||||
console.log("Color scheme updated successfully");
|
console.log("Color scheme updated successfully");
|
||||||
} else {
|
} else {
|
||||||
console.error("Error updating color scheme");
|
console.error("Error updating color scheme:", response);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: function(xhr, status, error) {
|
error: function(xhr, status, error) {
|
||||||
|
|||||||
Reference in New Issue
Block a user