wordpress-theme-aksrt/assets/js/admin-icon-picker.js

/**
 * Jio universal icon picker — shared admin modal for FA5, the built-in
 * SVG sprite and inline custom SVG values ("fa fas fa-star" / "zibsvg-key" /
 * "customsvg-<svg>").
 *
 * Any admin screen: call jio_icon_picker_assets() (PHP) and render fields
 * via jio_icon_picker_field(); interaction is fully delegated, so lazy
 * loaded widget forms and repeater rows work without re-init.
 */
(function ($) {
  'use strict';

  const config = window.jioIconPicker || {};
  const i18n = config.i18n || {};

  const state = {
    loaded: false,
    loading: false,
    activeTab: 'fas',
    tabs: [],
    grids: {},
    sessionCustom: [],
    $target: null,
  };

  function modal() {
    return $('#jio-modal-icon');
  }

  function setBusy(busy) {
    modal().find('.jio-icon-modal__loading').each((_i, el) => { el.hidden = !busy; });
  }

  /* Custom SVG cleanup — strip authoring leftovers, keep pure vector markup. */
  function cleanSvg(raw) {
    const text = String(raw || '').trim();
    if (!text) return '';
    let doc;
    try {
      doc = new window.DOMParser().parseFromString(text, 'image/svg+xml');
    } catch (e) {
      return '';
    }
    if (doc.querySelector('parsererror')) return '';
    const svg = doc.querySelector('svg');
    if (!svg || svg.querySelector('script, foreignObject, animate')) return '';
    ['class', 'id', 'style', 't', 'version', 'p-id'].forEach((attr) => svg.removeAttribute(attr));
    Array.prototype.slice.call(svg.attributes).forEach((attr) => {
      if (attr.name.indexOf('data-') === 0) svg.removeAttribute(attr.name);
    });
    const keep = new window.XMLSerializer().serializeToString(svg);
    return /<path|<use|<g\b|<circle|<rect|<polygon|<ellipse|<line/i.test(keep) ? keep : '';
  }

  function escapeText(text) {
    return String(text).replace(/[&<>"']/g, (ch) => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;',
    }[ch]));
  }

  function previewMarkup(value) {
    value = String(value || '').trim();
    if (!value) return '';
    if (value.indexOf('customsvg-') === 0) return cleanSvg(value.slice(10));
    if (value.indexOf('zibsvg-') === 0) {
      const key = value.slice(7).replace(/[^a-zA-Z0-9_-]/g, '');
      return key ? `<svg class="icon" aria-hidden="true"><use xlink:href="#icon-${key}"></use></svg>` : '';
    }
    const el = document.createElement('i');
    el.className = !/\bfa\b/.test(value) && value.indexOf('fa-') !== -1 ? `fa ${value}` : value;
    el.setAttribute('aria-hidden', 'true');
    return el.outerHTML;
  }

  function seedSessionCustom() {
    $('input.jio-icon-picker__value').each(function () {
      const value = String(this.value || '').trim();
      if (value.indexOf('customsvg-') !== 0) return;
      const svg = value.slice(10);
      if (svg && state.sessionCustom.indexOf(svg) === -1) state.sessionCustom.push(svg);
    });
  }

  function itemButton(value, name, innerHtml) {
    return $('<button type="button" class="jio-icon-picker__item" role="option">')
      .attr({ 'data-value': value, 'data-name': name, title: name })
      .html(innerHtml);
  }

  function buildGrids(groups) {
    state.tabs = [];
    state.grids = {};
    const $wrap = modal().find('.jio-icon-modal__grids').empty();

    groups.forEach((group) => {
      state.tabs.push(group);
      const $grid = $('<div class="jio-icon-modal__grid" data-grid="' + escapeText(group.id) + '" hidden></div>');
      (group.icons || []).forEach((name) => {
        if (group.type === 'fa') {
          const value = `fa ${group.id} fa-${name}`;
          // Style-class-only preview: immune to the .fa family override in FA5's css.
          $grid.append(itemButton(value, name, `<i class="${group.id} fa-${escapeText(name)}" aria-hidden="true"></i>`));
        } else if (group.type === 'svg') {
          const value = `zibsvg-${name}`;
          const key = escapeText(name).replace(/[^a-zA-Z0-9_-]/g, '');
          $grid.append(itemButton(value, name, `<svg class="icon" aria-hidden="true"><use xlink:href="#icon-${key}"></use></svg>`));
        }
      });
      $wrap.append($grid);
      state.grids[group.id] = $grid;

      const $tab = $('<button type="button" class="button jio-icon-modal__tab" role="tab">').attr('data-tab', group.id).text(group.title || group.id);
      modal().find('.jio-icon-modal__tabs').append($tab);
    });
  }

  function buildSessionGrid() {
    const $session = modal().find('.jio-icon-modal__grid--session');
    $session.empty();
    state.sessionCustom.forEach((svg) => {
      $session.append(itemButton('customsvg-' + svg, 'customsvg', cleanSvg(svg)));
    });
  }

  function showTab(tabId) {
    state.activeTab = tabId;
    modal().find('.jio-icon-modal__tab').each(function () {
      this.classList.toggle('is-active', this.dataset.tab === tabId);
    });
    $.each(state.grids, (id, $grid) => { $grid[0].hidden = id !== tabId; });
    const isCustom = tabId === 'custom';
    modal().find('.jio-icon-modal__custom').each((_i, el) => { el.hidden = !isCustom; });
    modal().find('.jio-icon-modal__search').each((_i, el) => { el.hidden = isCustom; });
    applySearch();
  }

  function applySearch() {
    if (state.activeTab === 'custom') return;
    const needle = String(modal().find('.jio-icon-modal__search').val() || '').trim().toLowerCase();
    const $grid = state.grids[state.activeTab];
    if (!$grid) return;
    let visible = 0;
    $grid.find('.jio-icon-picker__item').each(function () {
      const show = !needle || String(this.dataset.name || '').toLowerCase().indexOf(needle) !== -1;
      this.hidden = !show;
      if (show) visible++;
    });
    $grid.find('.jio-icon-picker__empty').remove();
    if (!visible) $grid.append('<div class="jio-icon-picker__empty">' + escapeText(i18n.empty || 'No icons found.') + '</div>');
  }

  function refreshPicker($picker, value) {
    const $preview = $picker.find('.jio-icon-picker__preview').first();
    $preview.html(previewMarkup(value)).toggleClass('hidden', !value);
    $picker.find('.jio-icon-picker__remove').first().toggleClass('hidden', !value);
  }

  function select(value) {
    modal().addClass('hidden');
    const $picker = state.$target;
    if (!$picker || !$picker.length) return;
    $picker.find('input.jio-icon-picker__value').val(value).trigger('change');
    refreshPicker($picker, value);
  }

  function ensureCatalog() {
    if (state.loaded || state.loading) return;
    state.loading = true;
    setBusy(true);
    window.fetch(config.restUrl, { headers: { 'X-WP-Nonce': config.nonce } })
      .then((r) => r.json())
      .then((json) => {
        if (!json || !json.success || !Array.isArray(json.groups)) throw new Error('bad payload');
        buildGrids(json.groups);
        seedSessionCustom();
        buildSessionGrid();
        state.loaded = true;
        setBusy(false);
        showTab('fas');
      })
      .catch(() => {
        state.loading = false;
        setBusy(false);
        modal().find('.jio-icon-modal__error').each((_i, el) => {
          el.hidden = false;
          el.textContent = i18n.loadError || 'Failed to load icons.';
        });
      });
  }

  function open($picker) {
    state.$target = $picker;
    modal().removeClass('hidden');
    seedSessionCustom();
    buildSessionGrid();
    ensureCatalog();
    if (state.loaded) showTab(state.activeTab);
    modal().find('.jio-icon-modal__search').trigger('focus');
  }

  $(document)
    .on('click', '.jio-icon-picker__choose', function () {
      open($(this).closest('[data-jio-icon-picker]'));
    })
    .on('click', '.jio-icon-picker__remove', function () {
      const $picker = $(this).closest('[data-jio-icon-picker]');
      $picker.find('input.jio-icon-picker__value').val('').trigger('change');
      refreshPicker($picker, '');
    })
    .on('change', 'input.jio-icon-picker__value', function () {
      refreshPicker($(this).closest('[data-jio-icon-picker]'), String(this.value || '').trim());
    })
    .on('click', '[data-jio-icon-close]', () => modal().addClass('hidden'))
    .on('keydown', (e) => { if (e.key === 'Escape') modal().addClass('hidden'); })
    .on('click', '.jio-icon-modal__tab', function () { showTab(this.dataset.tab); })
    .on('input', '.jio-icon-modal__search', applySearch)
    .on('click', '.jio-icon-picker__item', function () {
      const value = String(this.dataset.value || '');
      if (value) select(value);
    })
    .on('input', '.jio-icon-modal__custom textarea', function () {
      modal().find('.jio-icon-modal__custom-preview').html(cleanSvg(this.value));
    })
    .on('click', '.jio-icon-modal__custom-actions .button', function () {
      const $custom = modal().find('.jio-icon-modal__custom');
      const svg = cleanSvg($custom.find('textarea').val());
      if (!svg) {
        window.alert(i18n.customEmpty || 'Invalid SVG.');
        return;
      }
      if (state.sessionCustom.indexOf(svg) === -1) {
        state.sessionCustom.push(svg);
        buildSessionGrid();
      }
      select('customsvg-' + svg);
      $custom.find('textarea').val('');
      $custom.find('.jio-icon-modal__custom-preview').html('');
    });
})(jQuery);