first commit

core/modules/views_ui/js/ajax.js

@@ -0,0 +1,295 @@
+/**
+ * @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 = $(
+      once(
+        'views-ajax-submit',
+        $form.find('input[type=submit].js-form-submit, button.js-form-submit'),
+      ),
+    );
+    $submitButtons.on('click mousedown', function () {
+      this.form.clk = this;
+    });
+    once('views-ajax-submit', $form).forEach((form) => {
+      const $form = $(form);
+      const elementSettings = {
+        url: response.url,
+        event: 'submit',
+        base: $form.attr('id'),
+        element: form,
+      };
+      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 {boolean} 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')[0].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}`,
+    );
+    document.querySelectorAll('h1.page-title').forEach((item) => {
+      item.textContent = 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) {
+      $(once('views-ajax', 'input#edit-displays-live-preview', context)).on(
+        'click',
+        function () {
+          if (this.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) {
+      $(once('views-ajax', '#views-tabset a')).on('click', function () {
+        const href = $(this).attr('href');
+        // Cut of #views-tabset.
+        const displayId = href.substring(11);
+        const viewsPreviewId = document.querySelector(
+          '#views-live-preview #preview-display-id',
+        );
+        if (viewsPreviewId) {
+          // Set the form element if it is present.
+          viewsPreviewId.value = 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.
+      once('views-ajax', 'a.views-ajax-link', context).forEach((link) => {
+        const $link = $(link);
+        const elementSettings = baseElementSettings;
+        elementSettings.base = $link.attr('id');
+        elementSettings.element = link;
+        // Set the URL to go to the anchor.
+        if ($link.attr('href')) {
+          elementSettings.url = $link.attr('href');
+        }
+        Drupal.ajax(elementSettings);
+      });
+
+      once('views-ajax', 'div#views-live-preview a').forEach((link) => {
+        const $link = $(link);
+        // We don't bind to links without a URL.
+        if (!$link.attr('href')) {
+          return true;
+        }
+
+        const elementSettings = baseElementSettings;
+        // Set the URL to go to the anchor.
+        elementSettings.url = $link.attr('href');
+        if (
+          !Drupal.Views.getPath(elementSettings.url).startsWith(
+            'admin/structure/views',
+          )
+        ) {
+          return true;
+        }
+
+        elementSettings.wrapper = 'views-preview-wrapper';
+        elementSettings.method = 'replaceWith';
+        elementSettings.base = link.id;
+        elementSettings.element = link;
+        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.
+      once('views-ajax', 'div#views-live-preview input[type=submit]').forEach(
+        (submit) => {
+          const $submit = $(submit);
+          $submit.on('click', function () {
+            this.form.clk = this;
+            return true;
+          });
+          const elementSettings = baseElementSettings;
+          // Set the URL to go to the anchor.
+          elementSettings.url = $(submit.form).attr('action');
+          if (
+            !Drupal.Views.getPath(elementSettings.url).startsWith(
+              'admin/structure/views',
+            )
+          ) {
+            return true;
+          }
+
+          elementSettings.wrapper = 'views-preview-wrapper';
+          elementSettings.method = 'replaceWith';
+          elementSettings.event = 'click';
+          elementSettings.base = submit.id;
+          elementSettings.element = submit;
+
+          Drupal.ajax(elementSettings);
+        },
+      );
+    },
+  };
+})(jQuery, Drupal, drupalSettings);

core/modules/views_ui/js/dialog.views.js

@@ -0,0 +1,94 @@
+/**
+ * @file
+ * Views dialog behaviors.
+ */
+
+(function ($, Drupal, drupalSettings, bodyScrollLock) {
+  function handleDialogResize(e) {
+    const $modal = $(e.currentTarget);
+    const $viewsOverride = $modal.find('[data-drupal-views-offset]');
+    const $scroll = $modal.find('[data-drupal-views-scroll]');
+    let offset = 0;
+    let modalHeight;
+    if ($scroll.length) {
+      // Add a class to do some styles adjustments.
+      $modal.closest('.views-ui-dialog').addClass('views-ui-dialog-scroll');
+      // Let scroll element take all the height available.
+      $scroll.each(function () {
+        Object.assign(this.style, {
+          overflow: 'visible',
+          height: 'auto',
+        });
+      });
+      modalHeight = $modal.height();
+      $viewsOverride.each(function () {
+        offset += $(this).outerHeight();
+      });
+
+      // Take internal padding into account.
+      const scrollOffset = $scroll.outerHeight() - $scroll.height();
+      $scroll.height(modalHeight - offset - scrollOffset);
+      // Reset scrolling properties.
+      $modal.each(function () {
+        this.style.overflow = 'hidden';
+      });
+      $scroll.each(function () {
+        this.style.overflow = 'auto';
+      });
+    }
+  }
+
+  /**
+   * Functionality for views modals.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches modal functionality for views.
+   * @prop {Drupal~behaviorDetach} detach
+   *   Detaches the modal functionality.
+   */
+  Drupal.behaviors.viewsModalContent = {
+    attach(context) {
+      $(once('viewsDialog', 'body')).on(
+        'dialogContentResize.viewsDialog',
+        '.ui-dialog-content',
+        handleDialogResize,
+      );
+      // When expanding details, make sure the modal is resized.
+      $(once('detailsUpdate', '.scroll', context)).on(
+        'click',
+        'summary',
+        (e) => {
+          e.currentTarget?.dispatchEvent(
+            new CustomEvent('dialogContentResize', { bubbles: true }),
+          );
+        },
+      );
+    },
+    detach(context, settings, trigger) {
+      if (trigger === 'unload') {
+        $(once.remove('viewsDialog', 'body')).off('.viewsDialog');
+      }
+    },
+  };
+
+  /**
+   * Binds a listener on dialog creation to handle Views modal scroll.
+   *
+   * @param {jQuery.Event} e
+   *   The event triggered.
+   * @param {Drupal.dialog~dialogDefinition} dialog
+   *   The dialog instance.
+   * @param {jQuery} $element
+   *   The jQuery collection of the dialog element.
+   */
+  window.addEventListener('dialog:aftercreate', (e) => {
+    const $element = $(e.target);
+    const $scroll = $element.find('.scroll');
+    if ($scroll.length) {
+      bodyScrollLock.unlock($element.get(0));
+      bodyScrollLock.lock($scroll.get(0));
+    }
+  });
+})(jQuery, Drupal, drupalSettings, bodyScrollLock);

