layout-builder.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function ($, Drupal, Sortable) {
  8. var ajax = Drupal.ajax,
  9. behaviors = Drupal.behaviors,
  10. debounce = Drupal.debounce,
  11. announce = Drupal.announce,
  12. formatPlural = Drupal.formatPlural;
  13. var layoutBuilderBlocksFiltered = false;
  14. behaviors.layoutBuilderBlockFilter = {
  15. attach: function attach(context) {
  16. var $categories = $('.js-layout-builder-categories', context);
  17. var $filterLinks = $categories.find('.js-layout-builder-block-link');
  18. var filterBlockList = function filterBlockList(e) {
  19. var query = $(e.target).val().toLowerCase();
  20. var toggleBlockEntry = function toggleBlockEntry(index, link) {
  21. var $link = $(link);
  22. var textMatch = $link.text().toLowerCase().indexOf(query) !== -1;
  23. $link.toggle(textMatch);
  24. };
  25. if (query.length >= 2) {
  26. $categories.find('.js-layout-builder-category:not([open])').attr('remember-closed', '');
  27. $categories.find('.js-layout-builder-category').attr('open', '');
  28. $filterLinks.each(toggleBlockEntry);
  29. $categories.find('.js-layout-builder-category:not(:has(.js-layout-builder-block-link:visible))').hide();
  30. announce(formatPlural($categories.find('.js-layout-builder-block-link:visible').length, '1 block is available in the modified list.', '@count blocks are available in the modified list.'));
  31. layoutBuilderBlocksFiltered = true;
  32. } else if (layoutBuilderBlocksFiltered) {
  33. layoutBuilderBlocksFiltered = false;
  34. $categories.find('.js-layout-builder-category[remember-closed]').removeAttr('open').removeAttr('remember-closed');
  35. $categories.find('.js-layout-builder-category').show();
  36. $filterLinks.show();
  37. announce(Drupal.t('All available blocks are listed.'));
  38. }
  39. };
  40. $('input.js-layout-builder-filter', context).once('block-filter-text').on('keyup', debounce(filterBlockList, 200));
  41. }
  42. };
  43. Drupal.layoutBuilderBlockUpdate = function (item, from, to) {
  44. var $item = $(item);
  45. var $from = $(from);
  46. var itemRegion = $item.closest('.js-layout-builder-region');
  47. if (to === itemRegion[0]) {
  48. var deltaTo = $item.closest('[data-layout-delta]').data('layout-delta');
  49. var deltaFrom = $from ? $from.closest('[data-layout-delta]').data('layout-delta') : deltaTo;
  50. ajax({
  51. url: [$item.closest('[data-layout-update-url]').data('layout-update-url'), deltaFrom, deltaTo, itemRegion.data('region'), $item.data('layout-block-uuid'), $item.prev('[data-layout-block-uuid]').data('layout-block-uuid')].filter(function (element) {
  52. return element !== undefined;
  53. }).join('/')
  54. }).execute();
  55. }
  56. };
  57. behaviors.layoutBuilderBlockDrag = {
  58. attach: function attach(context) {
  59. var regionSelector = '.js-layout-builder-region';
  60. Array.prototype.forEach.call(context.querySelectorAll(regionSelector), function (region) {
  61. Sortable.create(region, {
  62. draggable: '.js-layout-builder-block',
  63. ghostClass: 'ui-state-drop',
  64. group: 'builder-region',
  65. onEnd: function onEnd(event) {
  66. return Drupal.layoutBuilderBlockUpdate(event.item, event.from, event.to);
  67. }
  68. });
  69. });
  70. }
  71. };
  72. behaviors.layoutBuilderDisableInteractiveElements = {
  73. attach: function attach() {
  74. var $blocks = $('#layout-builder [data-layout-block-uuid]');
  75. $blocks.find('input, textarea, select').prop('disabled', true);
  76. $blocks.find('a').not(function (index, element) {
  77. return $(element).closest('[data-contextual-id]').length > 0;
  78. }).on('click mouseup touchstart', function (e) {
  79. e.preventDefault();
  80. e.stopPropagation();
  81. });
  82. $blocks.find('button, [href], input, select, textarea, iframe, [tabindex]:not([tabindex="-1"]):not(.tabbable)').not(function (index, element) {
  83. return $(element).closest('[data-contextual-id]').length > 0;
  84. }).attr('tabindex', -1);
  85. }
  86. };
  87. $(window).on('dialog:aftercreate', function (event, dialog, $element) {
  88. if (Drupal.offCanvas.isOffCanvas($element)) {
  89. $('.is-layout-builder-highlighted').removeClass('is-layout-builder-highlighted');
  90. var id = $element.find('[data-layout-builder-target-highlight-id]').attr('data-layout-builder-target-highlight-id');
  91. if (id) {
  92. $('[data-layout-builder-highlight-id="' + id + '"]').addClass('is-layout-builder-highlighted');
  93. }
  94. $('#layout-builder').removeClass('layout-builder--move-blocks-active');
  95. var layoutBuilderWrapperValue = $element.find('[data-add-layout-builder-wrapper]').attr('data-add-layout-builder-wrapper');
  96. if (layoutBuilderWrapperValue) {
  97. $('#layout-builder').addClass(layoutBuilderWrapperValue);
  98. }
  99. }
  100. });
  101. if (document.querySelector('[data-off-canvas-main-canvas]')) {
  102. var mainCanvas = document.querySelector('[data-off-canvas-main-canvas]');
  103. mainCanvas.addEventListener('transitionend', function () {
  104. var $target = $('.is-layout-builder-highlighted');
  105. if ($target.length > 0) {
  106. var targetTop = $target.offset().top;
  107. var targetBottom = targetTop + $target.outerHeight();
  108. var viewportTop = $(window).scrollTop();
  109. var viewportBottom = viewportTop + $(window).height();
  110. if (targetBottom < viewportTop || targetTop > viewportBottom) {
  111. var viewportMiddle = (viewportBottom + viewportTop) / 2;
  112. var scrollAmount = targetTop - viewportMiddle;
  113. if ('scrollBehavior' in document.documentElement.style) {
  114. window.scrollBy({
  115. top: scrollAmount,
  116. left: 0,
  117. behavior: 'smooth'
  118. });
  119. } else {
  120. window.scrollBy(0, scrollAmount);
  121. }
  122. }
  123. }
  124. });
  125. }
  126. $(window).on('dialog:afterclose', function (event, dialog, $element) {
  127. if (Drupal.offCanvas.isOffCanvas($element)) {
  128. $('.is-layout-builder-highlighted').removeClass('is-layout-builder-highlighted');
  129. $('#layout-builder').removeClass('layout-builder--move-blocks-active');
  130. }
  131. });
  132. behaviors.layoutBuilderToggleContentPreview = {
  133. attach: function attach(context) {
  134. var $layoutBuilder = $('#layout-builder');
  135. var $layoutBuilderContentPreview = $('#layout-builder-content-preview');
  136. var contentPreviewId = $layoutBuilderContentPreview.data('content-preview-id');
  137. var isContentPreview = JSON.parse(localStorage.getItem(contentPreviewId)) !== false;
  138. var disableContentPreview = function disableContentPreview() {
  139. $layoutBuilder.addClass('layout-builder--content-preview-disabled');
  140. $('[data-layout-content-preview-placeholder-label]', context).each(function (i, element) {
  141. var $element = $(element);
  142. $element.children(':not([data-contextual-id])').hide(0);
  143. var contentPreviewPlaceholderText = $element.attr('data-layout-content-preview-placeholder-label');
  144. var contentPreviewPlaceholderLabel = Drupal.theme('layoutBuilderPrependContentPreviewPlaceholderLabel', contentPreviewPlaceholderText);
  145. $element.prepend(contentPreviewPlaceholderLabel);
  146. });
  147. };
  148. var enableContentPreview = function enableContentPreview() {
  149. $layoutBuilder.removeClass('layout-builder--content-preview-disabled');
  150. $('.js-layout-builder-content-preview-placeholder-label').remove();
  151. $('[data-layout-content-preview-placeholder-label]').each(function (i, element) {
  152. $(element).children().show();
  153. });
  154. };
  155. $('#layout-builder-content-preview', context).on('change', function (event) {
  156. var isChecked = $(event.currentTarget).is(':checked');
  157. localStorage.setItem(contentPreviewId, JSON.stringify(isChecked));
  158. if (isChecked) {
  159. enableContentPreview();
  160. announce(Drupal.t('Block previews are visible. Block labels are hidden.'));
  161. } else {
  162. disableContentPreview();
  163. announce(Drupal.t('Block previews are hidden. Block labels are visible.'));
  164. }
  165. });
  166. if (!isContentPreview) {
  167. $layoutBuilderContentPreview.attr('checked', false);
  168. disableContentPreview();
  169. }
  170. }
  171. };
  172. Drupal.theme.layoutBuilderPrependContentPreviewPlaceholderLabel = function (contentPreviewPlaceholderText) {
  173. var contentPreviewPlaceholderLabel = document.createElement('div');
  174. contentPreviewPlaceholderLabel.className = 'layout-builder-block__content-preview-placeholder-label js-layout-builder-content-preview-placeholder-label';
  175. contentPreviewPlaceholderLabel.innerHTML = contentPreviewPlaceholderText;
  176. return '<div class="layout-builder-block__content-preview-placeholder-label js-layout-builder-content-preview-placeholder-label">' + contentPreviewPlaceholderText + '</div>';
  177. };
  178. })(jQuery, Drupal, Sortable);