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)
41 * Shows or hides the block entry based on the query.
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.
48 function toggleBlockEntry(index, label) {
49 const $label = $(label);
50 const $row = $label.parent().parent();
55 .indexOf(query) !== -1;
56 $row.toggle(textMatch);
59 // Filter if the length of the query is at least 2 characters.
60 if (query.length >= 2) {
61 $filterRows.each(toggleBlockEntry);
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.',
70 $filterRows.each(function(index) {
80 $filterRows = $table.find('div.block-filter-text-source');
81 $input.on('keyup', debounce(filterBlockList, 200));
87 * Highlights the block that was just placed into the block listing.
89 * @type {Drupal~behavior}
91 * @prop {Drupal~behaviorAttach} attach
92 * Attaches the behavior for the block placement highlighting.
94 Drupal.behaviors.blockHighlightPlacement = {
95 attach(context, settings) {
96 if (settings.blockPlacement) {
98 .find('[data-drupal-selector="edit-blocks"]')
99 .once('block-highlight')
101 const $container = $(this);
102 // Just scrolling the document.body will not work in Firefox. The html
103 // element is needed as well.
104 $('html, body').animate(
107 $('.js-block-placed').offset().top -
108 $container.offset().top +
109 $container.scrollTop(),
117 })(jQuery, Drupal, Drupal.debounce);