/**
* @file
* Block admin behaviors.
*/
(function ($, Drupal, debounce) {
/**
* 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 = $('input.block-filter-text').once('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).val().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 $label = $(label);
const $row = $label.parent().parent();
const textMatch = $label.text().toLowerCase().indexOf(query) !== -1;
$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) {
$(context)
.find('[data-drupal-selector="edit-blocks"]')
.once('block-highlight')
.each(function () {
const $container = $(this);
// Just scrolling the document.body will not work in Firefox. The html
// element is needed as well.
$('html, body').animate(
{
scrollTop:
$('.js-block-placed').offset().top -
$container.offset().top +
$container.scrollTop(),
},
500,
);
});
}
},
};
})(jQuery, Drupal, Drupal.debounce);