2 * DO NOT EDIT THIS FILE.
3 * See the following change record for more information,
4 * https://www.drupal.org/node/2815083
8 (function ($, _, Drupal) {
9 Drupal.quickedit.editors.image = Drupal.quickedit.EditorView.extend({
10 initialize: function initialize(options) {
11 Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
13 this.model.set('originalValue', this.$el.html().trim());
15 this.model.set('currentValue', function (index, value) {
16 var matches = $(this).attr('name').match(/(alt|title)]$/);
18 var name = matches[1];
19 var $toolgroup = $('#' + options.fieldModel.toolbarView.getMainWysiwygToolgroupId());
20 var $input = $toolgroup.find('.quickedit-image-field-info input[name="' + name + '"]');
27 stateChange: function stateChange(fieldModel, state, options) {
28 var from = fieldModel.previous('state');
34 if (from !== 'inactive') {
35 this.$el.find('.quickedit-image-dropzone').remove();
36 this.$el.removeClass('quickedit-image-element');
38 if (from === 'invalid') {
39 this.removeValidationErrors();
48 fieldModel.set('state', 'active');
55 this.$el.addClass('quickedit-image-element');
57 var $dropzone = this.renderDropzone('upload', Drupal.t('Drop file here or click to upload'));
59 $dropzone.on('dragenter', function (e) {
60 $(this).addClass('hover');
62 $dropzone.on('dragleave', function (e) {
63 $(this).removeClass('hover');
66 $dropzone.on('drop', function (e) {
67 if (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
68 $(this).removeClass('hover');
69 self.uploadImage(e.originalEvent.dataTransfer.files[0]);
73 $dropzone.on('click', function (e) {
74 $('<input type="file">').trigger('click').on('change', function () {
75 if (this.files.length) {
76 self.uploadImage(this.files[0]);
81 $dropzone.on('dragover dragenter dragleave drop click', function (e) {
86 this.renderToolbar(fieldModel);
93 if (from === 'invalid') {
94 this.removeValidationErrors();
104 this.showValidationErrors();
108 uploadImage: function uploadImage(file) {
109 this.renderDropzone('upload loading', Drupal.t('Uploading <i>@file</i>…', { '@file': file.name }));
111 var fieldID = this.fieldModel.get('fieldID');
112 var url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/upload/!entity_type/!id/!field_name/!langcode/!view_mode'));
114 var data = new FormData();
115 data.append('files[image]', file);
122 success: function success(response) {
123 var $el = $(self.fieldModel.get('el'));
125 self.fieldModel.set('state', 'changed');
126 self.fieldModel.get('entity').set('inTempStore', true);
127 self.removeValidationErrors();
129 var $content = $(response.html).closest('[data-quickedit-field-id]').children();
130 $el.empty().append($content);
134 ajax: function ajax(options) {
135 var defaultOptions = {
141 error: function error() {
142 this.renderDropzone('error', Drupal.t('A server error has occurred.'));
146 var ajaxOptions = $.extend(defaultOptions, options);
147 var successCallback = ajaxOptions.success;
149 ajaxOptions.success = function (response) {
150 if (response.main_error) {
151 this.renderDropzone('error', response.main_error);
152 if (response.errors.length) {
153 this.model.set('validationErrors', response.errors);
155 this.showValidationErrors();
157 successCallback(response);
163 renderToolbar: function renderToolbar(fieldModel) {
164 var $toolgroup = $('#' + fieldModel.toolbarView.getMainWysiwygToolgroupId());
165 var $toolbar = $toolgroup.find('.quickedit-image-field-info');
166 if ($toolbar.length === 0) {
167 var fieldID = fieldModel.get('fieldID');
168 var url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/info/!entity_type/!id/!field_name/!langcode/!view_mode'));
173 success: function success(response) {
174 $toolbar = $(Drupal.theme.quickeditImageToolbar(response));
175 $toolgroup.append($toolbar);
176 $toolbar.on('keyup paste', function () {
177 fieldModel.set('state', 'changed');
180 fieldModel.get('entity').toolbarView.position();
185 renderDropzone: function renderDropzone(state, text) {
186 var $dropzone = this.$el.find('.quickedit-image-dropzone');
188 if ($dropzone.length) {
189 $dropzone.removeClass('upload error hover loading').addClass('.quickedit-image-dropzone ' + state).children('.quickedit-image-text').html(text);
191 $dropzone = $(Drupal.theme('quickeditImageDropzone', {
195 this.$el.append($dropzone);
200 revert: function revert() {
201 this.$el.html(this.model.get('originalValue'));
203 getQuickEditUISettings: function getQuickEditUISettings() {
204 return { padding: false, unifiedToolbar: true, fullWidthToolbar: true, popup: false };
206 showValidationErrors: function showValidationErrors() {
207 var errors = Drupal.theme('quickeditImageErrors', {
208 errors: this.model.get('validationErrors')
210 $('#' + this.fieldModel.toolbarView.getMainWysiwygToolgroupId()).append(errors);
211 this.getEditedElement().addClass('quickedit-validation-error');
213 this.fieldModel.get('entity').toolbarView.position();
215 removeValidationErrors: function removeValidationErrors() {
216 $('#' + this.fieldModel.toolbarView.getMainWysiwygToolgroupId()).find('.quickedit-image-errors').remove();
217 this.getEditedElement().removeClass('quickedit-validation-error');
220 })(jQuery, _, Drupal);