Mercurial > hg > cmmr2012-drupal-site
diff core/modules/quickedit/js/views/EntityToolbarView.js @ 0:c75dbcec494b
Initial commit from drush-created site
author | Chris Cannam |
---|---|
date | Thu, 05 Jul 2018 14:24:15 +0000 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/core/modules/quickedit/js/views/EntityToolbarView.js Thu Jul 05 14:24:15 2018 +0000 @@ -0,0 +1,295 @@ +/** +* 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); \ No newline at end of file