added additional plugins
This commit is contained in:
parent
c85895d306
commit
00e60ec1b7
132 changed files with 27514 additions and 0 deletions
399
native/wordpress/ticket-tailor-wp-max/assets/js/admin.js
Normal file
399
native/wordpress/ticket-tailor-wp-max/assets/js/admin.js
Normal file
|
|
@ -0,0 +1,399 @@
|
|||
/**
|
||||
* 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);
|
||||
Loading…
Add table
Add a link
Reference in a new issue