3 * Drag+drop based in-place editor for images.
6 (function ($, _, Drupal) {
7 Drupal.quickedit.editors.image = Drupal.quickedit.EditorView.extend(/** @lends Drupal.quickedit.editors.image# */{
12 * @augments Drupal.quickedit.EditorView
14 * @param {object} options
15 * Options for the image editor.
18 Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
19 // Set our original value to our current HTML (for reverting).
20 this.model.set('originalValue', this.$el.html().trim());
21 // $.val() callback function for copying input from our custom form to
22 // the Quick Edit Field Form.
23 this.model.set('currentValue', function (index, value) {
24 const matches = $(this).attr('name').match(/(alt|title)]$/);
26 const name = matches[1];
27 const $toolgroup = $(`#${options.fieldModel.toolbarView.getMainWysiwygToolgroupId()}`);
28 const $input = $toolgroup.find(`.quickedit-image-field-info input[name="${name}"]`);
39 * @param {Drupal.quickedit.FieldModel} fieldModel
40 * The field model that holds the state.
41 * @param {string} state
42 * The state to change to.
43 * @param {object} options
44 * State options, if needed by the state change.
46 stateChange(fieldModel, state, options) {
47 const from = fieldModel.previous('state');
53 if (from !== 'inactive') {
54 this.$el.find('.quickedit-image-dropzone').remove();
55 this.$el.removeClass('quickedit-image-element');
57 if (from === 'invalid') {
58 this.removeValidationErrors();
66 // Defer updating the field model until the current state change has
67 // propagated, to not trigger a nested state change event.
69 fieldModel.set('state', 'active');
76 // Indicate that this element is being edited by Quick Edit Image.
77 this.$el.addClass('quickedit-image-element');
79 // Render our initial dropzone element. Once the user reverts changes
80 // or saves a new image, this element is removed.
81 var $dropzone = this.renderDropzone('upload', Drupal.t('Drop file here or click to upload'));
83 $dropzone.on('dragenter', function (e) {
84 $(this).addClass('hover');
86 $dropzone.on('dragleave', function (e) {
87 $(this).removeClass('hover');
90 $dropzone.on('drop', function (e) {
91 // Only respond when a file is dropped (could be another element).
92 if (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
93 $(this).removeClass('hover');
94 self.uploadImage(e.originalEvent.dataTransfer.files[0]);
98 $dropzone.on('click', (e) => {
99 // Create an <input> element without appending it to the DOM, and
100 // trigger a click event. This is the easiest way to arbitrarily
101 // open the browser's upload dialog.
102 $('<input type="file">')
104 .on('change', function () {
105 if (this.files.length) {
106 self.uploadImage(this.files[0]);
111 // Prevent the browser's default behavior when dragging files onto
112 // the document (usually opens them in the same tab).
113 $dropzone.on('dragover dragenter dragleave drop click', (e) => {
118 this.renderToolbar(fieldModel);
125 if (from === 'invalid') {
126 this.removeValidationErrors();
136 this.showValidationErrors();
142 * Validates/uploads a given file.
145 * The file to upload.
148 // Indicate loading by adding a special class to our icon.
149 this.renderDropzone('upload loading', Drupal.t('Uploading <i>@file</i>…', { '@file': file.name }));
151 // Build a valid URL for our endpoint.
152 const fieldID = this.fieldModel.get('fieldID');
153 const url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/upload/!entity_type/!id/!field_name/!langcode/!view_mode'));
155 // Construct form data that our endpoint can consume.
156 const data = new FormData();
157 data.append('files[image]', file);
159 // Construct a POST request to our endpoint.
166 const $el = $(self.fieldModel.get('el'));
167 // Indicate that the field has changed - this enables the
169 self.fieldModel.set('state', 'changed');
170 self.fieldModel.get('entity').set('inTempStore', true);
171 self.removeValidationErrors();
173 // Replace our html with the new image. If we replaced our entire
174 // element with data.html, we would have to implement complicated logic
175 // like what's in Drupal.quickedit.AppView.renderUpdatedField.
176 const $content = $(response.html).closest('[data-quickedit-field-id]').children();
177 $el.empty().append($content);
183 * Utility function to make an AJAX request to the server.
185 * In addition to formatting the correct request, this also handles error
186 * codes and messages by displaying them visually inline with the image.
188 * Drupal.ajax is not called here as the Form API is unused by this
189 * in-place editor, and our JSON requests/responses try to be
190 * editor-agnostic. Ideally similar logic and routes could be used by
191 * modules like CKEditor for drag+drop file uploads as well.
193 * @param {object} options
195 * @param {string} options.type
196 * The type of request (i.e. GET, POST, PUT, DELETE, etc.)
197 * @param {string} options.url
198 * The URL for the request.
199 * @param {*} options.data
200 * The data to send to the server.
201 * @param {function} options.success
202 * A callback function used when a request is successful, without errors.
205 const defaultOptions = {
212 this.renderDropzone('error', Drupal.t('A server error has occurred.'));
216 const ajaxOptions = $.extend(defaultOptions, options);
217 const successCallback = ajaxOptions.success;
219 // Handle the success callback.
220 ajaxOptions.success = function (response) {
221 if (response.main_error) {
222 this.renderDropzone('error', response.main_error);
223 if (response.errors.length) {
224 this.model.set('validationErrors', response.errors);
226 this.showValidationErrors();
229 successCallback(response);
237 * Renders our toolbar form for editing metadata.
239 * @param {Drupal.quickedit.FieldModel} fieldModel
240 * The current Field Model.
242 renderToolbar(fieldModel) {
243 const $toolgroup = $(`#${fieldModel.toolbarView.getMainWysiwygToolgroupId()}`);
244 let $toolbar = $toolgroup.find('.quickedit-image-field-info');
245 if ($toolbar.length === 0) {
246 // Perform an AJAX request for extra image info (alt/title).
247 const fieldID = fieldModel.get('fieldID');
248 const url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/info/!entity_type/!id/!field_name/!langcode/!view_mode'));
254 $toolbar = $(Drupal.theme.quickeditImageToolbar(response));
255 $toolgroup.append($toolbar);
256 $toolbar.on('keyup paste', () => {
257 fieldModel.set('state', 'changed');
259 // Re-position the toolbar, which could have changed size.
260 fieldModel.get('entity').toolbarView.position();
267 * Renders our dropzone element.
269 * @param {string} state
270 * The current state of our editor. Only used for visual styling.
271 * @param {string} text
272 * The text to display in the dropzone area.
275 * The rendered dropzone.
277 renderDropzone(state, text) {
278 let $dropzone = this.$el.find('.quickedit-image-dropzone');
279 // If the element already exists, modify its contents.
280 if ($dropzone.length) {
282 .removeClass('upload error hover loading')
283 .addClass(`.quickedit-image-dropzone ${state}`)
284 .children('.quickedit-image-text')
288 $dropzone = $(Drupal.theme('quickeditImageDropzone', {
292 this.$el.append($dropzone);
302 this.$el.html(this.model.get('originalValue'));
308 getQuickEditUISettings() {
309 return { padding: false, unifiedToolbar: true, fullWidthToolbar: true, popup: false };
315 showValidationErrors() {
316 const errors = Drupal.theme('quickeditImageErrors', {
317 errors: this.model.get('validationErrors'),
319 $(`#${this.fieldModel.toolbarView.getMainWysiwygToolgroupId()}`)
321 this.getEditedElement()
322 .addClass('quickedit-validation-error');
323 // Re-position the toolbar, which could have changed size.
324 this.fieldModel.get('entity').toolbarView.position();
330 removeValidationErrors() {
331 $(`#${this.fieldModel.toolbarView.getMainWysiwygToolgroupId()}`)
332 .find('.quickedit-image-errors').remove();
333 this.getEditedElement()
334 .removeClass('quickedit-validation-error');
338 }(jQuery, _, Drupal));