Skip to content

Commit a216df4

Browse files
abaicusabaicus
committed
feat: attachment rename cleanup & 100% working
1 parent d614a4b commit a216df4

File tree

6 files changed

+1620
-1177
lines changed

6 files changed

+1620
-1177
lines changed

‎assets/css/single-attachment.css

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
table.compat-attachment-fields {
2+
border-collapse: collapse;
3+
width: 100%;
4+
}
5+
6+
[class^="compat-field-optml_"] {
7+
background: #fff;
8+
border-collapse: separate;
9+
border-spacing: 0;
10+
border: 1px solid #ccc;
11+
}
12+
13+
[class^="compat-field-optml_"] tr {
14+
background: #fff;
15+
}
16+
17+
[class^="compat-field-optml_"] th {
18+
display: block;
19+
float: none;
20+
white-space: nowrap;
21+
}
22+
23+
[class^="compat-field-optml_"] th,
24+
[class^="compat-field-optml_"] td {
25+
padding: 20px;
26+
}
27+
28+
.compat-field-optml_footer_row {
29+
padding: 0 !important;
30+
background: #eee;
31+
}
32+
33+
.compat-field-optml_spacer_row {
34+
height: 40px !important;
35+
background: transparent !important;
36+
border: 0 !important;
37+
}
38+
39+
.compat-field-optml_spacer_row td,
40+
.compat-field-optml_spacer_row th {
41+
padding: 0 !important;
42+
}
43+
44+
.compat-field-optml_footer_row th,
45+
.compat-field-optml_footer_row td {
46+
padding: 5px 20px;
47+
}
48+
49+
50+
.optml-logo-contianer {
51+
justify-content: flex-end;
52+
display: flex;
53+
align-items: center;
54+
gap: 10px;
55+
font-size: 12px;
56+
position:relative;
57+
}
58+
59+
.optml-logo-contianer img {
60+
width: 25px;
61+
height: 25px;
62+
}
63+
64+
.optml-rename-input:focus-within {
65+
box-shadow: 0 0 0 1px #577BF9;
66+
}
67+
68+
.optml-rename-input {
69+
display: flex;
70+
align-items: center;
71+
border-radius: 3px;
72+
border: 1px solid #577BF9;
73+
overflow: hidden;
74+
background: #fff;
75+
}
76+
77+
.optml-rename-input #optml_rename_file {
78+
border: 0;
79+
border-radius: 0;
80+
flex-grow: 1;
81+
box-shadow: none;
82+
background: transparent;
83+
}
84+
85+
.optml-rename-input .optml-file-ext {
86+
min-height: 30px;
87+
padding: 0 10px;
88+
display: flex;
89+
align-items: center;
90+
font-weight: 600;
91+
background-color: #577BF9;
92+
color: #fff;
93+
}
94+
95+
.optml-replace-section {
96+
display: flex;
97+
flex-direction: column;
98+
gap: 10px;
99+
}
100+
101+
.optml-description {
102+
color: #666;
103+
margin: 0;
104+
font-style: italic;
105+
}
106+
107+
.optml-replace-input {
108+
box-sizing: border-box;
109+
display: flex;
110+
flex-direction: column;
111+
align-items: flex-end;
112+
gap: 10px;
113+
}
114+
115+
.optml-replace-input label {
116+
width: 100%;
117+
min-height: 100px;
118+
display: flex;
119+
align-items: center;
120+
justify-content: center;
121+
text-align: center;
122+
cursor: pointer;
123+
flex-grow: 1;
124+
padding: 8px;
125+
border: 1px dashed #577BF9;
126+
border-radius: 3px;
127+
background: #fff;
128+
transition: all 0.3s ease;
129+
}
130+
131+
.optml-replace-input label:hover {
132+
background: #577BF9;
133+
color: #fff;
134+
}
135+
136+
.optml-replace-file-preview {
137+
display: flex;
138+
align-items: center;
139+
gap: 10px;
140+
justify-content: center;
141+
font-weight: 600;
142+
}
143+
144+
.optml-replace-file-preview img {
145+
object-fit: cover;
146+
border-radius: 6px;
147+
max-width: 250px;
148+
max-height: 75px;
149+
border: 1px solid #ccc;
150+
background: #f0f0f0;
151+
}
152+
153+
.optml-replace-file-error {
154+
color: rgb(163, 11, 0);
155+
padding: 5px 10px;
156+
border-radius: 3px;
157+
border: 1px solid rgb(163, 11, 0);
158+
background:rgb(255, 205, 201);
159+
}
160+
161+
#optml-file-drop-area {
162+
box-sizing: border-box;
163+
position: relative;
164+
transition: all 0.3s ease;
165+
}
166+
167+
#optml-file-drop-area.drag-active {
168+
background-color: #e6effd;
169+
border: 1px dashed #2271b1;
170+
}
171+
172+
.optml-replace-file-actions {
173+
display: flex;
174+
align-items: center;
175+
flex-direction: row-reverse;
176+
justify-content: flex-end;
177+
gap: 10px;
178+
}
179+
180+
.optml-btn {
181+
padding: 8px 20px !important;
182+
border-radius: 3px !important;
183+
border: 0 !important;
184+
cursor: pointer;
185+
transition: all 0.3s ease;
186+
color: #fff !important;
187+
}
188+
189+
.optml-btn.primary {
190+
background: #577BF9 !important;
191+
}
192+
193+
.optml-btn.destructive {
194+
background: #D93025 !important;
195+
}
196+
197+
.optml-btn:disabled {
198+
opacity: 0.5;
199+
cursor: not-allowed;
200+
pointer-events: none;
201+
}
202+
203+
.optml-btn.primary:hover {
204+
background: #4161d7;
205+
}
206+
207+
.optml-btn.destructive:hover {
208+
background: #c2291e;
209+
}

‎assets/js/single-attachment.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
2+
jQuery(document).ready(function($) {
3+
console.log(OMAttachmentEdit);
4+
$("#optml-replace-file-field").on("change", function(e) {
5+
handleFileSelect(this.files[0]);
6+
});
7+
8+
$("#optml-replace-file-btn").on("click", function(e) {
9+
e.preventDefault();
10+
uploadFile();
11+
});
12+
13+
$("#optml-replace-clear-btn").on("click", function(e) {
14+
e.preventDefault();
15+
clearFile();
16+
});
17+
18+
const dropArea = document.getElementById("optml-file-drop-area");
19+
20+
["dragenter", "dragover", "dragleave", "drop"].forEach(event => {
21+
dropArea.addEventListener(event, preventDefaults, false);
22+
});
23+
24+
function preventDefaults(e) {
25+
e.preventDefault();
26+
e.stopPropagation();
27+
}
28+
29+
["dragenter", "dragover"].forEach(event => {
30+
dropArea.addEventListener(event, highlight, false);
31+
});
32+
33+
["dragleave", "drop"].forEach(event => {
34+
dropArea.addEventListener(event, unhighlight, false);
35+
});
36+
37+
function highlight() {
38+
dropArea.classList.add("drag-active");
39+
}
40+
41+
function unhighlight() {
42+
dropArea.classList.remove("drag-active");
43+
}
44+
45+
dropArea.addEventListener("drop", handleDrop, false);
46+
47+
function handleDrop(e) {
48+
const dt = e.dataTransfer;
49+
const file = dt.files[0];
50+
handleFileSelect(file);
51+
}
52+
53+
function handleFileSelect(file) {
54+
$(".optml-replace-file-error").addClass("hidden");
55+
56+
if(!file) return;
57+
58+
// Check file size
59+
if(file.size > OMAttachmentEdit.maxFileSize) {
60+
$(".optml-replace-file-error").removeClass("hidden");
61+
$(".optml-replace-file-error").text(OMAttachmentEdit.i18n.maxFileSizeError);
62+
$("#optml-replace-file-btn").prop("disabled", true);
63+
$("#optml-replace-file-field").val("");
64+
return;
65+
}
66+
67+
// Set the file in the input
68+
if (file instanceof File) {
69+
const dataTransfer = new DataTransfer();
70+
dataTransfer.items.add(file);
71+
document.getElementById("optml-replace-file-field").files = dataTransfer.files;
72+
}
73+
74+
// Enable button and update UI
75+
$("#optml-replace-file-btn").prop("disabled", false);
76+
$("#optml-replace-clear-btn").prop("disabled", false);
77+
$(".label-text").hide();
78+
79+
const type = file.type;
80+
let showPreview = type.startsWith("image/");
81+
let html = showPreview ? "<img src='" + URL.createObjectURL(file) + "' />" : "";
82+
html += "<span>" + file.name + "</span>";
83+
84+
$(".optml-replace-file-preview").html(html);
85+
}
86+
87+
function uploadFile() {
88+
var formData = new FormData();
89+
formData.append("action", "optml_replace_file");
90+
formData.append("attachment_id", OMAttachmentEdit.attachmentId);
91+
formData.append("file", $("#optml-replace-file-field")[0].files[0]);
92+
93+
jQuery.ajax({
94+
url: OMAttachmentEdit.ajaxURL,
95+
type: "POST",
96+
data: formData,
97+
processData: false,
98+
contentType: false,
99+
success: function(response) {
100+
console.log(response);
101+
if(response.success) {
102+
window.location.reload();
103+
console.log(response);
104+
} else {
105+
$(".optml-replace-file-error").removeClass("hidden");
106+
$(".optml-replace-file-error").text(response.message);
107+
}
108+
},
109+
error: function(response) {
110+
console.log(response);
111+
$(".optml-replace-file-error").removeClass("hidden");
112+
$(".optml-replace-file-error").text(OMAttachmentEdit.i18n.replaceFileError);
113+
}
114+
});
115+
}
116+
117+
function clearFile() {
118+
$(".optml-replace-file-preview").html("");
119+
$(".label-text").show();
120+
$("#optml-replace-file-btn").prop("disabled", true);
121+
$("#optml-replace-clear-btn").prop("disabled", true);
122+
$("#optml-replace-file-field").val("");
123+
}
124+
});

0 commit comments

Comments
 (0)