Skip to content

Commit 2f64e59

Browse files
abaicusabaicus
committed
feat: improve UI and checking on rename
1 parent 39bd7c3 commit 2f64e59

File tree

4 files changed

+88
-23
lines changed

4 files changed

+88
-23
lines changed

‎assets/css/single-attachment.css

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,21 @@ table.compat-attachment-fields {
6464
.optml-rename-input:focus-within {
6565
box-shadow: 0 0 0 1px #577BF9;
6666
}
67+
68+
.optml-rename-media-container {
69+
display: flex;
70+
gap: 10px;
71+
align-items: center;
72+
}
6773

6874
.optml-rename-input {
6975
display: flex;
70-
align-items: center;
76+
align-items: stretch;
7177
border-radius: 3px;
7278
border: 1px solid #577BF9;
7379
overflow: hidden;
7480
background: #fff;
81+
flex-grow: 1;
7582
}
7683

7784
.optml-rename-input #optml_rename_file {
@@ -80,18 +87,20 @@ table.compat-attachment-fields {
8087
flex-grow: 1;
8188
box-shadow: none;
8289
background: transparent;
90+
min-height: 30px;
8391
}
8492

8593
.optml-rename-input .optml-file-ext {
86-
min-height: 30px;
8794
padding: 0 10px;
8895
display: flex;
8996
align-items: center;
9097
font-weight: 600;
91-
background-color: #577BF9;
92-
color: #fff;
98+
background-color: #e6effd;
99+
border-left: 1px solid #577BF9;
100+
color: #577BF9;
93101
}
94102

103+
95104
.optml-replace-section {
96105
display: flex;
97106
flex-direction: column;
@@ -166,7 +175,7 @@ table.compat-attachment-fields {
166175

167176
#optml-file-drop-area.drag-active {
168177
background-color: #e6effd;
169-
border: 1px dashed #2271b1;
178+
border: 1px dashed #577BF9;
170179
}
171180

172181
.optml-replace-file-actions {
@@ -175,29 +184,43 @@ table.compat-attachment-fields {
175184
flex-direction: row-reverse;
176185
justify-content: flex-end;
177186
gap: 10px;
187+
width: 100%;
178188
}
179189

180-
.optml-btn {
181-
padding: 8px 20px !important;
190+
.optml-rename-actions {
191+
display: flex;
192+
align-items: center;
193+
justify-content: flex-end;
194+
width: 100%;
195+
margin-top: 10px;
196+
}
197+
198+
.optml-replace-file-actions p {
199+
margin-right: auto;
200+
}
201+
202+
[class^="compat-field-optml_"] .optml-btn {
182203
border-radius: 3px !important;
183204
border: 0 !important;
184205
cursor: pointer;
185206
transition: all 0.3s ease;
186207
color: #fff !important;
208+
margin-bottom: 0 !important;
187209
}
188210

189-
.optml-btn.primary {
211+
[class^="compat-field-optml_"] .optml-btn.primary {
190212
background: #577BF9 !important;
191213
}
192214

193-
.optml-btn.destructive {
215+
[class^="compat-field-optml_"] .optml-btn.destructive {
194216
background: #D93025 !important;
195217
}
196218

197-
.optml-btn:disabled {
219+
[class^="compat-field-optml_"] .optml-btn:disabled {
198220
opacity: 0.5;
199-
cursor: not-allowed;
221+
cursor: not-allowed !important;
200222
pointer-events: none;
223+
color: #fff !important;
201224
}
202225

203226
.optml-btn.primary:hover {

‎assets/js/single-attachment.js

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,29 @@
11

22
jQuery(document).ready(function($) {
33
console.log(OMAttachmentEdit);
4+
const existingFileName = $("#optml_rename_file").attr("placeholder");
5+
const renameBtn = $("#optml-rename-file-btn");
6+
7+
renameBtn.on("click", function(e) {
8+
e.preventDefault();
9+
$('#publish').click();
10+
});
11+
12+
$("#optml_rename_file").on("input", function(e) {
13+
console.log("change");
14+
const newFileName = $(this).val();
15+
if (newFileName === existingFileName) {
16+
return;
17+
}
18+
19+
if(newFileName.trim().length === 0 || newFileName.trim().length > 100) {
20+
renameBtn.prop("disabled", true);
21+
return;
22+
}
23+
24+
renameBtn.prop("disabled", false);
25+
});
26+
427
$("#optml-replace-file-field").on("change", function(e) {
528
handleFileSelect(this.files[0]);
629
});
@@ -90,6 +113,14 @@ jQuery(document).ready(function($) {
90113
formData.append("attachment_id", OMAttachmentEdit.attachmentId);
91114
formData.append("file", $("#optml-replace-file-field")[0].files[0]);
92115

116+
console.log({
117+
action: "optml_replace_file",
118+
attachment_id: OMAttachmentEdit.attachmentId,
119+
file: $("#optml-replace-file-field")[0].files[0]
120+
})
121+
122+
console.log(formData);
123+
93124
jQuery.ajax({
94125
url: OMAttachmentEdit.ajaxURL,
95126
type: "POST",
@@ -99,7 +130,7 @@ jQuery(document).ready(function($) {
99130
success: function(response) {
100131
console.log(response);
101132
if(response.success) {
102-
window.location.reload();
133+
// window.location.reload();
103134
console.log(response);
104135
} else {
105136
$(".optml-replace-file-error").removeClass("hidden");

‎inc/media_rename/attachment_edit.php

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,8 @@ private function get_rename_field( \Optml_Attachment_Model $attachment ) {
138138
$html .= '<input type="text" id="optml_rename_file" name="optml_rename_file" placeholder="' . esc_attr( $file_name_no_ext ) . '">';
139139
$html .= '<span class="optml-file-ext">.' . esc_html( $file_ext ) . '</span>';
140140
$html .= '</div>';
141+
142+
$html .= '<button type="button" disabled class="button optml-btn primary" id="optml-rename-file-btn">' . __( 'Rename', 'optimole' ) . '</button>';
141143
$html .= '</div>';
142144

143145
$html .= '<input type="hidden" name="optml_current_ext" value="' . esc_attr( $file_ext ) . '">';
@@ -156,23 +158,23 @@ private function get_rename_field( \Optml_Attachment_Model $attachment ) {
156158
*/
157159
private function get_replace_field( \Optml_Attachment_Model $attachment ) {
158160
$file_ext = $attachment->get_extension();
161+
$file_ext = in_array( $file_ext, ['jpg', 'jpeg'] ) ? ['.jpg','.jpeg'] : ['.'. $file_ext];
159162

160163
$html = '<div class="optml-replace-section">';
161164

162-
$html .= '<p class="optml-description">' . __( 'This will replace the current file with the new one. The new file will be uploaded to the media library and the old file will be deleted.', 'optimole' ) . '</p>';
163-
164165
$html .= '<div class="optml-replace-input">';
165166

166167
$html .= '<label for="optml-replace-file-field" id="optml-file-drop-area">';
167-
$html .= '<span class="label-text">' . __( 'Click to select a file or drag & drop here', 'optimole' ) . ' (.' . $file_ext . ')</span>';
168+
$html .= '<span class="label-text">' . __( 'Click to select a file or drag & drop here', 'optimole' ) . ' (' . implode( ',', $file_ext ) . ')</span>';
168169
$html .= '<div class="optml-replace-file-preview"></div>';
169170
$html .= '</label>';
170171

171-
$html .= '<input type="file" class="hidden" id="optml-replace-file-field" name="optml-replace-file-field" accept=".' . esc_attr( $file_ext ) . '">';
172+
$html .= '<input type="file" class="hidden" id="optml-replace-file-field" name="optml-replace-file-field" accept="' . implode( ',', $file_ext ) . '">';
172173

173174
$html .= '<div class="optml-replace-file-actions">';
174175
$html .= '<button disabled type="button" class="button optml-btn primary" id="optml-replace-file-btn">' . __( 'Replace file', 'optimole' ) . '</button>';
175176
$html .= '<button disabled type="button" class="button optml-btn destructive" id="optml-replace-clear-btn">' . __( 'Clear', 'optimole' ) . '</button>';
177+
$html .= '<p class="optml-description">' . __( 'This will replace the current file with the new one. This action cannot be undone.', 'optimole' ) . '</p>';
176178
$html .= '</div>';
177179

178180
$html .= '<div class="optml-replace-file-error hidden"></div>';
@@ -211,11 +213,20 @@ public function prepare_attachment_filename( array $post_data, array $attachment
211213
return $post_data;
212214
}
213215

214-
if ( ! isset( $post_data['optml_rename_nonce'] ) || ! wp_verify_nonce( $post_data['optml_rename_nonce'], 'optml_rename_media_nonce' ) ) {
216+
217+
if ( ! isset( $post_data['optml_rename_nonce'] ) || ! wp_verify_nonce( sanitize_text_field( $post_data['optml_rename_nonce'] ), 'optml_rename_media_nonce' ) ) {
218+
return $post_data;
219+
}
220+
221+
$new_name = sanitize_text_field( $post_data['optml_rename_file'] );
222+
223+
$new_name = trim( $new_name );
224+
225+
if ( empty( $new_name ) ) {
215226
return $post_data;
216227
}
217228

218-
if ( ! isset( $post_data['optml_rename_file'] ) || empty( $post_data['optml_rename_file'] ) ) {
229+
if ( strlen( $new_name ) < 3 || strlen( $new_name ) > 100 ) {
219230
return $post_data;
220231
}
221232

@@ -226,7 +237,7 @@ public function prepare_attachment_filename( array $post_data, array $attachment
226237
*
227238
* @see Optml_Attachment_Edit::save_attachment_filename()
228239
*/
229-
update_post_meta( $post_data['ID'], '_optml_pending_rename', $post_data['optml_rename_file'] );
240+
update_post_meta( $post_data['ID'], '_optml_pending_rename', $new_name );
230241

231242
return $post_data;
232243
}

‎inc/media_rename/attachment_rename.php

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,9 @@ public function rename() {
6666
}
6767

6868
// Rename the file (move) - moves the original, not the scaled image.
69-
$renamed = $wp_filesystem->move( $file_path, $new_file_path );
70-
if ( ! $renamed ) {
71-
return;
69+
$moved = $wp_filesystem->move( $file_path, $new_file_path );
70+
if ( ! $moved ) {
71+
return new WP_Error( 'optml_attachment_rename_failed', __( 'Failed to rename the attachment.', 'optimole' ) );
7272
}
7373

7474
// Move the scaled image if it exists.
@@ -80,7 +80,7 @@ public function rename() {
8080

8181
$new_scaled_file_path = $base_dir . $scaled_new_file_with_ext;
8282
// Move the scaled image. We also override any leftover scaled files.
83-
$move = $wp_filesystem->move( $scaled_old_file_path, $new_scaled_file_path, true );
83+
$wp_filesystem->move( $scaled_old_file_path, $new_scaled_file_path, true );
8484
}
8585

8686
// Update attachment metadata

0 commit comments

Comments
 (0)