annotate core/modules/quickedit/js/views/FieldToolbarView.es6.js @ 5:12f9dff5fda9 tip

Update to Drupal core 8.7.1

/**
 * @file
 * A Backbone View that provides an interactive toolbar (1 per in-place editor).
 */

(function($, _, Backbone, Drupal) {
  Drupal.quickedit.FieldToolbarView = Backbone.View.extend(
    /** @lends Drupal.quickedit.FieldToolbarView# */ {
      /**
       * The edited element, as indicated by EditorView.getEditedElement.
       *
       * @type {jQuery}
       */
      $editedElement: null,

      /**
       * A reference to the in-place editor.
       *
       * @type {Drupal.quickedit.EditorView}
       */
      editorView: null,

      /**
       * @type {string}
       */
      _id: null,

      /**
       * @constructs
       *
       * @augments Backbone.View
       *
       * @param {object} options
       *   Options object to construct the field toolbar.
       * @param {jQuery} options.$editedElement
       *   The element being edited.
       * @param {Drupal.quickedit.EditorView} options.editorView
       *   The EditorView the toolbar belongs to.
       */
      initialize(options) {
        this.$editedElement = options.$editedElement;
        this.editorView = options.editorView;

        /**
         * @type {jQuery}
         */
        this.$root = this.$el;

        // Generate a DOM-compatible ID for the form container DOM element.
        this._id = `quickedit-toolbar-for-${this.model.id.replace(
          /[/[\]]/g,
          '_',
        )}`;

        this.listenTo(this.model, 'change:state', this.stateChange);
      },

      /**
       * @inheritdoc
       *
       * @return {Drupal.quickedit.FieldToolbarView}
       *   The current FieldToolbarView.
       */
      render() {
        // Render toolbar and set it as the view's element.
        this.setElement(
          $(
            Drupal.theme('quickeditFieldToolbar', {
              id: this._id,
            }),
          ),
        );

        // Attach to the field toolbar $root element in the entity toolbar.
        this.$el.prependTo(this.$root);

        return this;
      },

      /**
       * Determines the actions to take given a change of state.
       *
       * @param {Drupal.quickedit.FieldModel} model
       *   The quickedit FieldModel
       * @param {string} state
       *   The state of the associated field. One of
       *   {@link Drupal.quickedit.FieldModel.states}.
       */
      stateChange(model, state) {
        const from = model.previous('state');
        const to = state;
        switch (to) {
          case 'inactive':
            break;

          case 'candidate':
            // Remove the view's existing element if we went to the 'activating'
            // state or later, because it will be recreated. Not doing this would
            // result in memory leaks.
            if (from !== 'inactive' && from !== 'highlighted') {
              this.$el.remove();
              this.setElement();
            }
            break;

          case 'highlighted':
            break;

          case 'activating':
            this.render();

            if (this.editorView.getQuickEditUISettings().fullWidthToolbar) {
              this.$el.addClass('quickedit-toolbar-fullwidth');
            }

            if (this.editorView.getQuickEditUISettings().unifiedToolbar) {
              this.insertWYSIWYGToolGroups();
            }
            break;

          case 'active':
            break;

          case 'changed':
            break;

          case 'saving':
            break;

          case 'saved':
            break;

          case 'invalid':
            break;
        }
      },

      /**
       * Insert WYSIWYG markup into the associated toolbar.
       */
      insertWYSIWYGToolGroups() {
        this.$el
          .append(
            Drupal.theme('quickeditToolgroup', {
              id: this.getFloatedWysiwygToolgroupId(),
              classes: [
                'wysiwyg-floated',
                'quickedit-animate-slow',
                'quickedit-animate-invisible',
                'quickedit-animate-delay-veryfast',
              ],
              buttons: [],
            }),
          )
          .append(
            Drupal.theme('quickeditToolgroup', {
              id: this.getMainWysiwygToolgroupId(),
              classes: [
                'wysiwyg-main',
                'quickedit-animate-slow',
                'quickedit-animate-invisible',
                'quickedit-animate-delay-veryfast',
              ],
              buttons: [],
            }),
          );

        // Animate the toolgroups into visibility.
        this.show('wysiwyg-floated');
        this.show('wysiwyg-main');
      },

      /**
       * Retrieves the ID for this toolbar's container.
       *
       * Only used to make sane hovering behavior possible.
       *
       * @return {string}
       *   A string that can be used as the ID for this toolbar's container.
       */
      getId() {
        return `quickedit-toolbar-for-${this._id}`;
      },

      /**
       * Retrieves the ID for this toolbar's floating WYSIWYG toolgroup.
       *
       * Used to provide an abstraction for any WYSIWYG editor to plug in.
       *
       * @return {string}
       *   A string that can be used as the ID.
       */
      getFloatedWysiwygToolgroupId() {
        return `quickedit-wysiwyg-floated-toolgroup-for-${this._id}`;
      },

      /**
       * Retrieves the ID for this toolbar's main WYSIWYG toolgroup.
       *
       * Used to provide an abstraction for any WYSIWYG editor to plug in.
       *
       * @return {string}
       *   A string that can be used as the ID.
       */
      getMainWysiwygToolgroupId() {
        return `quickedit-wysiwyg-main-toolgroup-for-${this._id}`;
      },

      /**
       * Finds a toolgroup.
       *
       * @param {string} toolgroup
       *   A toolgroup name.
       *
       * @return {jQuery}
       *   The toolgroup element.
       */
      _find(toolgroup) {
        return this.$el.find(`.quickedit-toolgroup.${toolgroup}`);
      },

      /**
       * Shows a toolgroup.
       *
       * @param {string} toolgroup
       *   A toolgroup name.
       */
      show(toolgroup) {
        const $group = this._find(toolgroup);
        // Attach a transitionEnd event handler to the toolbar group so that
        // update events can be triggered after the animations have ended.
        $group.on(Drupal.quickedit.util.constants.transitionEnd, event => {
          $group.off(Drupal.quickedit.util.constants.transitionEnd);
        });
        // The call to remove the class and start the animation must be started in
        // the next animation frame or the event handler attached above won't be
        // triggered.
        window.setTimeout(() => {
          $group.removeClass('quickedit-animate-invisible');
        }, 0);
      },
    },
  );
})(jQuery, _, Backbone, Drupal);