diff --git a/js/builder-form.es6.js b/js/builder-form.es6.js index 6da032664722398569b4c17c0d91f669fd6b0be8..916cf7e4660b3989b594c1153b24c6569cd92a62 100644 --- a/js/builder-form.es6.js +++ b/js/builder-form.es6.js @@ -1,4 +1,4 @@ -(($, Drupal) => { +(($, Drupal, once) => { // Updates the "Close" button label when a layout is changed. Drupal.behaviors.layoutParagraphsBuilderForm = { attach: function attach(context) { @@ -17,8 +17,7 @@ 'lpb-component:move.lpb', 'lpb-component:drop.lpb', ].join(' '); - $('[data-lpb-id]', context) - .once('lpb-builder-form') + $(once('lpb-builder-form', '[data-lpb-id]', context)) .on(events, (e) => { $(e.currentTarget) .closest('[data-lpb-form-id]') @@ -27,4 +26,4 @@ }); }, }; -})(jQuery, Drupal); +})(jQuery, Drupal, once); diff --git a/js/builder-form.js b/js/builder-form.js index f2655e9a60a5793d6fe9a54a3d3f0b3839f70f50..a3d5403e1e3aee03a7ed21a881c0e4145095c9c2 100644 --- a/js/builder-form.js +++ b/js/builder-form.js @@ -5,7 +5,7 @@ * @preserve **/ -(function ($, Drupal) { +(function ($, Drupal, once) { Drupal.behaviors.layoutParagraphsBuilderForm = { attach: function attach(context) { $('.lpb-enable__wrapper').removeClass('hidden'); @@ -15,9 +15,9 @@ $('.lpb-enable__wrapper', parent).addClass('hidden'); }); var events = ['lpb-component:insert.lpb', 'lpb-component:update.lpb', 'lpb-component:move.lpb', 'lpb-component:drop.lpb'].join(' '); - $('[data-lpb-id]', context).once('lpb-builder-form').on(events, function (e) { + $(once('lpb-builder-form', '[data-lpb-id]', context)).on(events, function (e) { $(e.currentTarget).closest('[data-lpb-form-id]').find('[data-drupal-selector="edit-close"]').val(Drupal.t('Cancel')); }); } }; -})(jQuery, Drupal); \ No newline at end of file +})(jQuery, Drupal, once); \ No newline at end of file diff --git a/js/builder.es6.js b/js/builder.es6.js index 821f1add470e9e1fcefb34e811ea8c20732116b9..bb9b60fd2cd5531e3d6d637558d43cb731145385 100644 --- a/js/builder.es6.js +++ b/js/builder.es6.js @@ -1,4 +1,4 @@ -(($, Drupal, debounce, dragula) => { +(($, Drupal, debounce, dragula, once) => { const idAttr = 'data-lpb-id'; /** @@ -323,7 +323,8 @@ const $btn = $(e.currentTarget); startNav($btn.closest('.js-lpb-component')); }); - $(document).once('layout-paragraphs-keydown').on('keydown', (e) => { + $(document).off('keydown'); + $(document).on('keydown', (e) => { const $item = $('.js-lpb-component.is-navigating'); if ($item.length) { switch (e.code) { @@ -442,8 +443,7 @@ Drupal.behaviors.layoutParagraphsBuilder = { attach: function attach(context, settings) { // Add UI elements to the builder, each component, and each region. - $('[data-has-js-ui-element]') - .once('lpb-ui-elements') + $(once('lpb-ui-elements', '[data-has-js-ui-element]')) .each((i, el) => { attachUiElements($(el), settings); }); @@ -456,19 +456,18 @@ 'lpb-component:drop.lpb', 'lpb-component:delete.lpb', ].join(' '); - $('[data-lpb-id]') - .once('lpb-events') + $(once('lpb-events', '[data-lpb-id]')) .on(events, (e) => { const $element = $(e.currentTarget); updateUi($element); }); // Initialize the editor drag and drop ui. $(`.has-components[${idAttr}]`).each((index, element) => { - const $element = $(element); + const $element = $(once('lpb-enabled', element)); const id = $element.attr(idAttr); const lpbSettings = settings.lpBuilder[id]; // Attach event listeners and init dragula just once. - $element.once('lpb-enabled').each(() => { + $element.each(() => { $element.data('drake', initDragAndDrop($element, lpbSettings)); attachEventListeners($element, lpbSettings); $element.trigger('lpb-builder:init'); @@ -538,4 +537,4 @@ lpDialogInterval = setInterval(repositionDialog.bind(null, lpDialogInterval), 500); } }); -})(jQuery, Drupal, Drupal.debounce, dragula); +})(jQuery, Drupal, Drupal.debounce, dragula, once); diff --git a/js/builder.js b/js/builder.js index 8978b957f6ef1723a01d92b845ba556f02485adb..399a232718c3f5c806fafc79ad9aea85e1853b53 100644 --- a/js/builder.js +++ b/js/builder.js @@ -17,7 +17,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } -(function ($, Drupal, debounce, dragula) { +(function ($, Drupal, debounce, dragula, once) { var idAttr = 'data-lpb-id'; function attachUiElements($container, settings) { @@ -242,7 +242,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } var $btn = $(e.currentTarget); startNav($btn.closest('.js-lpb-component')); }); - $(document).once('layout-paragraphs-keydown').on('keydown', function (e) { + $(document).off('keydown'); + $(document).on('keydown', function (e) { var $item = $('.js-lpb-component.is-navigating'); if ($item.length) { @@ -355,19 +356,19 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } Drupal.behaviors.layoutParagraphsBuilder = { attach: function attach(context, settings) { - $('[data-has-js-ui-element]').once('lpb-ui-elements').each(function (i, el) { + $(once('lpb-ui-elements', '[data-has-js-ui-element]')).each(function (i, el) { attachUiElements($(el), settings); }); var events = ['lpb-builder:init.lpb', 'lpb-component:insert.lpb', 'lpb-component:update.lpb', 'lpb-component:move.lpb', 'lpb-component:drop.lpb', 'lpb-component:delete.lpb'].join(' '); - $('[data-lpb-id]').once('lpb-events').on(events, function (e) { + $(once('lpb-events', '[data-lpb-id]')).on(events, function (e) { var $element = $(e.currentTarget); updateUi($element); }); $(".has-components[".concat(idAttr, "]")).each(function (index, element) { - var $element = $(element); + var $element = $(once('lpb-enabled', element)); var id = $element.attr(idAttr); var lpbSettings = settings.lpBuilder[id]; - $element.once('lpb-enabled').each(function () { + $element.each(function () { $element.data('drake', initDragAndDrop($element, lpbSettings)); attachEventListeners($element, lpbSettings); $element.trigger('lpb-builder:init'); @@ -417,4 +418,4 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } lpDialogInterval = setInterval(repositionDialog.bind(null, lpDialogInterval), 500); } }); -})(jQuery, Drupal, Drupal.debounce, dragula); \ No newline at end of file +})(jQuery, Drupal, Drupal.debounce, dragula, once); \ No newline at end of file diff --git a/layout_paragraphs.libraries.yml b/layout_paragraphs.libraries.yml index ff1f2e0241ec3473075e7db9d5acd2bc886d2228..0d5794b1753ec3d957fcb4ce0033e26e7c5d970e 100644 --- a/layout_paragraphs.libraries.yml +++ b/layout_paragraphs.libraries.yml @@ -35,7 +35,7 @@ builder: dependencies: - layout_paragraphs/dragula - core/jquery - - core/jquery.once + - core/once - core/drupal.dialog - core/drupal.dialog.ajax - core/drupal.ajax @@ -49,7 +49,7 @@ builder_form: js/builder-form.js: {} dependencies: - core/jquery - - core/jquery.once + - core/once layout_select: css: