kate522andClaude Fable 5
7d61de70e3
Media/gallery previews no longer stretch or crop: use object-fit contain, natural sizing for single media, and the uncropped medium size instead of the square thumbnail for gallery and native meta-box previews. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
286 lines
10 KiB
JavaScript
286 lines
10 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
var root = document.querySelector('[data-aksrt-pay-meta]');
|
|
if (!root) return;
|
|
|
|
var cfg = window.aksrtPayMetaBox || {};
|
|
var rowTitleFallback = (cfg.i18n && cfg.i18n.downloadUrl) || '下载地址';
|
|
|
|
function selected(name) {
|
|
var input = root.querySelector('input[name="aksrt_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('.aksrt-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('aksrt_pay\\[' + group + '\\]\\[\\d+\\]');
|
|
list.querySelectorAll('[data-group-row]').forEach(function (row, index) {
|
|
row.querySelectorAll('[name]').forEach(function (input) {
|
|
input.name = input.name.replace(pattern, 'aksrt_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('.aksrt-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();
|
|
})();
|