- /**
- * @inheritdoc
- */
- showValidationErrors() {
- const errors = Drupal.theme('quickeditImageErrors', {
- errors: this.model.get('validationErrors'),
- });
- $(`#${this.fieldModel.toolbarView.getMainWysiwygToolgroupId()}`)
- .append(errors);
- this.getEditedElement()
- .addClass('quickedit-validation-error');
- // Re-position the toolbar, which could have changed size.
- this.fieldModel.get('entity').toolbarView.position();
- },
+ // Handle the success callback.
+ ajaxOptions.success = function(response) {
+ if (response.main_error) {
+ this.renderDropzone('error', response.main_error);
+ if (response.errors.length) {
+ this.model.set('validationErrors', response.errors);
+ }
+ this.showValidationErrors();
+ } else {
+ successCallback(response);
+ }
+ };
+
+ $.ajax(ajaxOptions);
+ },
+
+ /**
+ * Renders our toolbar form for editing metadata.
+ *
+ * @param {Drupal.quickedit.FieldModel} fieldModel
+ * The current Field Model.
+ */
+ renderToolbar(fieldModel) {
+ const $toolgroup = $(
+ `#${fieldModel.toolbarView.getMainWysiwygToolgroupId()}`,
+ );
+ let $toolbar = $toolgroup.find('.quickedit-image-field-info');
+ if ($toolbar.length === 0) {
+ // Perform an AJAX request for extra image info (alt/title).
+ const fieldID = fieldModel.get('fieldID');
+ const url = Drupal.quickedit.util.buildUrl(
+ fieldID,
+ Drupal.url(
+ 'quickedit/image/info/!entity_type/!id/!field_name/!langcode/!view_mode',
+ ),
+ );
+ const self = this;
+ self.ajax({
+ type: 'GET',
+ url,
+ success(response) {
+ $toolbar = $(Drupal.theme.quickeditImageToolbar(response));
+ $toolgroup.append($toolbar);
+ $toolbar.on('keyup paste', () => {
+ fieldModel.set('state', 'changed');
+ });
+ // Re-position the toolbar, which could have changed size.
+ fieldModel.get('entity').toolbarView.position();
+ },
+ });
+ }
+ },
+
+ /**
+ * Renders our dropzone element.
+ *
+ * @param {string} state
+ * The current state of our editor. Only used for visual styling.
+ * @param {string} text
+ * The text to display in the dropzone area.
+ *
+ * @return {jQuery}
+ * The rendered dropzone.
+ */
+ renderDropzone(state, text) {
+ let $dropzone = this.$el.find('.quickedit-image-dropzone');
+ // If the element already exists, modify its contents.
+ if ($dropzone.length) {
+ $dropzone
+ .removeClass('upload error hover loading')
+ .addClass(`.quickedit-image-dropzone ${state}`)
+ .children('.quickedit-image-text')
+ .html(text);
+ } else {
+ $dropzone = $(
+ Drupal.theme('quickeditImageDropzone', {
+ state,
+ text,
+ }),
+ );
+ this.$el.append($dropzone);
+ }