yoone-snow/js/admin-media.js

(function(){
  // 后台媒体选择交互脚本 用于在设置页选择媒体项目
  function initAdminMedia(){
    // 条件判断 如果没有媒体按钮则不执行
    var addButton = document.getElementById('yooneSnowAddMedia');
    var listContainer = document.getElementById('yooneSnowMediaList');
    if (!addButton || !listContainer) { return; }

    // 形状与媒体权重容器元素 获取以便动态更新
    var weightsContainer = document.getElementById('yooneSnowWeightsContainer');
    var shapeWeightsBox = document.getElementById('yooneSnowShapeWeights');
    var mediaWeightsBox = document.getElementById('yooneSnowMediaWeights');

    // 形状标签映射用于显示友好名称
    var shapeLabelsMap = {
      dot: 'Dot',
      flake: 'Snowflake',
      yuanbao: 'Yuanbao',
      coin: 'Coin',
      santa_hat: 'Santa Hat',
      candy_cane: 'Candy Cane',
      christmas_sock: 'Christmas Sock',
      christmas_tree: 'Christmas Tree',
      reindeer: 'Reindeer',
      christmas_berry: 'Christmas Berry'
    };

    // 同步形状权重输入 根据勾选状态增删对应输入
    function ensureShapeWeightInputs(){
      // 条件判断 权重容器不存在则跳过
      if (!shapeWeightsBox) { return; }
      var checkboxes = document.querySelectorAll('input[name="yoone_snow_mixed_items[]"]');
      var presentKeys = {};
      // 收集已存在的标签记录用于对比
      var existingLabels = shapeWeightsBox.querySelectorAll('label[data-shape-key]');
      existingLabels.forEach(function(el){
        presentKeys[el.getAttribute('data-shape-key')] = el;
      });
      checkboxes.forEach(function(cb){
        var key = cb.value;
        if (cb.checked){
          // 条件判断 如果不存在对应输入则创建 默认权重值为 1
          if (!presentKeys[key]){
            var lab = document.createElement('label');
            lab.setAttribute('data-shape-key', key);
            lab.style.display = 'flex';
            lab.style.flexDirection = 'column';
            lab.style.minWidth = '160px';
            var title = document.createElement('span');
            title.textContent = shapeLabelsMap[key] || key;
            var input = document.createElement('input');
            input.type = 'number';
            input.min = '0';
            input.name = 'yoone_snow_shape_weights[' + key + ']';
            input.value = '1';
            input.style.width = '120px';
            lab.appendChild(title);
            lab.appendChild(input);
            shapeWeightsBox.appendChild(lab);
          }
        } else {
          // 条件判断 如果取消勾选则移除对应输入
          var exist = shapeWeightsBox.querySelector('label[data-shape-key="' + key + '"]');
          if (exist) { exist.remove(); }
        }
      });
    }

    // 添加媒体权重输入 根据附件 ID 创建输入 默认值为 1
    function addMediaWeightInput(attachmentId){
      if (!mediaWeightsBox) { return; }
      var exist = mediaWeightsBox.querySelector('label[data-attachment-id="' + String(attachmentId) + '"]');
      if (exist) { return; }
      var lab = document.createElement('label');
      lab.setAttribute('data-attachment-id', String(attachmentId));
      lab.style.display = 'flex';
      lab.style.flexDirection = 'column';
      lab.style.minWidth = '160px';
      var title = document.createElement('span');
      title.textContent = 'Media ' + String(attachmentId);
      var input = document.createElement('input');
      input.type = 'number';
      input.min = '0';
      input.name = 'yoone_snow_media_weights[' + String(attachmentId) + ']';
      input.value = '1';
      input.style.width = '120px';
      lab.appendChild(title);
      lab.appendChild(input);
      mediaWeightsBox.appendChild(lab);
    }

    // 移除媒体权重输入 根据附件 ID 删除对应输入
    function removeMediaWeightInput(attachmentId){
      if (!mediaWeightsBox) { return; }
      var exist = mediaWeightsBox.querySelector('label[data-attachment-id="' + String(attachmentId) + '"]');
      if (exist) { exist.remove(); }
    }

    // 初始化时同步一次形状权重输入
    ensureShapeWeightInputs();

    // 监听形状复选框变化事件 动态刷新权重输入
    document.addEventListener('change', function(event){
      var t = event.target;
      if (t && t.name === 'yoone_snow_mixed_items[]'){
        ensureShapeWeightInputs();
      }
    });

    // 绑定移除按钮事件 使用事件委托处理动态元素
    listContainer.addEventListener('click', function(event){
      // 条件判断 如果点击的是移除按钮则执行删除
      var target = event.target;
      if (target && target.classList.contains('yoone-snow-remove-media')){
        var item = target.closest('.yoone-snow-media-item');
        if (item) {
          var aidStr = item.getAttribute('data-attachment-id');
          item.remove();
          // 同步移除对应媒体权重输入
          if (aidStr) { removeMediaWeightInput(aidStr); }
        }
      }
    });

    // 打开媒体选择器 支持多选 图片和 SVG
    addButton.addEventListener('click', function(){
      // 条件判断 如果 wp.media 不可用则终止
      if (typeof wp === 'undefined' || !wp.media) { return; }
      var frame = wp.media({
        title: 'Select images or SVG',
        multiple: true,
        library: { type: [ 'image', 'image/svg+xml' ] }
      });
      frame.on('select', function(){
        var selection = frame.state().get('selection');
        selection.each(function(attachment){
          var data = attachment.toJSON();
          var id = data.id;
          var url = data.sizes && data.sizes.thumbnail ? data.sizes.thumbnail.url : data.url;
          // 创建预览项与隐藏输入 保存附件 ID
          var wrapper = document.createElement('div');
          wrapper.className = 'yoone-snow-media-item';
          wrapper.setAttribute('data-attachment-id', String(id));
          wrapper.style.border = '1px solid #ddd';
          wrapper.style.padding = '8px';
          wrapper.style.display = 'flex';
          wrapper.style.flexDirection = 'column';
          wrapper.style.alignItems = 'center';
          var img = document.createElement('img');
          img.src = url;
          img.alt = 'media';
          img.style.width = '72px';
          img.style.height = '72px';
          img.style.objectFit = 'contain';
          var input = document.createElement('input');
          input.type = 'hidden';
          input.name = 'yoone_snow_media_items[]';
          input.value = String(id);
          var removeBtn = document.createElement('button');
          removeBtn.type = 'button';
          removeBtn.className = 'button yoone-snow-remove-media';
          removeBtn.textContent = 'Remove';
          removeBtn.style.marginTop = '6px';
          wrapper.appendChild(img);
          wrapper.appendChild(input);
          wrapper.appendChild(removeBtn);
          listContainer.appendChild(wrapper);
          // 同步添加媒体权重输入 默认权重为 1
          addMediaWeightInput(id);
        });
      });
      frame.open();
    });
  }

  // 条件判断 如果文档尚未加载则等待 DOMContentLoaded 事件
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', initAdminMedia);
  } else {
    initAdminMedia();
  }
})();