3 * Block admin behaviors.
6 (function ($, Drupal, debounce) {
8 * Filters the block list by a text input search string.
10 * The text input will have the selector `input.block-filter-text`.
12 * The target element to do searching in will be in the selector
13 * `input.block-filter-text[data-element]`
15 * The text source where the text should be found will have the selector
16 * `.block-filter-text-source`
18 * @type {Drupal~behavior}
20 * @prop {Drupal~behaviorAttach} attach
21 * Attaches the behavior for the block filtering.
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'));
30 * Filters the block list.
32 * @param {jQuery.Event} e
33 * The jQuery event for the keyup event that triggered the filter.
35 function filterBlockList(e) {
36 const query = $(e.target).val().toLowerCase();
39 * Shows or hides the block entry based on the query.
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.
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);
53 // Filter if the length of the query is at least 2 characters.
54 if (query.length >= 2) {
55 $filter_rows.each(toggleBlockEntry);
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.'
65 $filter_rows.each(function (index) {
66 $(this).parent().parent().show();
72 $filter_rows = $table.find('div.block-filter-text-source');
73 $input.on('keyup', debounce(filterBlockList, 200));
79 * Highlights the block that was just placed into the block listing.
81 * @type {Drupal~behavior}
83 * @prop {Drupal~behaviorAttach} attach
84 * Attaches the behavior for the block placement highlighting.
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(),
100 }(jQuery, Drupal, Drupal.debounce));