block.admin.es6.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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 $filterRows;
  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)
  35. .val()
  36. .toLowerCase();
  37. /**
  38. * Shows or hides the block entry based on the query.
  39. *
  40. * @param {number} index
  41. * The index in the loop, as provided by `jQuery.each`
  42. * @param {HTMLElement} label
  43. * The label of the block.
  44. */
  45. function toggleBlockEntry(index, label) {
  46. const $label = $(label);
  47. const $row = $label.parent().parent();
  48. const textMatch =
  49. $label
  50. .text()
  51. .toLowerCase()
  52. .indexOf(query) !== -1;
  53. $row.toggle(textMatch);
  54. }
  55. // Filter if the length of the query is at least 2 characters.
  56. if (query.length >= 2) {
  57. $filterRows.each(toggleBlockEntry);
  58. Drupal.announce(
  59. Drupal.formatPlural(
  60. $table.find('tr:visible').length - 1,
  61. '1 block is available in the modified list.',
  62. '@count blocks are available in the modified list.',
  63. ),
  64. );
  65. } else {
  66. $filterRows.each(function(index) {
  67. $(this)
  68. .parent()
  69. .parent()
  70. .show();
  71. });
  72. }
  73. }
  74. if ($table.length) {
  75. $filterRows = $table.find('div.block-filter-text-source');
  76. $input.on('keyup', debounce(filterBlockList, 200));
  77. }
  78. },
  79. };
  80. /**
  81. * Highlights the block that was just placed into the block listing.
  82. *
  83. * @type {Drupal~behavior}
  84. *
  85. * @prop {Drupal~behaviorAttach} attach
  86. * Attaches the behavior for the block placement highlighting.
  87. */
  88. Drupal.behaviors.blockHighlightPlacement = {
  89. attach(context, settings) {
  90. // Ensure that the block we are attempting to scroll to actually exists.
  91. if (settings.blockPlacement && $('.js-block-placed').length) {
  92. $(context)
  93. .find('[data-drupal-selector="edit-blocks"]')
  94. .once('block-highlight')
  95. .each(function() {
  96. const $container = $(this);
  97. // Just scrolling the document.body will not work in Firefox. The html
  98. // element is needed as well.
  99. $('html, body').animate(
  100. {
  101. scrollTop:
  102. $('.js-block-placed').offset().top -
  103. $container.offset().top +
  104. $container.scrollTop(),
  105. },
  106. 500,
  107. );
  108. });
  109. }
  110. },
  111. };
  112. })(jQuery, Drupal, Drupal.debounce);