106 lines
		
	
	
		
			3.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			106 lines
		
	
	
		
			3.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
/**
 | 
						|
 * @file
 | 
						|
 * Block admin behaviors.
 | 
						|
 */
 | 
						|
 | 
						|
(function ($, Drupal, debounce, once) {
 | 
						|
  /**
 | 
						|
   * Filters the block list by a text input search string.
 | 
						|
   *
 | 
						|
   * The text input will have the selector `input.block-filter-text`.
 | 
						|
   *
 | 
						|
   * The target element to do searching in will be in the selector
 | 
						|
   * `input.block-filter-text[data-element]`
 | 
						|
   *
 | 
						|
   * The text source where the text should be found will have the selector
 | 
						|
   * `.block-filter-text-source`
 | 
						|
   *
 | 
						|
   * @type {Drupal~behavior}
 | 
						|
   *
 | 
						|
   * @prop {Drupal~behaviorAttach} attach
 | 
						|
   *   Attaches the behavior for the block filtering.
 | 
						|
   */
 | 
						|
  Drupal.behaviors.blockFilterByText = {
 | 
						|
    attach(context, settings) {
 | 
						|
      const $input = $(once('block-filter-text', 'input.block-filter-text'));
 | 
						|
      const $table = $($input.attr('data-element'));
 | 
						|
      let $filterRows;
 | 
						|
 | 
						|
      /**
 | 
						|
       * Filters the block list.
 | 
						|
       *
 | 
						|
       * @param {jQuery.Event} e
 | 
						|
       *   The jQuery event for the keyup event that triggered the filter.
 | 
						|
       */
 | 
						|
      function 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} label
 | 
						|
         *   The label of the block.
 | 
						|
         */
 | 
						|
        function toggleBlockEntry(index, label) {
 | 
						|
          const $row = $(label).parent().parent();
 | 
						|
          const textMatch = label.textContent.toLowerCase().includes(query);
 | 
						|
          $row.toggle(textMatch);
 | 
						|
        }
 | 
						|
 | 
						|
        // Filter if the length of the query is at least 2 characters.
 | 
						|
        if (query.length >= 2) {
 | 
						|
          $filterRows.each(toggleBlockEntry);
 | 
						|
          Drupal.announce(
 | 
						|
            Drupal.formatPlural(
 | 
						|
              $table.find('tr:visible').length - 1,
 | 
						|
              '1 block is available in the modified list.',
 | 
						|
              '@count blocks are available in the modified list.',
 | 
						|
            ),
 | 
						|
          );
 | 
						|
        } else {
 | 
						|
          $filterRows.each(function (index) {
 | 
						|
            $(this).parent().parent().show();
 | 
						|
          });
 | 
						|
        }
 | 
						|
      }
 | 
						|
 | 
						|
      if ($table.length) {
 | 
						|
        $filterRows = $table.find('div.block-filter-text-source');
 | 
						|
        $input.on('keyup', debounce(filterBlockList, 200));
 | 
						|
      }
 | 
						|
    },
 | 
						|
  };
 | 
						|
 | 
						|
  /**
 | 
						|
   * Highlights the block that was just placed into the block listing.
 | 
						|
   *
 | 
						|
   * @type {Drupal~behavior}
 | 
						|
   *
 | 
						|
   * @prop {Drupal~behaviorAttach} attach
 | 
						|
   *   Attaches the behavior for the block placement highlighting.
 | 
						|
   */
 | 
						|
  Drupal.behaviors.blockHighlightPlacement = {
 | 
						|
    attach(context, settings) {
 | 
						|
      // Ensure that the block we are attempting to scroll to actually exists.
 | 
						|
      if (settings.blockPlacement && $('.js-block-placed').length) {
 | 
						|
        once(
 | 
						|
          'block-highlight',
 | 
						|
          '[data-drupal-selector="edit-blocks"]',
 | 
						|
          context,
 | 
						|
        ).forEach((container) => {
 | 
						|
          const $container = $(container);
 | 
						|
          window.scrollTo({
 | 
						|
            top:
 | 
						|
              $('.js-block-placed').offset().top -
 | 
						|
              $container.offset().top +
 | 
						|
              $container.scrollTop(),
 | 
						|
            behavior: 'smooth',
 | 
						|
          });
 | 
						|
        });
 | 
						|
      }
 | 
						|
    },
 | 
						|
  };
 | 
						|
})(jQuery, Drupal, Drupal.debounce, once);
 |