| 1 |
|
| 2 |
jQuery(document).ready(function($) { |
| 3 |
const existingFileName = $("#optml_rename_file").attr("placeholder"); |
| 4 |
const renameBtn = $("#optml-rename-file-btn"); |
| 5 |
|
| 6 |
renameBtn.on("click", function(e) { |
| 7 |
e.preventDefault(); |
| 8 |
$('#publish').click(); |
| 9 |
}); |
| 10 |
|
| 11 |
$("#optml_rename_file").on("input", function(e) { |
| 12 |
const newFileName = $(this).val(); |
| 13 |
if (newFileName === existingFileName) { |
| 14 |
return; |
| 15 |
} |
| 16 |
|
| 17 |
if(newFileName.trim().length === 0 || newFileName.trim() .length > 100) { |
| 18 |
renameBtn.prop("disabled", true); |
| 19 |
return; |
| 20 |
} |
| 21 |
|
| 22 |
renameBtn.prop("disabled", false); |
| 23 |
}); |
| 24 |
|
| 25 |
$("#optml-replace-file-field").on("change", function(e) { |
| 26 |
handleFileSelect(this.files[0]); |
| 27 |
}); |
| 28 |
|
| 29 |
$("#optml-replace-file-btn").on("click", function(e) { |
| 30 |
e.preventDefault(); |
| 31 |
uploadFile(); |
| 32 |
}); |
| 33 |
|
| 34 |
$("#optml-replace-clear-btn").on("click", function(e) { |
| 35 |
e.preventDefault(); |
| 36 |
resetFileReplacer(); |
| 37 |
}); |
| 38 |
|
| 39 |
const dropArea = document.getElementById("optml-file-drop-area"); |
| 40 |
|
| 41 |
["dragenter", "dragover", "dragleave", "drop"].forEach(event => { |
| 42 |
dropArea.addEventListener(event, preventDefaults, false); |
| 43 |
}); |
| 44 |
|
| 45 |
function preventDefaults(e) { |
| 46 |
e.preventDefault(); |
| 47 |
e.stopPropagation(); |
| 48 |
} |
| 49 |
|
| 50 |
["dragenter", "dragover"].forEach(event => { |
| 51 |
dropArea.addEventListener(event, highlight, false); |
| 52 |
}); |
| 53 |
|
| 54 |
["dragleave", "drop"].forEach(event => { |
| 55 |
dropArea.addEventListener(event, unhighlight, false); |
| 56 |
}); |
| 57 |
|
| 58 |
function highlight() { |
| 59 |
dropArea.classList.add("drag-active"); |
| 60 |
} |
| 61 |
|
| 62 |
function unhighlight() { |
| 63 |
dropArea.classList.remove("drag-active"); |
| 64 |
} |
| 65 |
|
| 66 |
dropArea.addEventListener("drop", handleDrop, false); |
| 67 |
|
| 68 |
function handleDrop(e) { |
| 69 |
const dt = e.dataTransfer; |
| 70 |
const file = dt.files[0]; |
| 71 |
handleFileSelect(file); |
| 72 |
} |
| 73 |
|
| 74 |
function resetFileReplacer(error = null) { |
| 75 |
if( error ) { |
| 76 |
$(".optml-replace-file-error").removeClass("hidden"); |
| 77 |
$(".optml-replace-file-error").text(error); |
| 78 |
} else { |
| 79 |
$(".optml-replace-file-error").addClass("hidden"); |
| 80 |
} |
| 81 |
|
| 82 |
$("#optml-replace-file-btn").prop("disabled", true); |
| 83 |
$("#optml-replace-file-field").val(""); |
| 84 |
$(".optml-replace-file-preview").html(""); |
| 85 |
$(".label-text").show(); |
| 86 |
} |
| 87 |
|
| 88 |
function handleFileSelect(file) { |
| 89 |
$(".optml-replace-file-error").addClass("hidden"); |
| 90 |
|
| 91 |
if(!file) return; |
| 92 |
|
| 93 |
if(OMAttachmentEdit.mimeType !== file.type) { |
| 94 |
resetFileReplacer(OMAttachmentEdit.i18n.mimeTypeError); |
| 95 |
return; |
| 96 |
} |
| 97 |
|
| 98 |
// Check file size |
| 99 |
if(file.size > OMAttachmentEdit.maxFileSize) { |
| 100 |
resetFileReplacer(OMAttachmentEdit.i18n.maxFileSizeError); |
| 101 |
|
| 102 |
return; |
| 103 |
} |
| 104 |
|
| 105 |
// Set the file in the input |
| 106 |
if (file instanceof File) { |
| 107 |
const dataTransfer = new DataTransfer(); |
| 108 |
dataTransfer.items.add(file); |
| 109 |
document.getElementById("optml-replace-file-field").files = dataTransfer.files; |
| 110 |
} |
| 111 |
|
| 112 |
// Enable button and update UI |
| 113 |
$("#optml-replace-file-btn").prop("disabled", false); |
| 114 |
$("#optml-replace-clear-btn").prop("disabled", false); |
| 115 |
$(".label-text").hide(); |
| 116 |
|
| 117 |
const type = file.type; |
| 118 |
let showPreview = type.startsWith("image/"); |
| 119 |
let html = showPreview ? "<img src='" + URL.createObjectURL(file) + "' />" : ""; |
| 120 |
html += "<span>" + file.name + "</span>"; |
| 121 |
|
| 122 |
$(".optml-replace-file-preview").html(html); |
| 123 |
} |
| 124 |
|
| 125 |
function uploadFile() { |
| 126 |
var formData = new FormData(); |
| 127 |
formData.append("action", "optml_replace_file"); |
| 128 |
formData.append("attachment_id", OMAttachmentEdit.attachmentId); |
| 129 |
formData.append("file", $("#optml-replace-file-field")[0].files[0]); |
| 130 |
|
| 131 |
$(".optml-svg-loader").show(); |
| 132 |
|
| 133 |
jQuery.ajax({ |
| 134 |
url: OMAttachmentEdit.ajaxURL, |
| 135 |
type: "POST", |
| 136 |
data: formData, |
| 137 |
processData: false, |
| 138 |
contentType: false, |
| 139 |
success: function(response) { |
| 140 |
$(".optml-svg-loader").hide(); |
| 141 |
if(response.success) { |
| 142 |
window.location.reload(); |
| 143 |
} else { |
| 144 |
$(".optml-replace-file-error").removeClass("hidden"); |
| 145 |
$(".optml-replace-file-error").text(response.message); |
| 146 |
} |
| 147 |
}, |
| 148 |
error: function(response) { |
| 149 |
$(".optml-svg-loader").hide(); |
| 150 |
resetFileReplacer(response.message || OMAttachmentEdit.i18n.replaceFileError); |
| 151 |
} |
| 152 |
}); |
| 153 |
} |
| 154 |
|
| 155 |
function clearFile() { |
| 156 |
resetFileReplacer(); |
| 157 |
// $(".optml-replace-file-preview").html(""); |
| 158 |
// $(".label-text").show(); |
| 159 |
// $("#optml-replace-file-btn").prop("disabled", true); |
| 160 |
// $("#optml-replace-clear-btn").prop("disabled", true); |
| 161 |
// $("#optml-replace-file-field").val(""); |
| 162 |
} |
| 163 |
}); |
