comparison core/modules/quickedit/js/views/EntityToolbarView.js @ 0:4c8ae668cc8c

Initial import (non-working)

+/**
+* 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);