Chris@0: /** Chris@0: * @file Chris@0: * Block admin behaviors. Chris@0: */ Chris@0: Chris@17: (function($, Drupal, debounce) { Chris@0: /** Chris@0: * Filters the block list by a text input search string. Chris@0: * Chris@0: * The text input will have the selector `input.block-filter-text`. Chris@0: * Chris@0: * The target element to do searching in will be in the selector Chris@0: * `input.block-filter-text[data-element]` Chris@0: * Chris@0: * The text source where the text should be found will have the selector Chris@0: * `.block-filter-text-source` Chris@0: * Chris@0: * @type {Drupal~behavior} Chris@0: * Chris@0: * @prop {Drupal~behaviorAttach} attach Chris@0: * Attaches the behavior for the block filtering. Chris@0: */ Chris@0: Drupal.behaviors.blockFilterByText = { Chris@0: attach(context, settings) { Chris@0: const $input = $('input.block-filter-text').once('block-filter-text'); Chris@0: const $table = $($input.attr('data-element')); Chris@14: let $filterRows; Chris@0: Chris@0: /** Chris@0: * Filters the block list. Chris@0: * Chris@0: * @param {jQuery.Event} e Chris@0: * The jQuery event for the keyup event that triggered the filter. Chris@0: */ Chris@0: function filterBlockList(e) { Chris@17: const query = $(e.target) Chris@17: .val() Chris@17: .toLowerCase(); Chris@0: Chris@0: /** Chris@0: * Shows or hides the block entry based on the query. Chris@0: * Chris@0: * @param {number} index Chris@0: * The index in the loop, as provided by `jQuery.each` Chris@0: * @param {HTMLElement} label Chris@0: * The label of the block. Chris@0: */ Chris@0: function toggleBlockEntry(index, label) { Chris@0: const $label = $(label); Chris@0: const $row = $label.parent().parent(); Chris@17: const textMatch = Chris@17: $label Chris@17: .text() Chris@17: .toLowerCase() Chris@17: .indexOf(query) !== -1; Chris@0: $row.toggle(textMatch); Chris@0: } Chris@0: Chris@0: // Filter if the length of the query is at least 2 characters. Chris@0: if (query.length >= 2) { Chris@14: $filterRows.each(toggleBlockEntry); Chris@0: Drupal.announce( Chris@0: Drupal.formatPlural( Chris@0: $table.find('tr:visible').length - 1, Chris@0: '1 block is available in the modified list.', Chris@14: '@count blocks are available in the modified list.', Chris@14: ), Chris@0: ); Chris@17: } else { Chris@17: $filterRows.each(function(index) { Chris@17: $(this) Chris@17: .parent() Chris@17: .parent() Chris@17: .show(); Chris@0: }); Chris@0: } Chris@0: } Chris@0: Chris@0: if ($table.length) { Chris@14: $filterRows = $table.find('div.block-filter-text-source'); Chris@0: $input.on('keyup', debounce(filterBlockList, 200)); Chris@0: } Chris@0: }, Chris@0: }; Chris@0: Chris@0: /** Chris@0: * Highlights the block that was just placed into the block listing. Chris@0: * Chris@0: * @type {Drupal~behavior} Chris@0: * Chris@0: * @prop {Drupal~behaviorAttach} attach Chris@0: * Attaches the behavior for the block placement highlighting. Chris@0: */ Chris@0: Drupal.behaviors.blockHighlightPlacement = { Chris@0: attach(context, settings) { Chris@17: // Ensure that the block we are attempting to scroll to actually exists. Chris@17: if (settings.blockPlacement && $('.js-block-placed').length) { Chris@17: $(context) Chris@17: .find('[data-drupal-selector="edit-blocks"]') Chris@17: .once('block-highlight') Chris@17: .each(function() { Chris@17: const $container = $(this); Chris@17: // Just scrolling the document.body will not work in Firefox. The html Chris@17: // element is needed as well. Chris@17: $('html, body').animate( Chris@17: { Chris@17: scrollTop: Chris@17: $('.js-block-placed').offset().top - Chris@17: $container.offset().top + Chris@17: $container.scrollTop(), Chris@17: }, Chris@17: 500, Chris@17: ); Chris@17: }); Chris@0: } Chris@0: }, Chris@0: }; Chris@17: })(jQuery, Drupal, Drupal.debounce);