yoone-snow/js/admin-media.js

594 lines
23 KiB
JavaScript

(function(){
// 后台媒体选择交互脚本 用于在设置页选择媒体项目
function initAdminMedia(){
// 将后台资源映射注入到前端设置对象 以便 shapes 脚本复用
if (typeof window !== 'undefined'){
// 条件判断 如果前端设置对象不存在则创建
window.YooneSnowSettings = window.YooneSnowSettings || {};
// 条件判断 若未设置 assetsMap 且后台提供则注入
if (!window.YooneSnowSettings.assetsMap && window.YooneSnowAdmin && window.YooneSnowAdmin.assetsMap){
window.YooneSnowSettings.assetsMap = window.YooneSnowAdmin.assetsMap;
}
}
// 条件判断 如果没有媒体按钮则不执行
var addButton = document.getElementById('yooneSnowAddMedia');
var listContainer = document.getElementById('yooneSnowMediaList');
var emojiListContainer = document.getElementById('yooneSnowEmojiList');
var emojiInput = document.getElementById('yooneSnowAddEmojiInput');
var emojiAddButton = document.getElementById('yooneSnowAddEmoji');
var emojiSuggestBox = document.getElementById('yooneSnowEmojiSuggest');
var shapeListContainer = document.getElementById('yooneSnowShapeList');
var shapeAddSelect = document.getElementById('yooneSnowAddShapeSelect');
var shapeAddButton = document.getElementById('yooneSnowAddShapeBtn');
var emojiSelect = document.getElementById('yooneSnowEmojiSelect');
if (!addButton || !listContainer) { return; }
// 形状与媒体权重容器元素 获取以便动态更新
var weightsContainer = document.getElementById('yooneSnowWeightsContainer');
var shapeWeightsBox = document.getElementById('yooneSnowShapeWeights');
var mediaWeightsBox = document.getElementById('yooneSnowMediaWeights');
var emojiWeightsBox = document.getElementById('yooneSnowEmojiWeights');
// 形状标签映射用于显示友好名称
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'
};
// 创建形状预览元素 直接复用 shapes 渲染器 实现一致预览
function createShapePreviewElement(shapeKey){
var registry = (typeof window !== 'undefined' && window.YooneSnowShapeRenderers) ? window.YooneSnowShapeRenderers : {};
var renderer = registry[shapeKey];
// 条件判断 如果找到渲染器则使用 canvas 调用渲染函数
if (typeof renderer === 'function'){
var canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
canvas.style.marginRight = '6px';
// 为白色形状提供可见的暗底与边框 提升可读性
canvas.style.background = '#2d3748';
canvas.style.border = '1px solid #ddd';
canvas.style.borderRadius = '4px';
var ctx = canvas.getContext('2d');
// 根据形状选择更合适的基础尺寸 保证预览清晰
var previewBaseSizeMap = {
dot: 6,
flake: 6,
yuanbao: 3,
coin: 3.5,
santa_hat: 2.8,
candy_cane: 2.8,
christmas_sock: 2.8,
christmas_tree: 2.8,
reindeer: 2.8,
christmas_berry: 2.8
};
var baseSize = previewBaseSizeMap[shapeKey] || 3.2;
// 调用渲染器 使用画布中心作为位置
try { renderer(ctx, 16, 16, baseSize); } catch(e){}
// 对基于圖像的形狀進行補繪 當圖像加載完成時重試一次
var assets = (window.YooneSnowSettings && window.YooneSnowSettings.assetsMap) ? window.YooneSnowSettings.assetsMap : {};
var url = assets[shapeKey];
if (url && typeof window.YooneSnowGetOrLoadImage === 'function'){
var record = window.YooneSnowGetOrLoadImage(url);
if (!record || !record.ready){
var tries = 0;
var timer = setInterval(function(){
tries++;
var check = window.YooneSnowGetOrLoadImage(url);
if (check && check.ready){
try {
ctx.clearRect(0,0,canvas.width,canvas.height);
renderer(ctx, 16, 16, 2.5);
} catch(err){}
clearInterval(timer);
}
if (tries > 50){ clearInterval(timer); }
}, 100);
}
}
return canvas;
}
// 条件判断 若无渲染器则回退为资源图预览 保证可见性
if (typeof window !== 'undefined' && window.YooneSnowAdmin && window.YooneSnowAdmin.assetsMap && window.YooneSnowAdmin.assetsMap[shapeKey]){
var img = document.createElement('img');
img.src = String(window.YooneSnowAdmin.assetsMap[shapeKey]);
img.alt = shapeKey;
img.style.width = '28px';
img.style.height = '28px';
img.style.objectFit = 'contain';
img.style.marginRight = '6px';
return img;
}
// 默认降级 使用文本首字母表示
var fallback = document.createElement('canvas');
fallback.width = 32;
fallback.height = 32;
fallback.style.marginRight = '6px';
var fctx = fallback.getContext('2d');
fctx.fillStyle = '#555';
fctx.font = '12px system-ui';
fctx.textAlign = 'center';
fctx.textBaseline = 'middle';
var txt = (shapeKey || 'S').substring(0, 1).toUpperCase();
fctx.fillText(txt, 16, 16);
return fallback;
}
// 为形状复选框添加图形预览 替代纯文字展示
function renderShapeCheckboxPreviews(){
// 查找所有形状复选框 遍历其父级标签容器
var inputs = document.querySelectorAll('input[name="yoone_snow_mixed_items[]"]');
inputs.forEach(function(cb){
var label = cb.closest('label');
if (!label) { return; }
// 条件判断 若已绘制过预览则跳过
if (label.querySelector('.yoone-shape-preview')) { return; }
var key = cb.value;
// 创建预览节点并插入在文本前
var wrap = document.createElement('span');
wrap.className = 'yoone-shape-preview';
wrap.style.display = 'inline-flex';
wrap.style.alignItems = 'center';
wrap.style.marginRight = '6px';
var previewEl = createShapePreviewElement(key);
wrap.appendChild(previewEl);
// 插入到复选框后的位置便于对齐
cb.insertAdjacentElement('afterend', wrap);
// 同步更新文字标签 保留友好名称
var nameSpan = label.querySelector('span');
if (!nameSpan){
nameSpan = document.createElement('span');
nameSpan.textContent = shapeLabelsMap[key] || key;
nameSpan.style.marginLeft = '4px';
wrap.insertAdjacentElement('afterend', nameSpan);
}
});
}
// 同步形状权重输入 根据勾选状态增删对应输入
function ensureShapeWeightInputs(){
if (!shapeWeightsBox) { return; }
var presentKeys = {};
var existingLabels = shapeWeightsBox.querySelectorAll('label[data-shape-key]');
existingLabels.forEach(function(el){ presentKeys[el.getAttribute('data-shape-key')] = el; });
var items = shapeListContainer ? shapeListContainer.querySelectorAll('.yoone-snow-shape-item') : [];
items.forEach(function(item){
var key = item.getAttribute('data-shape-key');
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);
}
});
for (var k in presentKeys){
var stillSelected = shapeListContainer && shapeListContainer.querySelector('.yoone-snow-shape-item[data-shape-key="' + k + '"]');
if (!stillSelected){ presentKeys[k].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);
}
// 添加 emoji 權重輸入 根據字符創建輸入 默認值為 1
function addEmojiWeightInput(emojiChar){
if (!emojiWeightsBox) { return; }
var key = String(emojiChar);
if (key.trim() === '') { return; }
var exist = emojiWeightsBox.querySelector('label[data-emoji-char="' + key + '"]');
if (exist) { return; }
var lab = document.createElement('label');
lab.setAttribute('data-emoji-char', key);
lab.style.display = 'flex';
lab.style.flexDirection = 'column';
lab.style.minWidth = '160px';
var title = document.createElement('span');
title.textContent = key;
var input = document.createElement('input');
input.type = 'number';
input.min = '0';
input.name = 'yoone_snow_emoji_weights[' + key + ']';
input.value = '1';
input.style.width = '120px';
lab.appendChild(title);
lab.appendChild(input);
emojiWeightsBox.appendChild(lab);
}
// 移除 emoji 權重輸入 根據字符刪除對應輸入
function removeEmojiWeightInput(emojiChar){
if (!emojiWeightsBox) { return; }
var key = String(emojiChar);
var exist = emojiWeightsBox.querySelector('label[data-emoji-char="' + key + '"]');
if (exist) { exist.remove(); }
}
// 移除媒体权重输入 根据附件 ID 删除对应输入
function removeMediaWeightInput(attachmentId){
if (!mediaWeightsBox) { return; }
var exist = mediaWeightsBox.querySelector('label[data-attachment-id="' + String(attachmentId) + '"]');
if (exist) { exist.remove(); }
}
// 初始化时同步一次形状权重输入
ensureShapeWeightInputs();
// 初始化时为形状复选框添加图形预览
renderShapeCheckboxPreviews();
ensureShapeWeightInputs();
// 添加形状卡片 并插入预览与隐藏输入 用于保存选择
function addShapeBox(shapeKey){
if (!shapeListContainer) { return; }
var key = String(shapeKey);
if (key.trim() === '') { return; }
var exist = shapeListContainer.querySelector('.yoone-snow-shape-item[data-shape-key="' + key + '"]');
if (exist) { return; }
var wrapper = document.createElement('div');
wrapper.className = 'yoone-snow-shape-item';
wrapper.setAttribute('data-shape-key', key);
wrapper.style.border = '1px solid #ddd';
wrapper.style.padding = '8px';
wrapper.style.display = 'flex';
wrapper.style.flexDirection = 'column';
wrapper.style.alignItems = 'center';
wrapper.style.minWidth = '96px';
var previewHost = document.createElement('div');
previewHost.className = 'yoone-snow-shape-preview';
previewHost.style.width = '32px';
previewHost.style.height = '32px';
previewHost.style.marginBottom = '6px';
var nameSpan = document.createElement('span');
nameSpan.textContent = shapeLabelsMap[key] || key;
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'yoone_snow_mixed_items[]';
input.value = key;
var cancelBtn = document.createElement('button');
cancelBtn.type = 'button';
cancelBtn.className = 'button yoone-snow-cancel-shape';
cancelBtn.textContent = 'Cancel';
cancelBtn.style.marginTop = '6px';
wrapper.appendChild(previewHost);
wrapper.appendChild(nameSpan);
wrapper.appendChild(input);
wrapper.appendChild(cancelBtn);
shapeListContainer.appendChild(wrapper);
var previewEl = createShapePreviewElement(key);
if (previewEl) { previewHost.appendChild(previewEl); }
ensureShapeWeightInputs();
}
// 监听形状复选框变化事件 动态刷新权重输入
document.addEventListener('change', function(event){
var t = event.target;
if (t && t.name === 'yoone_snow_mixed_items[]'){
ensureShapeWeightInputs();
// 复选状态变更后也尝试补齐预览
renderShapeCheckboxPreviews();
}
});
// 绑定移除按钮事件 使用事件委托处理动态元素
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); }
}
}
});
// 綁定移除 emoji 按鈕事件 使用事件委託處理動態元素
if (emojiListContainer){
emojiListContainer.addEventListener('click', function(event){
var target = event.target;
if (target && target.classList.contains('yoone-snow-remove-emoji')){
var item = target.closest('.yoone-snow-emoji-item');
if (item){
var ch = item.getAttribute('data-emoji-char');
item.remove();
// 同步移除對應 emoji 權重輸入
if (ch) { removeEmojiWeightInput(ch); }
}
}
});
}
// 打开媒体选择器 支持多选 图片和 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();
});
// Emoji 别名映射 用於文本搜索到 emoji 字符
var emojiAliasMap = {
smile: '🙂',
happy: '😊',
grin: '😁',
laugh: '😂',
joy: '😂',
wink: '😉',
blush: '☺️',
heart: '❤️',
love: '❤️',
star: '⭐',
fire: '🔥',
cool: '😎',
cry: '😢',
sad: '🙁',
angry: '😠',
thumbs_up: '👍',
ok: '👌',
clap: '👏',
pray: '🙏',
tada: '🎉',
gift: '🎁',
snow: '❄️',
tree: '🌲',
bell: '🔔',
candy: '🍬',
sock: '🧦',
deer: '🦌',
berry: '🍓'
};
// 填充下拉選單 以別名和字符組合顯示
function populateEmojiSelect(){
if (!emojiSelect) { return; }
// 清空除第一個提示項之外的選項
while (emojiSelect.options.length > 1){ emojiSelect.remove(1); }
for (var key in emojiAliasMap){
var ch = emojiAliasMap[key];
var opt = document.createElement('option');
opt.value = ch;
opt.textContent = ch + ' ' + key;
emojiSelect.appendChild(opt);
}
}
// 綁定下拉選擇事件 選擇後添加對應 emoji 並重置選中
if (emojiSelect){
populateEmojiSelect();
emojiSelect.addEventListener('change', function(){
var val = emojiSelect.value;
if (String(val).trim() !== ''){
addEmojiByChar(val);
emojiSelect.value = '';
}
});
}
// 顯示建議列表 根據查詢文本匹配別名
function showEmojiSuggestions(query){
if (!emojiSuggestBox) { return; }
var q = String(query || '').toLowerCase().trim();
emojiSuggestBox.innerHTML = '';
if (q === '') { return; }
var max = 12;
var count = 0;
for (var key in emojiAliasMap){
if (key.indexOf(q) !== -1){
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'button';
btn.textContent = emojiAliasMap[key] + ' ' + key;
(function(ch){
btn.addEventListener('click', function(){ addEmojiByChar(ch); });
})(emojiAliasMap[key]);
emojiSuggestBox.appendChild(btn);
count++;
if (count >= max){ break; }
}
}
}
// 將 emoji 字符添加到列表 並創建隱藏輸入
function addEmojiByChar(ch){
if (!emojiListContainer) { return; }
var key = String(ch);
if (key.trim() === '') { return; }
var exist = emojiListContainer.querySelector('.yoone-snow-emoji-item[data-emoji-char="' + key + '"]');
if (exist) { return; }
var wrapper = document.createElement('div');
wrapper.className = 'yoone-snow-emoji-item';
wrapper.setAttribute('data-emoji-char', key);
wrapper.style.border = '1px solid #ddd';
wrapper.style.padding = '8px';
wrapper.style.display = 'flex';
wrapper.style.flexDirection = 'column';
wrapper.style.alignItems = 'center';
var preview = document.createElement('div');
preview.textContent = key;
preview.style.fontSize = '28px';
preview.style.lineHeight = '32px';
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'yoone_snow_emoji_items[]';
input.value = key;
var removeBtn = document.createElement('button');
removeBtn.type = 'button';
removeBtn.className = 'button yoone-snow-remove-emoji';
removeBtn.textContent = 'Cancel';
removeBtn.style.marginTop = '6px';
wrapper.appendChild(preview);
wrapper.appendChild(input);
wrapper.appendChild(removeBtn);
emojiListContainer.appendChild(wrapper);
// 同步添加 emoji 權重輸入 默認權重為 1
addEmojiWeightInput(key);
}
// 綁定 emoji 添加按鈕 點擊後優先按別名匹配 否則直接添加字符
if (emojiAddButton){
emojiAddButton.addEventListener('click', function(){
var q = emojiInput ? String(emojiInput.value || '') : '';
var trimmed = q.trim();
if (trimmed === '') { return; }
var lower = trimmed.toLowerCase();
if (emojiAliasMap[lower]){
addEmojiByChar(emojiAliasMap[lower]);
} else {
addEmojiByChar(trimmed);
}
});
}
// 監聽輸入變化 顯示建議列表 支持即時搜索
if (emojiInput){
emojiInput.addEventListener('input', function(){
showEmojiSuggestions(emojiInput.value);
});
emojiInput.addEventListener('keydown', function(e){
if (e && e.key === 'Enter'){
e.preventDefault();
var q = String(emojiInput.value || '').trim();
if (q !== ''){
var lower = q.toLowerCase();
if (emojiAliasMap[lower]){ addEmojiByChar(emojiAliasMap[lower]); }
else { addEmojiByChar(q); }
}
}
});
}
// 初始化時為現有 emoji 列表補齊權重輸入
if (emojiListContainer){
var existing = emojiListContainer.querySelectorAll('.yoone-snow-emoji-item');
existing.forEach(function(node){
var ch = node.getAttribute('data-emoji-char');
if (ch) { addEmojiWeightInput(ch); }
});
}
if (shapeListContainer){
shapeListContainer.addEventListener('click', function(event){
var target = event.target;
if (target && target.classList.contains('yoone-snow-cancel-shape')){
var item = target.closest('.yoone-snow-shape-item');
if (item){
var key = item.getAttribute('data-shape-key');
item.remove();
ensureShapeWeightInputs();
}
}
});
}
if (shapeAddSelect){
shapeAddSelect.addEventListener('change', function(){
var val = shapeAddSelect.value;
if (String(val).trim() !== ''){
addShapeBox(val);
shapeAddSelect.value = '';
}
});
}
if (shapeAddButton){
shapeAddButton.addEventListener('click', function(){
var val = shapeAddSelect ? String(shapeAddSelect.value || '') : '';
if (val.trim() !== ''){
addShapeBox(val);
shapeAddSelect.value = '';
}
});
}
}
// 条件判断 如果文档尚未加载则等待 DOMContentLoaded 事件
if (document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', initAdminMedia);
} else {
initAdminMedia();
}
})();