668 lines
24 KiB
JavaScript
668 lines
24 KiB
JavaScript
/**
|
|
* Maple Local Fonts - Admin JavaScript
|
|
*
|
|
* @package Maple_Local_Fonts
|
|
*/
|
|
|
|
(function($) {
|
|
'use strict';
|
|
|
|
var MLF = {
|
|
/**
|
|
* Search debounce timer.
|
|
*/
|
|
searchTimer: null,
|
|
|
|
/**
|
|
* Currently selected font.
|
|
*/
|
|
selectedFont: null,
|
|
|
|
/**
|
|
* Currently selected font version info.
|
|
*/
|
|
selectedFontVersion: null,
|
|
selectedFontLastModified: null,
|
|
|
|
/**
|
|
* Loaded font preview stylesheets.
|
|
*/
|
|
loadedFonts: {},
|
|
|
|
/**
|
|
* Initialize the admin functionality.
|
|
*/
|
|
init: function() {
|
|
this.bindEvents();
|
|
},
|
|
|
|
/**
|
|
* Bind event handlers.
|
|
*/
|
|
bindEvents: function() {
|
|
// Search button click
|
|
$('#mlf-search-btn').on('click', this.handleSearchClick.bind(this));
|
|
|
|
// Search on Enter key
|
|
$('#mlf-font-search').on('keypress', this.handleSearchKeypress.bind(this));
|
|
|
|
// Click outside to close search results
|
|
$(document).on('click', this.handleDocumentClick.bind(this));
|
|
|
|
// Prevent closing when clicking inside search area (but not on result items)
|
|
$('.mlf-import-section').on('click', function(e) {
|
|
// Don't stop propagation if clicking on a result item
|
|
if (!$(e.target).closest('.mlf-result-item').length) {
|
|
e.stopPropagation();
|
|
}
|
|
});
|
|
|
|
// Font selection from results - bind to results container
|
|
$('#mlf-search-results').on('click', '.mlf-result-item', this.handleFontSelect.bind(this));
|
|
|
|
// Change font button
|
|
$('#mlf-change-font').on('click', this.handleChangeFont.bind(this));
|
|
|
|
// Form submission
|
|
$('#mlf-import-form').on('submit', this.handleDownload.bind(this));
|
|
|
|
// Delete button clicks
|
|
$(document).on('click', '.mlf-delete-btn', this.handleDelete.bind(this));
|
|
|
|
// Check for updates button
|
|
$('#mlf-check-updates').on('click', this.handleCheckUpdates.bind(this));
|
|
|
|
// Update button clicks
|
|
$(document).on('click', '.mlf-update-btn', this.handleUpdateFont.bind(this));
|
|
},
|
|
|
|
/**
|
|
* Handle search button click.
|
|
*
|
|
* @param {Event} e Click event.
|
|
*/
|
|
handleSearchClick: function(e) {
|
|
e.preventDefault();
|
|
this.triggerSearch();
|
|
},
|
|
|
|
/**
|
|
* Handle Enter key in search input.
|
|
*
|
|
* @param {Event} e Keypress event.
|
|
*/
|
|
handleSearchKeypress: function(e) {
|
|
if (e.which === 13) {
|
|
e.preventDefault();
|
|
this.triggerSearch();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Trigger a search with the current input value.
|
|
*/
|
|
triggerSearch: function() {
|
|
var query = $('#mlf-font-search').val().trim();
|
|
|
|
if (query.length < 2) {
|
|
this.displayError(mapleLocalFontsData.strings.minChars || 'Please enter at least 2 characters.');
|
|
return;
|
|
}
|
|
|
|
this.performSearch(query);
|
|
},
|
|
|
|
/**
|
|
* Perform the search.
|
|
*
|
|
* @param {string} query Search query.
|
|
*/
|
|
performSearch: function(query) {
|
|
var $spinner = $('#mlf-search-spinner');
|
|
var $button = $('#mlf-search-btn');
|
|
|
|
// Show spinner, disable button
|
|
$spinner.addClass('is-active');
|
|
$button.prop('disabled', true);
|
|
|
|
// Send AJAX request
|
|
$.ajax({
|
|
url: mapleLocalFontsData.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'mlf_search_fonts',
|
|
nonce: mapleLocalFontsData.searchNonce,
|
|
query: query
|
|
},
|
|
success: function(response) {
|
|
if (response.success && response.data && response.data.fonts) {
|
|
if (response.data.fonts.length > 0) {
|
|
MLF.displaySearchResults(response.data.fonts);
|
|
} else {
|
|
MLF.displayNoResults();
|
|
}
|
|
} else {
|
|
// Handle error response
|
|
var errorMsg = (response.data && response.data.message)
|
|
? response.data.message
|
|
: (mapleLocalFontsData.strings.error || 'An error occurred.');
|
|
MLF.displayError(errorMsg);
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
var errorMsg = mapleLocalFontsData.strings.error || 'An error occurred.';
|
|
if (xhr.responseJSON && xhr.responseJSON.data && xhr.responseJSON.data.message) {
|
|
errorMsg = xhr.responseJSON.data.message;
|
|
}
|
|
MLF.displayError(errorMsg);
|
|
},
|
|
complete: function() {
|
|
$spinner.removeClass('is-active');
|
|
$button.prop('disabled', false);
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Display search results.
|
|
*
|
|
* @param {Array} fonts Array of font objects.
|
|
*/
|
|
displaySearchResults: function(fonts) {
|
|
var $results = $('#mlf-search-results');
|
|
var $list = $('#mlf-results-list');
|
|
|
|
if (!fonts || fonts.length === 0) {
|
|
this.displayNoResults();
|
|
return;
|
|
}
|
|
|
|
var html = '';
|
|
var previewText = mapleLocalFontsData.strings.previewText || 'Maple Fonts Preview';
|
|
var validFonts = 0;
|
|
|
|
fonts.forEach(function(font) {
|
|
// Skip fonts with missing family name
|
|
if (!font || !font.family) {
|
|
return;
|
|
}
|
|
|
|
var fontFamily = font.family;
|
|
var category = font.category || 'sans-serif';
|
|
var categoryLabel = MLF.getCategoryLabel(category);
|
|
var badges = [];
|
|
|
|
if (font.has_variable) {
|
|
badges.push('<span class="mlf-badge mlf-badge-variable">Variable</span>');
|
|
}
|
|
|
|
html += '<div class="mlf-result-item" data-font-family="' + MLF.escapeHtml(fontFamily) + '" data-font-version="' + MLF.escapeHtml(font.version || '') + '" data-font-modified="' + MLF.escapeHtml(font.lastModified || '') + '">';
|
|
html += ' <div class="mlf-result-info">';
|
|
html += ' <span class="mlf-result-name">' + MLF.escapeHtml(fontFamily) + '</span>';
|
|
html += ' <span class="mlf-result-category">' + MLF.escapeHtml(categoryLabel) + '</span>';
|
|
if (badges.length > 0) {
|
|
html += ' <span class="mlf-result-badges">' + badges.join('') + '</span>';
|
|
}
|
|
html += ' </div>';
|
|
html += ' <div class="mlf-result-preview" style="font-family: \'' + MLF.escapeHtml(fontFamily) + '\', ' + category + ';">';
|
|
html += MLF.escapeHtml(previewText);
|
|
html += ' </div>';
|
|
html += '</div>';
|
|
|
|
// Load font for preview
|
|
MLF.loadFontPreview(fontFamily);
|
|
validFonts++;
|
|
});
|
|
|
|
// If no valid fonts were found, show no results
|
|
if (validFonts === 0) {
|
|
this.displayNoResults();
|
|
return;
|
|
}
|
|
|
|
$list.html(html);
|
|
$results.show();
|
|
},
|
|
|
|
/**
|
|
* Display no results message.
|
|
*/
|
|
displayNoResults: function() {
|
|
var $results = $('#mlf-search-results');
|
|
var $list = $('#mlf-results-list');
|
|
var message = mapleLocalFontsData.strings.noResults || 'No fonts found. Try a different search term.';
|
|
|
|
$list.html('<div class="mlf-no-results">' + MLF.escapeHtml(message) + '</div>');
|
|
$results.show();
|
|
},
|
|
|
|
/**
|
|
* Display an error message in search results.
|
|
*
|
|
* @param {string} message Error message.
|
|
*/
|
|
displayError: function(message) {
|
|
var $results = $('#mlf-search-results');
|
|
var $list = $('#mlf-results-list');
|
|
|
|
$list.html('<div class="mlf-search-error">' + MLF.escapeHtml(message) + '</div>');
|
|
$results.show();
|
|
},
|
|
|
|
/**
|
|
* Hide search results.
|
|
*/
|
|
hideSearchResults: function() {
|
|
$('#mlf-search-results').hide();
|
|
},
|
|
|
|
/**
|
|
* Maximum number of font previews to load.
|
|
*/
|
|
maxLoadedFonts: 50,
|
|
|
|
/**
|
|
* Load a font for preview from Google Fonts.
|
|
*
|
|
* @param {string} fontFamily Font family name.
|
|
*/
|
|
loadFontPreview: function(fontFamily) {
|
|
// Skip if already loaded
|
|
if (this.loadedFonts[fontFamily]) {
|
|
return;
|
|
}
|
|
|
|
// Limit number of loaded fonts to prevent memory accumulation
|
|
if (Object.keys(this.loadedFonts).length >= this.maxLoadedFonts) {
|
|
return;
|
|
}
|
|
|
|
// Mark as loading
|
|
this.loadedFonts[fontFamily] = true;
|
|
|
|
// Create Google Fonts link (spaces become %20 which Google accepts)
|
|
var fontUrl = 'https://fonts.googleapis.com/css2?family=' +
|
|
encodeURIComponent(fontFamily) +
|
|
':wght@400&display=swap';
|
|
|
|
// Create and append link element
|
|
var $link = $('<link>', {
|
|
rel: 'stylesheet',
|
|
href: fontUrl
|
|
});
|
|
|
|
$('head').append($link);
|
|
},
|
|
|
|
/**
|
|
* Handle font selection.
|
|
*
|
|
* @param {Event} e Click event.
|
|
*/
|
|
handleFontSelect: function(e) {
|
|
var $item = $(e.currentTarget);
|
|
var fontFamily = $item.data('font-family');
|
|
|
|
// Store selected font and version info
|
|
this.selectedFont = fontFamily;
|
|
this.selectedFontVersion = $item.data('font-version') || '';
|
|
this.selectedFontLastModified = $item.data('font-modified') || '';
|
|
|
|
// Update UI
|
|
$('#mlf-font-name').val(fontFamily);
|
|
$('#mlf-selected-name').text(fontFamily);
|
|
|
|
// Hide search, show selected font panel
|
|
this.hideSearchResults();
|
|
$('#mlf-font-search').closest('.mlf-form-row').hide();
|
|
$('#mlf-selected-font').show();
|
|
|
|
// Clear search input
|
|
$('#mlf-font-search').val('');
|
|
},
|
|
|
|
/**
|
|
* Handle change font button.
|
|
*
|
|
* @param {Event} e Click event.
|
|
*/
|
|
handleChangeFont: function(e) {
|
|
e.preventDefault();
|
|
|
|
// Clear selection
|
|
this.selectedFont = null;
|
|
$('#mlf-font-name').val('');
|
|
|
|
// Show search, hide selected font panel
|
|
$('#mlf-selected-font').hide();
|
|
$('#mlf-font-search').closest('.mlf-form-row').show();
|
|
$('#mlf-font-search').focus();
|
|
},
|
|
|
|
/**
|
|
* Handle document click (close search results).
|
|
*
|
|
* @param {Event} e Click event.
|
|
*/
|
|
handleDocumentClick: function(e) {
|
|
if (!$(e.target).closest('.mlf-import-section').length) {
|
|
this.hideSearchResults();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get human-readable category label.
|
|
*
|
|
* @param {string} category Category slug.
|
|
* @return {string} Category label.
|
|
*/
|
|
getCategoryLabel: function(category) {
|
|
var labels = {
|
|
'sans-serif': 'Sans Serif',
|
|
'serif': 'Serif',
|
|
'display': 'Display',
|
|
'handwriting': 'Handwriting',
|
|
'monospace': 'Monospace'
|
|
};
|
|
return labels[category] || category;
|
|
},
|
|
|
|
/**
|
|
* Escape HTML entities.
|
|
*
|
|
* @param {string} str String to escape.
|
|
* @return {string} Escaped string.
|
|
*/
|
|
escapeHtml: function(str) {
|
|
var div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
},
|
|
|
|
/**
|
|
* Handle font download form submission.
|
|
*
|
|
* @param {Event} e Form submit event.
|
|
*/
|
|
handleDownload: function(e) {
|
|
e.preventDefault();
|
|
|
|
var $form = $('#mlf-import-form');
|
|
var $button = $('#mlf-download-btn');
|
|
var $spinner = $('#mlf-spinner');
|
|
var $message = $('#mlf-message');
|
|
|
|
// Get form values
|
|
var fontName = $('#mlf-font-name').val().trim();
|
|
var includeItalic = $('#mlf-include-italic').is(':checked') ? '1' : '0';
|
|
|
|
// Validate
|
|
if (!fontName) {
|
|
this.showMessage($message, mapleLocalFontsData.strings.selectFont || 'Please select a font.', 'error');
|
|
return;
|
|
}
|
|
|
|
// Store original button text
|
|
if (!$button.data('original-text')) {
|
|
$button.data('original-text', $button.text());
|
|
}
|
|
|
|
// Disable form
|
|
$form.addClass('mlf-loading');
|
|
$button.prop('disabled', true).text(mapleLocalFontsData.strings.downloading);
|
|
$spinner.addClass('is-active');
|
|
$message.hide();
|
|
|
|
// Send AJAX request
|
|
$.ajax({
|
|
url: mapleLocalFontsData.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'mlf_download_font',
|
|
nonce: mapleLocalFontsData.downloadNonce,
|
|
font_name: fontName,
|
|
include_italic: includeItalic,
|
|
font_version: this.selectedFontVersion || '',
|
|
font_last_modified: this.selectedFontLastModified || ''
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
MLF.showMessage($message, response.data.message, 'success');
|
|
// Reload page to show new font
|
|
setTimeout(function() {
|
|
window.location.reload();
|
|
}, 1500);
|
|
} else {
|
|
MLF.showMessage($message, response.data.message || mapleLocalFontsData.strings.error, 'error');
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
var message = mapleLocalFontsData.strings.error;
|
|
if (xhr.responseJSON && xhr.responseJSON.data && xhr.responseJSON.data.message) {
|
|
message = xhr.responseJSON.data.message;
|
|
}
|
|
MLF.showMessage($message, message, 'error');
|
|
},
|
|
complete: function() {
|
|
$form.removeClass('mlf-loading');
|
|
$button.prop('disabled', false).text($button.data('original-text'));
|
|
$spinner.removeClass('is-active');
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Handle font deletion.
|
|
*
|
|
* @param {Event} e Click event.
|
|
*/
|
|
handleDelete: function(e) {
|
|
e.preventDefault();
|
|
|
|
var $button = $(e.currentTarget);
|
|
var fontId = $button.data('font-id');
|
|
var $fontItem = $button.closest('.mlf-font-item');
|
|
|
|
// Confirm deletion
|
|
if (!confirm(mapleLocalFontsData.strings.confirmDelete)) {
|
|
return;
|
|
}
|
|
|
|
// Store original button text
|
|
var originalText = $button.text();
|
|
|
|
// Disable button
|
|
$button.prop('disabled', true).text(mapleLocalFontsData.strings.deleting);
|
|
$fontItem.addClass('mlf-loading');
|
|
|
|
// Send AJAX request
|
|
$.ajax({
|
|
url: mapleLocalFontsData.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'mlf_delete_font',
|
|
nonce: mapleLocalFontsData.deleteNonce,
|
|
font_id: fontId
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
// Remove font item with animation
|
|
$fontItem.slideUp(300, function() {
|
|
$(this).remove();
|
|
|
|
// Check if any fonts remain
|
|
if ($('.mlf-font-item').length === 0) {
|
|
$('#mlf-font-list').replaceWith(
|
|
'<p class="mlf-no-fonts">No fonts installed yet. Search and select a font above to get started.</p>'
|
|
);
|
|
}
|
|
});
|
|
} else {
|
|
alert(response.data.message || mapleLocalFontsData.strings.error);
|
|
$button.prop('disabled', false).text(originalText);
|
|
$fontItem.removeClass('mlf-loading');
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
var message = mapleLocalFontsData.strings.error;
|
|
if (xhr.responseJSON && xhr.responseJSON.data && xhr.responseJSON.data.message) {
|
|
message = xhr.responseJSON.data.message;
|
|
}
|
|
alert(message);
|
|
$button.prop('disabled', false).text(originalText);
|
|
$fontItem.removeClass('mlf-loading');
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Show a message to the user.
|
|
*
|
|
* @param {jQuery} $element Message element.
|
|
* @param {string} message Message text.
|
|
* @param {string} type Message type (success or error).
|
|
*/
|
|
showMessage: function($element, message, type) {
|
|
$element
|
|
.removeClass('mlf-message-success mlf-message-error')
|
|
.addClass('mlf-message-' + type)
|
|
.text(message)
|
|
.show();
|
|
},
|
|
|
|
/**
|
|
* Handle check for updates button click.
|
|
*
|
|
* @param {Event} e Click event.
|
|
*/
|
|
handleCheckUpdates: function(e) {
|
|
e.preventDefault();
|
|
|
|
var $button = $('#mlf-check-updates');
|
|
var originalText = $button.text();
|
|
|
|
// Disable button and show checking state
|
|
$button.prop('disabled', true).text(mapleLocalFontsData.strings.checking || 'Checking...');
|
|
|
|
// Send AJAX request
|
|
$.ajax({
|
|
url: mapleLocalFontsData.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'mlf_check_updates',
|
|
nonce: mapleLocalFontsData.checkUpdatesNonce
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
var updates = response.data.updates || {};
|
|
var updateCount = Object.keys(updates).length;
|
|
|
|
// Update UI for each font
|
|
$('.mlf-font-item').each(function() {
|
|
var $item = $(this);
|
|
var fontId = $item.data('font-id');
|
|
var $badge = $item.find('.mlf-update-badge');
|
|
var $updateBtn = $item.find('.mlf-update-btn');
|
|
|
|
if (updates[fontId]) {
|
|
// Show update available badge and button
|
|
$badge.show();
|
|
$updateBtn.show();
|
|
|
|
// Store the latest version info on the button
|
|
$updateBtn.data('latest-version', updates[fontId].latest_version);
|
|
} else {
|
|
// Hide update badge and button
|
|
$badge.hide();
|
|
$updateBtn.hide();
|
|
}
|
|
});
|
|
|
|
// Show summary message
|
|
if (updateCount > 0) {
|
|
var message = mapleLocalFontsData.strings.updatesFound || 'Updates available for %d font(s).';
|
|
alert(message.replace('%d', updateCount));
|
|
} else {
|
|
alert(mapleLocalFontsData.strings.noUpdates || 'All fonts are up to date.');
|
|
}
|
|
} else {
|
|
alert(response.data.message || mapleLocalFontsData.strings.error);
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
var message = mapleLocalFontsData.strings.error;
|
|
if (xhr.responseJSON && xhr.responseJSON.data && xhr.responseJSON.data.message) {
|
|
message = xhr.responseJSON.data.message;
|
|
}
|
|
alert(message);
|
|
},
|
|
complete: function() {
|
|
$button.prop('disabled', false).text(originalText);
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Handle font update button click.
|
|
*
|
|
* @param {Event} e Click event.
|
|
*/
|
|
handleUpdateFont: function(e) {
|
|
e.preventDefault();
|
|
|
|
var $button = $(e.currentTarget);
|
|
var fontId = $button.data('font-id');
|
|
var fontName = $button.data('font-name');
|
|
var $fontItem = $button.closest('.mlf-font-item');
|
|
|
|
// Confirm update
|
|
if (!confirm('Update ' + fontName + ' to the latest version?')) {
|
|
return;
|
|
}
|
|
|
|
// Store original button text
|
|
var originalText = $button.text();
|
|
|
|
// Disable button and show updating state
|
|
$button.prop('disabled', true).text(mapleLocalFontsData.strings.updating || 'Updating...');
|
|
$fontItem.addClass('mlf-loading');
|
|
|
|
// Send AJAX request
|
|
$.ajax({
|
|
url: mapleLocalFontsData.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'mlf_update_font',
|
|
nonce: mapleLocalFontsData.updateFontNonce,
|
|
font_id: fontId
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
// Reload page to show updated font
|
|
alert(response.data.message);
|
|
window.location.reload();
|
|
} else {
|
|
alert(response.data.message || mapleLocalFontsData.strings.error);
|
|
$button.prop('disabled', false).text(originalText);
|
|
$fontItem.removeClass('mlf-loading');
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
var message = mapleLocalFontsData.strings.error;
|
|
if (xhr.responseJSON && xhr.responseJSON.data && xhr.responseJSON.data.message) {
|
|
message = xhr.responseJSON.data.message;
|
|
}
|
|
alert(message);
|
|
$button.prop('disabled', false).text(originalText);
|
|
$fontItem.removeClass('mlf-loading');
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
// Initialize on document ready
|
|
$(document).ready(function() {
|
|
MLF.init();
|
|
});
|
|
|
|
})(jQuery);
|