Chris@0: /**
Chris@0: * DO NOT EDIT THIS FILE.
Chris@0: * See the following change record for more information,
Chris@0: * https://www.drupal.org/node/2815083
Chris@0: * @preserve
Chris@0: **/
Chris@0: 
Chris@0: (function ($, _, Drupal) {
Chris@0:   Drupal.quickedit.editors.image = Drupal.quickedit.EditorView.extend({
Chris@0:     initialize: function initialize(options) {
Chris@0:       Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
Chris@0: 
Chris@0:       this.model.set('originalValue', this.$el.html().trim());
Chris@0: 
Chris@0:       this.model.set('currentValue', function (index, value) {
Chris@0:         var matches = $(this).attr('name').match(/(alt|title)]$/);
Chris@0:         if (matches) {
Chris@0:           var name = matches[1];
Chris@0:           var $toolgroup = $('#' + options.fieldModel.toolbarView.getMainWysiwygToolgroupId());
Chris@0:           var $input = $toolgroup.find('.quickedit-image-field-info input[name="' + name + '"]');
Chris@0:           if ($input.length) {
Chris@0:             return $input.val();
Chris@0:           }
Chris@0:         }
Chris@0:       });
Chris@0:     },
Chris@0:     stateChange: function stateChange(fieldModel, state, options) {
Chris@0:       var from = fieldModel.previous('state');
Chris@0:       switch (state) {
Chris@0:         case 'inactive':
Chris@0:           break;
Chris@0: 
Chris@0:         case 'candidate':
Chris@0:           if (from !== 'inactive') {
Chris@0:             this.$el.find('.quickedit-image-dropzone').remove();
Chris@0:             this.$el.removeClass('quickedit-image-element');
Chris@0:           }
Chris@0:           if (from === 'invalid') {
Chris@0:             this.removeValidationErrors();
Chris@0:           }
Chris@0:           break;
Chris@0: 
Chris@0:         case 'highlighted':
Chris@0:           break;
Chris@0: 
Chris@0:         case 'activating':
Chris@0:           _.defer(function () {
Chris@0:             fieldModel.set('state', 'active');
Chris@0:           });
Chris@0:           break;
Chris@0: 
Chris@0:         case 'active':
Chris@14:           {
Chris@14:             var self = this;
Chris@0: 
Chris@14:             this.$el.addClass('quickedit-image-element');
Chris@0: 
Chris@14:             var $dropzone = this.renderDropzone('upload', Drupal.t('Drop file here or click to upload'));
Chris@0: 
Chris@14:             $dropzone.on('dragenter', function (e) {
Chris@14:               $(this).addClass('hover');
Chris@14:             });
Chris@14:             $dropzone.on('dragleave', function (e) {
Chris@14:               $(this).removeClass('hover');
Chris@14:             });
Chris@0: 
Chris@14:             $dropzone.on('drop', function (e) {
Chris@14:               if (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
Chris@14:                 $(this).removeClass('hover');
Chris@14:                 self.uploadImage(e.originalEvent.dataTransfer.files[0]);
Chris@0:               }
Chris@0:             });
Chris@0: 
Chris@14:             $dropzone.on('click', function (e) {
Chris@14:               $('<input type="file">').trigger('click').on('change', function () {
Chris@14:                 if (this.files.length) {
Chris@14:                   self.uploadImage(this.files[0]);
Chris@14:                 }
Chris@14:               });
Chris@14:             });
Chris@0: 
Chris@14:             $dropzone.on('dragover dragenter dragleave drop click', function (e) {
Chris@14:               e.preventDefault();
Chris@14:               e.stopPropagation();
Chris@14:             });
Chris@14: 
Chris@14:             this.renderToolbar(fieldModel);
Chris@14:             break;
Chris@14:           }
Chris@0: 
Chris@0:         case 'changed':
Chris@0:           break;
Chris@0: 
Chris@0:         case 'saving':
Chris@0:           if (from === 'invalid') {
Chris@0:             this.removeValidationErrors();
Chris@0:           }
Chris@0: 
Chris@0:           this.save(options);
Chris@0:           break;
Chris@0: 
Chris@0:         case 'saved':
Chris@0:           break;
Chris@0: 
Chris@0:         case 'invalid':
Chris@0:           this.showValidationErrors();
Chris@0:           break;
Chris@0:       }
Chris@0:     },
Chris@0:     uploadImage: function uploadImage(file) {
Chris@0:       this.renderDropzone('upload loading', Drupal.t('Uploading <i>@file</i>…', { '@file': file.name }));
Chris@0: 
Chris@0:       var fieldID = this.fieldModel.get('fieldID');
Chris@0:       var url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/upload/!entity_type/!id/!field_name/!langcode/!view_mode'));
Chris@0: 
Chris@0:       var data = new FormData();
Chris@0:       data.append('files[image]', file);
Chris@0: 
Chris@0:       var self = this;
Chris@0:       this.ajax({
Chris@0:         type: 'POST',
Chris@0:         url: url,
Chris@0:         data: data,
Chris@0:         success: function success(response) {
Chris@0:           var $el = $(self.fieldModel.get('el'));
Chris@0: 
Chris@0:           self.fieldModel.set('state', 'changed');
Chris@0:           self.fieldModel.get('entity').set('inTempStore', true);
Chris@0:           self.removeValidationErrors();
Chris@0: 
Chris@0:           var $content = $(response.html).closest('[data-quickedit-field-id]').children();
Chris@0:           $el.empty().append($content);
Chris@0:         }
Chris@0:       });
Chris@0:     },
Chris@0:     ajax: function ajax(options) {
Chris@0:       var defaultOptions = {
Chris@0:         context: this,
Chris@0:         dataType: 'json',
Chris@0:         cache: false,
Chris@0:         contentType: false,
Chris@0:         processData: false,
Chris@0:         error: function error() {
Chris@0:           this.renderDropzone('error', Drupal.t('A server error has occurred.'));
Chris@0:         }
Chris@0:       };
Chris@0: 
Chris@0:       var ajaxOptions = $.extend(defaultOptions, options);
Chris@0:       var successCallback = ajaxOptions.success;
Chris@0: 
Chris@0:       ajaxOptions.success = function (response) {
Chris@0:         if (response.main_error) {
Chris@0:           this.renderDropzone('error', response.main_error);
Chris@0:           if (response.errors.length) {
Chris@0:             this.model.set('validationErrors', response.errors);
Chris@0:           }
Chris@0:           this.showValidationErrors();
Chris@0:         } else {
Chris@0:           successCallback(response);
Chris@0:         }
Chris@0:       };
Chris@0: 
Chris@0:       $.ajax(ajaxOptions);
Chris@0:     },
Chris@0:     renderToolbar: function renderToolbar(fieldModel) {
Chris@0:       var $toolgroup = $('#' + fieldModel.toolbarView.getMainWysiwygToolgroupId());
Chris@0:       var $toolbar = $toolgroup.find('.quickedit-image-field-info');
Chris@0:       if ($toolbar.length === 0) {
Chris@0:         var fieldID = fieldModel.get('fieldID');
Chris@0:         var url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/info/!entity_type/!id/!field_name/!langcode/!view_mode'));
Chris@0:         var self = this;
Chris@0:         self.ajax({
Chris@0:           type: 'GET',
Chris@0:           url: url,
Chris@0:           success: function success(response) {
Chris@0:             $toolbar = $(Drupal.theme.quickeditImageToolbar(response));
Chris@0:             $toolgroup.append($toolbar);
Chris@0:             $toolbar.on('keyup paste', function () {
Chris@0:               fieldModel.set('state', 'changed');
Chris@0:             });
Chris@0: 
Chris@0:             fieldModel.get('entity').toolbarView.position();
Chris@0:           }
Chris@0:         });
Chris@0:       }
Chris@0:     },
Chris@0:     renderDropzone: function renderDropzone(state, text) {
Chris@0:       var $dropzone = this.$el.find('.quickedit-image-dropzone');
Chris@0: 
Chris@0:       if ($dropzone.length) {
Chris@0:         $dropzone.removeClass('upload error hover loading').addClass('.quickedit-image-dropzone ' + state).children('.quickedit-image-text').html(text);
Chris@0:       } else {
Chris@0:         $dropzone = $(Drupal.theme('quickeditImageDropzone', {
Chris@0:           state: state,
Chris@0:           text: text
Chris@0:         }));
Chris@0:         this.$el.append($dropzone);
Chris@0:       }
Chris@0: 
Chris@0:       return $dropzone;
Chris@0:     },
Chris@0:     revert: function revert() {
Chris@0:       this.$el.html(this.model.get('originalValue'));
Chris@0:     },
Chris@0:     getQuickEditUISettings: function getQuickEditUISettings() {
Chris@17:       return {
Chris@17:         padding: false,
Chris@17:         unifiedToolbar: true,
Chris@17:         fullWidthToolbar: true,
Chris@17:         popup: false
Chris@17:       };
Chris@0:     },
Chris@0:     showValidationErrors: function showValidationErrors() {
Chris@0:       var errors = Drupal.theme('quickeditImageErrors', {
Chris@0:         errors: this.model.get('validationErrors')
Chris@0:       });
Chris@0:       $('#' + this.fieldModel.toolbarView.getMainWysiwygToolgroupId()).append(errors);
Chris@0:       this.getEditedElement().addClass('quickedit-validation-error');
Chris@0: 
Chris@0:       this.fieldModel.get('entity').toolbarView.position();
Chris@0:     },
Chris@0:     removeValidationErrors: function removeValidationErrors() {
Chris@0:       $('#' + this.fieldModel.toolbarView.getMainWysiwygToolgroupId()).find('.quickedit-image-errors').remove();
Chris@0:       this.getEditedElement().removeClass('quickedit-validation-error');
Chris@0:     }
Chris@0:   });
Chris@0: })(jQuery, _, Drupal);