www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/block/js/block.admin.es6.js

   1 /**
   2  * @file
   3  * Block admin behaviors.
   4  */
   5
   6 (function($, Drupal, debounce) {
   7   /**
   8    * Filters the block list by a text input search string.
   9    *
  10    * The text input will have the selector `input.block-filter-text`.
  11    *
  12    * The target element to do searching in will be in the selector
  13    * `input.block-filter-text[data-element]`
  14    *
  15    * The text source where the text should be found will have the selector
  16    * `.block-filter-text-source`
  17    *
  18    * @type {Drupal~behavior}
  19    *
  20    * @prop {Drupal~behaviorAttach} attach
  21    *   Attaches the behavior for the block filtering.
  22    */
  23   Drupal.behaviors.blockFilterByText = {
  24     attach(context, settings) {
  25       const $input = $('input.block-filter-text').once('block-filter-text');
  26       const $table = $($input.attr('data-element'));
  27       let $filterRows;
  28
  29       /**
  30        * Filters the block list.
  31        *
  32        * @param {jQuery.Event} e
  33        *   The jQuery event for the keyup event that triggered the filter.
  34        */
  35       function filterBlockList(e) {
  36         const query = $(e.target)
  37           .val()
  38           .toLowerCase();
  39
  40         /**
  41          * Shows or hides the block entry based on the query.
  42          *
  43          * @param {number} index
  44          *   The index in the loop, as provided by `jQuery.each`
  45          * @param {HTMLElement} label
  46          *   The label of the block.
  47          */
  48         function toggleBlockEntry(index, label) {
  49           const $label = $(label);
  50           const $row = $label.parent().parent();
  51           const textMatch =
  52             $label
  53               .text()
  54               .toLowerCase()
  55               .indexOf(query) !== -1;
  56           $row.toggle(textMatch);
  57         }
  58
  59         // Filter if the length of the query is at least 2 characters.
  60         if (query.length >= 2) {
  61           $filterRows.each(toggleBlockEntry);
  62           Drupal.announce(
  63             Drupal.formatPlural(
  64               $table.find('tr:visible').length - 1,
  65               '1 block is available in the modified list.',
  66               '@count blocks are available in the modified list.',
  67             ),
  68           );
  69         } else {
  70           $filterRows.each(function(index) {
  71             $(this)
  72               .parent()
  73               .parent()
  74               .show();
  75           });
  76         }
  77       }
  78
  79       if ($table.length) {
  80         $filterRows = $table.find('div.block-filter-text-source');
  81         $input.on('keyup', debounce(filterBlockList, 200));
  82       }
  83     },
  84   };
  85
  86   /**
  87    * Highlights the block that was just placed into the block listing.
  88    *
  89    * @type {Drupal~behavior}
  90    *
  91    * @prop {Drupal~behaviorAttach} attach
  92    *   Attaches the behavior for the block placement highlighting.
  93    */
  94   Drupal.behaviors.blockHighlightPlacement = {
  95     attach(context, settings) {
  96       // Ensure that the block we are attempting to scroll to actually exists.
  97       if (settings.blockPlacement && $('.js-block-placed').length) {
  98         $(context)
  99           .find('[data-drupal-selector="edit-blocks"]')
 100           .once('block-highlight')
 101           .each(function() {
 102             const $container = $(this);
 103             // Just scrolling the document.body will not work in Firefox. The html
 104             // element is needed as well.
 105             $('html, body').animate(
 106               {
 107                 scrollTop:
 108                   $('.js-block-placed').offset().top -
 109                   $container.offset().top +
 110                   $container.scrollTop(),
 111               },
 112               500,
 113             );
 114           });
 115       }
 116     },
 117   };
 118 })(jQuery, Drupal, Drupal.debounce);