Review comments incorporated

adobecom · May 8, 2024 · 3c1d0a5 · 3c1d0a5
1 parent 8caf4b3
commit 3c1d0a5
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 57 deletions.
diff --git a/blocks/event-info-component/event-info-component.js b/blocks/event-info-component/event-info-component.js
@@ -1,5 +1,5 @@
 import { getLibs } from '../../scripts/utils.js';
-import { getIcon, handlize, generateToolTip } from '../../utils/utils.js';
+import { getIcon, handlize, generateToolTip, addRepeater } from '../../utils/utils.js';
 
 const { createTag } = await import(`${getLibs()}/utils/utils.js`);
 
@@ -38,14 +38,8 @@ async function decorateField(row, type = 'text') {
   row.innerHTML = '';
   component.append(input, attrTextEl);
 
-  // TODO Remove after validation.
-  const deleteButton = createTag('div', { class: 'delete-button' });
-  deleteButton.append(getIcon('delete'));
-  deleteButton.classList.add('hidden');
-
   const wrapper = createTag('div', { class: 'info-field-wrapper' });
   wrapper.append(component);
-  wrapper.append(deleteButton);
   row.append(wrapper);
 }
 
@@ -106,21 +100,6 @@ function decorateDateTimeFields(row) {
   });
 }
 
-function addRepeater(element, title) {
-  element.lastChild.setAttribute('repeatIdx', 0);
-
-  const tag = createTag('div');
-  tag.classList.add('repeater-element');
-
-  const heading = createTag('h3', { class: 'repeater-element-title' }, title);
-  tag.append(heading);
-
-  const plusIcon = getIcon('add-circle');
-  tag.append(plusIcon);
-
-  element.append(tag);
-}
-
 export default function init(el) {
   el.classList.add('form-component');
   generateToolTip(el);
@@ -129,13 +108,9 @@ export default function init(el) {
   rows.forEach(async (r, i) => {
     if (i === 1) {
       await decorateField(r, 'text');
-      // Remove after view.
-      addRepeater(r, 'Add event title');
     }
     if (i === 2) {
       await decorateField(r, 'textarea');
-      // Remove after view.
-      addRepeater(r, 'Add event description');
     }
     if (i === 3) decorateDateTimeFields(r);
   });

diff --git a/blocks/form-handler/controllers/event-info-component-controller.js b/blocks/form-handler/controllers/event-info-component-controller.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 import { getLibs } from '../../../scripts/utils.js';
-import { getMappedInputsOutput } from './share-controller.js';
+import { getMappedInputsOutput, initRepeater, initRemove } from './share-controller.js';
 
 const { createTag } = await import(`${getLibs()}/utils/utils.js`);
 
@@ -283,36 +283,6 @@ export default function init(component) {
   initRemove(component);
 }
 
-function initRepeater(component) {
-  const repeaters = component.querySelectorAll('.repeater-element');
-  repeaters.forEach((tRepeater) => {
-    const vanillaNode = tRepeater.previousElementSibling.cloneNode(true);
-    tRepeater.addEventListener('click', (event) => {
-      const clonedNode = vanillaNode.cloneNode(true);
-      const prevNode = event.currentTarget.previousElementSibling;
-      clonedNode.setAttribute('repeatIdx', parseInt(prevNode.getAttribute('repeatIdx'), 10) + 1);
-
-      // Reset delete icon state and add listener.
-      const deleteIcon = clonedNode.querySelector('.delete-button');
-      deleteIcon.classList.remove('hidden');
-      setRemoveEventListener(deleteIcon);
-
-      prevNode.after(clonedNode);
-    });
-  });
-}
-
-function setRemoveEventListener(removeElement) {
-  removeElement.addEventListener('click', (event) => {
-    event.currentTarget.parentElement.remove();
-  });
-}
-
-function initRemove(component) {
-  const removeIcons = component.querySelectorAll('.delete-button');
-  removeIcons.forEach((removeIcon) => setRemoveEventListener(removeIcon));
-}
-
 export function onResume(component, eventObj, inputMap) {
   inputMap.forEach((input) => {
     const element = component.querySelector(input.selector);

diff --git a/blocks/form-handler/controllers/share-controller.js b/blocks/form-handler/controllers/share-controller.js
@@ -139,3 +139,33 @@ export default function makeFileInputDropZone(inputWrapper) {
     handleImageFiles(inputWrapper, files);
   });
 }
+
+export function initRepeater(component) {
+  const repeaters = component.querySelectorAll('.repeater-element');
+  repeaters.forEach((element) => {
+    const vanillaNode = element.previousElementSibling.cloneNode(true);
+    element.addEventListener('click', (event) => {
+      const clonedNode = vanillaNode.cloneNode(true);
+      const prevNode = event.currentTarget.previousElementSibling;
+      clonedNode.setAttribute('repeatIdx', parseInt(prevNode.getAttribute('repeatIdx'), 10) + 1);
+
+      // Reset delete icon state and add listener.
+      const deleteIcon = clonedNode.querySelector('.delete-button');
+      deleteIcon.classList.remove('hidden');
+      setRemoveEventListener(deleteIcon);
+
+      prevNode.after(clonedNode);
+    });
+  });
+}
+
+function setRemoveEventListener(removeElement) {
+  removeElement.addEventListener('click', (event) => {
+    event.currentTarget.parentElement.remove();
+  });
+}
+
+export function initRemove(component) {
+  const removeIcons = component.querySelectorAll('.delete-button');
+  removeIcons.forEach((removeIcon) => setRemoveEventListener(removeIcon));
+}
diff --git a/utils/utils.js b/utils/utils.js
@@ -61,3 +61,18 @@ export function getIcon(tag) {
 
   return img;
 }
+
+export function addRepeater(element, title) {
+  element.lastChild.setAttribute('repeatIdx', 0);
+
+  const tag = createTag('div');
+  tag.classList.add('repeater-element');
+
+  const heading = createTag('h3', { class: 'repeater-element-title' }, title);
+  tag.append(heading);
+
+  const plusIcon = getIcon('add-circle');
+  tag.append(plusIcon);
+
+  element.append(tag);
+}