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