edlp_d8/core/modules/quickedit/js/editors/formEditor.es6.js

/**
 * @file
 * Form-based in-place editor. Works for any field type.
 */

(function ($, Drupal, _) {
  /**
   * @constructor
   *
   * @augments Drupal.quickedit.EditorView
   */
  Drupal.quickedit.editors.form = Drupal.quickedit.EditorView.extend(/** @lends Drupal.quickedit.editors.form# */{

    /**
     * Tracks form container DOM element that is used while in-place editing.
     *
     * @type {jQuery}
     */
    $formContainer: null,

    /**
     * Holds the {@link Drupal.Ajax} object.
     *
     * @type {Drupal.Ajax}
     */
    formSaveAjax: null,

    /**
     * @inheritdoc
     *
     * @param {object} fieldModel
     *   The field model that holds the state.
     * @param {string} state
     *   The state to change to.
     */
    stateChange(fieldModel, state) {
      const from = fieldModel.previous('state');
      const to = state;
      switch (to) {
        case 'inactive':
          break;

        case 'candidate':
          if (from !== 'inactive') {
            this.removeForm();
          }
          break;

        case 'highlighted':
          break;

        case 'activating':
          // If coming from an invalid state, then the form is already loaded.
          if (from !== 'invalid') {
            this.loadForm();
          }
          break;

        case 'active':
          break;

        case 'changed':
          break;

        case 'saving':
          this.save();
          break;

        case 'saved':
          break;

        case 'invalid':
          this.showValidationErrors();
          break;
      }
    },

    /**
     * @inheritdoc
     *
     * @return {object}
     *   A settings object for the quick edit UI.
     */
    getQuickEditUISettings() {
      return { padding: true, unifiedToolbar: true, fullWidthToolbar: true, popup: true };
    },

    /**
     * Loads the form for this field, displays it on top of the actual field.
     */
    loadForm() {
      const fieldModel = this.fieldModel;

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

      // Render form container.
      const $formContainer = $(Drupal.theme('quickeditFormContainer', {
        id,
        loadingMsg: Drupal.t('Loading…'),
      }));
      this.$formContainer = $formContainer;
      $formContainer
        .find('.quickedit-form')
        .addClass('quickedit-editable quickedit-highlighted quickedit-editing')
        .attr('role', 'dialog');

      // Insert form container in DOM.
      if (this.$el.css('display') === 'inline') {
        $formContainer.prependTo(this.$el.offsetParent());
        // Position the form container to render on top of the field's element.
        const pos = this.$el.position();
        $formContainer.css('left', pos.left).css('top', pos.top);
      }
      else {
        $formContainer.insertBefore(this.$el);
      }

      // Load form, insert it into the form container and attach event handlers.
      const formOptions = {
        fieldID: fieldModel.get('fieldID'),
        $el: this.$el,
        nocssjs: false,
        // Reset an existing entry for this entity in the PrivateTempStore (if
        // any) when loading the field. Logically speaking, this should happen
        // in a separate request because this is an entity-level operation, not
        // a field-level operation. But that would require an additional
        // request, that might not even be necessary: it is only when a user
        // loads a first changed field for an entity that this needs to happen:
        // precisely now!
        reset: !fieldModel.get('entity').get('inTempStore'),
      };
      Drupal.quickedit.util.form.load(formOptions, (form, ajax) => {
        Drupal.AjaxCommands.prototype.insert(ajax, {
          data: form,
          selector: `#${id} .placeholder`,
        });

        $formContainer
          .on('formUpdated.quickedit', ':input', (event) => {
            const state = fieldModel.get('state');
            // If the form is in an invalid state, it will persist on the page.
            // Set the field to activating so that the user can correct the
            // invalid value.
            if (state === 'invalid') {
              fieldModel.set('state', 'activating');
            }
            // Otherwise assume that the fieldModel is in a candidate state and
            // set it to changed on formUpdate.
            else {
              fieldModel.set('state', 'changed');
            }
          })
          .on('keypress.quickedit', 'input', (event) => {
            if (event.keyCode === 13) {
              return false;
            }
          });

        // The in-place editor has loaded; change state to 'active'.
        fieldModel.set('state', 'active');
      });
    },

    /**
     * Removes the form for this field, detaches behaviors and event handlers.
     */
    removeForm() {
      if (this.$formContainer === null) {
        return;
      }

      delete this.formSaveAjax;
      // Allow form widgets to detach properly.
      Drupal.detachBehaviors(this.$formContainer.get(0), null, 'unload');
      this.$formContainer
        .off('change.quickedit', ':input')
        .off('keypress.quickedit', 'input')
        .remove();
      this.$formContainer = null;
    },

    /**
     * @inheritdoc
     */
    save() {
      const $formContainer = this.$formContainer;
      const $submit = $formContainer.find('.quickedit-form-submit');
      const editorModel = this.model;
      const fieldModel = this.fieldModel;

      function cleanUpAjax() {
        Drupal.quickedit.util.form.unajaxifySaving(formSaveAjax);
        formSaveAjax = null;
      }

      // Create an AJAX object for the form associated with the field.
      let formSaveAjax = Drupal.quickedit.util.form.ajaxifySaving({
        nocssjs: false,
        other_view_modes: fieldModel.findOtherViewModes(),
      }, $submit);

      // Successfully saved.
      formSaveAjax.commands.quickeditFieldFormSaved = function (ajax, response, status) {
        cleanUpAjax();
        // First, transition the state to 'saved'.
        fieldModel.set('state', 'saved');
        // Second, set the 'htmlForOtherViewModes' attribute, so that when this
        // field is rerendered, the change can be propagated to other instances
        // of this field, which may be displayed in different view modes.
        fieldModel.set('htmlForOtherViewModes', response.other_view_modes);
        // Finally, set the 'html' attribute on the field model. This will cause
        // the field to be rerendered.
        _.defer(() => {
          fieldModel.set('html', response.data);
        });
      };

      // Unsuccessfully saved; validation errors.
      formSaveAjax.commands.quickeditFieldFormValidationErrors = function (ajax, response, status) {
        editorModel.set('validationErrors', response.data);
        fieldModel.set('state', 'invalid');
      };

      // The quickeditFieldForm AJAX command is called upon attempting to save
      // the form; Form API will mark which form items have errors, if any. This
      // command is invoked only if validation errors exist and then it runs
      // before editFieldFormValidationErrors().
      formSaveAjax.commands.quickeditFieldForm = function (ajax, response, status) {
        Drupal.AjaxCommands.prototype.insert(ajax, {
          data: response.data,
          selector: `#${$formContainer.attr('id')} form`,
        });
      };

      // Click the form's submit button; the scoped AJAX commands above will
      // handle the server's response.
      $submit.trigger('click.quickedit');
    },

    /**
     * @inheritdoc
     */
    showValidationErrors() {
      this.$formContainer
        .find('.quickedit-form')
        .addClass('quickedit-validation-error')
        .find('form')
        .prepend(this.model.get('validationErrors'));
    },
  });
}(jQuery, Drupal, _));