annotate core/modules/views_ui/js/ajax.es6.js @ 19:fa3358dc1485 tip

Add ndrum files

/**
 * @file
 * Handles AJAX submission and response in Views UI.
 */

(function($, Drupal, drupalSettings) {
  /**
   * Ajax command for highlighting elements.
   *
   * @param {Drupal.Ajax} [ajax]
   *   An Ajax object.
   * @param {object} response
   *   The Ajax response.
   * @param {string} response.selector
   *   The selector in question.
   * @param {number} [status]
   *   The HTTP status code.
   */
  Drupal.AjaxCommands.prototype.viewsHighlight = function(
    ajax,
    response,
    status,
  ) {
    $('.hilited').removeClass('hilited');
    $(response.selector).addClass('hilited');
  };

  /**
   * Ajax command to set the form submit action in the views modal edit form.
   *
   * @param {Drupal.Ajax} [ajax]
   *   An Ajax object.
   * @param {object} response
   *   The Ajax response. Contains .url
   * @param {string} [status]
   *   The XHR status code?
   */
  Drupal.AjaxCommands.prototype.viewsSetForm = function(
    ajax,
    response,
    status,
  ) {
    const $form = $('.js-views-ui-dialog form');
    // Identify the button that was clicked so that .ajaxSubmit() can use it.
    // We need to do this for both .click() and .mousedown() since JavaScript
    // code might trigger either behavior.
    const $submitButtons = $form
      .find('input[type=submit].js-form-submit, button.js-form-submit')
      .once('views-ajax-submit');
    $submitButtons.on('click mousedown', function() {
      this.form.clk = this;
    });
    $form.once('views-ajax-submit').each(function() {
      const $form = $(this);
      const elementSettings = {
        url: response.url,
        event: 'submit',
        base: $form.attr('id'),
        element: this,
      };
      const ajaxForm = Drupal.ajax(elementSettings);
      ajaxForm.$form = $form;
    });
  };

  /**
   * Ajax command to show certain buttons in the views edit form.
   *
   * @param {Drupal.Ajax} [ajax]
   *   An Ajax object.
   * @param {object} response
   *   The Ajax response.
   * @param {bool} response.changed
   *   Whether the state changed for the buttons or not.
   * @param {number} [status]
   *   The HTTP status code.
   */
  Drupal.AjaxCommands.prototype.viewsShowButtons = function(
    ajax,
    response,
    status,
  ) {
    $('div.views-edit-view div.form-actions').removeClass('js-hide');
    if (response.changed) {
      $('div.views-edit-view div.view-changed.messages').removeClass('js-hide');
    }
  };

  /**
   * Ajax command for triggering preview.
   *
   * @param {Drupal.Ajax} [ajax]
   *   An Ajax object.
   * @param {object} [response]
   *   The Ajax response.
   * @param {number} [status]
   *   The HTTP status code.
   */
  Drupal.AjaxCommands.prototype.viewsTriggerPreview = function(
    ajax,
    response,
    status,
  ) {
    if ($('input#edit-displays-live-preview').is(':checked')) {
      $('#preview-submit').trigger('click');
    }
  };

  /**
   * Ajax command to replace the title of a page.
   *
   * @param {Drupal.Ajax} [ajax]
   *   An Ajax object.
   * @param {object} response
   *   The Ajax response.
   * @param {string} response.siteName
   *   The site name.
   * @param {string} response.title
   *   The new page title.
   * @param {number} [status]
   *   The HTTP status code.
   */
  Drupal.AjaxCommands.prototype.viewsReplaceTitle = function(
    ajax,
    response,
    status,
  ) {
    const doc = document;
    // For the <title> element, make a best-effort attempt to replace the page
    // title and leave the site name alone. If the theme doesn't use the site
    // name in the <title> element, this will fail.
    const oldTitle = doc.title;
    // Escape the site name, in case it has special characters in it, so we can
    // use it in our regex.
    const escapedSiteName = response.siteName.replace(
      /[-[\]{}()*+?.,\\^$|#\s]/g,
      '\\$&',
    );
    const re = new RegExp(`.+ (.) ${escapedSiteName}`);
    doc.title = oldTitle.replace(
      re,
      `${response.title} $1 ${response.siteName}`,
    );

    $('h1.page-title').text(response.title);
  };

  /**
   * Get rid of irritating tabledrag messages.
   *
   * @return {Array}
   *   An array of messages. Always empty array, to get rid of the messages.
   */
  Drupal.theme.tableDragChangedWarning = function() {
    return [];
  };

  /**
   * Trigger preview when the "live preview" checkbox is checked.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches behavior to trigger live preview if the live preview option is
   *   checked.
   */
  Drupal.behaviors.livePreview = {
    attach(context) {
      $('input#edit-displays-live-preview', context)
        .once('views-ajax')
        .on('click', function() {
          if ($(this).is(':checked')) {
            $('#preview-submit').trigger('click');
          }
        });
    },
  };

  /**
   * Sync preview display.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches behavior to sync the preview display when needed.
   */
  Drupal.behaviors.syncPreviewDisplay = {
    attach(context) {
      $('#views-tabset a')
        .once('views-ajax')
        .on('click', function() {
          const href = $(this).attr('href');
          // Cut of #views-tabset.
          const displayId = href.substr(11);
          // Set the form element.
          $('#views-live-preview #preview-display-id').val(displayId);
        });
    },
  };

  /**
   * Ajax behaviors for the views_ui module.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches ajax behaviors to the elements with the classes in question.
   */
  Drupal.behaviors.viewsAjax = {
    collapseReplaced: false,
    attach(context, settings) {
      const baseElementSettings = {
        event: 'click',
        progress: { type: 'fullscreen' },
      };
      // Bind AJAX behaviors to all items showing the class.
      $('a.views-ajax-link', context)
        .once('views-ajax')
        .each(function() {
          const elementSettings = baseElementSettings;
          elementSettings.base = $(this).attr('id');
          elementSettings.element = this;
          // Set the URL to go to the anchor.
          if ($(this).attr('href')) {
            elementSettings.url = $(this).attr('href');
          }
          Drupal.ajax(elementSettings);
        });

      $('div#views-live-preview a')
        .once('views-ajax')
        .each(function() {
          // We don't bind to links without a URL.
          if (!$(this).attr('href')) {
            return true;
          }

          const elementSettings = baseElementSettings;
          // Set the URL to go to the anchor.
          elementSettings.url = $(this).attr('href');
          if (
            Drupal.Views.getPath(elementSettings.url).substring(0, 21) !==
            'admin/structure/views'
          ) {
            return true;
          }

          elementSettings.wrapper = 'views-preview-wrapper';
          elementSettings.method = 'replaceWith';
          elementSettings.base = $(this).attr('id');
          elementSettings.element = this;
          Drupal.ajax(elementSettings);
        });

      // Within a live preview, make exposed widget form buttons re-trigger the
      // Preview button.
      // @todo Revisit this after fixing Views UI to display a Preview outside
      //   of the main Edit form.
      $('div#views-live-preview input[type=submit]')
        .once('views-ajax')
        .each(function(event) {
          $(this).on('click', function() {
            this.form.clk = this;
            return true;
          });
          const elementSettings = baseElementSettings;
          // Set the URL to go to the anchor.
          elementSettings.url = $(this.form).attr('action');
          if (
            Drupal.Views.getPath(elementSettings.url).substring(0, 21) !==
            'admin/structure/views'
          ) {
            return true;
          }

          elementSettings.wrapper = 'views-preview-wrapper';
          elementSettings.method = 'replaceWith';
          elementSettings.event = 'click';
          elementSettings.base = $(this).attr('id');
          elementSettings.element = this;

          Drupal.ajax(elementSettings);
        });
    },
  };
})(jQuery, Drupal, drupalSettings);