core/modules/views_ui/js/views_ui.listing.js

@@ -0,0 +1,57 @@
+/**
+ * @file
+ * Views listing behaviors.
+ */
+
+(function ($, Drupal) {
+  /**
+   * Filters the view listing tables by a text input search string.
+   *
+   * Text search input: input.views-filter-text
+   * Target table:      input.views-filter-text[data-table]
+   * Source text:       [data-drupal-selector="views-table-filter-text-source"]
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the filter functionality to the views admin text search field.
+   */
+  Drupal.behaviors.viewTableFilterByText = {
+    attach(context, settings) {
+      const [input] = once('views-filter-text', 'input.views-filter-text');
+      if (!input) {
+        return;
+      }
+      const $table = $(input.getAttribute('data-table'));
+      let $rows;
+
+      function filterViewList(e) {
+        const query = e.target.value.toLowerCase();
+
+        function showViewRow(index, row) {
+          const sources = row.querySelectorAll(
+            '[data-drupal-selector="views-table-filter-text-source"]',
+          );
+          let sourcesConcat = '';
+          sources.forEach((item) => {
+            sourcesConcat += item.textContent;
+          });
+          const textMatch = sourcesConcat.toLowerCase().includes(query);
+          $(row).closest('tr').toggle(textMatch);
+        }
+
+        // Filter if the length of the query is at least 2 characters.
+        if (query.length >= 2) {
+          $rows.each(showViewRow);
+        } else {
+          $rows.show();
+        }
+      }
+
+      if ($table.length) {
+        $rows = $table.find('tbody tr');
+        $(input).on('keyup', filterViewList);
+      }
+    },
+  };
+})(jQuery, Drupal);