Changes to icon importer
This commit is contained in:
Jeremy Rangel
68
assets/js/icon-import.js
Normal file
68
assets/js/icon-import.js
Normal file
@ -0,0 +1,68 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const installButtons = document.querySelectorAll('.install-btn');
|
||||
const uninstallButtons = document.querySelectorAll('.uninstall-btn');
|
||||
|
||||
// Handle Install button click
|
||||
installButtons.forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
console.log('Install button clicked');
|
||||
const iconSetId = this.getAttribute('data-icon-set-id');
|
||||
console.log('Icon Set ID:', iconSetId);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('action', 'install_icon_set');
|
||||
formData.append('icon_set_id', iconSetId);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', mytheme_ajax.ajax_url, true);
|
||||
|
||||
xhr.onload = function () {
|
||||
if (xhr.status === 200) {
|
||||
const response = JSON.parse(xhr.responseText);
|
||||
console.log(response);
|
||||
if (response.success) {
|
||||
alert('Icon set installed successfully!');
|
||||
} else {
|
||||
alert('Failed to install icon set: ' + response.data.message);
|
||||
}
|
||||
} else {
|
||||
alert('There was an error with the request.');
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
});
|
||||
});
|
||||
|
||||
// Handle Uninstall button click
|
||||
uninstallButtons.forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
console.log('Uninstall button clicked');
|
||||
const iconSetId = this.getAttribute('data-icon-set-id');
|
||||
console.log('Icon Set ID for uninstall:', iconSetId);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('action', 'uninstall_icon_set');
|
||||
formData.append('icon_set_id', iconSetId);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', mytheme_ajax.ajax_url, true);
|
||||
|
||||
xhr.onload = function () {
|
||||
if (xhr.status === 200) {
|
||||
const response = JSON.parse(xhr.responseText);
|
||||
console.log(response);
|
||||
if (response.success) {
|
||||
alert('Icon set uninstalled successfully!');
|
||||
} else {
|
||||
alert('Failed to uninstall icon set: ' + response.data.message);
|
||||
}
|
||||
} else {
|
||||
alert('There was an error with the request.');
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
});
|
||||
});
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -4,7 +4,7 @@
|
||||
"setName": "Font Awesome - Regular",
|
||||
"setFamily": "Font Awesome",
|
||||
"version": "6.7.1",
|
||||
"file": "/font-awesome/v6.1.7/font-awesome-v6.7.1-regular-svgs.json"
|
||||
"file": "/font-awesome/v6.7.1/font-awesome-v6.7.1-regular-svgs.json"
|
||||
|
||||
},
|
||||
{
|
||||
@ -12,7 +12,7 @@
|
||||
"setName": "Font Awesome - Solid",
|
||||
"setFamily": "Font Awesome",
|
||||
"version": "6.7.1",
|
||||
"fileName": "/font-awesome/v6.1.7/font-awesome-v6.7.1-solid-svgs.json"
|
||||
"fileName": "/font-awesome/v6.7.1/font-awesome-v6.7.1-solid-svgs.json"
|
||||
|
||||
},
|
||||
{
|
||||
@ -20,7 +20,7 @@
|
||||
"setName": "Font Awesome - Brands",
|
||||
"setFamily": "Font Awesome",
|
||||
"version": "6.7.1",
|
||||
"fileName": "/font-awesome/v6.1.7/font-awesome-v6.7.1-brands-svgs.json"
|
||||
"fileName": "/font-awesome/v6.7.1/font-awesome-v6.7.1-brands-svgs.json"
|
||||
|
||||
},
|
||||
{
|
||||
|
||||
File diff suppressed because one or more lines are too long
338
functions.php
338
functions.php
@ -254,128 +254,240 @@ add_action('switch_theme', 'drop_lcp_icons_table');
|
||||
|
||||
|
||||
/* BACKEND ICON ADDER */
|
||||
function icon_sets_dashboard_callback() {
|
||||
// Get the file path to the JSON file
|
||||
$json_file_path = get_template_directory() . '/assets/json/icons/icon-definitions.json';
|
||||
|
||||
// Register the dashboard page in the admin menu
|
||||
function mytheme_register_dashboard_page() {
|
||||
add_menu_page(
|
||||
'Icon Management', // Page Title
|
||||
'Icon Management', // Menu Title
|
||||
'manage_options', // Capability
|
||||
'icon-management', // Menu Slug
|
||||
'mytheme_dashboard_page', // Callback function
|
||||
'dashicons-images-alt2', // Icon for the menu item
|
||||
60 // Position
|
||||
);
|
||||
}
|
||||
add_action('admin_menu', 'mytheme_register_dashboard_page');
|
||||
|
||||
// Callback function to display the dashboard page content
|
||||
function mytheme_dashboard_page() {
|
||||
?>
|
||||
<div class="wrap">
|
||||
<h1><?php esc_html_e('Icon Management Dashboard', 'mytheme'); ?></h1>
|
||||
<div id="icon-dashboard-container">
|
||||
<?php mytheme_display_icon_sets(); ?>
|
||||
</div> <!-- This will be populated by PHP -->
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
// Function to read and display icon sets from the JSON file
|
||||
// Function to read and display icon sets from the JSON file
|
||||
function mytheme_display_icon_sets() {
|
||||
// Path to the JSON file
|
||||
$json_path = get_template_directory() . '/assets/json/icons/icon-definitions.json';
|
||||
|
||||
// Check if the file exists
|
||||
if (file_exists($json_file_path)) {
|
||||
// Read the file contents and decode the JSON
|
||||
$json_data = file_get_contents($json_file_path);
|
||||
if (file_exists($json_path)) {
|
||||
// Get the contents of the JSON file
|
||||
$json_data = file_get_contents($json_path);
|
||||
|
||||
// Decode JSON data into a PHP array
|
||||
$icon_sets = json_decode($json_data, true);
|
||||
|
||||
if ($icon_sets) {
|
||||
// Group icon sets by setFamily
|
||||
$grouped_sets = [];
|
||||
foreach ($icon_sets as $set) {
|
||||
// Check if the set has the setFamily key
|
||||
$setFamily = isset($set['setFamily']) ? $set['setFamily'] : 'Unknown';
|
||||
|
||||
// Initialize the family group if not already initialized
|
||||
if (!isset($grouped_sets[$setFamily])) {
|
||||
$grouped_sets[$setFamily] = [];
|
||||
}
|
||||
|
||||
// Handle both 'file' and 'fileName'
|
||||
// Check if 'file' is set or fallback to 'fileName'
|
||||
$setFile = isset($set['file']) ? $set['file'] : (isset($set['fileName']) ? $set['fileName'] : '');
|
||||
|
||||
// Ensure we are correctly adding the set data
|
||||
$grouped_sets[$setFamily][] = [
|
||||
'id' => $set['id'],
|
||||
'setName' => $set['setName'],
|
||||
'file' => $setFile
|
||||
];
|
||||
}
|
||||
|
||||
// Output the HTML for the dashboard
|
||||
echo '<div class="wrap">';
|
||||
echo '<h1>' . esc_html('Icon Sets Dashboard') . '</h1>';
|
||||
|
||||
// Loop through each setFamily and create a section with checkboxes
|
||||
foreach ($grouped_sets as $setFamily => $sets) {
|
||||
echo '<div class="lcp-icon-set">';
|
||||
echo '<h2>' . esc_html($setFamily) . '</h2>';
|
||||
echo '<ul>';
|
||||
|
||||
// Loop through each setName and create a checkbox
|
||||
foreach ($sets as $set) {
|
||||
$checkbox_id = 'icon_set_' . $set['id'];
|
||||
echo '<li><input type="checkbox" id="' . esc_attr($checkbox_id) . '" name="icon_sets[]" value="' . esc_attr($set['file']) . '" data-icon-set-id="' . esc_attr($set['id']) . '">';
|
||||
echo '<label for="' . esc_attr($checkbox_id) . '">' . esc_html($set['setName']) . '</label></li>';
|
||||
}
|
||||
|
||||
echo '</ul>';
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
// Add submit button
|
||||
echo '<form method="POST" action="">'; // Ensure the form method is POST
|
||||
echo '<input type="submit" name="submit_icon_sets" value="Import Selected Icons" class="button-primary">';
|
||||
echo '</form>';
|
||||
|
||||
echo '</div>';
|
||||
|
||||
// Handle form submission
|
||||
if (isset($_POST['submit_icon_sets'])) {
|
||||
// Debugging: Check if form is actually submitting data
|
||||
echo '<pre>';
|
||||
var_dump($_POST['icon_sets']); // Check if checkboxes are selected
|
||||
echo '</pre>';
|
||||
|
||||
// Debugging: Display selected icon sets
|
||||
if (isset($_POST['icon_sets']) && !empty($_POST['icon_sets'])) {
|
||||
echo '<p>Selected icon sets:</p>';
|
||||
echo '<pre>';
|
||||
var_dump($_POST['icon_sets']); // Output the selected icon set values
|
||||
echo '</pre>';
|
||||
|
||||
// Loop through selected icon sets and process the corresponding JSON files
|
||||
foreach ($_POST['icon_sets'] as $file) {
|
||||
// Look for the icon set that matches the selected file path
|
||||
foreach ($icon_sets as $set) {
|
||||
// Check if the 'file' or 'fileName' matches the selected file
|
||||
if ($set['file'] == $file || (isset($set['fileName']) && $set['fileName'] == $file)) {
|
||||
// Get the JSON file for the selected set
|
||||
$jsonFilePath = get_template_directory() . '/assets/json/icons' . (isset($set['file']) ? $set['file'] : $set['fileName']);
|
||||
|
||||
// Debugging: Print the json file path being used
|
||||
echo '<p>Loading file: ' . esc_html($jsonFilePath) . '</p>';
|
||||
|
||||
if (file_exists($jsonFilePath)) {
|
||||
$jsonData = file_get_contents($jsonFilePath);
|
||||
load_material_icons_into_db($jsonData); // Pass the JSON data to the function
|
||||
} else {
|
||||
echo '<p>Error: File ' . esc_html($jsonFilePath) . ' not found.</p>';
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
echo '<p>No icon sets selected.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
echo '<p>No icon sets found in the JSON file.</p>';
|
||||
// Loop through the icon sets and output HTML
|
||||
foreach ($icon_sets as $icon_set) {
|
||||
?>
|
||||
<div class="icon-set">
|
||||
<h3><?php echo esc_html($icon_set['setFamily'] . ' - ' . $icon_set['setName']); ?></h3>
|
||||
|
||||
<!-- Add data-icon-set-id attribute to the Install and Uninstall buttons -->
|
||||
<button class="install-btn" data-icon-set-id="<?php echo esc_attr($icon_set['id']); ?>">Install</button>
|
||||
<button class="uninstall-btn" data-icon-set-id="<?php echo esc_attr($icon_set['id']); ?>">Uninstall</button>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
} else {
|
||||
echo '<p>Icon definitions JSON file not found.</p>';
|
||||
echo '<p>' . esc_html__('No icon definitions found.', 'lcp') . '</p>';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function register_icon_dashboard_page() {
|
||||
add_menu_page(
|
||||
'Icon Sets', // Page Title
|
||||
'Icon Sets', // Menu Title
|
||||
'manage_options', // Capability required
|
||||
'icon-sets-dashboard', // Menu slug
|
||||
'icon_sets_dashboard_callback', // Callback function
|
||||
'dashicons-admin-generic', // Icon
|
||||
60 // Position in the menu
|
||||
// Enqueue the dashboard styles only on the icon-management page
|
||||
function mytheme_enqueue_dashboard_styles($hook) {
|
||||
// Only load the styles on the icon-management page
|
||||
if ($hook != 'toplevel_page_icon-management') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Enqueue CSS for the dashboard
|
||||
wp_enqueue_style(
|
||||
'mytheme-dashboard-css',
|
||||
get_template_directory_uri() . '/assets/css/dashboard.css'
|
||||
);
|
||||
}
|
||||
add_action('admin_enqueue_scripts', 'mytheme_enqueue_dashboard_styles');
|
||||
|
||||
add_action('admin_menu', 'register_icon_dashboard_page');
|
||||
|
||||
// Handle the AJAX request for installing icon sets
|
||||
function mytheme_install_icon_set() {
|
||||
if (!isset($_POST['icon_set_id'])) {
|
||||
wp_send_json_error(array('message' => 'Invalid icon set ID.'));
|
||||
}
|
||||
|
||||
$icon_set_id = intval($_POST['icon_set_id']);
|
||||
$json_path = get_template_directory() . '/assets/json/icons/icon-definitions.json';
|
||||
|
||||
// Create the database table if it doesn't exist
|
||||
mytheme_create_icons_table();
|
||||
|
||||
// Read the icon definitions JSON file
|
||||
if (file_exists($json_path)) {
|
||||
$json_data = file_get_contents($json_path);
|
||||
$icon_sets = json_decode($json_data, true);
|
||||
|
||||
// Search for the selected icon set by ID
|
||||
$selected_icon_set = null;
|
||||
foreach ($icon_sets as $icon_set) {
|
||||
if ($icon_set['id'] === $icon_set_id) {
|
||||
$selected_icon_set = $icon_set;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// If the icon set is found
|
||||
if ($selected_icon_set) {
|
||||
// Dynamically build the icon file path using the fileName from icon-definitions.json
|
||||
$file_name = $selected_icon_set['fileName']; // Assuming the JSON structure has 'fileName' key
|
||||
$icon_file_path = get_template_directory() . '/assets/json/icons/' . $file_name;
|
||||
|
||||
// Now read the corresponding SVG file for the icon set
|
||||
if (file_exists($icon_file_path)) {
|
||||
$icon_data = file_get_contents($icon_file_path);
|
||||
$icon_json = json_decode($icon_data, true);
|
||||
|
||||
// Debugging: Check the structure of the decoded JSON
|
||||
if (is_array($icon_json)) {
|
||||
error_log(print_r($icon_json, true)); // Logs to PHP error log for inspection
|
||||
}
|
||||
|
||||
// Loop through svgs if it exists and is an array
|
||||
if (isset($icon_json[0]['svgs']) && is_array($icon_json[0]['svgs'])) {
|
||||
// Insert rows with actual data from the SVG file
|
||||
foreach ($icon_json[0]['svgs'] as $svg) {
|
||||
global $wpdb;
|
||||
$table_name = $wpdb->prefix . 'lcp_icons';
|
||||
|
||||
// Insert each SVG data into the database
|
||||
$wpdb->insert(
|
||||
$table_name,
|
||||
array(
|
||||
'icon_name' => $svg['name'], // Using the name from the SVG JSON
|
||||
'icon_set_id' => $selected_icon_set['id'],
|
||||
'icon_family' => $selected_icon_set['setFamily'], // Get family dynamically from the selected icon set
|
||||
'icon_version' => $selected_icon_set['version'], // Get version dynamically from the selected icon set
|
||||
'paths' => ($svg['paths']), // SVG paths from the JSON
|
||||
'viewbox' => sanitize_text_field($svg['viewBox']), // Viewbox for the SVG
|
||||
'icon_id' => sanitize_text_field($svg['id']) // Using the actual icon ID from the JSON
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
wp_send_json_success(array('message' => 'Icon set installed and rows added with actual data.'));
|
||||
} else {
|
||||
wp_send_json_error(array('message' => 'SVGs data not found in the JSON file.'));
|
||||
}
|
||||
} else {
|
||||
wp_send_json_error(array('message' => 'SVG file not found.'));
|
||||
}
|
||||
} else {
|
||||
wp_send_json_error(array('message' => 'Icon set not found.'));
|
||||
}
|
||||
} else {
|
||||
wp_send_json_error(array('message' => 'Icon definitions not found.'));
|
||||
}
|
||||
}
|
||||
add_action('wp_ajax_install_icon_set', 'mytheme_install_icon_set');
|
||||
|
||||
|
||||
|
||||
// Function to create the icons table in the database if it doesn't exist
|
||||
// Function to create the icons table in the database if it doesn't exist
|
||||
function mytheme_create_icons_table() {
|
||||
global $wpdb;
|
||||
|
||||
$table_name = $wpdb->prefix . 'lcp_icons';
|
||||
$charset_collate = $wpdb->get_charset_collate();
|
||||
|
||||
// SQL to create the table if it doesn't exist
|
||||
$sql = "CREATE TABLE IF NOT EXISTS $table_name (
|
||||
id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT, -- Auto-increment for the ID
|
||||
icon_name VARCHAR(255),
|
||||
icon_set_id VARCHAR(255),
|
||||
icon_family VARCHAR(255),
|
||||
icon_version VARCHAR(50),
|
||||
paths TEXT,
|
||||
viewbox VARCHAR(50),
|
||||
icon_id VARCHAR(255) UNIQUE, -- Unique identifier for each SVG (based on SVG 'id')
|
||||
PRIMARY KEY (id)
|
||||
) $charset_collate;";
|
||||
|
||||
// Include the necessary WordPress file to run dbDelta
|
||||
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
|
||||
dbDelta($sql);
|
||||
}
|
||||
|
||||
|
||||
function mytheme_enqueue_dashboard_scripts($hook) {
|
||||
// Only load the script on the icon-management page
|
||||
if ($hook != 'toplevel_page_icon-management') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Enqueue JavaScript for AJAX
|
||||
wp_enqueue_script(
|
||||
'icon-import-script',
|
||||
get_template_directory_uri() . '/assets/js/icon-import.js',
|
||||
array(), // No dependencies for vanilla JS
|
||||
null,
|
||||
true
|
||||
);
|
||||
|
||||
// Pass the AJAX URL to the script
|
||||
wp_localize_script('icon-import-script', 'mytheme_ajax', array(
|
||||
'ajax_url' => admin_url('admin-ajax.php')
|
||||
));
|
||||
}
|
||||
add_action('admin_enqueue_scripts', 'mytheme_enqueue_dashboard_scripts');
|
||||
|
||||
|
||||
// Handle the AJAX request for uninstalling icon sets
|
||||
function mytheme_uninstall_icon_set() {
|
||||
// Ensure icon set ID is passed in the request
|
||||
if (!isset($_POST['icon_set_id'])) {
|
||||
wp_send_json_error(array('message' => 'Invalid icon set ID.'));
|
||||
}
|
||||
|
||||
// Get the icon set ID from the request
|
||||
$icon_set_id = intval($_POST['icon_set_id']); // Ensure it's an integer
|
||||
|
||||
global $wpdb;
|
||||
|
||||
// Define the table name
|
||||
$table_name = $wpdb->prefix . 'lcp_icons';
|
||||
|
||||
// Delete all rows where the icon_set_id matches the passed ID
|
||||
$deleted_rows = $wpdb->delete(
|
||||
$table_name,
|
||||
array('icon_set_id' => $icon_set_id), // Condition to match rows by icon_set_id
|
||||
array('%d') // Sanitize the value as an integer
|
||||
);
|
||||
|
||||
// Check if rows were deleted successfully
|
||||
if ($deleted_rows) {
|
||||
wp_send_json_success(array('message' => 'Icon set uninstalled and icons removed from the database.'));
|
||||
} else {
|
||||
wp_send_json_error(array('message' => 'No icons found for the specified icon set ID.'));
|
||||
}
|
||||
}
|
||||
|
||||
add_action('wp_ajax_uninstall_icon_set', 'mytheme_uninstall_icon_set');
|
||||
|
||||
Reference in New Issue
Block a user