www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/image/js/editors/image.js

   1 /**
   2 * DO NOT EDIT THIS FILE.
   3 * See the following change record for more information,
   4 * https://www.drupal.org/node/2815083
   5 * @preserve
   6 **/
   7
   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);
  12
  13       this.model.set('originalValue', this.$el.html().trim());
  14
  15       this.model.set('currentValue', function (index, value) {
  16         var matches = $(this).attr('name').match(/(alt|title)]$/);
  17         if (matches) {
  18           var name = matches[1];
  19           var $toolgroup = $('#' + options.fieldModel.toolbarView.getMainWysiwygToolgroupId());
  20           var $input = $toolgroup.find('.quickedit-image-field-info input[name="' + name + '"]');
  21           if ($input.length) {
  22             return $input.val();
  23           }
  24         }
  25       });
  26     },
  27     stateChange: function stateChange(fieldModel, state, options) {
  28       var from = fieldModel.previous('state');
  29       switch (state) {
  30         case 'inactive':
  31           break;
  32
  33         case 'candidate':
  34           if (from !== 'inactive') {
  35             this.$el.find('.quickedit-image-dropzone').remove();
  36             this.$el.removeClass('quickedit-image-element');
  37           }
  38           if (from === 'invalid') {
  39             this.removeValidationErrors();
  40           }
  41           break;
  42
  43         case 'highlighted':
  44           break;
  45
  46         case 'activating':
  47           _.defer(function () {
  48             fieldModel.set('state', 'active');
  49           });
  50           break;
  51
  52         case 'active':
  53           {
  54             var self = this;
  55
  56             this.$el.addClass('quickedit-image-element');
  57
  58             var $dropzone = this.renderDropzone('upload', Drupal.t('Drop file here or click to upload'));
  59
  60             $dropzone.on('dragenter', function (e) {
  61               $(this).addClass('hover');
  62             });
  63             $dropzone.on('dragleave', function (e) {
  64               $(this).removeClass('hover');
  65             });
  66
  67             $dropzone.on('drop', function (e) {
  68               if (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
  69                 $(this).removeClass('hover');
  70                 self.uploadImage(e.originalEvent.dataTransfer.files[0]);
  71               }
  72             });
  73
  74             $dropzone.on('click', function (e) {
  75               $('<input type="file">').trigger('click').on('change', function () {
  76                 if (this.files.length) {
  77                   self.uploadImage(this.files[0]);
  78                 }
  79               });
  80             });
  81
  82             $dropzone.on('dragover dragenter dragleave drop click', function (e) {
  83               e.preventDefault();
  84               e.stopPropagation();
  85             });
  86
  87             this.renderToolbar(fieldModel);
  88             break;
  89           }
  90
  91         case 'changed':
  92           break;
  93
  94         case 'saving':
  95           if (from === 'invalid') {
  96             this.removeValidationErrors();
  97           }
  98
  99           this.save(options);
 100           break;
 101
 102         case 'saved':
 103           break;
 104
 105         case 'invalid':
 106           this.showValidationErrors();
 107           break;
 108       }
 109     },
 110     uploadImage: function uploadImage(file) {
 111       this.renderDropzone('upload loading', Drupal.t('Uploading <i>@file</i>…', { '@file': file.name }));
 112
 113       var fieldID = this.fieldModel.get('fieldID');
 114       var url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/upload/!entity_type/!id/!field_name/!langcode/!view_mode'));
 115
 116       var data = new FormData();
 117       data.append('files[image]', file);
 118
 119       var self = this;
 120       this.ajax({
 121         type: 'POST',
 122         url: url,
 123         data: data,
 124         success: function success(response) {
 125           var $el = $(self.fieldModel.get('el'));
 126
 127           self.fieldModel.set('state', 'changed');
 128           self.fieldModel.get('entity').set('inTempStore', true);
 129           self.removeValidationErrors();
 130
 131           var $content = $(response.html).closest('[data-quickedit-field-id]').children();
 132           $el.empty().append($content);
 133         }
 134       });
 135     },
 136     ajax: function ajax(options) {
 137       var defaultOptions = {
 138         context: this,
 139         dataType: 'json',
 140         cache: false,
 141         contentType: false,
 142         processData: false,
 143         error: function error() {
 144           this.renderDropzone('error', Drupal.t('A server error has occurred.'));
 145         }
 146       };
 147
 148       var ajaxOptions = $.extend(defaultOptions, options);
 149       var successCallback = ajaxOptions.success;
 150
 151       ajaxOptions.success = function (response) {
 152         if (response.main_error) {
 153           this.renderDropzone('error', response.main_error);
 154           if (response.errors.length) {
 155             this.model.set('validationErrors', response.errors);
 156           }
 157           this.showValidationErrors();
 158         } else {
 159           successCallback(response);
 160         }
 161       };
 162
 163       $.ajax(ajaxOptions);
 164     },
 165     renderToolbar: function renderToolbar(fieldModel) {
 166       var $toolgroup = $('#' + fieldModel.toolbarView.getMainWysiwygToolgroupId());
 167       var $toolbar = $toolgroup.find('.quickedit-image-field-info');
 168       if ($toolbar.length === 0) {
 169         var fieldID = fieldModel.get('fieldID');
 170         var url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/info/!entity_type/!id/!field_name/!langcode/!view_mode'));
 171         var self = this;
 172         self.ajax({
 173           type: 'GET',
 174           url: url,
 175           success: function success(response) {
 176             $toolbar = $(Drupal.theme.quickeditImageToolbar(response));
 177             $toolgroup.append($toolbar);
 178             $toolbar.on('keyup paste', function () {
 179               fieldModel.set('state', 'changed');
 180             });
 181
 182             fieldModel.get('entity').toolbarView.position();
 183           }
 184         });
 185       }
 186     },
 187     renderDropzone: function renderDropzone(state, text) {
 188       var $dropzone = this.$el.find('.quickedit-image-dropzone');
 189
 190       if ($dropzone.length) {
 191         $dropzone.removeClass('upload error hover loading').addClass('.quickedit-image-dropzone ' + state).children('.quickedit-image-text').html(text);
 192       } else {
 193         $dropzone = $(Drupal.theme('quickeditImageDropzone', {
 194           state: state,
 195           text: text
 196         }));
 197         this.$el.append($dropzone);
 198       }
 199
 200       return $dropzone;
 201     },
 202     revert: function revert() {
 203       this.$el.html(this.model.get('originalValue'));
 204     },
 205     getQuickEditUISettings: function getQuickEditUISettings() {
 206       return {
 207         padding: false,
 208         unifiedToolbar: true,
 209         fullWidthToolbar: true,
 210         popup: false
 211       };
 212     },
 213     showValidationErrors: function showValidationErrors() {
 214       var errors = Drupal.theme('quickeditImageErrors', {
 215         errors: this.model.get('validationErrors')
 216       });
 217       $('#' + this.fieldModel.toolbarView.getMainWysiwygToolgroupId()).append(errors);
 218       this.getEditedElement().addClass('quickedit-validation-error');
 219
 220       this.fieldModel.get('entity').toolbarView.position();
 221     },
 222     removeValidationErrors: function removeValidationErrors() {
 223       $('#' + this.fieldModel.toolbarView.getMainWysiwygToolgroupId()).find('.quickedit-image-errors').remove();
 224       this.getEditedElement().removeClass('quickedit-validation-error');
 225     }
 226   });
 227 })(jQuery, _, Drupal);