Form and cta in decent shape

Esri · Dec 17, 2024 · 6872fb8 · 6872fb8
1 parent b4ae2b2
commit 6872fb8
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 87 deletions.
diff --git a/eds/blocks/call-to-action/call-to-action.css b/eds/blocks/call-to-action/call-to-action.css
@@ -10,42 +10,53 @@
   display: flex;
   inline-size: 99%;
   position: relative;
-}
-
-.call-to-action.fragment {
-  /* to be addressed on a follow-up PR */
-  display: block;
-}
 
-.call-to-action > div {
-  display: flex;
-  inline-size: 100%;
-}
+  > div {
+    display: flex;
+    inline-size: 100%;
 
-.call-to-action > div > div {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  block-size: var(--space-56);
-  border-inline-end: 0.01rem solid var(--calcite-ui-border-1);
-}
+    > div {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+      block-size: var(--space-56);
+      border-inline-end: 0.01rem solid var(--calcite-ui-border-1);
+      margin-inline-end: -0.01rem;
 
-.call-to-action > div > div:last-child {
-  border-inline-end: none;
-}
+      &:last-child {
+        border-inline-end: none;
+        margin-inline-end: 0;
+      }
+    }
+  }
 
-.call-to-action h2 {
-  font-size: var(--font-3);
-  font-weight: var(--calcite-font-weight-normal);
+  h2 {
+    font-size: var(--font-3);
+    font-weight: var(--calcite-font-weight-normal);
+  }
 }
 
 p.button-container .button {
   margin-inline-end: 0;
   margin-block-start: 0;
 }
 
