293 lines
9.8 KiB
JavaScript
293 lines
9.8 KiB
JavaScript
/**
|
|
* DO NOT EDIT THIS FILE.
|
|
* See the following change record for more information,
|
|
* https://www.drupal.org/node/2815083
|
|
* @preserve
|
|
**/
|
|
|
|
(function ($, _, Backbone, Drupal, debounce, Popper) {
|
|
Drupal.quickedit.EntityToolbarView = Backbone.View.extend({
|
|
_fieldToolbarRoot: null,
|
|
events: function events() {
|
|
var map = {
|
|
'click button.action-save': 'onClickSave',
|
|
'click button.action-cancel': 'onClickCancel',
|
|
mouseenter: 'onMouseenter'
|
|
};
|
|
return map;
|
|
},
|
|
initialize: function initialize(options) {
|
|
var that = this;
|
|
this.appModel = options.appModel;
|
|
this.$entity = $(this.model.get('el'));
|
|
this.listenTo(this.model, 'change:isActive change:isDirty change:state', this.render);
|
|
this.listenTo(this.appModel, 'change:highlightedField change:activeField', this.render);
|
|
this.listenTo(this.model.get('fields'), 'change:state', this.fieldStateChange);
|
|
$(window).on('resize.quickedit scroll.quickedit drupalViewportOffsetChange.quickedit', debounce($.proxy(this.windowChangeHandler, this), 150));
|
|
$(document).on('drupalViewportOffsetChange.quickedit', function (event, offsets) {
|
|
if (that.$fence) {
|
|
that.$fence.css(offsets);
|
|
}
|
|
});
|
|
var $toolbar = this.buildToolbarEl();
|
|
this.setElement($toolbar);
|
|
this._fieldToolbarRoot = $toolbar.find('.quickedit-toolbar-field').get(0);
|
|
this.render();
|
|
},
|
|
render: function render() {
|
|
if (this.model.get('isActive')) {
|
|
var $body = $('body');
|
|
|
|
if ($body.children('#quickedit-entity-toolbar').length === 0) {
|
|
$body.append(this.$el);
|
|
}
|
|
|
|
if ($body.children('#quickedit-toolbar-fence').length === 0) {
|
|
this.$fence = $(Drupal.theme('quickeditEntityToolbarFence')).css(Drupal.displace()).appendTo($body);
|
|
}
|
|
|
|
this.label();
|
|
this.show('ops');
|
|
this.position();
|
|
}
|
|
|
|
var $button = this.$el.find('.quickedit-button.action-save');
|
|
var isDirty = this.model.get('isDirty');
|
|
|
|
switch (this.model.get('state')) {
|
|
case 'opened':
|
|
$button.removeClass('action-saving icon-throbber icon-end').text(Drupal.t('Save')).removeAttr('disabled').attr('aria-hidden', !isDirty);
|
|
break;
|
|
|
|
case 'committing':
|
|
$button.addClass('action-saving icon-throbber icon-end').text(Drupal.t('Saving')).attr('disabled', 'disabled');
|
|
break;
|
|
|
|
default:
|
|
$button.attr('aria-hidden', true);
|
|
break;
|
|
}
|
|
|
|
return this;
|
|
},
|
|
remove: function remove() {
|
|
this.$fence.remove();
|
|
$(window).off('resize.quickedit scroll.quickedit drupalViewportOffsetChange.quickedit');
|
|
$(document).off('drupalViewportOffsetChange.quickedit');
|
|
Backbone.View.prototype.remove.call(this);
|
|
},
|
|
windowChangeHandler: function windowChangeHandler(event) {
|
|
this.position();
|
|
},
|
|
fieldStateChange: function fieldStateChange(model, state) {
|
|
switch (state) {
|
|
case 'active':
|
|
this.render();
|
|
break;
|
|
|
|
case 'invalid':
|
|
this.render();
|
|
break;
|
|
}
|
|
},
|
|
position: function position(element) {
|
|
clearTimeout(this.timer);
|
|
var that = this;
|
|
var edge = document.documentElement.dir === 'rtl' ? 'right' : 'left';
|
|
var delay = 0;
|
|
var check = 0;
|
|
var horizontalPadding = 0;
|
|
var of;
|
|
var activeField;
|
|
var highlightedField;
|
|
|
|
do {
|
|
switch (check) {
|
|
case 0:
|
|
of = element;
|
|
break;
|
|
|
|
case 1:
|
|
activeField = Drupal.quickedit.app.model.get('activeField');
|
|
of = activeField && activeField.editorView && activeField.editorView.$formContainer && activeField.editorView.$formContainer.find('.quickedit-form');
|
|
break;
|
|
|
|
case 2:
|
|
of = activeField && activeField.editorView && activeField.editorView.getEditedElement();
|
|
|
|
if (activeField && activeField.editorView && activeField.editorView.getQuickEditUISettings().padding) {
|
|
horizontalPadding = 5;
|
|
}
|
|
|
|
break;
|
|
|
|
case 3:
|
|
highlightedField = Drupal.quickedit.app.model.get('highlightedField');
|
|
of = highlightedField && highlightedField.editorView && highlightedField.editorView.getEditedElement();
|
|
delay = 250;
|
|
break;
|
|
|
|
default:
|
|
{
|
|
var fieldModels = this.model.get('fields').models;
|
|
var topMostPosition = 1000000;
|
|
var topMostField = null;
|
|
|
|
for (var i = 0; i < fieldModels.length; i++) {
|
|
var pos = fieldModels[i].get('el').getBoundingClientRect().top;
|
|
|
|
if (pos < topMostPosition) {
|
|
topMostPosition = pos;
|
|
topMostField = fieldModels[i];
|
|
}
|
|
}
|
|
|
|
of = topMostField.get('el');
|
|
delay = 50;
|
|
break;
|
|
}
|
|
}
|
|
|
|
check++;
|
|
} while (!of);
|
|
|
|
function refinePopper(_ref) {
|
|
var state = _ref.state;
|
|
var isBelow = state.placement.split('-')[0] === 'bottom';
|
|
var classListMethod = isBelow ? 'add' : 'remove';
|
|
state.elements.popper.classList[classListMethod]('quickedit-toolbar-pointer-top');
|
|
}
|
|
|
|
function positionToolbar() {
|
|
var popperElement = that.el;
|
|
var referenceElement = of;
|
|
var boundariesElement = that.$fence[0];
|
|
var popperedge = edge === 'left' ? 'start' : 'end';
|
|
|
|
if (referenceElement !== undefined) {
|
|
if (!popperElement.classList.contains('js-popper-processed')) {
|
|
that.popper = Popper.createPopper(referenceElement, popperElement, {
|
|
placement: "top-".concat(popperedge),
|
|
modifiers: [{
|
|
name: 'flip',
|
|
options: {
|
|
boundary: boundariesElement
|
|
}
|
|
}, {
|
|
name: 'preventOverflow',
|
|
options: {
|
|
boundary: boundariesElement,
|
|
tether: false,
|
|
altAxis: true,
|
|
padding: {
|
|
top: 5,
|
|
bottom: 5
|
|
}
|
|
}
|
|
}, {
|
|
name: 'computeStyles',
|
|
options: {
|
|
adaptive: false
|
|
}
|
|
}, {
|
|
name: 'refinePopper',
|
|
phase: 'write',
|
|
enabled: true,
|
|
fn: refinePopper
|
|
}]
|
|
});
|
|
popperElement.classList.add('js-popper-processed');
|
|
} else {
|
|
that.popper.state.elements.reference = referenceElement[0] ? referenceElement[0] : referenceElement;
|
|
that.popper.forceUpdate();
|
|
}
|
|
}
|
|
|
|
that.$el.css({
|
|
'max-width': document.documentElement.clientWidth < 450 ? document.documentElement.clientWidth : 450,
|
|
'min-width': document.documentElement.clientWidth < 240 ? document.documentElement.clientWidth : 240,
|
|
width: '100%'
|
|
});
|
|
}
|
|
|
|
this.timer = setTimeout(function () {
|
|
_.defer(positionToolbar);
|
|
}, delay);
|
|
},
|
|
onClickSave: function onClickSave(event) {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
this.model.set('state', 'committing');
|
|
},
|
|
onClickCancel: function onClickCancel(event) {
|
|
event.preventDefault();
|
|
this.model.set('state', 'deactivating');
|
|
},
|
|
onMouseenter: function onMouseenter(event) {
|
|
clearTimeout(this.timer);
|
|
},
|
|
buildToolbarEl: function buildToolbarEl() {
|
|
var $toolbar = $(Drupal.theme('quickeditEntityToolbar', {
|
|
id: 'quickedit-entity-toolbar'
|
|
}));
|
|
$toolbar.find('.quickedit-toolbar-entity').prepend(Drupal.theme('quickeditToolgroup', {
|
|
classes: ['ops'],
|
|
buttons: [{
|
|
label: Drupal.t('Save'),
|
|
type: 'submit',
|
|
classes: 'action-save quickedit-button icon',
|
|
attributes: {
|
|
'aria-hidden': true
|
|
}
|
|
}, {
|
|
label: Drupal.t('Close'),
|
|
classes: 'action-cancel quickedit-button icon icon-close icon-only'
|
|
}]
|
|
}));
|
|
$toolbar.css({
|
|
left: this.$entity.offset().left,
|
|
top: this.$entity.offset().top
|
|
});
|
|
return $toolbar;
|
|
},
|
|
getToolbarRoot: function getToolbarRoot() {
|
|
return this._fieldToolbarRoot;
|
|
},
|
|
label: function label() {
|
|
var label = '';
|
|
var entityLabel = this.model.get('label');
|
|
var activeField = Drupal.quickedit.app.model.get('activeField');
|
|
var activeFieldLabel = activeField && activeField.get('metadata').label;
|
|
var highlightedField = Drupal.quickedit.app.model.get('highlightedField');
|
|
var highlightedFieldLabel = highlightedField && highlightedField.get('metadata').label;
|
|
|
|
if (activeFieldLabel) {
|
|
label = Drupal.theme('quickeditEntityToolbarLabel', {
|
|
entityLabel: entityLabel,
|
|
fieldLabel: activeFieldLabel
|
|
});
|
|
} else if (highlightedFieldLabel) {
|
|
label = Drupal.theme('quickeditEntityToolbarLabel', {
|
|
entityLabel: entityLabel,
|
|
fieldLabel: highlightedFieldLabel
|
|
});
|
|
} else {
|
|
label = Drupal.checkPlain(entityLabel);
|
|
}
|
|
|
|
this.$el.find('.quickedit-toolbar-label').html(label);
|
|
},
|
|
addClass: function addClass(toolgroup, classes) {
|
|
this._find(toolgroup).addClass(classes);
|
|
},
|
|
removeClass: function removeClass(toolgroup, classes) {
|
|
this._find(toolgroup).removeClass(classes);
|
|
},
|
|
_find: function _find(toolgroup) {
|
|
return this.$el.find(".quickedit-toolbar .quickedit-toolgroup.".concat(toolgroup));
|
|
},
|
|
show: function show(toolgroup) {
|
|
this.$el.removeClass('quickedit-animate-invisible');
|
|
}
|
|
});
|
|
})(jQuery, _, Backbone, Drupal, Drupal.debounce, Popper); |