mapleopentech/monorepo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added additional plugins

Browse source
This commit is contained in:
Rodolfo Martinez 2025-12-12 19:05:48 -05:00
parent c85895d306
commit 00e60ec1b7
132 changed files with 27514 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

399
native/wordpress/ticket-tailor-wp-max/assets/js/admin.js Normal file
View 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);

719
native/wordpress/ticket-tailor-wp-max/assets/js/blocks.js Normal file
View file

@ -0,0 +1,719 @@
/**
* Ticket Tailor Gutenberg Blocks
* Enhanced with full-width control and dynamic columns
*/
(function (wp) {
const { registerBlockType } = wp.blocks;
const { InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;
const { PanelBody, TextControl, ToggleControl, SelectControl, RangeControl } =
wp.components;
const { __ } = wp.i18n;
const { createElement: el, Fragment } = wp.element;
// Block 1: Event Widget (Original)
registerBlockType("ticket-tailor/event-widget", {
title: __("Ticket Tailor Event Widget", "ticket-tailor"),
description: __("Embed a Ticket Tailor event widget", "ticket-tailor"),
icon: "tickets-alt",
category: "embed",
keywords: [
__("ticket", "ticket-tailor"),
__("event", "ticket-tailor"),
__("ticketing", "ticket-tailor"),
],
supports: {
align: ["wide", "full"],
},
attributes: {
url: { type: "string", default: "" },
minimal: { type: "boolean", default: false },
bgFill: { type: "boolean", default: true },
showLogo: { type: "boolean", default: true },
ref: { type: "string", default: "website_widget" },
},
edit: function (props) {
const { attributes, setAttributes } = props;
const { url, minimal, bgFill, showLogo, ref } = attributes;
return el(
Fragment,
{},
el(
InspectorControls,
{},
el(
PanelBody,
{
title: __("Widget Settings", "ticket-tailor"),
initialOpen: true,
},
el(ToggleControl, {
label: __("Minimal Design", "ticket-tailor"),
checked: minimal,
onChange: (value) => setAttributes({ minimal: value }),
}),
el(ToggleControl, {
label: __("Background Fill", "ticket-tailor"),
checked: bgFill,
onChange: (value) => setAttributes({ bgFill: value }),
}),
el(ToggleControl, {
label: __("Show Logo", "ticket-tailor"),
checked: showLogo,
onChange: (value) => setAttributes({ showLogo: value }),
}),
el(TextControl, {
label: __("Tracking Reference", "ticket-tailor"),
value: ref,
onChange: (value) => setAttributes({ ref: value }),
}),
),
),
el(
"div",
{
className: "tt-block-placeholder",
style: {
border: "2px dashed #ccc",
padding: "40px",
textAlign: "center",
background: "#f9f9f9",
},
},
el("span", {
className: "dashicons dashicons-tickets-alt",
style: { fontSize: "48px", color: "#666" },
}),
!url
? el(
"div",
{},
el(
"p",
{ style: { marginBottom: "15px" } },
__("Ticket Tailor Event Widget", "ticket-tailor"),
),
el(TextControl, {
label: __("Event URL", "ticket-tailor"),
placeholder: "https://www.tickettailor.com/events/...",
value: url,
onChange: (value) => setAttributes({ url: value }),
}),
)
: el(
"div",
{},
el("p", {}, __("Widget URL configured", "ticket-tailor")),
el(
"button",
{
className: "button",
onClick: () => setAttributes({ url: "" }),
},
__("Change URL", "ticket-tailor"),
),
),
),
);
},
save: function () {
return null;
},
});
// Block 2: Event Listing - ENHANCED WITH FULL WIDTH OPTIONS
registerBlockType("ticket-tailor/event-listing", {
title: __("Event Listing", "ticket-tailor"),
description: __("Display a list of events", "ticket-tailor"),
icon: "calendar-alt",
category: "widgets",
keywords: [
__("events", "ticket-tailor"),
__("listing", "ticket-tailor"),
__("calendar", "ticket-tailor"),
],
supports: {
align: ["wide", "full"],
customClassName: true,
},
attributes: {
limit: { type: "number", default: 10 },
layout: { type: "string", default: "grid" },
columns: { type: "number", default: 3 },
columnsMode: { type: "string", default: "fixed" }, // 'fixed' or 'responsive'
showPast: { type: "boolean", default: false },
showImage: { type: "boolean", default: true },
imageType: { type: "string", default: "header" },
fullWidth: { type: "boolean", default: true },
maxCardWidth: { type: "string", default: "none" }, // 'none', 'small', 'medium', 'large'
},
edit: function (props) {
const { attributes, setAttributes, className } = props;
const {
limit,
layout,
columns,
columnsMode,
showPast,
showImage,
imageType,
fullWidth,
maxCardWidth,
} = attributes;
return el(
Fragment,
{},
el(
InspectorControls,
{},
el(
PanelBody,
{
title: __("Layout Settings", "ticket-tailor"),
initialOpen: true,
},
el(SelectControl, {
label: __("Layout", "ticket-tailor"),
value: layout,
options: [
{ label: __("Grid", "ticket-tailor"), value: "grid" },
{ label: __("List", "ticket-tailor"), value: "list" },
],
onChange: (value) => setAttributes({ layout: value }),
}),
layout === "grid" &&
el(
Fragment,
{},
el(SelectControl, {
label: __("Columns Mode", "ticket-tailor"),
value: columnsMode,
options: [
{
label: __("Fixed Columns", "ticket-tailor"),
value: "fixed",
},
{
label: __("Responsive (Auto-fit)", "ticket-tailor"),
value: "responsive",
},
],
onChange: (value) => setAttributes({ columnsMode: value }),
help: __(
"Responsive mode automatically adjusts columns based on available space",
"ticket-tailor",
),
}),
el(RangeControl, {
label:
columnsMode === "fixed"
? __("Number of Columns", "ticket-tailor")
: __("Maximum Columns", "ticket-tailor"),
value: columns,
onChange: (value) => setAttributes({ columns: value }),
min: 1,
max: 5,
help:
columnsMode === "responsive"
? __(
"In responsive mode, columns will adjust automatically but won't exceed this number",
"ticket-tailor",
)
: null,
}),
el(SelectControl, {
label: __("Maximum Card Width", "ticket-tailor"),
value: maxCardWidth,
options: [
{
label: __("No Limit (Full Width)", "ticket-tailor"),
value: "none",
},
{
label: __("Small (300px)", "ticket-tailor"),
value: "small",
},
{
label: __("Medium (400px)", "ticket-tailor"),
value: "medium",
},
{
label: __("Large (500px)", "ticket-tailor"),
value: "large",
},
],
onChange: (value) => setAttributes({ maxCardWidth: value }),
help: __(
"Set a maximum width for individual event cards",
"ticket-tailor",
),
}),
),
el(ToggleControl, {
label: __("Full Width Container", "ticket-tailor"),
checked: fullWidth,
onChange: (value) => setAttributes({ fullWidth: value }),
help: __(
"Make the event listing fill the width of its container",
"ticket-tailor",
),
}),
),
el(
PanelBody,
{
title: __("Display Settings", "ticket-tailor"),
initialOpen: false,
},
el(RangeControl, {
label: __("Number of Events", "ticket-tailor"),
value: limit,
onChange: (value) => setAttributes({ limit: value }),
min: 1,
max: 50,
}),
el(ToggleControl, {
label: __("Show Past Events", "ticket-tailor"),
checked: showPast,
onChange: (value) => setAttributes({ showPast: value }),
}),
el(ToggleControl, {
label: __("Show Event Images", "ticket-tailor"),
checked: showImage,
onChange: (value) => setAttributes({ showImage: value }),
}),
showImage &&
el(SelectControl, {
label: __("Image Type", "ticket-tailor"),
value: imageType,
options: [
{
label: __("Thumbnail (Square)", "ticket-tailor"),
value: "thumbnail",
},
{
label: __("Banner (16:9)", "ticket-tailor"),
value: "header",
},
],
onChange: (value) => setAttributes({ imageType: value }),
}),
),
),
el(
"div",
{
className: "tt-block-placeholder",
style: {
border: "2px dashed #ccc",
padding: "40px",
textAlign: "center",
background: "#f9f9f9",
width: fullWidth ? "100%" : "auto",
},
},
el("span", {
className: "dashicons dashicons-calendar-alt",
style: { fontSize: "48px", color: "#666" },
}),
el(
"p",
{
style: {
fontSize: "16px",
fontWeight: "bold",
marginBottom: "10px",
},
},
__("Event Listing", "ticket-tailor"),
),
el(
"p",
{ style: { fontSize: "14px", color: "#666" } },
__("Showing ", "ticket-tailor") +
limit +
__(" events", "ticket-tailor"),
),
el(
"p",
{ style: { fontSize: "13px", color: "#888", marginTop: "10px" } },
layout === "grid"
? columnsMode === "responsive"
? __("Responsive grid with max ", "ticket-tailor") +
columns +
__(" columns", "ticket-tailor")
: columns + __(" column grid", "ticket-tailor")
: __("List layout", "ticket-tailor"),
),
fullWidth &&
el(
"p",
{
style: { fontSize: "12px", color: "#2271b1", marginTop: "5px" },
},
__("✓ Full width enabled", "ticket-tailor"),
),
),
);
},
save: function () {
return null;
},
});
// Block 3: Single Event - ENHANCED WITH WIDTH OPTIONS
registerBlockType("ticket-tailor/single-event", {
title: __("Single Event", "ticket-tailor"),
description: __("Display a specific event", "ticket-tailor"),
icon: "megaphone",
category: "widgets",
keywords: [
__("event", "ticket-tailor"),
__("single", "ticket-tailor"),
__("detail", "ticket-tailor"),
],
supports: {
align: ["wide", "full"],
},
attributes: {
eventId: { type: "string", default: "" },
showDescription: { type: "boolean", default: true },
showTickets: { type: "boolean", default: true },
showImage: { type: "boolean", default: true },
imageType: { type: "string", default: "header" },
fullWidth: { type: "boolean", default: false },
maxWidth: { type: "string", default: "800px" },
},
edit: function (props) {
const { attributes, setAttributes } = props;
const {
eventId,
showDescription,
showTickets,
showImage,
imageType,
fullWidth,
maxWidth,
} = attributes;
const eventOptions =
window.ticketTailorData && window.ticketTailorData.events
? window.ticketTailorData.events
: [{ value: "", label: __("Loading events...", "ticket-tailor") }];
return el(
Fragment,
{},
el(
InspectorControls,
{},
el(
PanelBody,
{ title: __("Event Settings", "ticket-tailor"), initialOpen: true },
el(SelectControl, {
label: __("Select Event", "ticket-tailor"),
value: eventId,
options: [
{ value: "", label: __("Select an event...", "ticket-tailor") },
].concat(eventOptions),
onChange: (value) => setAttributes({ eventId: value }),
}),
el(ToggleControl, {
label: __("Full Width Display", "ticket-tailor"),
checked: fullWidth,
onChange: (value) => setAttributes({ fullWidth: value }),
}),
!fullWidth &&
el(TextControl, {
label: __("Maximum Width", "ticket-tailor"),
value: maxWidth,
onChange: (value) => setAttributes({ maxWidth: value }),
help: __("e.g. 800px, 100%, 60rem", "ticket-tailor"),
}),
el(ToggleControl, {
label: __("Show Event Image", "ticket-tailor"),
checked: showImage,
onChange: (value) => setAttributes({ showImage: value }),
}),
showImage &&
el(SelectControl, {
label: __("Image Type", "ticket-tailor"),
value: imageType,
options: [
{
label: __("Banner (Wide)", "ticket-tailor"),
value: "header",
},
{
label: __("Thumbnail (Square)", "ticket-tailor"),
value: "thumbnail",
},
],
onChange: (value) => setAttributes({ imageType: value }),
}),
el(ToggleControl, {
label: __("Show Description", "ticket-tailor"),
checked: showDescription,
onChange: (value) => setAttributes({ showDescription: value }),
}),
el(ToggleControl, {
label: __("Show Ticket Button", "ticket-tailor"),
checked: showTickets,
onChange: (value) => setAttributes({ showTickets: value }),
}),
),
),
el(
"div",
{
className: "tt-block-placeholder",
style: {
border: "2px dashed #ccc",
padding: "40px",
textAlign: "center",
background: "#f9f9f9",
},
},
el("span", {
className: "dashicons dashicons-megaphone",
style: { fontSize: "48px", color: "#666" },
}),
!eventId
? el(
"p",
{},
__("Please select an event from the sidebar", "ticket-tailor"),
)
: el(
"div",
{},
el("p", {}, __("Single Event Display", "ticket-tailor")),
el(
"p",
{ style: { fontSize: "14px", color: "#666" } },
__("Event ID: ", "ticket-tailor") + eventId,
),
fullWidth &&
el(
"p",
{
style: {
fontSize: "12px",
color: "#2271b1",
marginTop: "5px",
},
},
__("✓ Full width enabled", "ticket-tailor"),
),
),
),
);
},
save: function () {
return null;
},
});
// Block 4: Category Events - ENHANCED
registerBlockType("ticket-tailor/category-events", {
title: __("Category Events", "ticket-tailor"),
description: __("Display events from a specific category", "ticket-tailor"),
icon: "category",
category: "widgets",
keywords: [
__("category", "ticket-tailor"),
__("filter", "ticket-tailor"),
__("events", "ticket-tailor"),
],
supports: {
align: ["wide", "full"],
},
attributes: {
category: { type: "string", default: "" },
limit: { type: "number", default: 10 },
layout: { type: "string", default: "grid" },
columns: { type: "number", default: 3 },
columnsMode: { type: "string", default: "fixed" },
showImage: { type: "boolean", default: true },
imageType: { type: "string", default: "thumbnail" },
fullWidth: { type: "boolean", default: true },
},
edit: function (props) {
const { attributes, setAttributes } = props;
const {
category,
limit,
layout,
columns,
columnsMode,
showImage,
imageType,
fullWidth,
} = attributes;
return el(
Fragment,
{},
el(
InspectorControls,
{},
el(
PanelBody,
{
title: __("Category Settings", "ticket-tailor"),
initialOpen: true,
},
el(TextControl, {
label: __("Category", "ticket-tailor"),
help: __(
"Enter the category name (e.g., Music, Sports, Theatre)",
"ticket-tailor",
),
value: category,
onChange: (value) => setAttributes({ category: value }),
}),
el(RangeControl, {
label: __("Number of Events", "ticket-tailor"),
value: limit,
onChange: (value) => setAttributes({ limit: value }),
min: 1,
max: 50,
}),
el(SelectControl, {
label: __("Layout", "ticket-tailor"),
value: layout,
options: [
{ label: __("Grid", "ticket-tailor"), value: "grid" },
{ label: __("List", "ticket-tailor"), value: "list" },
],
onChange: (value) => setAttributes({ layout: value }),
}),
layout === "grid" &&
el(
Fragment,
{},
el(SelectControl, {
label: __("Columns Mode", "ticket-tailor"),
value: columnsMode,
options: [
{
label: __("Fixed Columns", "ticket-tailor"),
value: "fixed",
},
{
label: __("Responsive (Auto-fit)", "ticket-tailor"),
value: "responsive",
},
],
onChange: (value) => setAttributes({ columnsMode: value }),
}),
el(RangeControl, {
label:
columnsMode === "fixed"
? __("Columns", "ticket-tailor")
: __("Maximum Columns", "ticket-tailor"),
value: columns,
onChange: (value) => setAttributes({ columns: value }),
min: 1,
max: 5,
}),
),
el(ToggleControl, {
label: __("Full Width Container", "ticket-tailor"),
checked: fullWidth,
onChange: (value) => setAttributes({ fullWidth: value }),
}),
el(ToggleControl, {
label: __("Show Event Images", "ticket-tailor"),
checked: showImage,
onChange: (value) => setAttributes({ showImage: value }),
}),
showImage &&
el(SelectControl, {
label: __("Image Type", "ticket-tailor"),
value: imageType,
options: [
{
label: __("Thumbnail (Square)", "ticket-tailor"),
value: "thumbnail",
},
{
label: __("Banner (16:9)", "ticket-tailor"),
value: "header",
},
],
onChange: (value) => setAttributes({ imageType: value }),
}),
),
),
el(
"div",
{
className: "tt-block-placeholder",
style: {
border: "2px dashed #ccc",
padding: "40px",
textAlign: "center",
background: "#f9f9f9",
width: fullWidth ? "100%" : "auto",
},
},
el("span", {
className: "dashicons dashicons-category",
style: { fontSize: "48px", color: "#666" },
}),
!category
? el(
"div",
{},
el(
"p",
{ style: { marginBottom: "15px" } },
__("Category Events Display", "ticket-tailor"),
),
el(
"p",
{ style: { fontSize: "14px", color: "#666" } },
__(
"Enter a category name in the sidebar to display filtered events",
"ticket-tailor",
),
),
)
: el(
"div",
{},
el(
"p",
{ style: { marginBottom: "10px", fontWeight: "bold" } },
__("Category Events: ", "ticket-tailor") + category,
),
el(
"p",
{ style: { fontSize: "14px", color: "#666" } },
__("Showing ", "ticket-tailor") +
limit +
__(" events", "ticket-tailor"),
),
fullWidth &&
el(
"p",
{
style: {
fontSize: "12px",
color: "#2271b1",
marginTop: "5px",
},
},
__("✓ Full width enabled", "ticket-tailor"),
),
),
),
);
},
save: function () {
return null;
},
});
})(window.wp);

2
native/wordpress/ticket-tailor-wp-max/assets/js/index.php Normal file
View file

@ -0,0 +1,2 @@
<?php
// Silence is golden.