wordpress-theme-aksrt/assets/js/admin-pay-meta-box.js

(function () {
  'use strict';

  var root = document.querySelector('[data-aksrt-pay-meta]');
  if (!root) return;

  function selected(name) {
    var input = root.querySelector('input[name="aksrt_pay[' + name + ']"]:checked');
    return input ? input.value : '';
  }

  function syncDependencies() {
    var type = selected('pay_type');
    var modo = selected('pay_modo');
    var enabled = type !== 'no';
    var enabledBox = root.querySelector('[data-pay-enabled]');
    if (enabledBox) enabledBox.hidden = !enabled;

    root.querySelectorAll('[data-pay-type]').forEach(function (field) {
      field.hidden = field.getAttribute('data-pay-type') !== type;
    });
    root.querySelectorAll('[data-pay-modo]').forEach(function (field) {
      field.hidden = field.getAttribute('data-pay-modo') !== modo;
    });

    var expired = root.querySelector('[data-order-expired]');
    var expiredFields = root.querySelector('[data-order-expired-fields]');
    if (expiredFields) expiredFields.hidden = !expired || !expired.checked;
  }

  function openMedia(button) {
    if (!window.wp || !wp.media) return;
    var wrap = button.closest('.aksrt-pay-meta__upload');
    var input = wrap && wrap.querySelector('[data-media-input]');
    if (!input) return;
    var library = button.getAttribute('data-library') || '';
    var options = { title: library === 'video' ? '选择视频' : '选择文件', multiple: false };
    if (library) options.library = { type: library };
    var frame = wp.media(options);
    frame.on('select', function () {
      var item = frame.state().get('selection').first().toJSON();
      input.value = item.url || '';
      input.dispatchEvent(new Event('change', { bubbles: true }));
    });
    frame.open();
  }

  function renderGallery() {
    if (!window.wp || !wp.media) return;
    var input = root.querySelector('[data-gallery-input]');
    var preview = root.querySelector('[data-gallery-preview]');
    if (!input || !preview) return;
    preview.innerHTML = '';
    input.value.split(',').map(function (id) { return parseInt(id, 10); }).filter(Boolean).forEach(function (id) {
      wp.media.attachment(id).fetch().then(function () {
        var data = wp.media.attachment(id).toJSON();
        var image = document.createElement('img');
        image.src = (data.sizes && data.sizes.thumbnail ? data.sizes.thumbnail.url : data.url) || '';
        image.alt = data.alt || '';
        preview.appendChild(image);
      });
    });
  }

  function openGallery() {
    if (!window.wp || !wp.media) return;
    var input = root.querySelector('[data-gallery-input]');
    if (!input) return;
    var frame = wp.media({ title: '新增图片', library: { type: 'image' }, multiple: true });
    frame.on('open', function () {
      input.value.split(',').map(function (id) { return parseInt(id, 10); }).filter(Boolean).forEach(function (id) {
        frame.state().get('selection').add(wp.media.attachment(id));
      });
    });
    frame.on('select', function () {
      input.value = frame.state().get('selection').map(function (item) { return item.id; }).join(',');
      renderGallery();
    });
    frame.open();
  }

  function addGroup(button) {
    var id = button.getAttribute('data-group-add');
    var list = root.querySelector('[data-group-list="' + id + '"]');
    var template = root.querySelector('[data-group-template="' + id + '"]');
    if (!list || !template) return;
    var index = list.querySelectorAll('[data-group-row]').length;
    list.insertAdjacentHTML('beforeend', template.innerHTML.replaceAll('__INDEX__', String(index)));
  }

  root.addEventListener('click', function (event) {
    var target = event.target;
    var media = target.closest('[data-media-select]');
    if (media) {
      event.preventDefault();
      openMedia(media);
      return;
    }
    var clear = target.closest('[data-media-clear]');
    if (clear) {
      event.preventDefault();
      var wrap = clear.closest('.aksrt-pay-meta__upload');
      var input = wrap && wrap.querySelector('[data-media-input]');
      if (input) input.value = '';
      return;
    }
    if (target.closest('[data-gallery-select]')) {
      event.preventDefault();
      openGallery();
      return;
    }
    if (target.closest('[data-gallery-clear]')) {
      event.preventDefault();
      var gallery = root.querySelector('[data-gallery-input]');
      if (gallery) gallery.value = '';
      renderGallery();
      return;
    }
    var add = target.closest('[data-group-add]');
    if (add) {
      event.preventDefault();
      addGroup(add);
      return;
    }
    var remove = target.closest('[data-group-remove]');
    if (remove) {
      event.preventDefault();
      var row = remove.closest('[data-group-row]');
      if (row) row.remove();
    }
  });

  root.addEventListener('change', syncDependencies);
  renderGallery();
  syncDependencies();
})();