Issue #3517904 by grimreaper: Fix JS filter + split properly overrides for LB,...

Issue #3517904 by grimreaper: Fix JS filter + split properly overrides for LB, LBB and SL support between UI Suite Bootstrap and UI Suite Bootstrap Companion in #3493509

assets/js/layout-builder-browser/layout-builder-browser.modal.js

+(($, Drupal, once) => {
+  const debounce = Drupal.debounce;
+  const announce = Drupal.announce;
+  const formatPlural = Drupal.formatPlural;
+
+  let layoutBuilderBlocksFiltered = false;
+
+  Drupal.behaviors.layoutBuilderBrowser = {
+    attach: function attach() {
+      // Override core behaviors.layoutBuilderBlockFilter.attach().
+      Drupal.behaviors.layoutBuilderBlockFilter.attach = function attach(
+        context,
+      ) {
+        // Custom selector, remove context to ensure filter works in modal.
+        const $categories = $('.js-layout-builder-categories', context);
+        const $filterLinks = $categories.find('.js-layout-builder-block-link');
+
+        const filterBlockList = function filterBlockList(e) {
+          const query = e.target.value.toLowerCase();
+
+          const toggleBlockEntry = function toggleBlockEntry(index, link) {
+            const $link = $(link);
+            const textMatch = link.textContent.toLowerCase().includes(query);
+            $link.toggle(textMatch);
+          };
+
+          if (query.length >= 2) {
+            $categories
+              .find('.js-layout-builder-category .accordion-button.collapsed')
+              .attr('remember-closed', '');
+
+            $categories
+              .find('.js-layout-builder-category .accordion-button.collapsed')
+              .click();
+
+            $filterLinks.each(toggleBlockEntry);
+
+            $categories
+              .find(
+                '.js-layout-builder-category:not(:has(.js-layout-builder-block-link:visible))',
+              )
+              .hide();
+
+            announce(
+              formatPlural(
+                $categories.find('.js-layout-builder-block-link:visible')
+                  .length,
+                '1 block is available in the modified list.',
+                '@count blocks are available in the modified list.',
+              ),
+            );
+            layoutBuilderBlocksFiltered = true;
+          } else if (layoutBuilderBlocksFiltered) {
+            layoutBuilderBlocksFiltered = false;
+
+            $categories
+              .find(
+                '.js-layout-builder-category .accordion-button[remember-closed]',
+              )
+              .removeAttr('remember-closed')
+              .click();
+
+            $categories.find('.js-layout-builder-category').show();
+            $filterLinks.show();
+            announce(Drupal.t('All available blocks are listed.'));
+          }
+        };
+
+        $(once('input.js-layout-builder-filter', context)).on(
+          'keyup',
+          debounce(filterBlockList, 200),
+        );
+      };
+    },
+  };
+})(jQuery, Drupal, once);

assets/js/layout-builder/layout-builder.js

+/**
+ * @file
+ * Attaches the behaviors for the Layout Builder module.
+ */
+
+(($, Drupal) => {
+  const { behaviors, debounce, announce, formatPlural } = Drupal;
+
+  /*
+   * Boolean that tracks if block listing is currently being filtered. Declared
+   * outside of behaviors so value is retained on rebuild.
+   */
+  let layoutBuilderBlocksFiltered = false;
+
+  /**
+   * Provides the ability to filter the block listing in "Add block" dialog.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attach block filtering behavior to "Add block" dialog.
+   */
+  behaviors.layoutBuilderBlockFilter = {
+    attach(context) {
+      const $categories = $('.js-layout-builder-categories', context);
+      const $filterLinks = $categories.find('.js-layout-builder-block-link');
+
+      /**
+       * Filters the block list.
+       *
+       * @param {jQuery.Event} e
+       *   The jQuery event for the keyup event that triggered the filter.
+       */
+      const filterBlockList = (e) => {
+        const query = e.target.value.toLowerCase();
+
+        /**
+         * Shows or hides the block entry based on the query.
+         *
+         * @param {number} index
+         *   The index in the loop, as provided by `jQuery.each`
+         * @param {HTMLElement} link
+         *   The link to add the block.
+         */
+        const toggleBlockEntry = (index, link) => {
+          const $link = $(link);
+          const textMatch = link.textContent.toLowerCase().includes(query);
+          // Checks if a category is currently hidden.
+          // Toggles the category on if so.
+          if (
+            Drupal.elementIsHidden(
+              $link.closest('.js-layout-builder-category')[0],
+            )
+          ) {
+            $link.closest('.js-layout-builder-category').show();
+          }
+          // Toggle the li tag of the matching link.
+          $link.parent().toggle(textMatch);
+        };
+
+        // Filter if the length of the query is at least 2 characters.
+        if (query.length >= 2) {
+          // Attribute to note which categories are closed before opening all.
+          $categories
+            .find('.js-layout-builder-category .accordion-button.collapsed')
+            .attr('remember-closed', '');
+
+          // Open all categories so every block is available to filtering.
+          $categories
+            .find('.js-layout-builder-category .accordion-button.collapsed')
+            .click();
+          // Toggle visibility of links based on query.
+          $filterLinks.each(toggleBlockEntry);
+
+          // Only display categories containing visible links.
+          $categories
+            .find(
+              '.js-layout-builder-category:not(:has(.js-layout-builder-block-link:visible))',
+            )
+            .hide();
+
+          announce(
+            formatPlural(
+              $categories.find('.js-layout-builder-block-link:visible').length,
+              '1 block is available in the modified list.',
+              '@count blocks are available in the modified list.',
+            ),
+          );
+          layoutBuilderBlocksFiltered = true;
+        } else if (layoutBuilderBlocksFiltered) {
+          layoutBuilderBlocksFiltered = false;
+          // Re-open categories that were closed pre-filtering.
+          $categories
+            .find(
+              '.js-layout-builder-category .accordion-button[remember-closed]',
+            )
+            .removeAttr('remember-closed')
+            .click();
+          // Show all categories since filter is turned off.
+          $categories.find('.js-layout-builder-category').show();
+          // Show all li tags since filter is turned off.
+          $filterLinks.parent().show();
+          announce(Drupal.t('All available blocks are listed.'));
+        }
+      };
+
+      $(
+        once('block-filter-text', 'input.js-layout-builder-filter', context),
+      ).on('input', debounce(filterBlockList, 200));
+    },
+  };
+})(jQuery, Drupal, Sortable);

