/** * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/2815083 * @preserve **/ (function ($, _, Backbone, Drupal, debounce) { 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 = void 0; var activeField = void 0; var highlightedField = void 0; 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 refinePosition(view, suggested, info) { var isBelow = suggested.top > info.target.top; info.element.element.toggleClass('quickedit-toolbar-pointer-top', isBelow); if (view.$entity[0] === info.target.element[0]) { var $field = view.$entity.find('.quickedit-editable').eq(isBelow ? -1 : 0); if ($field.length > 0) { suggested.top = isBelow ? $field.offset().top + $field.outerHeight(true) : $field.offset().top - info.element.element.outerHeight(true); } } var fenceTop = view.$fence.offset().top; var fenceHeight = view.$fence.height(); var toolbarHeight = info.element.element.outerHeight(true); if (suggested.top < fenceTop) { suggested.top = fenceTop; } else if (suggested.top + toolbarHeight > fenceTop + fenceHeight) { suggested.top = fenceTop + fenceHeight - toolbarHeight; } info.element.element.css({ left: Math.floor(suggested.left), top: Math.floor(suggested.top) }); } function positionToolbar() { that.$el.position({ my: edge + ' bottom', at: edge + '+' + (1 + horizontalPadding) + ' top', of: of, collision: 'flipfit', using: refinePosition.bind(null, that), within: that.$fence }).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.' + toolgroup); }, show: function show(toolgroup) { this.$el.removeClass('quickedit-animate-invisible'); } }); })(jQuery, _, Backbone, Drupal, Drupal.debounce);