Chris@0: /**
Chris@0:  * @file
Chris@0:  * A Backbone View that decorates the in-place edited element.
Chris@0:  */
Chris@0: 
Chris@0: (function ($, Backbone, Drupal) {
Chris@0:   Drupal.quickedit.FieldDecorationView = Backbone.View.extend(/** @lends Drupal.quickedit.FieldDecorationView# */{
Chris@0: 
Chris@0:     /**
Chris@0:      * @type {null}
Chris@0:      */
Chris@0:     _widthAttributeIsEmpty: null,
Chris@0: 
Chris@0:     /**
Chris@0:      * @type {object}
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:     /**
Chris@0:      * @constructs
Chris@0:      *
Chris@0:      * @augments Backbone.View
Chris@0:      *
Chris@0:      * @param {object} options
Chris@0:      *   An object with the following keys:
Chris@0:      * @param {Drupal.quickedit.EditorView} options.editorView
Chris@0:      *   The editor object view.
Chris@0:      */
Chris@0:     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: 
Chris@0:     /**
Chris@0:      * @inheritdoc
Chris@0:      */
Chris@0:     remove() {
Chris@0:       // The el property is the field, which should not be removed. Remove the
Chris@0:       // pointer to it, then call Backbone.View.prototype.remove().
Chris@0:       this.setElement();
Chris@0:       Backbone.View.prototype.remove.call(this);
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Determines the actions to take given a change of state.
Chris@0:      *
Chris@0:      * @param {Drupal.quickedit.FieldModel} model
Chris@0:      *   The `FieldModel` model.
Chris@0:      * @param {string} state
Chris@0:      *   The state of the associated field. One of
Chris@0:      *   {@link Drupal.quickedit.FieldModel.states}.
Chris@0:      */
Chris@0:     stateChange(model, state) {
Chris@0:       const from = model.previous('state');
Chris@0:       const 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:           // NOTE: this state is not used by every editor! It's only used by
Chris@0:           // those that need to interact with the server.
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: 
Chris@0:     /**
Chris@0:      * Adds a class to the edited element that indicates whether the field has
Chris@0:      * been changed by the user (i.e. locally) or the field has already been
Chris@0:      * changed and stored before by the user (i.e. remotely, stored in
Chris@0:      * PrivateTempStore).
Chris@0:      */
Chris@0:     renderChanged() {
Chris@0:       this.$el.toggleClass('quickedit-changed', this.model.get('isChanged') || this.model.get('inTempStore'));
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Starts hover; transitions to 'highlight' state.
Chris@0:      *
Chris@0:      * @param {jQuery.Event} event
Chris@0:      *   The mouse event.
Chris@0:      */
Chris@0:     onMouseEnter(event) {
Chris@0:       const that = this;
Chris@0:       that.model.set('state', 'highlighted');
Chris@0:       event.stopPropagation();
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Stops hover; transitions to 'candidate' state.
Chris@0:      *
Chris@0:      * @param {jQuery.Event} event
Chris@0:      *   The mouse event.
Chris@0:      */
Chris@0:     onMouseLeave(event) {
Chris@0:       const that = this;
Chris@0:       that.model.set('state', 'candidate', { reason: 'mouseleave' });
Chris@0:       event.stopPropagation();
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Transition to 'activating' stage.
Chris@0:      *
Chris@0:      * @param {jQuery.Event} event
Chris@0:      *   The click event.
Chris@0:      */
Chris@0:     onClick(event) {
Chris@0:       this.model.set('state', 'activating');
Chris@0:       event.preventDefault();
Chris@0:       event.stopPropagation();
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Adds classes used to indicate an elements editable state.
Chris@0:      */
Chris@0:     decorate() {
Chris@0:       this.$el.addClass('quickedit-candidate quickedit-editable');
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Removes classes used to indicate an elements editable state.
Chris@0:      */
Chris@0:     undecorate() {
Chris@0:       this.$el.removeClass('quickedit-candidate quickedit-editable quickedit-highlighted quickedit-editing');
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Adds that class that indicates that an element is highlighted.
Chris@0:      */
Chris@0:     startHighlight() {
Chris@0:       // Animations.
Chris@0:       const that = this;
Chris@0:       // Use a timeout to grab the next available animation frame.
Chris@0:       that.$el.addClass('quickedit-highlighted');
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Removes the class that indicates that an element is highlighted.
Chris@0:      */
Chris@0:     stopHighlight() {
Chris@0:       this.$el.removeClass('quickedit-highlighted');
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Removes the class that indicates that an element as editable.
Chris@0:      */
Chris@0:     prepareEdit() {
Chris@0:       this.$el.addClass('quickedit-editing');
Chris@0: 
Chris@0:       // Allow the field to be styled differently while editing in a pop-up
Chris@0:       // in-place editor.
Chris@0:       if (this.editorView.getQuickEditUISettings().popup) {
Chris@0:         this.$el.addClass('quickedit-editor-is-popup');
Chris@0:       }
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Removes the class that indicates that an element is being edited.
Chris@0:      *
Chris@0:      * Reapplies the class that indicates that a candidate editable element is
Chris@0:      * again available to be edited.
Chris@0:      */
Chris@0:     stopEdit() {
Chris@0:       this.$el.removeClass('quickedit-highlighted quickedit-editing');
Chris@0: 
Chris@0:       // Done editing in a pop-up in-place editor; remove the class.
Chris@0:       if (this.editorView.getQuickEditUISettings().popup) {
Chris@0:         this.$el.removeClass('quickedit-editor-is-popup');
Chris@0:       }
Chris@0: 
Chris@0:       // Make the other editors show up again.
Chris@0:       $('.quickedit-candidate').addClass('quickedit-editable');
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Adds padding around the editable element to make it pop visually.
Chris@0:      */
Chris@0:     _pad() {
Chris@0:       // Early return if the element has already been padded.
Chris@0:       if (this.$el.data('quickedit-padded')) {
Chris@0:         return;
Chris@0:       }
Chris@0:       const self = this;
Chris@0: 
Chris@0:       // Add 5px padding for readability. This means we'll freeze the current
Chris@0:       // width and *then* add 5px padding, hence ensuring the padding is added
Chris@0:       // "on the outside".
Chris@0:       // 1) Freeze the width (if it's not already set); don't use animations.
Chris@0:       if (this.$el[0].style.width === '') {
Chris@0:         this._widthAttributeIsEmpty = true;
Chris@0:         this.$el
Chris@0:           .addClass('quickedit-animate-disable-width')
Chris@0:           .css('width', this.$el.width());
Chris@0:       }
Chris@0: 
Chris@0:       // 2) Add padding; use animations.
Chris@0:       const posProp = this._getPositionProperties(this.$el);
Chris@0:       setTimeout(() => {
Chris@0:         // Re-enable width animations (padding changes affect width too!).
Chris@0:         self.$el.removeClass('quickedit-animate-disable-width');
Chris@0: 
Chris@0:         // Pad the editable.
Chris@0:         self.$el
Chris@0:           .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:           .data('quickedit-padded', true);
Chris@0:       }, 0);
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Removes the padding around the element being edited when editing ceases.
Chris@0:      */
Chris@0:     _unpad() {
Chris@0:       // Early return if the element has not been padded.
Chris@0:       if (!this.$el.data('quickedit-padded')) {
Chris@0:         return;
Chris@0:       }
Chris@0:       const self = this;
Chris@0: 
Chris@0:       // 1) Set the empty width again.
Chris@0:       if (this._widthAttributeIsEmpty) {
Chris@0:         this.$el
Chris@0:           .addClass('quickedit-animate-disable-width')
Chris@0:           .css('width', '');
Chris@0:       }
Chris@0: 
Chris@0:       // 2) Remove padding; use animations (these will run simultaneously with)
Chris@0:       // the fading out of the toolbar as its gets removed).
Chris@0:       const posProp = this._getPositionProperties(this.$el);
Chris@0:       setTimeout(() => {
Chris@0:         // Re-enable width animations (padding changes affect width too!).
Chris@0:         self.$el.removeClass('quickedit-animate-disable-width');
Chris@0: 
Chris@0:         // Unpad the editable.
Chris@0:         self.$el
Chris@0:           .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:       // Remove the marker that indicates that this field has padding. This is
Chris@0:       // done outside the timed out function above so that we don't get numerous
Chris@0:       // queued functions that will remove padding before the data marker has
Chris@0:       // been removed.
Chris@0:       this.$el.removeData('quickedit-padded');
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Gets the top and left properties of an element.
Chris@0:      *
Chris@0:      * Convert extraneous values and information into numbers ready for
Chris@0:      * subtraction.
Chris@0:      *
Chris@0:      * @param {jQuery} $e
Chris@0:      *   The element to get position properties from.
Chris@0:      *
Chris@0:      * @return {object}
Chris@0:      *   An object containing css values for the needed properties.
Chris@0:      */
Chris@0:     _getPositionProperties($e) {
Chris@0:       let p;
Chris@0:       const r = {};
Chris@0:       const props = [
Chris@0:         'top', 'left', 'bottom', 'right',
Chris@0:         'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
Chris@0:         'margin-bottom',
Chris@0:       ];
Chris@0: 
Chris@0:       const propCount = props.length;
Chris@0:       for (let 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: 
Chris@0:     /**
Chris@0:      * Replaces blank or 'auto' CSS `position: <value>` values with "0px".
Chris@0:      *
Chris@0:      * @param {string} [pos]
Chris@0:      *   The value for a CSS position declaration.
Chris@0:      *
Chris@0:      * @return {string}
Chris@0:      *   A CSS value that is valid for `position`.
Chris@0:      */
Chris@0:     _replaceBlankPosition(pos) {
Chris@0:       if (pos === 'auto' || !pos) {
Chris@0:         pos = '0px';
Chris@0:       }
Chris@0:       return pos;
Chris@0:     },
Chris@0: 
Chris@0:   });
Chris@0: }(jQuery, Backbone, Drupal));