2 * DO NOT EDIT THIS FILE.
3 * See the following change record for more information,
4 * https://www.drupal.org/node/2815083
8 (function ($, _, Backbone, Drupal, debounce) {
9 Drupal.quickedit.EntityToolbarView = Backbone.View.extend({
10 _fieldToolbarRoot: null,
12 events: function events() {
14 'click button.action-save': 'onClickSave',
15 'click button.action-cancel': 'onClickCancel',
16 mouseenter: 'onMouseenter'
20 initialize: function initialize(options) {
22 this.appModel = options.appModel;
23 this.$entity = $(this.model.get('el'));
25 this.listenTo(this.model, 'change:isActive change:isDirty change:state', this.render);
27 this.listenTo(this.appModel, 'change:highlightedField change:activeField', this.render);
29 this.listenTo(this.model.get('fields'), 'change:state', this.fieldStateChange);
31 $(window).on('resize.quickedit scroll.quickedit drupalViewportOffsetChange.quickedit', debounce($.proxy(this.windowChangeHandler, this), 150));
33 $(document).on('drupalViewportOffsetChange.quickedit', function (event, offsets) {
35 that.$fence.css(offsets);
39 var $toolbar = this.buildToolbarEl();
40 this.setElement($toolbar);
41 this._fieldToolbarRoot = $toolbar.find('.quickedit-toolbar-field').get(0);
45 render: function render() {
46 if (this.model.get('isActive')) {
47 var $body = $('body');
48 if ($body.children('#quickedit-entity-toolbar').length === 0) {
49 $body.append(this.$el);
52 if ($body.children('#quickedit-toolbar-fence').length === 0) {
53 this.$fence = $(Drupal.theme('quickeditEntityToolbarFence')).css(Drupal.displace()).appendTo($body);
63 var $button = this.$el.find('.quickedit-button.action-save');
64 var isDirty = this.model.get('isDirty');
66 switch (this.model.get('state')) {
68 $button.removeClass('action-saving icon-throbber icon-end').text(Drupal.t('Save')).removeAttr('disabled').attr('aria-hidden', !isDirty);
72 $button.addClass('action-saving icon-throbber icon-end').text(Drupal.t('Saving')).attr('disabled', 'disabled');
76 $button.attr('aria-hidden', true);
82 remove: function remove() {
85 $(window).off('resize.quickedit scroll.quickedit drupalViewportOffsetChange.quickedit');
86 $(document).off('drupalViewportOffsetChange.quickedit');
88 Backbone.View.prototype.remove.call(this);
90 windowChangeHandler: function windowChangeHandler(event) {
93 fieldStateChange: function fieldStateChange(model, state) {
104 position: function position(element) {
105 clearTimeout(this.timer);
109 var edge = document.documentElement.dir === 'rtl' ? 'right' : 'left';
115 var horizontalPadding = 0;
117 var activeField = void 0;
118 var highlightedField = void 0;
127 activeField = Drupal.quickedit.app.model.get('activeField');
128 of = activeField && activeField.editorView && activeField.editorView.$formContainer && activeField.editorView.$formContainer.find('.quickedit-form');
132 of = activeField && activeField.editorView && activeField.editorView.getEditedElement();
133 if (activeField && activeField.editorView && activeField.editorView.getQuickEditUISettings().padding) {
134 horizontalPadding = 5;
139 highlightedField = Drupal.quickedit.app.model.get('highlightedField');
140 of = highlightedField && highlightedField.editorView && highlightedField.editorView.getEditedElement();
146 var fieldModels = this.model.get('fields').models;
147 var topMostPosition = 1000000;
148 var topMostField = null;
150 for (var i = 0; i < fieldModels.length; i++) {
151 var pos = fieldModels[i].get('el').getBoundingClientRect().top;
152 if (pos < topMostPosition) {
153 topMostPosition = pos;
154 topMostField = fieldModels[i];
157 of = topMostField.get('el');
166 function refinePosition(view, suggested, info) {
167 var isBelow = suggested.top > info.target.top;
168 info.element.element.toggleClass('quickedit-toolbar-pointer-top', isBelow);
170 if (view.$entity[0] === info.target.element[0]) {
171 var $field = view.$entity.find('.quickedit-editable').eq(isBelow ? -1 : 0);
172 if ($field.length > 0) {
173 suggested.top = isBelow ? $field.offset().top + $field.outerHeight(true) : $field.offset().top - info.element.element.outerHeight(true);
177 var fenceTop = view.$fence.offset().top;
178 var fenceHeight = view.$fence.height();
179 var toolbarHeight = info.element.element.outerHeight(true);
180 if (suggested.top < fenceTop) {
181 suggested.top = fenceTop;
182 } else if (suggested.top + toolbarHeight > fenceTop + fenceHeight) {
183 suggested.top = fenceTop + fenceHeight - toolbarHeight;
186 info.element.element.css({
187 left: Math.floor(suggested.left),
188 top: Math.floor(suggested.top)
192 function positionToolbar() {
194 my: edge + ' bottom',
196 at: edge + '+' + (1 + horizontalPadding) + ' top',
198 collision: 'flipfit',
199 using: refinePosition.bind(null, that),
202 'max-width': document.documentElement.clientWidth < 450 ? document.documentElement.clientWidth : 450,
204 'min-width': document.documentElement.clientWidth < 240 ? document.documentElement.clientWidth : 240,
209 this.timer = setTimeout(function () {
210 _.defer(positionToolbar);
213 onClickSave: function onClickSave(event) {
214 event.stopPropagation();
215 event.preventDefault();
217 this.model.set('state', 'committing');
219 onClickCancel: function onClickCancel(event) {
220 event.preventDefault();
221 this.model.set('state', 'deactivating');
223 onMouseenter: function onMouseenter(event) {
224 clearTimeout(this.timer);
226 buildToolbarEl: function buildToolbarEl() {
227 var $toolbar = $(Drupal.theme('quickeditEntityToolbar', {
228 id: 'quickedit-entity-toolbar'
231 $toolbar.find('.quickedit-toolbar-entity').prepend(Drupal.theme('quickeditToolgroup', {
234 label: Drupal.t('Save'),
236 classes: 'action-save quickedit-button icon',
241 label: Drupal.t('Close'),
242 classes: 'action-cancel quickedit-button icon icon-close icon-only'
247 left: this.$entity.offset().left,
248 top: this.$entity.offset().top
253 getToolbarRoot: function getToolbarRoot() {
254 return this._fieldToolbarRoot;
256 label: function label() {
258 var entityLabel = this.model.get('label');
260 var activeField = Drupal.quickedit.app.model.get('activeField');
261 var activeFieldLabel = activeField && activeField.get('metadata').label;
263 var highlightedField = Drupal.quickedit.app.model.get('highlightedField');
264 var highlightedFieldLabel = highlightedField && highlightedField.get('metadata').label;
266 if (activeFieldLabel) {
267 label = Drupal.theme('quickeditEntityToolbarLabel', {
268 entityLabel: entityLabel,
269 fieldLabel: activeFieldLabel
271 } else if (highlightedFieldLabel) {
272 label = Drupal.theme('quickeditEntityToolbarLabel', {
273 entityLabel: entityLabel,
274 fieldLabel: highlightedFieldLabel
277 label = Drupal.checkPlain(entityLabel);
280 this.$el.find('.quickedit-toolbar-label').html(label);
282 addClass: function addClass(toolgroup, classes) {
283 this._find(toolgroup).addClass(classes);
285 removeClass: function removeClass(toolgroup, classes) {
286 this._find(toolgroup).removeClass(classes);
288 _find: function _find(toolgroup) {
289 return this.$el.find('.quickedit-toolbar .quickedit-toolgroup.' + toolgroup);
291 show: function show(toolgroup) {
292 this.$el.removeClass('quickedit-animate-invisible');
295 })(jQuery, _, Backbone, Drupal, Drupal.debounce);