106 lines
3.2 KiB
JavaScript
106 lines
3.2 KiB
JavaScript
|
/**
|
||
|
|
* @file
|
||
|
|
* Block admin behaviors.
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function ($, Drupal, debounce, once) {
|
||
|
|
/**
|
||
|
|
* 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 = $(once('block-filter-text', 'input.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.value.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 $row = $(label).parent().parent();
|
||
|
|
const textMatch = label.textContent.toLowerCase().includes(query);
|
||
|
|
$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) {
|
||
|
|
once(
|
||
|
|
'block-highlight',
|
||
|
|
'[data-drupal-selector="edit-blocks"]',
|
||
|
|
context,
|
||
|
|
).forEach((container) => {
|
||
|
|
const $container = $(container);
|
||
|
|
window.scrollTo({
|
||
|
|
top:
|
||
|
|
$('.js-block-placed').offset().top -
|
||
|
|
$container.offset().top +
|
||
|
|
$container.scrollTop(),
|
||
|
|
behavior: 'smooth',
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
})(jQuery, Drupal, Drupal.debounce, once);
|