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 ($, Backbone, Drupal) {
Chris@0:   Drupal.quickedit.FieldDecorationView = Backbone.View.extend({
Chris@0:     _widthAttributeIsEmpty: null,
Chris@0: 
Chris@0:     events: {
Chris@0:       'mouseenter.quickedit': 'onMouseEnter',
Chris@0:       'mouseleave.quickedit': 'onMouseLeave',
Chris@0:       click: 'onClick',
Chris@0:       'tabIn.quickedit': 'onMouseEnter',
Chris@0:       'tabOut.quickedit': 'onMouseLeave'
Chris@0:     },
Chris@0: 
Chris@0:     initialize: function initialize(options) {
Chris@0:       this.editorView = options.editorView;
Chris@0: 
Chris@0:       this.listenTo(this.model, 'change:state', this.stateChange);
Chris@0:       this.listenTo(this.model, 'change:isChanged change:inTempStore', this.renderChanged);
Chris@0:     },
Chris@0:     remove: function remove() {
Chris@0:       this.setElement();
Chris@0:       Backbone.View.prototype.remove.call(this);
Chris@0:     },
Chris@0:     stateChange: function stateChange(model, state) {
Chris@0:       var from = model.previous('state');
Chris@0:       var to = state;
Chris@0:       switch (to) {
Chris@0:         case 'inactive':
Chris@0:           this.undecorate();
Chris@0:           break;
Chris@0: 
Chris@0:         case 'candidate':
Chris@0:           this.decorate();
Chris@0:           if (from !== 'inactive') {
Chris@0:             this.stopHighlight();
Chris@0:             if (from !== 'highlighted') {
Chris@0:               this.model.set('isChanged', false);
Chris@0:               this.stopEdit();
Chris@0:             }
Chris@0:           }
Chris@0:           this._unpad();
Chris@0:           break;
Chris@0: 
Chris@0:         case 'highlighted':
Chris@0:           this.startHighlight();
Chris@0:           break;
Chris@0: 
Chris@0:         case 'activating':
Chris@0:           this.prepareEdit();
Chris@0:           break;
Chris@0: 
Chris@0:         case 'active':
Chris@0:           if (from !== 'activating') {
Chris@0:             this.prepareEdit();
Chris@0:           }
Chris@0:           if (this.editorView.getQuickEditUISettings().padding) {
Chris@0:             this._pad();
Chris@0:           }
Chris@0:           break;
Chris@0: 
Chris@0:         case 'changed':
Chris@0:           this.model.set('isChanged', true);
Chris@0:           break;
Chris@0: 
Chris@0:         case 'saving':
Chris@0:           break;
Chris@0: 
Chris@0:         case 'saved':
Chris@0:           break;
Chris@0: 
Chris@0:         case 'invalid':
Chris@0:           break;
Chris@0:       }
Chris@0:     },
Chris@0:     renderChanged: function renderChanged() {
Chris@0:       this.$el.toggleClass('quickedit-changed', this.model.get('isChanged') || this.model.get('inTempStore'));
Chris@0:     },
Chris@0:     onMouseEnter: function onMouseEnter(event) {
Chris@0:       var that = this;
Chris@0:       that.model.set('state', 'highlighted');
Chris@0:       event.stopPropagation();
Chris@0:     },
Chris@0:     onMouseLeave: function onMouseLeave(event) {
Chris@0:       var that = this;
Chris@0:       that.model.set('state', 'candidate', { reason: 'mouseleave' });
Chris@0:       event.stopPropagation();
Chris@0:     },
Chris@0:     onClick: function onClick(event) {
Chris@0:       this.model.set('state', 'activating');
Chris@0:       event.preventDefault();
Chris@0:       event.stopPropagation();
Chris@0:     },
Chris@0:     decorate: function decorate() {
Chris@0:       this.$el.addClass('quickedit-candidate quickedit-editable');
Chris@0:     },
Chris@0:     undecorate: function undecorate() {
Chris@0:       this.$el.removeClass('quickedit-candidate quickedit-editable quickedit-highlighted quickedit-editing');
Chris@0:     },
Chris@0:     startHighlight: function startHighlight() {
Chris@0:       var that = this;
Chris@0: 
Chris@0:       that.$el.addClass('quickedit-highlighted');
Chris@0:     },
Chris@0:     stopHighlight: function stopHighlight() {
Chris@0:       this.$el.removeClass('quickedit-highlighted');
Chris@0:     },
Chris@0:     prepareEdit: function prepareEdit() {
Chris@0:       this.$el.addClass('quickedit-editing');
Chris@0: 
Chris@0:       if (this.editorView.getQuickEditUISettings().popup) {
Chris@0:         this.$el.addClass('quickedit-editor-is-popup');
Chris@0:       }
Chris@0:     },
Chris@0:     stopEdit: function stopEdit() {
Chris@0:       this.$el.removeClass('quickedit-highlighted quickedit-editing');
Chris@0: 
Chris@0:       if (this.editorView.getQuickEditUISettings().popup) {
Chris@0:         this.$el.removeClass('quickedit-editor-is-popup');
Chris@0:       }
Chris@0: 
Chris@0:       $('.quickedit-candidate').addClass('quickedit-editable');
Chris@0:     },
Chris@0:     _pad: function _pad() {
Chris@0:       if (this.$el.data('quickedit-padded')) {
Chris@0:         return;
Chris@0:       }
Chris@0:       var self = this;
Chris@0: 
Chris@0:       if (this.$el[0].style.width === '') {
Chris@0:         this._widthAttributeIsEmpty = true;
Chris@0:         this.$el.addClass('quickedit-animate-disable-width').css('width', this.$el.width());
Chris@0:       }
Chris@0: 
Chris@0:       var posProp = this._getPositionProperties(this.$el);
Chris@0:       setTimeout(function () {
Chris@0:         self.$el.removeClass('quickedit-animate-disable-width');
Chris@0: 
Chris@0:         self.$el.css({
Chris@0:           position: 'relative',
Chris@0:           top: posProp.top - 5 + 'px',
Chris@0:           left: posProp.left - 5 + 'px',
Chris@0:           'padding-top': posProp['padding-top'] + 5 + 'px',
Chris@0:           'padding-left': posProp['padding-left'] + 5 + 'px',
Chris@0:           'padding-right': posProp['padding-right'] + 5 + 'px',
Chris@0:           'padding-bottom': posProp['padding-bottom'] + 5 + 'px',
Chris@0:           'margin-bottom': posProp['margin-bottom'] - 10 + 'px'
Chris@0:         }).data('quickedit-padded', true);
Chris@0:       }, 0);
Chris@0:     },
Chris@0:     _unpad: function _unpad() {
Chris@0:       if (!this.$el.data('quickedit-padded')) {
Chris@0:         return;
Chris@0:       }
Chris@0:       var self = this;
Chris@0: 
Chris@0:       if (this._widthAttributeIsEmpty) {
Chris@0:         this.$el.addClass('quickedit-animate-disable-width').css('width', '');
Chris@0:       }
Chris@0: 
Chris@0:       var posProp = this._getPositionProperties(this.$el);
Chris@0:       setTimeout(function () {
Chris@0:         self.$el.removeClass('quickedit-animate-disable-width');
Chris@0: 
Chris@0:         self.$el.css({
Chris@0:           position: 'relative',
Chris@0:           top: posProp.top + 5 + 'px',
Chris@0:           left: posProp.left + 5 + 'px',
Chris@0:           'padding-top': posProp['padding-top'] - 5 + 'px',
Chris@0:           'padding-left': posProp['padding-left'] - 5 + 'px',
Chris@0:           'padding-right': posProp['padding-right'] - 5 + 'px',
Chris@0:           'padding-bottom': posProp['padding-bottom'] - 5 + 'px',
Chris@0:           'margin-bottom': posProp['margin-bottom'] + 10 + 'px'
Chris@0:         });
Chris@0:       }, 0);
Chris@0: 
Chris@0:       this.$el.removeData('quickedit-padded');
Chris@0:     },
Chris@0:     _getPositionProperties: function _getPositionProperties($e) {
Chris@0:       var p = void 0;
Chris@0:       var r = {};
Chris@0:       var props = ['top', 'left', 'bottom', 'right', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom', 'margin-bottom'];
Chris@0: 
Chris@0:       var propCount = props.length;
Chris@0:       for (var i = 0; i < propCount; i++) {
Chris@0:         p = props[i];
Chris@0:         r[p] = parseInt(this._replaceBlankPosition($e.css(p)), 10);
Chris@0:       }
Chris@0:       return r;
Chris@0:     },
Chris@0:     _replaceBlankPosition: function _replaceBlankPosition(pos) {
Chris@0:       if (pos === 'auto' || !pos) {
Chris@0:         pos = '0px';
Chris@0:       }
Chris@0:       return pos;
Chris@0:     }
Chris@0:   });
Chris@0: })(jQuery, Backbone, Drupal);