123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- /**
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/2815083
- * @preserve
- **/
- (function ($, Backbone, Drupal) {
- Drupal.quickedit.FieldDecorationView = Backbone.View.extend({
- _widthAttributeIsEmpty: null,
- events: {
- 'mouseenter.quickedit': 'onMouseEnter',
- 'mouseleave.quickedit': 'onMouseLeave',
- click: 'onClick',
- 'tabIn.quickedit': 'onMouseEnter',
- 'tabOut.quickedit': 'onMouseLeave'
- },
- 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);
- },
- remove: function remove() {
- this.setElement();
- Backbone.View.prototype.remove.call(this);
- },
- stateChange: function stateChange(model, state) {
- var from = model.previous('state');
- var to = state;
- switch (to) {
- case 'inactive':
- this.undecorate();
- break;
- case 'candidate':
- this.decorate();
- if (from !== 'inactive') {
- this.stopHighlight();
- if (from !== 'highlighted') {
- this.model.set('isChanged', false);
- this.stopEdit();
- }
- }
- this._unpad();
- break;
- case 'highlighted':
- this.startHighlight();
- break;
- case 'activating':
- this.prepareEdit();
- break;
- case 'active':
- if (from !== 'activating') {
- this.prepareEdit();
- }
- if (this.editorView.getQuickEditUISettings().padding) {
- this._pad();
- }
- break;
- case 'changed':
- this.model.set('isChanged', true);
- break;
- case 'saving':
- break;
- case 'saved':
- break;
- case 'invalid':
- break;
- }
- },
- renderChanged: function renderChanged() {
- this.$el.toggleClass('quickedit-changed', this.model.get('isChanged') || this.model.get('inTempStore'));
- },
- onMouseEnter: function onMouseEnter(event) {
- var that = this;
- that.model.set('state', 'highlighted');
- event.stopPropagation();
- },
- onMouseLeave: function onMouseLeave(event) {
- var that = this;
- that.model.set('state', 'candidate', { reason: 'mouseleave' });
- event.stopPropagation();
- },
- onClick: function onClick(event) {
- this.model.set('state', 'activating');
- event.preventDefault();
- event.stopPropagation();
- },
- decorate: function decorate() {
- this.$el.addClass('quickedit-candidate quickedit-editable');
- },
- undecorate: function undecorate() {
- this.$el.removeClass('quickedit-candidate quickedit-editable quickedit-highlighted quickedit-editing');
- },
- startHighlight: function startHighlight() {
- var that = this;
- that.$el.addClass('quickedit-highlighted');
- },
- stopHighlight: function stopHighlight() {
- this.$el.removeClass('quickedit-highlighted');
- },
- prepareEdit: function prepareEdit() {
- this.$el.addClass('quickedit-editing');
- if (this.editorView.getQuickEditUISettings().popup) {
- this.$el.addClass('quickedit-editor-is-popup');
- }
- },
- stopEdit: function stopEdit() {
- this.$el.removeClass('quickedit-highlighted quickedit-editing');
- if (this.editorView.getQuickEditUISettings().popup) {
- this.$el.removeClass('quickedit-editor-is-popup');
- }
- $('.quickedit-candidate').addClass('quickedit-editable');
- },
- _pad: function _pad() {
- if (this.$el.data('quickedit-padded')) {
- return;
- }
- var self = this;
- if (this.$el[0].style.width === '') {
- this._widthAttributeIsEmpty = true;
- this.$el.addClass('quickedit-animate-disable-width').css('width', this.$el.width());
- }
- var posProp = this._getPositionProperties(this.$el);
- setTimeout(function () {
- self.$el.removeClass('quickedit-animate-disable-width');
- 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);
- },
- _unpad: function _unpad() {
- if (!this.$el.data('quickedit-padded')) {
- return;
- }
- var self = this;
- if (this._widthAttributeIsEmpty) {
- this.$el.addClass('quickedit-animate-disable-width').css('width', '');
- }
- var posProp = this._getPositionProperties(this.$el);
- setTimeout(function () {
- self.$el.removeClass('quickedit-animate-disable-width');
- 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);
- this.$el.removeData('quickedit-padded');
- },
- _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 propCount = props.length;
- for (var i = 0; i < propCount; i++) {
- p = props[i];
- r[p] = parseInt(this._replaceBlankPosition($e.css(p)), 10);
- }
- return r;
- },
- _replaceBlankPosition: function _replaceBlankPosition(pos) {
- if (pos === 'auto' || !pos) {
- pos = '0px';
- }
- return pos;
- }
- });
- })(jQuery, Backbone, Drupal);
|