From c552d44aeb3ba626eafcd07988407fc11414660a Mon Sep 17 00:00:00 2001
From: Justin Toupin <justin@atendesigngroup.com>
Date: Mon, 3 Feb 2025 10:45:35 -0700
Subject: [PATCH] Address feedback from @pixelwhip in MR.
---
js/builder.js | 135 +++++++++++++++++++++++++++++++-------------------
1 file changed, 83 insertions(+), 52 deletions(-)
diff --git a/js/builder.js b/js/builder.js
index fcc3292..2b0e7a6 100644
--- a/js/builder.js
+++ b/js/builder.js
@@ -68,7 +68,7 @@
*/
Drupal.layoutParagraphsUpdateOrder = (element) => {
const id = element.getAttribute('data-lpb-id');
- const order = [...element.querySelectorAll('.js-lpb-component')].map(
+ const order = Array.from(element.querySelectorAll('.js-lpb-component')).map(
(item) => {
return {
uuid: item.getAttribute('data-uuid'),
@@ -126,17 +126,17 @@
/**
* Updates move buttons to reflect current state.
- * @param {jQuery} $element The builder element.
+ * @param {HTMLElement} element The builder element.
*/
- function updateMoveButtons($element) {
+ function updateMoveButtons(element) {
const lpbBuilderElements = Array.from(
- $element[0].querySelectorAll('.js-lpb-component-list, .js-lpb-region'),
+ element.querySelectorAll('.js-lpb-component-list, .js-lpb-region'),
);
const lpbBuilderComponent = lpbBuilderElements.filter((el) =>
el.querySelector('.js-lpb-component'),
);
- $element[0].querySelectorAll('.lpb-up, .lpb-down').forEach((el) => {
+ element.querySelectorAll('.lpb-up, .lpb-down').forEach((el) => {
// Set the tabindex of the up and down arrows to 0.
el.setAttribute('tabindex', '0');
});
@@ -177,12 +177,12 @@
/**
* Updates the UI based on currently state.
- * @param {jQuery} $element The builder element.
+ * @param {HTMLElement} element The builder element.
*/
- function updateUi($element) {
- reorderComponents($element[0]);
- updateMoveButtons($element);
- hideEmptyRegionButtons($element[0]);
+ function updateUi(element) {
+ reorderComponents(element);
+ updateMoveButtons(element);
+ hideEmptyRegionButtons(element);
}
/**
@@ -342,7 +342,7 @@
function cancelNav($item) {
const $builder = $item.closest(`[${idAttr}]`);
$builder.find('.lpb-navigating-placeholder').replaceWith($item);
- updateUi($builder);
+ updateUi($builder[0]);
stopNav($item);
}
@@ -424,16 +424,43 @@
}
/**
- * API for adding Layout Paragraphs Sortable.js instances.
+ * Manages Layout Paragraphs sortable instances.
+ *
+ * Provides methods to add and retrieve instances by their Layout Paragraphs
+ * Layout Ids.
+ *
+ * @namespace Drupal.LPSortableInstances
*/
Drupal.LPSortableInstances = {
+ /**
+ * A map storing instances, keyed by their unique identifiers.
+ * Each key maps to a Set of instances.
+ *
+ * @type {Map<string, Set<any>>}
+ */
instances: new Map(),
+
+ /**
+ * Adds a sortable instance associated with a unique identifier.
+ * If the identifier does not exist, it initializes a new Set.
+ *
+ * @param {string} id - The unique identifier for the instance group.
+ * @param {*} instance - The instance to be added.
+ */
add(id, instance) {
if (!this.instances.has(id)) {
this.instances.set(id, new Set());
}
this.instances.get(id).add(instance);
},
+
+ /**
+ * Retrieves all instances associated with a layout instance.
+ * Returns an empty Set if no instances are found.
+ *
+ * @param {string} id - The unique identifier for the instance group.
+ * @return {Set<any>} A Set of instances associated with the identifier.
+ */
get(id) {
return this.instances.get(id) || new Set();
},
@@ -461,53 +488,57 @@
handle: '.lpb-drag',
animation: 150,
ghostClass: 'sortable-ghost',
- onChoose(evt) {
- evt.item.classList.add('is-dragging');
+ onChoose(event) {
+ event.item.classList.add('is-dragging');
element.classList.add('is-dragging');
element.classList.add('is-navigating');
},
- onUnchoose(evt) {
- evt.item.classList.remove('is-dragging');
+ onUnchoose(event) {
+ event.item.classList.remove('is-dragging');
element.classList.remove('is-dragging');
element.classList.remove('is-navigating');
- element
- .querySelectorAll('.sortable-to, .sortable-to--disallowed')
- .forEach((to) => {
- to.classList.remove('sortable-to');
- to.classList.remove('sortable-to--disallowed');
- });
+ Array.from(
+ element.querySelectorAll(
+ '.sortable-to, .sortable-to--disallowed',
+ ),
+ ).forEach((toElement) => {
+ toElement.classList.remove('sortable-to');
+ toElement.classList.remove('sortable-to--disallowed');
+ });
},
- onStart: (evt) => {
+ onStart: (event) => {
$(element).trigger('lpb-component:drag', [
- evt.item.getAttribute('data-uuid'),
+ event.item.getAttribute('data-uuid'),
]);
},
- onEnd: (evt) => {
+ onEnd: (event) => {
reorderComponents(element); // Trigger reordering logic.
$(element).trigger('lpb-component:drop', [
- evt.item.getAttribute('data-uuid'),
+ event.item.getAttribute('data-uuid'),
]);
},
- onMove: (evt) => {
- element.querySelectorAll('.sortable-to').forEach((to) => {
- to.classList.remove('sortable-to');
- to.classList.remove('sortable-to--disallowed');
- });
- if (evt.to) {
- evt.to.classList.add('sortable-to');
+ onMove: (event) => {
+ Array.from(element.querySelectorAll('.sortable-to')).forEach(
+ (toElement) => {
+ toElement.classList.remove('sortable-to');
+ toElement.classList.remove('sortable-to--disallowed');
+ },
+ );
+ if (event.to) {
+ event.to.classList.add('sortable-to');
}
// Item cannot be dragged into the destination.
if (
acceptsErrors(
settings,
- evt.dragged,
- evt.to,
- evt.from,
- evt.related,
+ event.dragged,
+ event.to,
+ event.from,
+ event.related,
).length > 0
) {
- if (evt.to) {
- evt.to.classList.add('sortable-to--disallowed');
+ if (event.to) {
+ event.to.classList.add('sortable-to--disallowed');
}
return false;
}
@@ -515,9 +546,9 @@
if (
movesErrors(
settings,
- evt.dragged,
- evt.from,
- evt.originalEvent.target,
+ event.dragged,
+ event.from,
+ event.originalEvent.target,
).length > 0
) {
return false;
@@ -635,23 +666,23 @@
attachUiElements($(el), settings);
});
- document.querySelectorAll('[data-lpb-id]').forEach((container) => {
- const id = container.getAttribute('data-lpb-id');
- const lpbSettings = settings.lpBuilder[id];
- initSortable(container, lpbSettings);
- });
+ Array.from(document.querySelectorAll('[data-lpb-id]')).forEach(
+ (container) => {
+ const id = container.getAttribute('data-lpb-id');
+ const lpbSettings = settings.lpBuilder[id];
+ initSortable(container, lpbSettings);
+ },
+ );
// Listen to relevant events and update UI.
once('lpb-events', '[data-lpb-id]').forEach((el) => {
$(el).on(
'lpb-builder:init.lpb lpb-component:insert.lpb lpb-component:update.lpb lpb-component:move.lpb lpb-component:drop.lpb lpb-component:delete.lpb',
(e) => {
- const $element = $(e.currentTarget);
- updateUi($element);
+ updateUi(e.currentTarget);
// Remove focus from all `+` buttons after a new component is inserted.
- const $addButton = $element.find('.lpb-btn--add:focus');
- if ($addButton.length) {
- $addButton.blur();
+ if (document.activeElement?.matches('.lpb-btn--add')) {
+ document.activeElement.blur();
}
},
);
--
GitLab