+.call-to-action.fragment {
+  /* to be addressed on a follow-up PR */
+  inline-size: initial;
+  display: flex;
+
+  & > div {
+    inline-size: initial;
+  }
+
+  .cards ul {
+    inline-size: 50vw;
+  }
+}
+
 @media (width <= 768px) {
   .call-to-action > div {
     align-items: center;
@@ -56,7 +67,11 @@ p.button-container .button {
     inline-size: 100%;
     margin-block: var(--space-10);
     border-inline-end: none;
+    margin-inline-end: 0;
     border-block-end: 0.01rem solid var(--calcite-ui-border-1);
+
+    /* expand height to allow for its contents */
+    /* block-size: auto; */
   }
 
   .call-to-action > div > div:last-child {

diff --git a/eds/blocks/cards/cards.js b/eds/blocks/cards/cards.js
@@ -3,7 +3,6 @@ import { div, domEl } from '../../scripts/dom-helpers.js';
 
 function processSimpleCard(listElem) {
   const cardBody = listElem.querySelector('.cards-card-body');
-  console.log('list elem', listElem, cardBody, cardBody.outerHTML);
   const anchorEl = cardBody.querySelector('a');
   anchorEl.parentElement.remove();
   const cardBodyContent = div(

diff --git a/eds/blocks/form/form.js b/eds/blocks/form/form.js
@@ -6,51 +6,11 @@ import {
   getMetadata,
 } from '../../scripts/aem.js';
 
-export default async function decorate(block) {
-  block.closest('.section').classList.add('calcite-mode-dark', 'dark');
-  block.classList.add('calcite-mode-dark', 'dark');
-  const config = readBlockConfig(block);
-  const divId = getMetadata('formdivid') || config.divid;
-  config.divid = divId;
-
-  const formDiv = div({
-    id: divId,
-    class: 'one-form',
-  });
-  if (block.classList.contains('card-modal')) {
-    delete config.cardcontent;
-    // we need to find it "again" because the html is not preserved in readBlockConfig
-    const cardContent = [...block.querySelectorAll(':scope > div')]
-      .find((el) => el.firstElementChild.textContent === 'cardContent')
-      .lastElementChild;
-    const cardModalContent = a({ class: 'card-modal-content' }, cardContent);
-    cardModalContent.addEventListener('click', () => {
-      block.classList.add('modal-active');
-      window.openOneFormModal();
-    });
-    block.replaceChildren(
-      formDiv,
-      cardModalContent,
-    );
-  } else {
-    block.replaceChildren(formDiv);
-  }
-
-  // TODO get card if modals
-
-  await Promise.all([
-    loadCSS('https://webapps-cdn.esri.com/CDN/one-form/one-form.css'),
-    loadScript('https://webapps-cdn.esri.com/CDN/one-form/one-form.js'),
-  ]);
-
-  config.aemEditMode = false;
-
+function getFormProps(config) {
   const baseFormProps = {
     aemFieldServiceBasePath: 'https://assets.esri.com/content/experience-fragments/esri-sites/en-us/site-settings/one-form-admin/master',
     aemEditMode: 'false',
     mode: 'basic-progressive-form',
-    formOpensInAModal: 'true',
-    modalTitle: '',
     leftAligned: '',
     darkMode: true, // metadata.mode === 'dark',
     transparentBackground: '',
@@ -87,30 +47,69 @@ export default async function decorate(block) {
     emailSubject: '',
     emailBody: '',
   };
-  // merge config and baseFormProps
   const formProps = { ...baseFormProps, ...config };
+  return formProps;
+}
 
-  console.log('formProps', formProps);
+export default async function decorate(block) {
+  block.closest('.section').classList.add('calcite-mode-dark', 'dark');
+  block.classList.add('calcite-mode-dark', 'dark');
+  const config = readBlockConfig(block);
+  const divId = getMetadata('formdivid') || config.divid;
+  config.divid = divId;
 
-  // const form = window.oneForm.attachToForm(divId);
-  // form.on('load', (formApi) => {
-  //   //Perform API actions here
-  //   console.log('form loaded');
-  // });
+  const isModal = block.classList.contains('card-modal');
+
+  if (isModal) {
+    config.formOpensInAModal = 'true';
+    // modalTitle: '',
+  }
 
-  // workaround for initOneForm requiring the form div to be in the DOM,
-  // which it is not when loaded as a fragment
-  const observer = new MutationObserver((mutationsList) => {
-    mutationsList.forEach((mutation) => {
-      if (mutation.type === 'childlist') {
-        console.log('A child node has been added or removed.', document.getElementById(divId));
-      }
-      if (mutation.type === 'childList' && document.getElementById(divId)) {
-        const initResult = window.initOneForm(divId, formProps);
-        console.log('init result', initResult);
-        observer.disconnect();
-      }
+  const formProps = getFormProps(config);
+
+  const loadOneForm = Promise.all([
+    loadCSS('https://webapps-cdn.esri.com/CDN/one-form/one-form.css'),
+    loadScript('https://webapps-cdn.esri.com/CDN/one-form/one-form.js'),
+  ]);
+  const formDiv = div({
+    id: divId,
+    class: 'one-form',
+  });
+  if (isModal) {
+    delete config.cardcontent;
+    // we need to find it "again" because the html is not preserved in readBlockConfig
+    const cardContent = [...block.querySelectorAll(':scope > div')]
+      .find((el) => el.firstElementChild.textContent === 'cardContent')
+      .lastElementChild;
+    const cardModalContent = a({ class: 'card-modal-content' }, cardContent);
+    cardModalContent.addEventListener('click', () => {
+      block.classList.add('modal-active');
+      window.openOneFormModal();
     });
+    block.replaceChildren(
+      formDiv,
+      cardModalContent,
+    );
+  } else {
+    block.replaceChildren(formDiv);
+  }
+
+  loadOneForm.then(() => {
+    if (document.getElementById(divId)) {
+      window.initOneForm(divId, formProps);
+    } else { // it is being loaded on a fragment
+      const observer = new MutationObserver((mutationsList) => {
+        mutationsList.forEach((mutation) => {
+          if (mutation.type === 'childList' && document.getElementById(divId)) {
+            window.initOneForm(divId, formProps);
+            observer.disconnect();
+          }
+        });
+      });
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    }
   });
-  observer.observe(document.body, { childList: true, subtree: true });
 }