block.admin.es6.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /**
  2. * @file
  3. * Block admin behaviors.
  4. */
  5. (function ($, Drupal, debounce) {
  6. /**
  7. * Filters the block list by a text input search string.
  8. *
  9. * The text input will have the selector `input.block-filter-text`.
  10. *
  11. * The target element to do searching in will be in the selector
  12. * `input.block-filter-text[data-element]`
  13. *
  14. * The text source where the text should be found will have the selector
  15. * `.block-filter-text-source`
  16. *
  17. * @type {Drupal~behavior}
  18. *
  19. * @prop {Drupal~behaviorAttach} attach
  20. * Attaches the behavior for the block filtering.
  21. */
  22. Drupal.behaviors.blockFilterByText = {
  23. attach(context, settings) {
  24. const $input = $('input.block-filter-text').once('block-filter-text');
  25. const $table = $($input.attr('data-element'));
  26. let $filter_rows;
  27. /**
  28. * Filters the block list.
  29. *
  30. * @param {jQuery.Event} e
  31. * The jQuery event for the keyup event that triggered the filter.
  32. */
  33. function filterBlockList(e) {
  34. const query = $(e.target).val().toLowerCase();
  35. /**
  36. * Shows or hides the block entry based on the query.
  37. *
  38. * @param {number} index
  39. * The index in the loop, as provided by `jQuery.each`
  40. * @param {HTMLElement} label
  41. * The label of the block.
  42. */
  43. function toggleBlockEntry(index, label) {
  44. const $label = $(label);
  45. const $row = $label.parent().parent();
  46. const textMatch = $label.text().toLowerCase().indexOf(query) !== -1;
  47. $row.toggle(textMatch);
  48. }
  49. // Filter if the length of the query is at least 2 characters.
  50. if (query.length >= 2) {
  51. $filter_rows.each(toggleBlockEntry);
  52. Drupal.announce(
  53. Drupal.formatPlural(
  54. $table.find('tr:visible').length - 1,
  55. '1 block is available in the modified list.',
  56. '@count blocks are available in the modified list.'
  57. )
  58. );
  59. }
  60. else {
  61. $filter_rows.each(function (index) {
  62. $(this).parent().parent().show();
  63. });
  64. }
  65. }
  66. if ($table.length) {
  67. $filter_rows = $table.find('div.block-filter-text-source');
  68. $input.on('keyup', debounce(filterBlockList, 200));
  69. }
  70. },
  71. };
  72. /**
  73. * Highlights the block that was just placed into the block listing.
  74. *
  75. * @type {Drupal~behavior}
  76. *
  77. * @prop {Drupal~behaviorAttach} attach
  78. * Attaches the behavior for the block placement highlighting.
  79. */
  80. Drupal.behaviors.blockHighlightPlacement = {
  81. attach(context, settings) {
  82. if (settings.blockPlacement) {
  83. $(context).find('[data-drupal-selector="edit-blocks"]').once('block-highlight').each(function () {
  84. const $container = $(this);
  85. // Just scrolling the document.body will not work in Firefox. The html
  86. // element is needed as well.
  87. $('html, body').animate({
  88. scrollTop: $('.js-block-placed').offset().top - $container.offset().top + $container.scrollTop(),
  89. }, 500);
  90. });
  91. }
  92. },
  93. };
  94. }(jQuery, Drupal, Drupal.debounce));