399 lines
12 KiB
JavaScript
399 lines
12 KiB
JavaScript
/**
|
|
* Ticket Tailor Admin Scripts
|
|
* Version: 3.0 - Enhanced with Color Picker Improvements
|
|
*/
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
$(document).ready(function () {
|
|
// ===========================
|
|
// EXISTING FUNCTIONALITY
|
|
// ===========================
|
|
|
|
// Confirm actions
|
|
$(".tt-confirm-action").on("click", function (e) {
|
|
if (!confirm(ticketTailorAdmin.confirmMessage || "Are you sure?")) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Test API connection
|
|
$("#tt-test-api").on("click", function (e) {
|
|
e.preventDefault();
|
|
|
|
const $button = $(this);
|
|
const $status = $("#tt-api-status");
|
|
|
|
$button.prop("disabled", true).text("Testing...");
|
|
$status.removeClass("success error").text("");
|
|
|
|
$.ajax({
|
|
url: ticketTailorAdmin.ajaxUrl,
|
|
type: "POST",
|
|
data: {
|
|
action: "ticket_tailor_test_api",
|
|
nonce: ticketTailorAdmin.nonce,
|
|
},
|
|
success: function (response) {
|
|
if (response.success) {
|
|
$status.addClass("success").text("✔ API connection successful!");
|
|
} else {
|
|
$status
|
|
.addClass("error")
|
|
.text("✗ API connection failed: " + response.data);
|
|
}
|
|
},
|
|
error: function () {
|
|
$status.addClass("error").text("✗ Connection error");
|
|
},
|
|
complete: function () {
|
|
$button.prop("disabled", false).text("Test Connection");
|
|
},
|
|
});
|
|
});
|
|
|
|
// Auto-dismiss notices
|
|
setTimeout(function () {
|
|
$(".notice.is-dismissible").fadeOut();
|
|
}, 5000);
|
|
|
|
// Sync progress indicators
|
|
$(".tt-sync-button").on("click", function () {
|
|
$(this)
|
|
.prop("disabled", true)
|
|
.html(
|
|
'<span class="dashicons dashicons-update spin"></span> Syncing...',
|
|
);
|
|
});
|
|
|
|
// Table row actions
|
|
$(".tt-row-actions a").on("click", function (e) {
|
|
const action = $(this).data("action");
|
|
if (
|
|
action === "delete" &&
|
|
!confirm("Are you sure you want to delete this item?")
|
|
) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
// ===========================
|
|
// ENHANCED COLOR PICKER
|
|
// ===========================
|
|
|
|
// Function to calculate relative luminance for contrast ratio
|
|
function getLuminance(hexColor) {
|
|
// Convert hex to RGB
|
|
const hex = hexColor.replace("#", "");
|
|
const r = parseInt(hex.substr(0, 2), 16) / 255;
|
|
const g = parseInt(hex.substr(2, 2), 16) / 255;
|
|
const b = parseInt(hex.substr(4, 2), 16) / 255;
|
|
|
|
// Apply gamma correction
|
|
const gammaCorrect = (channel) => {
|
|
return channel <= 0.03928
|
|
? channel / 12.92
|
|
: Math.pow((channel + 0.055) / 1.055, 2.4);
|
|
};
|
|
|
|
const rLinear = gammaCorrect(r);
|
|
const gLinear = gammaCorrect(g);
|
|
const bLinear = gammaCorrect(b);
|
|
|
|
// Calculate relative luminance
|
|
return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
|
|
}
|
|
|
|
// Function to determine if white or black text is more readable
|
|
function getContrastColor(hexColor) {
|
|
const luminance = getLuminance(hexColor);
|
|
// Use white text for dark colors, black for light colors
|
|
return luminance > 0.5 ? "#000000" : "#ffffff";
|
|
}
|
|
|
|
// Function to format and display hex value with proper contrast
|
|
function updateHexDisplay($input, color) {
|
|
const $container = $input.closest(".wp-picker-container");
|
|
let $hexDisplay = $container.find(".tt-hex-display");
|
|
|
|
// Create hex display if it doesn't exist
|
|
if ($hexDisplay.length === 0) {
|
|
$hexDisplay = $('<span class="tt-hex-display"></span>');
|
|
// Find the color picker button and insert after it
|
|
const $colorButton = $container.find(".wp-color-result");
|
|
$hexDisplay.insertAfter($colorButton);
|
|
}
|
|
|
|
// Update hex value and text color
|
|
$hexDisplay.text(color.toUpperCase());
|
|
const contrastColor = getContrastColor(color);
|
|
$hexDisplay.css("color", contrastColor);
|
|
|
|
// Update background to match the selected color for visual context
|
|
$hexDisplay.css("background-color", color);
|
|
}
|
|
|
|
// Initialize color pickers with enhanced functionality
|
|
if ($(".tt-color-picker").length > 0) {
|
|
$(".tt-color-picker").each(function () {
|
|
const $this = $(this);
|
|
const currentColor = $this.val() || $this.data("default-color");
|
|
|
|
// Initialize WordPress color picker
|
|
$this.wpColorPicker({
|
|
change: function (event, ui) {
|
|
const color = ui.color.toString();
|
|
const field = $(this).attr("id");
|
|
|
|
// Update hex display
|
|
updateHexDisplay($(this), color);
|
|
|
|
// Update preview in real-time
|
|
if (field === "text_color") {
|
|
$(".preview-title, .preview-description, .preview-venue").css(
|
|
"color",
|
|
color,
|
|
);
|
|
} else if (field === "border_color") {
|
|
$(".tt-preview-card").css("border-color", color);
|
|
} else if (field === "button_bg") {
|
|
$(".tt-preview-button").css("background-color", color);
|
|
} else if (field === "button_text") {
|
|
$(".tt-preview-button").css("color", color);
|
|
} else if (field === "button_hover") {
|
|
// Store hover color for later use
|
|
$(".tt-preview-button").data("hover-color", color);
|
|
}
|
|
},
|
|
clear: function () {
|
|
const field = $(this).attr("id");
|
|
const defaultColor = $(this).data("default-color");
|
|
|
|
// Update hex display with default color
|
|
updateHexDisplay($(this), defaultColor);
|
|
|
|
// Reset preview to default colors
|
|
if (field === "text_color") {
|
|
$(".preview-title, .preview-description, .preview-venue").css(
|
|
"color",
|
|
defaultColor,
|
|
);
|
|
} else if (field === "border_color") {
|
|
$(".tt-preview-card").css("border-color", defaultColor);
|
|
} else if (field === "button_bg") {
|
|
$(".tt-preview-button").css("background-color", defaultColor);
|
|
} else if (field === "button_text") {
|
|
$(".tt-preview-button").css("color", defaultColor);
|
|
} else if (field === "button_hover") {
|
|
$(".tt-preview-button").data("hover-color", defaultColor);
|
|
}
|
|
},
|
|
});
|
|
|
|
// Initialize hex display for existing colors
|
|
if (currentColor) {
|
|
updateHexDisplay($this, currentColor);
|
|
}
|
|
});
|
|
|
|
// Handle border radius preview in real-time
|
|
$("#border_radius").on("input", function () {
|
|
const radius = $(this).val();
|
|
$(".tt-preview-card").css("border-radius", radius + "px");
|
|
});
|
|
|
|
// Button hover effect for preview
|
|
let originalBg =
|
|
$("#button_bg").val() || $("#button_bg").data("default-color");
|
|
let hoverBg =
|
|
$("#button_hover").val() || $("#button_hover").data("default-color");
|
|
|
|
$(".tt-preview-button").hover(
|
|
function () {
|
|
const currentHover = $("#button_hover").val() || hoverBg;
|
|
$(this).css("background-color", currentHover);
|
|
},
|
|
function () {
|
|
const currentBg = $("#button_bg").val() || originalBg;
|
|
$(this).css("background-color", currentBg);
|
|
},
|
|
);
|
|
|
|
// Update hover colors when changed
|
|
$("#button_hover").on("change", function () {
|
|
hoverBg = $(this).val();
|
|
updateHexDisplay($(this), hoverBg);
|
|
});
|
|
|
|
$("#button_bg").on("change", function () {
|
|
originalBg = $(this).val();
|
|
updateHexDisplay($(this), originalBg);
|
|
});
|
|
|
|
// Also update hex display when color picker is opened/closed
|
|
$(".wp-color-result").on("click", function () {
|
|
const $input = $(this)
|
|
.closest(".wp-picker-container")
|
|
.find(".tt-color-picker");
|
|
const currentColor = $input.val() || $input.data("default-color");
|
|
if (currentColor) {
|
|
updateHexDisplay($input, currentColor);
|
|
}
|
|
});
|
|
}
|
|
|
|
// ===========================
|
|
// DASHBOARD ENHANCEMENTS
|
|
// ===========================
|
|
|
|
// Add smooth scrolling for anchor links
|
|
$('a[href^="#"]').on("click", function (e) {
|
|
const target = $(this.getAttribute("href"));
|
|
if (target.length) {
|
|
e.preventDefault();
|
|
$("html, body")
|
|
.stop()
|
|
.animate(
|
|
{
|
|
scrollTop: target.offset().top - 40,
|
|
},
|
|
800,
|
|
);
|
|
}
|
|
});
|
|
|
|
// Enhanced loading states
|
|
$(".button").on("click", function () {
|
|
const $btn = $(this);
|
|
if ($btn.hasClass("tt-ajax-button")) {
|
|
$btn.addClass("tt-loading");
|
|
}
|
|
});
|
|
|
|
// AJAX complete handler to remove loading states
|
|
$(document).ajaxComplete(function (event, xhr, settings) {
|
|
$(".tt-loading").removeClass("tt-loading");
|
|
});
|
|
|
|
// ===========================
|
|
// ACCESSIBILITY ENHANCEMENTS
|
|
// ===========================
|
|
|
|
// Add keyboard navigation support for custom elements
|
|
$(".tt-stat-card, .tt-help-section").attr("tabindex", "0");
|
|
|
|
// PERFORMANCE FIX: Use event delegation instead of direct binding
|
|
// This prevents memory leaks when elements are dynamically added/removed
|
|
$(document)
|
|
.on("focus", "a, button, input, select, textarea", function () {
|
|
$(this).addClass("has-focus");
|
|
})
|
|
.on("blur", "a, button, input, select, textarea", function () {
|
|
$(this).removeClass("has-focus");
|
|
});
|
|
|
|
// ===========================
|
|
// RESPONSIVE IMPROVEMENTS
|
|
// ===========================
|
|
|
|
// Handle responsive table display
|
|
function checkTableResponsive() {
|
|
$(".wp-list-table").each(function () {
|
|
const $table = $(this);
|
|
const tableWidth = $table.width();
|
|
const containerWidth = $table.parent().width();
|
|
|
|
if (tableWidth > containerWidth) {
|
|
$table.addClass("tt-responsive-table");
|
|
} else {
|
|
$table.removeClass("tt-responsive-table");
|
|
}
|
|
});
|
|
}
|
|
|
|
// Check on load and resize
|
|
checkTableResponsive();
|
|
$(window).on("resize debounce", checkTableResponsive);
|
|
|
|
// ===========================
|
|
// FORM VALIDATION
|
|
// ===========================
|
|
|
|
// Basic form validation for settings
|
|
$("form").on("submit", function () {
|
|
let isValid = true;
|
|
|
|
// Check required fields
|
|
$(this)
|
|
.find("[required]")
|
|
.each(function () {
|
|
if (!$(this).val()) {
|
|
$(this).addClass("error");
|
|
isValid = false;
|
|
} else {
|
|
$(this).removeClass("error");
|
|
}
|
|
});
|
|
|
|
// Validate API key format (if present)
|
|
const $apiKey = $("#api_key");
|
|
if ($apiKey.length && $apiKey.val()) {
|
|
// Basic validation - ensure it's not just whitespace
|
|
if ($apiKey.val().trim().length < 10) {
|
|
$apiKey.addClass("error");
|
|
isValid = false;
|
|
}
|
|
}
|
|
|
|
if (!isValid) {
|
|
// Show error message
|
|
if (!$(".tt-validation-error").length) {
|
|
$(
|
|
'<div class="notice notice-error tt-validation-error"><p>Please fill in all required fields correctly.</p></div>',
|
|
)
|
|
.insertBefore(this)
|
|
.delay(3000)
|
|
.fadeOut(function () {
|
|
$(this).remove();
|
|
});
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Remove error class on input
|
|
$("input, select, textarea").on("input change", function () {
|
|
$(this).removeClass("error");
|
|
});
|
|
|
|
// ===========================
|
|
// UTILITY FUNCTIONS
|
|
// ===========================
|
|
|
|
// Debounce function for performance
|
|
function debounce(func, wait, immediate) {
|
|
let timeout;
|
|
return function () {
|
|
const context = this,
|
|
args = arguments;
|
|
const later = function () {
|
|
timeout = null;
|
|
if (!immediate) func.apply(context, args);
|
|
};
|
|
const callNow = immediate && !timeout;
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
if (callNow) func.apply(context, args);
|
|
};
|
|
}
|
|
|
|
// Add debounced resize event
|
|
$(window).on(
|
|
"resize",
|
|
debounce(function () {
|
|
$(window).trigger("resize.debounce");
|
|
}, 250),
|
|
);
|
|
});
|
|
})(jQuery);
|