www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/quickedit/js/views/FieldDecorationView.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 ($, Backbone, Drupal) {
   9   Drupal.quickedit.FieldDecorationView = Backbone.View.extend({
  10     _widthAttributeIsEmpty: null,
  11
  12     events: {
  13       'mouseenter.quickedit': 'onMouseEnter',
  14       'mouseleave.quickedit': 'onMouseLeave',
  15       click: 'onClick',
  16       'tabIn.quickedit': 'onMouseEnter',
  17       'tabOut.quickedit': 'onMouseLeave'
  18     },
  19
  20     initialize: function initialize(options) {
  21       this.editorView = options.editorView;
  22
  23       this.listenTo(this.model, 'change:state', this.stateChange);
  24       this.listenTo(this.model, 'change:isChanged change:inTempStore', this.renderChanged);
  25     },
  26     remove: function remove() {
  27       this.setElement();
  28       Backbone.View.prototype.remove.call(this);
  29     },
  30     stateChange: function stateChange(model, state) {
  31       var from = model.previous('state');
  32       var to = state;
  33       switch (to) {
  34         case 'inactive':
  35           this.undecorate();
  36           break;
  37
  38         case 'candidate':
  39           this.decorate();
  40           if (from !== 'inactive') {
  41             this.stopHighlight();
  42             if (from !== 'highlighted') {
  43               this.model.set('isChanged', false);
  44               this.stopEdit();
  45             }
  46           }
  47           this._unpad();
  48           break;
  49
  50         case 'highlighted':
  51           this.startHighlight();
  52           break;
  53
  54         case 'activating':
  55           this.prepareEdit();
  56           break;
  57
  58         case 'active':
  59           if (from !== 'activating') {
  60             this.prepareEdit();
  61           }
  62           if (this.editorView.getQuickEditUISettings().padding) {
  63             this._pad();
  64           }
  65           break;
  66
  67         case 'changed':
  68           this.model.set('isChanged', true);
  69           break;
  70
  71         case 'saving':
  72           break;
  73
  74         case 'saved':
  75           break;
  76
  77         case 'invalid':
  78           break;
  79       }
  80     },
  81     renderChanged: function renderChanged() {
  82       this.$el.toggleClass('quickedit-changed', this.model.get('isChanged') || this.model.get('inTempStore'));
  83     },
  84     onMouseEnter: function onMouseEnter(event) {
  85       var that = this;
  86       that.model.set('state', 'highlighted');
  87       event.stopPropagation();
  88     },
  89     onMouseLeave: function onMouseLeave(event) {
  90       var that = this;
  91       that.model.set('state', 'candidate', { reason: 'mouseleave' });
  92       event.stopPropagation();
  93     },
  94     onClick: function onClick(event) {
  95       this.model.set('state', 'activating');
  96       event.preventDefault();
  97       event.stopPropagation();
  98     },
  99     decorate: function decorate() {
 100       this.$el.addClass('quickedit-candidate quickedit-editable');
 101     },
 102     undecorate: function undecorate() {
 103       this.$el.removeClass('quickedit-candidate quickedit-editable quickedit-highlighted quickedit-editing');
 104     },
 105     startHighlight: function startHighlight() {
 106       var that = this;
 107
 108       that.$el.addClass('quickedit-highlighted');
 109     },
 110     stopHighlight: function stopHighlight() {
 111       this.$el.removeClass('quickedit-highlighted');
 112     },
 113     prepareEdit: function prepareEdit() {
 114       this.$el.addClass('quickedit-editing');
 115
 116       if (this.editorView.getQuickEditUISettings().popup) {
 117         this.$el.addClass('quickedit-editor-is-popup');
 118       }
 119     },
 120     stopEdit: function stopEdit() {
 121       this.$el.removeClass('quickedit-highlighted quickedit-editing');
 122
 123       if (this.editorView.getQuickEditUISettings().popup) {
 124         this.$el.removeClass('quickedit-editor-is-popup');
 125       }
 126
 127       $('.quickedit-candidate').addClass('quickedit-editable');
 128     },
 129     _pad: function _pad() {
 130       if (this.$el.data('quickedit-padded')) {
 131         return;
 132       }
 133       var self = this;
 134
 135       if (this.$el[0].style.width === '') {
 136         this._widthAttributeIsEmpty = true;
 137         this.$el.addClass('quickedit-animate-disable-width').css('width', this.$el.width());
 138       }
 139
 140       var posProp = this._getPositionProperties(this.$el);
 141       setTimeout(function () {
 142         self.$el.removeClass('quickedit-animate-disable-width');
 143
 144         self.$el.css({
 145           position: 'relative',
 146           top: posProp.top - 5 + 'px',
 147           left: posProp.left - 5 + 'px',
 148           'padding-top': posProp['padding-top'] + 5 + 'px',
 149           'padding-left': posProp['padding-left'] + 5 + 'px',
 150           'padding-right': posProp['padding-right'] + 5 + 'px',
 151           'padding-bottom': posProp['padding-bottom'] + 5 + 'px',
 152           'margin-bottom': posProp['margin-bottom'] - 10 + 'px'
 153         }).data('quickedit-padded', true);
 154       }, 0);
 155     },
 156     _unpad: function _unpad() {
 157       if (!this.$el.data('quickedit-padded')) {
 158         return;
 159       }
 160       var self = this;
 161
 162       if (this._widthAttributeIsEmpty) {
 163         this.$el.addClass('quickedit-animate-disable-width').css('width', '');
 164       }
 165
 166       var posProp = this._getPositionProperties(this.$el);
 167       setTimeout(function () {
 168         self.$el.removeClass('quickedit-animate-disable-width');
 169
 170         self.$el.css({
 171           position: 'relative',
 172           top: posProp.top + 5 + 'px',
 173           left: posProp.left + 5 + 'px',
 174           'padding-top': posProp['padding-top'] - 5 + 'px',
 175           'padding-left': posProp['padding-left'] - 5 + 'px',
 176           'padding-right': posProp['padding-right'] - 5 + 'px',
 177           'padding-bottom': posProp['padding-bottom'] - 5 + 'px',
 178           'margin-bottom': posProp['margin-bottom'] + 10 + 'px'
 179         });
 180       }, 0);
 181
 182       this.$el.removeData('quickedit-padded');
 183     },
 184     _getPositionProperties: function _getPositionProperties($e) {
 185       var p = void 0;
 186       var r = {};
 187       var props = ['top', 'left', 'bottom', 'right', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom', 'margin-bottom'];
 188
 189       var propCount = props.length;
 190       for (var i = 0; i < propCount; i++) {
 191         p = props[i];
 192         r[p] = parseInt(this._replaceBlankPosition($e.css(p)), 10);
 193       }
 194       return r;
 195     },
 196     _replaceBlankPosition: function _replaceBlankPosition(pos) {
 197       if (pos === 'auto' || !pos) {
 198         pos = '0px';
 199       }
 200       return pos;
 201     }
 202   });
 203 })(jQuery, Backbone, Drupal);