wordpress-theme-aksrt/assets/js/admin-post-extension.js

(function ($) {
  'use strict';

  var root = document.querySelector('[data-jio-post-extension]');
  if (!root || !window.wp || !wp.media) return;

  function openMedia(button) {
    var wrap = button.closest('.jio-post-extension__upload');
    var input = wrap && wrap.querySelector('[data-media-input]');
    if (!input) return;

    var library = button.getAttribute('data-library') || 'image';
    var frame = wp.media({
      title: library === 'video' ? '选择视频' : '选择图像',
      library: { type: library },
      multiple: false
    });
    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() {
    var input = root.querySelector('[data-gallery-input]');
    var preview = root.querySelector('[data-gallery-preview]');
    if (!input || !preview) return;

    preview.innerHTML = '';
    var ids = input.value.split(',').map(function (id) { return parseInt(id, 10); }).filter(Boolean);
    ids.forEach(function (id) {
      wp.media.attachment(id).fetch().then(function () {
        var data = wp.media.attachment(id).toJSON();
        var img = document.createElement('img');
        img.src = (data.sizes && data.sizes.medium ? data.sizes.medium.url : data.url) || '';
        img.alt = data.alt || '';
        preview.appendChild(img);
      });
    });
  }

  function openGallery() {
    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 syncVideoDependencies() {
    var input = root.querySelector('input[name="jio_post_extension[featured_video]"]');
    root.querySelectorAll('[data-video-dependent]').forEach(function (field) {
      field.hidden = !input || !input.value.trim();
    });
  }

  root.addEventListener('click', function (event) {
    var mediaButton = event.target.closest('[data-media-select]');
    if (mediaButton) {
      event.preventDefault();
      openMedia(mediaButton);
      return;
    }

    var clear = event.target.closest('[data-media-clear]');
    if (clear) {
      event.preventDefault();
      var wrap = clear.closest('.jio-post-extension__upload');
      var input = wrap && wrap.querySelector('[data-media-input]');
      if (input) {
        input.value = '';
        input.dispatchEvent(new Event('change', { bubbles: true }));
      }
      return;
    }

    if (event.target.closest('[data-gallery-select]')) {
      event.preventDefault();
      openGallery();
      return;
    }

    if (event.target.closest('[data-gallery-clear]')) {
      event.preventDefault();
      var galleryInput = root.querySelector('[data-gallery-input]');
      if (galleryInput) galleryInput.value = '';
      renderGallery();
      return;
    }

    if (event.target.closest('[data-episode-add]')) {
      event.preventDefault();
      var list = root.querySelector('[data-episode-list]');
      var template = root.querySelector('[data-episode-template]');
      if (!list || !template) return;
      var index = list.querySelectorAll('[data-episode-row]').length;
      list.insertAdjacentHTML('beforeend', template.innerHTML.replaceAll('__INDEX__', String(index)));
      return;
    }

    var remove = event.target.closest('[data-episode-remove]');
    if (remove) {
      event.preventDefault();
      var row = remove.closest('[data-episode-row]');
      if (row) row.remove();
    }
  });

  root.addEventListener('input', syncVideoDependencies);
  root.addEventListener('change', syncVideoDependencies);
  renderGallery();
  syncVideoDependencies();
})(jQuery);