75 lines
3.0 KiB
JavaScript
75 lines
3.0 KiB
JavaScript
(function(){
|
|
// 后台媒体选择交互脚本 用于在设置页选择媒体项目
|
|
function initAdminMedia(){
|
|
// 条件判断 如果没有媒体按钮则不执行
|
|
var addButton = document.getElementById('yooneSnowAddMedia');
|
|
var listContainer = document.getElementById('yooneSnowMediaList');
|
|
if (!addButton || !listContainer) { return; }
|
|
|
|
// 绑定移除按钮事件 使用事件委托处理动态元素
|
|
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) { item.remove(); }
|
|
}
|
|
});
|
|
|
|
// 打开媒体选择器 支持多选 图片和 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);
|
|
});
|
|
});
|
|
frame.open();
|
|
});
|
|
}
|
|
|
|
// 条件判断 如果文档尚未加载则等待 DOMContentLoaded 事件
|
|
if (document.readyState === 'loading'){
|
|
document.addEventListener('DOMContentLoaded', initAdminMedia);
|
|
} else {
|
|
initAdminMedia();
|
|
}
|
|
})();
|