wordpress-theme-aksrt/inc/helpers/jio-icon-picker.php

<?php
/**
 * Jio Theme — Universal icon picker (admin side)
 *
 * Server-side assets and modal markup for the shared FA5 + built-in SVG +
 * custom SVG picker. Field markup itself comes from jio_icon_picker_field().
 *
 * @package Jio
 */

defined('ABSPATH') || exit;

if (!function_exists('jio_icon_picker_assets')) :
/**
 * Enqueue the universal icon picker on any admin screen that needs it.
 *
 * Safe to call multiple times; assets and the footer modal are wired once.
 * FA5 CSS, the frontend SVG sprite (defines window.jio_svgs and injects the
 * symbol sheet) and the picker script/CSS are all included.
 *
 * @param array $deps Extra script dependencies for the picker script.
 */
function jio_icon_picker_assets(array $deps = []): void {
	static $done = false;
	if ($done) {
		return;
	}
	$done = true;

	$css_mtime = (string) filemtime(JIO_DIR . '/assets/css/admin-icon-picker.css');
	$js_mtime  = (string) filemtime(JIO_DIR . '/assets/js/admin-icon-picker.js');

	jio_enqueue_fontawesome();
	wp_enqueue_style('jio-icon-picker', JIO_URI . '/assets/css/admin-icon-picker.css', ['jio-font-awesome'], $css_mtime);

	wp_enqueue_script('jio-svg-sprite', JIO_URI . '/assets/js/runtime/svg-icon.js', ['jquery'], $js_mtime, true);
	wp_enqueue_script('jio-icon-picker', JIO_URI . '/assets/js/admin-icon-picker.js', array_merge(['jquery', 'jio-svg-sprite'], $deps), $js_mtime, true);

	wp_localize_script('jio-icon-picker', 'jioIconPicker', [
		'restUrl'  => esc_url_raw(rest_url('jio/v1/icons/catalog')),
		'nonce'    => wp_create_nonce('wp_rest'),
		'i18n'     => [
			'title'        => __('选择图标', 'jio'),
			'search'       => __('搜索图标…', 'jio'),
			'empty'        => __('未找到匹配图标', 'jio'),
			'customTitle'  => __('粘贴 SVG 图标代码', 'jio'),
			'customDesc'   => __('粘贴 <svg viewBox="0 0 1024 1024">…</svg> 格式的代码，确认后以内联方式保存到当前字段。', 'jio'),
			'customSubmit' => __('确认插入', 'jio'),
			'customEmpty'  => __('未检测到有效的 SVG 代码。', 'jio'),
			'loadError'    => __('图标目录加载失败，请刷新重试。', 'jio'),
			'clear'        => __('清除', 'jio'),
		],
	]);

	add_action('admin_footer', 'jio_icon_picker_modal', 20);
	add_action('customize_controls_print_footer_scripts', 'jio_icon_picker_modal', 20);
}
endif;

if (!function_exists('jio_icon_picker_modal')) :
/**
 * Print the shared picker modal once per admin page.
 */
function jio_icon_picker_modal(): void {
	static $printed = false;
	if ($printed) {
		return;
	}
	$printed = true;
	?>
	<div id="jio-modal-icon" class="jio-icon-modal hidden">
		<div class="jio-icon-modal__overlay" data-jio-icon-close></div>
		<div class="jio-icon-modal__inner" role="dialog" aria-modal="true" aria-label="<?php esc_attr_e('选择图标', 'jio'); ?>">
			<div class="jio-icon-modal__header">
				<strong><?php esc_html_e('选择图标', 'jio'); ?></strong>
				<button type="button" class="button-link jio-icon-modal__close" data-jio-icon-close aria-label="<?php esc_attr_e('关闭', 'jio'); ?>">×</button>
			</div>
			<div class="jio-icon-modal__toolbar">
				<input type="search" class="jio-icon-modal__search regular-text" placeholder="<?php esc_attr_e('搜索图标…', 'jio'); ?>">
				<div class="jio-icon-modal__tabs" role="tablist"></div>
			</div>
			<div class="jio-icon-modal__body">
				<div class="jio-icon-modal__loading" hidden><span class="spinner is-active"></span></div>
				<div class="jio-icon-modal__error" hidden></div>
				<div class="jio-icon-modal__grids"></div>
				<div class="jio-icon-modal__custom" hidden>
					<p class="description"><?php esc_html_e('粘贴 SVG 图标代码', 'jio'); ?></p>
					<textarea class="large-text code" rows="5" placeholder='&lt;svg viewBox="0 0 1024 1024"&gt;&lt;path d="…"&gt;&lt;/path&gt;&lt;/svg&gt;'></textarea>
					<div class="jio-icon-modal__custom-actions">
						<span class="jio-icon-modal__custom-preview" aria-hidden="true"></span>
						<button type="button" class="button button-primary"><?php esc_html_e('确认插入', 'jio'); ?></button>
					</div>
					<div class="jio-icon-modal__grid jio-icon-modal__grid--session"></div>
				</div>
			</div>
		</div>
	</div>
	<?php
}
endif;

if (!function_exists('jio_icon_picker_field')) :
/**
 * Render a universal icon-picker field (preview + choose/clear + text input).
 *
 * The text input stays visible so raw class strings remain editable and
 * dependency evaluation (which reads the first input in the field) keeps
 * working; the picker simply fills it.
 *
 * @param string $name  Input name.
 * @param string $id    Input id.
 * @param string $value Current value.
 * @param array  $args  {placeholder?: string, class?: string}
 * @return string
 */
function jio_icon_picker_field(string $name, string $id, string $value, array $args = []): string {
	$value       = (string) $value;
	$placeholder = (string) ($args['placeholder'] ?? 'fa fas fa-star');
	$wrap_class  = trim('jio-icon-picker ' . (string) ($args['class'] ?? ''));
	$has_value   = $value !== '';

	ob_start();
	?>
	<div class="<?php echo esc_attr($wrap_class); ?>" data-jio-icon-picker>
		<span class="jio-icon-picker__preview<?php echo $has_value ? '' : ' hidden'; ?>"><?php echo jio_icon_markup($value); // pre-escaped ?></span>
		<span class="jio-icon-picker__actions">
			<button type="button" class="button jio-icon-picker__choose"><?php esc_html_e('选择图标', 'jio'); ?></button>
			<button type="button" class="button-link-delete jio-icon-picker__remove<?php echo $has_value ? '' : ' hidden'; ?>"><?php esc_html_e('清除', 'jio'); ?></button>
		</span>
		<input type="text" class="widefat jio-icon-picker__value" id="<?php echo esc_attr($id); ?>" name="<?php echo esc_attr($name); ?>" value="<?php echo esc_attr($value); ?>" placeholder="<?php echo esc_attr($placeholder); ?>">
	</div>
	<?php
	return (string) ob_get_clean();
}
endif;