| 1 |
// Let's listen for the submit event on #wsrw-media-replace-form and then send the form including the file to the api endpoint we have for replacing the image. |
| 2 |
// When the image is selected we should attempt to show a preview of the image. |
| 3 |
jQuery( document ).ready( function ( $ ) { |
| 4 |
|
| 5 |
jconfirm.defaults = { |
| 6 |
closeIcon: true, |
| 7 |
closeIconClass: 'close-icon-svg', |
| 8 |
backgroundDismiss: false, |
| 9 |
escapeKey: true, |
| 10 |
animationBounce: 1, |
| 11 |
useBootstrap: false, |
| 12 |
theme: 'modern', |
| 13 |
boxWidth: '400px', |
| 14 |
type: 'blue', |
| 15 |
animateFromElement: false, |
| 16 |
}; |
| 17 |
|
| 18 |
const app = { |
| 19 |
init() { |
| 20 |
app.find_elements(); |
| 21 |
app.placeholder_height(); |
| 22 |
app.init_form(); |
| 23 |
app.placeholder_click(); |
| 24 |
app.clear_click(); |
| 25 |
}, |
| 26 |
find_elements() { |
| 27 |
app.form = $( '#wsrw-media-replace-form' ); |
| 28 |
app.file_input = $( '#wsrw-media-file' ); |
| 29 |
app.preview = $( '#wsrw-media-preview' ); |
| 30 |
app.media_id = $( '#wsrw-media-id' ); |
| 31 |
app.placeholder = $( '#wsrw-media-preview-placeholder' ); |
| 32 |
app.current_image = $( '#wsrw-media-current-image img' ); |
| 33 |
app.replace_buton = $( '#wsrw-start-replace' ); |
| 34 |
app.clear_button = $( '#wsrw-clear-form' ); |
| 35 |
app.results = $( '#wsrw-media-results' ); |
| 36 |
}, |
| 37 |
placeholder_height() { |
| 38 |
app.placeholder.height( app.current_image.height() ); |
| 39 |
}, |
| 40 |
placeholder_click() { |
| 41 |
app.placeholder.on( |
| 42 |
'click', |
| 43 |
function () { |
| 44 |
app.file_input.click(); |
| 45 |
} |
| 46 |
); |
| 47 |
}, |
| 48 |
clear_click() { |
| 49 |
app.clear_button.on( |
| 50 |
'click', |
| 51 |
function () { |
| 52 |
app.reset_form(); |
| 53 |
} |
| 54 |
); |
| 55 |
}, |
| 56 |
reset_form() { |
| 57 |
app.file_input.val( '' ); |
| 58 |
app.show_preview(); |
| 59 |
}, |
| 60 |
init_form() { |
| 61 |
app.form.on( |
| 62 |
'submit', |
| 63 |
function ( e ) { |
| 64 |
e.preventDefault(); |
| 65 |
$.confirm( { |
| 66 |
title: wsrwjs.are_you_sure, |
| 67 |
content: wsrwjs.replace_media_confirm, |
| 68 |
type: 'blue', |
| 69 |
icon: 'fa fa-exclamation-circle', |
| 70 |
animateFromElement: false, |
| 71 |
buttons: { |
| 72 |
confirm: { |
| 73 |
text: wsrwjs.yes, |
| 74 |
btnClass: 'btn-confirm', |
| 75 |
keys: ['enter'], |
| 76 |
}, |
| 77 |
cancel: { |
| 78 |
text: wsrwjs.no, |
| 79 |
btnClass: 'btn-cancel', |
| 80 |
keys: ['esc'], |
| 81 |
}, |
| 82 |
}, |
| 83 |
onAction: function ( action ) { |
| 84 |
if ( action === 'confirm' ) { |
| 85 |
app.start_media_replace(); |
| 86 |
} |
| 87 |
}, |
| 88 |
} ); |
| 89 |
} |
| 90 |
); |
| 91 |
app.file_input.on( |
| 92 |
'change', |
| 93 |
function ( e ) { |
| 94 |
app.show_preview(); |
| 95 |
} |
| 96 |
); |
| 97 |
}, |
| 98 |
start_media_replace() { |
| 99 |
const data = new FormData(); |
| 100 |
data.append( '_wpnonce', wsrwjs.rest_nonce ); |
| 101 |
data.append( 'file', app.file_input[0].files[0] ); |
| 102 |
data.append( 'media_id', app.media_id.val() ); |
| 103 |
|
| 104 |
$.ajax( |
| 105 |
{ |
| 106 |
url: wsrwjs.upload_url, |
| 107 |
type: 'POST', |
| 108 |
data: data, |
| 109 |
contentType: false, |
| 110 |
processData: false, |
| 111 |
beforeSend: function () { |
| 112 |
WSRSpinner.show_button_spinner( app.replace_buton ); |
| 113 |
}, |
| 114 |
success: function ( response ) { |
| 115 |
WSRSpinner.hide_button_spinner( app.replace_buton ); |
| 116 |
app.show_results( response ); |
| 117 |
}, |
| 118 |
error: function ( response ) { |
| 119 |
WSRSpinner.show_button_spinner( app.replace_buton ); |
| 120 |
app.show_results( response ); |
| 121 |
} |
| 122 |
} |
| 123 |
); |
| 124 |
}, |
| 125 |
show_preview() { |
| 126 |
const file = app.file_input[0].files[0]; |
| 127 |
if ( file ) { |
| 128 |
const reader = new FileReader(); |
| 129 |
// Is the file an image or something else? |
| 130 |
const isimage = file.type.match( 'image' ); |
| 131 |
reader.onload = function ( e ) { |
| 132 |
if ( isimage ) { |
| 133 |
app.image_preview( e.target.result ); |
| 134 |
} else { |
| 135 |
app.file_preview( file.name ); |
| 136 |
} |
| 137 |
}; |
| 138 |
reader.readAsDataURL( file ); |
| 139 |
app.replace_buton.prop( 'disabled', false ); |
| 140 |
app.clear_button.prop( 'disabled', false ); |
| 141 |
} else { |
| 142 |
app.placeholder.show(); |
| 143 |
app.replace_buton.prop( 'disabled', true ); |
| 144 |
app.clear_button.prop( 'disabled', true ); |
| 145 |
app.preview.html( '' ); |
| 146 |
} |
| 147 |
}, |
| 148 |
file_preview( filename ) { |
| 149 |
app.placeholder.hide(); |
| 150 |
const file_html = '<div class="wsrw-media-placeholder"><img src="https://find-replace.site/wp-includes/images/media/document.png" alt="stock-photo-3"><span class="wsrw-media-placeholder-text">' + filename + '</span></div>'; |
| 151 |
app.preview.html( file_html ); |
| 152 |
}, |
| 153 |
image_preview( img_url ) { |
| 154 |
const new_image = $( '<img>' ); |
| 155 |
new_image.attr( 'src', img_url ); |
| 156 |
app.placeholder.hide(); |
| 157 |
app.preview.html( new_image ); |
| 158 |
}, |
| 159 |
show_results( response ) { |
| 160 |
|
| 161 |
$.confirm( |
| 162 |
{ |
| 163 |
title: wsrwjs.image_replace_complete, |
| 164 |
content: response.message, |
| 165 |
animateFromElement: false, |
| 166 |
buttons: { |
| 167 |
confirm: { |
| 168 |
text: wsrwjs.ok, |
| 169 |
btnClass: 'btn-confirm', |
| 170 |
keys: ['enter'], |
| 171 |
}, |
| 172 |
} |
| 173 |
} |
| 174 |
); |
| 175 |
|
| 176 |
if ( response.success ) { |
| 177 |
if( response.image_url ) { |
| 178 |
app.current_image.attr( 'src', response.image_url ); |
| 179 |
app.current_image.removeAttr( 'srcset' ); |
| 180 |
app.current_image.on( 'load', app.placeholder_height ); |
| 181 |
} else { |
| 182 |
|
| 183 |
} |
| 184 |
app.reset_form(); |
| 185 |
} |
| 186 |
} |
| 187 |
}; |
| 188 |
|
| 189 |
app.init(); |
| 190 |
} ); |
