123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313 |
- /**
- * 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 = 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 refinePopper(data) {
- var isBelow = data.offsets.popper.top > data.offsets.reference.top;
- var classListMethod = isBelow ? 'add' : 'remove';
- data.instance.popper.classList[classListMethod]('quickedit-toolbar-pointer-top');
- if (that.$entity[0] === data.instance.reference) {
- var $field = that.$entity.find('.quickedit-editable').eq(isBelow ? -1 : 0);
- if ($field.length > 0) {
- data.offsets.popper.top = isBelow ? $field.offset().top + $field.outerHeight(true) : $field.offset().top - $(data.instance.reference).outerHeight(true);
- }
- }
- var fenceTop = that.$fence.offset().top;
- var fenceHeight = that.$fence.height();
- var toolbarHeight = $(data.instance.popper).outerHeight(true);
- if (data.offsets.popper.top < fenceTop) {
- data.offsets.popper.top = fenceTop;
- } else if (data.offsets.popper.top + toolbarHeight > fenceTop + fenceHeight) {
- data.offsets.popper.top = fenceTop + fenceHeight - toolbarHeight;
- }
- }
- 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 = new Popper(referenceElement, popperElement, {
- placement: 'top-' + popperedge,
- modifiers: {
- flip: {
- behavior: ['top', 'bottom']
- },
- computeStyle: {
- gpuAcceleration: false
- },
- preventOverflow: {
- boundariesElement: boundariesElement
- }
- },
- onCreate: refinePopper,
- onUpdate: refinePopper
- });
- popperElement.classList.add('js-popper-processed');
- } else {
- that.popper.options.placement = 'top-' + popperedge;
- that.popper.reference = referenceElement[0] ? referenceElement[0] : referenceElement;
- that.popper.update();
- }
- }
- 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.' + toolgroup);
- },
- show: function show(toolgroup) {
- this.$el.removeClass('quickedit-animate-invisible');
- }
- });
- })(jQuery, _, Backbone, Drupal, Drupal.debounce, Popper);
|