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 $filter_rows;
  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).val().toLowerCase();
  37
  38         /**
  39          * Shows or hides the block entry based on the query.
  40          *
  41          * @param {number} index
  42          *   The index in the loop, as provided by `jQuery.each`
  43          * @param {HTMLElement} label
  44          *   The label of the block.
  45          */
  46         function toggleBlockEntry(index, label) {
  47           const $label = $(label);
  48           const $row = $label.parent().parent();
  49           const textMatch = $label.text().toLowerCase().indexOf(query) !== -1;
  50           $row.toggle(textMatch);
  51         }
  52
  53         // Filter if the length of the query is at least 2 characters.
  54         if (query.length >= 2) {
  55           $filter_rows.each(toggleBlockEntry);
  56           Drupal.announce(
  57             Drupal.formatPlural(
  58               $table.find('tr:visible').length - 1,
  59               '1 block is available in the modified list.',
  60               '@count blocks are available in the modified list.'
  61             )
  62           );
  63         }
  64         else {
  65           $filter_rows.each(function (index) {
  66             $(this).parent().parent().show();
  67           });
  68         }
  69       }
  70
  71       if ($table.length) {
  72         $filter_rows = $table.find('div.block-filter-text-source');
  73         $input.on('keyup', debounce(filterBlockList, 200));
  74       }
  75     },
  76   };
  77
  78   /**
  79    * Highlights the block that was just placed into the block listing.
  80    *
  81    * @type {Drupal~behavior}
  82    *
  83    * @prop {Drupal~behaviorAttach} attach
  84    *   Attaches the behavior for the block placement highlighting.
  85    */
  86   Drupal.behaviors.blockHighlightPlacement = {
  87     attach(context, settings) {
  88       if (settings.blockPlacement) {
  89         $(context).find('[data-drupal-selector="edit-blocks"]').once('block-highlight').each(function () {
  90           const $container = $(this);
  91           // Just scrolling the document.body will not work in Firefox. The html
  92           // element is needed as well.
  93           $('html, body').animate({
  94             scrollTop: $('.js-block-placed').offset().top - $container.offset().top + $container.scrollTop(),
  95           }, 500);
  96         });
  97       }
  98     },
  99   };
 100 }(jQuery, Drupal, Drupal.debounce));