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

(function () {
  'use strict';

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

  var cfg = window.jioPayMetaBox || {};
  var rowTitleFallback = (cfg.i18n && cfg.i18n.downloadUrl) || '下载地址';

  function selected(name) {
    var input = root.querySelector('input[name="jio_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('.jio-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.medium ? data.sizes.medium.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 rowTitle(row) {
    var label = row.querySelector('[data-group-label]');
    var url = row.querySelector('[data-group-url]');
    var text = label ? String(label.value || '').trim() : '';
    if (text === '') {
      text = url ? String(url.value || '').trim() : '';
    }
    return text !== '' ? text : rowTitleFallback;
  }

  function syncRowTitle(row) {
    var title = row.querySelector('[data-group-title]');
    if (title) title.textContent = rowTitle(row);
  }

  function syncRowColor(row) {
    var input = row.querySelector('[data-group-class-input]');
    if (!input) return;
    var value = String(input.value || '');
    row.querySelectorAll('[data-group-class]').forEach(function (swatch) {
      var active = swatch.getAttribute('data-group-class') === value;
      swatch.classList.toggle('is-active', active);
      swatch.setAttribute('aria-pressed', active ? 'true' : 'false');
    });
  }

  // Restore contiguous input names so PHP receives an ordered array after any
  // reorder / removal instead of relying on DOM order. Anchored to this list's
  // own group so sibling groups (attributes, video_episode) are never touched.
  function reindexRows(list) {
    var group = list.getAttribute('data-group-list') || '[^\\]]+';
    var pattern = new RegExp('jio_pay\\[' + group + '\\]\\[\\d+\\]');
    list.querySelectorAll('[data-group-row]').forEach(function (row, index) {
      row.querySelectorAll('[name]').forEach(function (input) {
        input.name = input.name.replace(pattern, 'jio_pay[' + group + '][' + index + ']');
      });
    });
  }

  function toggleRow(row, force) {
    var open = typeof force === 'boolean' ? force : !row.classList.contains('is-open');
    row.classList.toggle('is-open', open);
    var toggle = row.querySelector('[data-group-toggle]');
    if (toggle) toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
  }

  function initRow(row) {
    syncRowTitle(row);
    syncRowColor(row);
    var drag = row.querySelector('[data-group-drag]');
    if (drag) drag.draggable = true;
  }

  function dragAfterElement(list, y) {
    var rows = Array.prototype.slice.call(list.querySelectorAll('[data-group-row]:not(.is-dragging)'));
    var best = null;
    var bestOffset = -Infinity;
    rows.forEach(function (row) {
      var box = row.getBoundingClientRect();
      var offset = y - box.top - box.height / 2;
      if (offset < 0 && offset > bestOffset) {
        bestOffset = offset;
        best = row;
      }
    });
    return best;
  }

  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)));
    var added = list.lastElementChild;
    if (added && added.hasAttribute('data-group-row')) {
      initRow(added);
      toggleRow(added, false);
    }
  }

  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('.jio-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 toggle = target.closest('[data-group-toggle]');
    if (toggle) {
      event.preventDefault();
      var toggleRowEl = toggle.closest('[data-group-row]');
      if (toggleRowEl) toggleRow(toggleRowEl);
      return;
    }
    var swatch = target.closest('[data-group-class]');
    if (swatch) {
      event.preventDefault();
      var swatchRow = swatch.closest('[data-group-row]');
      var classInput = swatchRow && swatchRow.querySelector('[data-group-class-input]');
      if (classInput) {
        classInput.value = swatch.getAttribute('data-group-class') || '';
        syncRowColor(swatchRow);
      }
      return;
    }
    var remove = target.closest('[data-group-remove]');
    if (remove) {
      event.preventDefault();
      var row = remove.closest('[data-group-row]');
      var list = remove.closest('[data-group-list]');
      if (row) row.remove();
      if (list) reindexRows(list);
    }
  });

  root.addEventListener('change', function (event) {
    syncDependencies();
    var row = event.target.closest && event.target.closest('[data-group-row]');
    if (row && (event.target.hasAttribute('data-group-url') || event.target.hasAttribute('data-group-label'))) {
      syncRowTitle(row);
    }
  });

  root.addEventListener('input', function (event) {
    var row = event.target.closest('[data-group-row]');
    if (!row) return;
    if (event.target.hasAttribute('data-group-label') || event.target.hasAttribute('data-group-url')) {
      syncRowTitle(row);
    }
  });

  root.addEventListener('dragstart', function (event) {
    var row = event.target.closest && event.target.closest('[data-group-row]');
    if (!row) return;
    row.classList.add('is-dragging');
    if (event.dataTransfer) {
      event.dataTransfer.effectAllowed = 'move';
      try {
        event.dataTransfer.setData('text/plain', '');
      } catch (error) { /* older IE */ }
    }
  });

  root.addEventListener('dragend', function (event) {
    var row = event.target.closest && event.target.closest('[data-group-row]');
    if (!row) return;
    row.classList.remove('is-dragging');
    var list = row.closest('[data-group-list]');
    if (list) reindexRows(list);
  });

  root.addEventListener('dragover', function (event) {
    var list = event.target.closest ? event.target.closest('[data-group-list]') : null;
    if (!list) return;
    var dragging = list.querySelector('[data-group-row].is-dragging');
    if (!dragging) return;
    event.preventDefault();
    var after = dragAfterElement(list, event.clientY);
    if (after == null) {
      list.appendChild(dragging);
    } else if (after !== dragging) {
      list.insertBefore(dragging, after);
    }
  });

  root.querySelectorAll('[data-group-list]').forEach(function (list) {
    list.querySelectorAll('[data-group-row]').forEach(initRow);
    reindexRows(list);
  });
  renderGallery();
  syncDependencies();
})();