280 lines
11 KiB
JavaScript
280 lines
11 KiB
JavaScript
jQuery(document).ready(function ($) {
|
|
|
|
const wpNativeAjax = parseInt(wpdiscuzAjaxObj.isNativeAjaxEnabled, 10);
|
|
|
|
// Per-form file list: maps form DOM element -> Array of File objects
|
|
const wmuFileLists = new WeakMap();
|
|
|
|
$('body').on('click', '#wpdcom .wmu-upload-wrap', function () {
|
|
$('.wpd-form-foot', $(this).parents('.wpd_comm_form')).slideDown(parseInt(wpdiscuzAjaxObj.enableDropAnimation) ? 500 : 0);
|
|
});
|
|
|
|
$(document).on('change', '.wmu-add-files', function () {
|
|
const btn = $(this);
|
|
const form = btn.closest('.wpd_comm_form');
|
|
const files = btn[0].files ? Array.from(btn[0].files) : [];
|
|
if (files.length) {
|
|
wmuFileLists.set(form[0], files);
|
|
$('.wmu-action-wrap .wmu-tabs', form).html('');
|
|
$.each(files, function (index, file) {
|
|
renderFilePreview(form, file, index);
|
|
});
|
|
} else {
|
|
return;
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '.wmu-preview-delete', function () {
|
|
const $preview = $(this).closest('.wmu-preview');
|
|
const $form = $preview.closest('.wpd_comm_form');
|
|
const index = parseInt($preview.data('wmu-index'));
|
|
const type = $preview.data('wmu-type');
|
|
|
|
const fileArray = wmuFileLists.get($form[0]) || [];
|
|
fileArray[index] = null;
|
|
wmuFileLists.set($form[0], fileArray);
|
|
syncFileInput($form, fileArray);
|
|
|
|
$preview.remove();
|
|
|
|
const $tab = $('.wmu-action-wrap .wmu-' + type + '-tab', $form);
|
|
if (!$tab.children('.wmu-preview').length) {
|
|
$tab.addClass('wmu-hide');
|
|
}
|
|
});
|
|
|
|
$(document).on('change', '.wmu-replace-input', function () {
|
|
const input = $(this);
|
|
const preview = input.closest('.wmu-preview');
|
|
const form = preview.closest('.wpd_comm_form');
|
|
const index = parseInt(preview.data('wmu-index'));
|
|
const newFile = this.files[0];
|
|
|
|
if (!newFile) return;
|
|
|
|
const fileArray = wmuFileLists.get(form[0]) || [];
|
|
fileArray[index] = newFile;
|
|
wmuFileLists.set(form[0], fileArray);
|
|
|
|
syncFileInput(form, fileArray);
|
|
updatePreviewForFile(form, preview, newFile);
|
|
|
|
// Reset so the same file can be re-selected if needed
|
|
input.val('');
|
|
});
|
|
|
|
function syncFileInput(form, fileArray) {
|
|
if (typeof DataTransfer === 'undefined') return;
|
|
const dt = new DataTransfer();
|
|
fileArray.forEach(function (file) {
|
|
if (file) dt.items.add(file);
|
|
});
|
|
const mainInput = form.find('.wmu-add-files')[0];
|
|
if (mainInput) {
|
|
mainInput.files = dt.files;
|
|
}
|
|
}
|
|
|
|
function renderFilePreview(form, file, index) {
|
|
let mimeType = file.type;
|
|
let previewArgs = {
|
|
'id': '',
|
|
'icon': '',
|
|
'fullname': file.name,
|
|
'shortname': getShortname(file.name),
|
|
'type': '',
|
|
'index': index,
|
|
};
|
|
|
|
if (mimeType.match(/^image/)) {
|
|
previewArgs.type = 'images';
|
|
if (window.FileReader) {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onloadend = function () {
|
|
previewArgs.icon = this.result;
|
|
previewArgs.shortname = '';
|
|
initPreview(form, previewArgs);
|
|
}
|
|
}
|
|
} else if (mimeType.match(/^video/) || mimeType.match(/^audio/)) {
|
|
previewArgs.type = 'videos';
|
|
previewArgs.icon = wpdiscuzAjaxObj.wmuIconVideo;
|
|
initPreview(form, previewArgs);
|
|
} else {
|
|
previewArgs.type = 'files';
|
|
previewArgs.icon = wpdiscuzAjaxObj.wmuIconFile;
|
|
initPreview(form, previewArgs);
|
|
}
|
|
}
|
|
|
|
function updatePreviewForFile(form, previewEl, file) {
|
|
let mimeType = file.type;
|
|
let newType;
|
|
|
|
if (mimeType.match(/^image/)) {
|
|
newType = 'images';
|
|
} else if (mimeType.match(/^video/) || mimeType.match(/^audio/)) {
|
|
newType = 'videos';
|
|
} else {
|
|
newType = 'files';
|
|
}
|
|
|
|
const oldType = previewEl.data('wmu-type');
|
|
const index = parseInt(previewEl.data('wmu-index'));
|
|
|
|
if (oldType !== newType) {
|
|
// File type changed — remove from old tab, add to new tab
|
|
const oldTab = $('.wmu-action-wrap .wmu-' + oldType + '-tab', form);
|
|
previewEl.remove();
|
|
if (!oldTab.children().length) {
|
|
oldTab.addClass('wmu-hide');
|
|
}
|
|
renderFilePreview(form, file, index);
|
|
} else {
|
|
// Same type — update the existing preview element in-place
|
|
previewEl.attr('title', file.name);
|
|
previewEl.data('wmu-type', newType);
|
|
previewEl.find('.wmu-file-name').text(getShortname(file.name));
|
|
|
|
if (mimeType.match(/^image/) && window.FileReader) {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onloadend = function () {
|
|
previewEl.find('.wmu-preview-img').attr('src', this.result);
|
|
previewEl.find('.wmu-file-name').text('');
|
|
};
|
|
} else if (mimeType.match(/^video/) || mimeType.match(/^audio/)) {
|
|
previewEl.find('.wmu-preview-img').attr('src', wpdiscuzAjaxObj.wmuIconVideo);
|
|
} else {
|
|
previewEl.find('.wmu-preview-img').attr('src', wpdiscuzAjaxObj.wmuIconFile);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param form
|
|
* @param args
|
|
*/
|
|
function initPreview(form, args = {}) {
|
|
let previewTemplate = wpdiscuzAjaxObj.previewTemplate;
|
|
previewTemplate = previewTemplate.replace('[PREVIEW_TYPE_CLASS]', 'wmu-preview-' + args.type);
|
|
previewTemplate = previewTemplate.replace('[PREVIEW_TITLE]', args.fullname);
|
|
previewTemplate = previewTemplate.replace('[PREVIEW_TYPE]', args.type);
|
|
previewTemplate = previewTemplate.replace('[PREVIEW_ID]', args.id);
|
|
previewTemplate = previewTemplate.replace('[PREVIEW_ICON]', args.icon);
|
|
previewTemplate = previewTemplate.replace('[PREVIEW_FILENAME]', args.shortname);
|
|
previewTemplate = previewTemplate.replace('[PREVIEW_INDEX]', typeof args.index !== 'undefined' ? args.index : '');
|
|
const $preview = $(previewTemplate);
|
|
// Copy the accept attribute from the main file input so the replace picker is equally restricted
|
|
const accept = form.find('.wmu-add-files').attr('accept');
|
|
if (accept) {
|
|
$preview.find('.wmu-replace-input').attr('accept', accept);
|
|
}
|
|
$('.wmu-action-wrap .wmu-' + args.type + '-tab', form).removeClass('wmu-hide').append($preview);
|
|
}
|
|
|
|
function getShortname(str) {
|
|
let shortname = str;
|
|
if ((typeof str !== 'undefined') && str.length) {
|
|
if (str.length > 40) {
|
|
shortname = str.substring(str.length - 40);
|
|
shortname = "..." + shortname;
|
|
}
|
|
}
|
|
return shortname;
|
|
}
|
|
|
|
$('body').on('click', '.wmu-attachment-delete', function (e) {
|
|
if (confirm(wpdiscuzAjaxObj.wmuPhraseConfirmDelete)) {
|
|
const btn = $(this);
|
|
const attachmentId = btn.data('wmu-attachment');
|
|
const data = new FormData();
|
|
data.append('action', 'wmuDeleteAttachment');
|
|
data.append('attachmentId', attachmentId);
|
|
wpdiscuzAjaxObj.getAjaxObj(wpNativeAjax, true, data)
|
|
.done(function (r) {
|
|
if (r.success) {
|
|
var parent = btn.parents('.wmu-comment-attachments');
|
|
btn.parent('.wmu-attachment').remove();
|
|
if (!$('.wmu-attached-images *', parent).length) {
|
|
$('.wmu-attached-images', parent).remove();
|
|
}
|
|
if (!$('.wmu-attached-videos *', parent).length) {
|
|
$('.wmu-attached-videos', parent).remove();
|
|
}
|
|
if (!$('.wmu-attached-files *', parent).length) {
|
|
$('.wmu-attached-files', parent).remove();
|
|
}
|
|
} else {
|
|
if (r.data.errorCode) {
|
|
wpdiscuzAjaxObj.setCommentMessage(wpdiscuzAjaxObj.applyFilterOnPhrase(wpdiscuzAjaxObj[r.data.errorCode], r.data.errorCode, parent), 'error', 3000);
|
|
} else if (r.data.error) {
|
|
wpdiscuzAjaxObj.setCommentMessage(r.data.error, 'error', 3000);
|
|
}
|
|
}
|
|
$('#wpdiscuz-loading-bar').fadeOut(250);
|
|
})
|
|
.fail(function (jqXHR, textStatus, errorThrown) {
|
|
console.log(errorThrown);
|
|
$('#wpdiscuz-loading-bar').fadeOut(250);
|
|
});
|
|
} else {
|
|
console.log('canceled');
|
|
}
|
|
});
|
|
|
|
if (parseInt(wpdiscuzAjaxObj.wmuIsLightbox)) {
|
|
|
|
function wmuAddLightBox() {
|
|
|
|
if (wpdiscuzAjaxObj.postAttachmentsAsGallery) {
|
|
$(".wmu-lightbox").colorbox({
|
|
maxHeight: "95%",
|
|
maxWidth: "95%",
|
|
rel: 'wmu-lightbox',
|
|
fixed: true
|
|
});
|
|
} else {
|
|
$(".wmu-attached-images").each(function () {
|
|
// create a unique gallery for each comment
|
|
var galleryID = 'gallery-' + $(this).closest('.comment').attr('id'); // or any unique identifier
|
|
$(this).find('.wmu-lightbox').each(function () {
|
|
$(this).attr('rel', galleryID); // set rel dynamically
|
|
});
|
|
});
|
|
|
|
// initialize colorbox
|
|
$('.wmu-lightbox').colorbox({
|
|
maxHeight: "95%",
|
|
maxWidth: "95%",
|
|
photo: true,
|
|
fixed: true,
|
|
rel: function () {
|
|
return $(this).attr('rel');
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
wmuAddLightBox();
|
|
wpdiscuzAjaxObj.wmuAddLightBox = wmuAddLightBox;
|
|
}
|
|
|
|
wpdiscuzAjaxObj.wmuHideAll = function (r, wcForm) {
|
|
if (typeof r === 'object') {
|
|
if (r.success) {
|
|
$('.wmu-tabs', wcForm).addClass('wmu-hide');
|
|
$('.wmu-preview', wcForm).remove();
|
|
$('.wmu-attached-data-info', wcForm).remove();
|
|
} else {
|
|
console.log(r.data);
|
|
}
|
|
} else {
|
|
console.log(r);
|
|
}
|
|
}
|
|
|
|
});
|