assets/js/section-library/section-library.js

-((Drupal, once) => {
-  Drupal.behaviors.sectionLibrary = {
-    attach(context) {
-      if (
-        once(
-          'choose-from-section-library',
-          '.js-layout-builder-section-library-filter-type',
-          context,
-        ).length
-      ) {
-        const filterLinks = document.querySelectorAll(
-          '.js-layout-builder-section-library-link',
-        );
-
-        const filterSearchInput = document.querySelector(
-          '.js-layout-builder-section-library-filter',
-        );
-        const filterTypeSelect = document.querySelector(
-          '.js-layout-builder-section-library-filter-type',
-        );
-
-        const toggleSectionLibraryEntry = (link) => {
-          const query = filterSearchInput.value
-            ? filterSearchInput.value.toLowerCase()
-            : '';
-          const filterType = filterTypeSelect.value.toLowerCase();
-
-          let filterResult;
-          // If we're filtering by Type "All", we only need to worry about text searching.
-          if (filterType === 'any') {
-            // Filter by the text search only.
-            filterResult =
-              link.textContent.toLowerCase().indexOf(query.toLowerCase()) !==
-              -1;
-          } else {
-            // Filter by the "Type" dropdown first.
-            filterResult =
-              link.dataset.sectionType.toLowerCase().indexOf(filterType) !== -1;
-
-            // Additionally filter by the text search.
-            if (filterResult) {
-              filterResult =
-                link.textContent.toLowerCase().indexOf(query.toLowerCase()) !==
-                -1;
-            }
-          }
-          if (filterResult) {
-            link.style.display = '';
-          } else {
-            link.style.display = 'none';
-          }
-        };
-
-        const filterSectionLibraryList = () => {
-          const query = filterSearchInput.value
-            ? filterSearchInput.value.toLowerCase()
-            : '';
-          const filterType = filterTypeSelect.value.toLowerCase();
-
-          // If text searching with more than 1 character, or choosing a "Type", narrow results.
-          if (filterType !== 'any' || query.length >= 2) {
-            filterLinks.forEach(toggleSectionLibraryEntry);
-          } else if (filterType === 'any' && query.length < 2) {
-            // If no filter is applied, show all links.
-            filterLinks.forEach((link) => {
-              link.style.display = '';
-            });
-            Drupal.announce(Drupal.t('All available sections are listed.'));
-          }
-        };
-
-        filterSearchInput.addEventListener(
-          'keyup',
-          Drupal.debounce(filterSectionLibraryList, 200, false),
-        );
-        filterTypeSelect.addEventListener('change', filterSectionLibraryList);
-      }
-    },
-  };
-})(Drupal, once);

ui_suite_bootstrap.info.yml

@@ -84,6 +84,9 @@ libraries-override:
   commerce_checkout/form: false
   commerce_checkout/login_pane: false
   layout_builder_browser/browser: false
+  layout_builder_browser/modal:
+    js:
+      js/layout_builder_browser.modal.js: assets/js/layout-builder-browser/layout-builder-browser.modal.js
   media_library_edit/admin:
     css:
       component:
@@ -93,8 +96,6 @@ libraries-override:
     css:
       theme:
         css/section-library.css: false
-    js:
-      js/section-library.js: assets/js/section-library/section-library.js
   ui_icons/ui_icons.autocomplete:
     css:
       component:
@@ -123,6 +124,7 @@ libraries-extend:
     - ui_suite_bootstrap/drupal.tabledrag
   layout_builder/drupal.layout_builder:
     - ui_suite_bootstrap/drupal.layout_builder
+    - ui_suite_bootstrap/drupal.layout_builder_block_filter
   media_library/view:
     - ui_suite_bootstrap/media_library.theme
   media_library/widget:

ui_suite_bootstrap.libraries.yml

@@ -89,6 +89,15 @@ drupal.layout_builder:
     theme:
       assets/css/layout-builder/layout-builder.css: {}
 
+# Split from drupal.layout_builder for easier overrides depending on
+# template customizations.
+drupal.layout_builder_block_filter:
+  js:
+    assets/js/layout-builder/layout-builder.js: {}
+  dependencies:
+    - core/jquery
+    - core/drupal
+
 drupal.message:
   js:
     assets/js/misc/message.js: {}