Form logic working (pending UI)

Author: alexcarol

eds/blocks/form/form.css

@@ -1,7 +1,29 @@
 .form.block {
   color: var(--calcite-ui-text-1);
+  background-color: var(--calcite-ui-foreground-1);
 
-  & > div:first-child {
+  &.card-modal {
+    & > div.one-form {
+      display: none;
+    }
+
+    &.modal-active > div.one-form {
+      display: block;
+    }
+
+    .card-modal-content {
+      p {
+        color: white;
+        background-color: black;
+      }
+
+      img {
+        filter: brightness(0) saturate(100%) invert(67%) sepia(69%) saturate(375%) hue-rotate(121deg) brightness(103%) contrast(86%);
+      }
+    }
+  }
+
+  & > div.one-form {
     inline-size: 1440px;
     max-inline-size: 96vw;
     margin: auto;

eds/blocks/form/form.js

@@ -1,4 +1,4 @@
-import { div } from '../../scripts/dom-helpers.js';
+import { div, a } from '../../scripts/dom-helpers.js';
 import {
   loadScript,
   loadCSS,
@@ -10,10 +10,33 @@ 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 divId = getMetadata('formdivid') || config.divid;
+  config.divid = divId;
 
-  block.replaceChildren(div({ id: 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'),
@@ -23,11 +46,10 @@ export default async function decorate(block) {
   config.aemEditMode = false;
 
   const baseFormProps = {
-    divId,
     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: '',
+    formOpensInAModal: 'true',
     modalTitle: '',
     leftAligned: '',
     darkMode: true, // metadata.mode === 'dark',
@@ -68,5 +90,27 @@ export default async function decorate(block) {
   // merge config and baseFormProps
   const formProps = { ...baseFormProps, ...config };
 
-  window.initOneForm(divId, formProps);
+  console.log('formProps', formProps);
+
+  // const form = window.oneForm.attachToForm(divId);
+  // form.on('load', (formApi) => {
+  //   //Perform API actions here
+  //   console.log('form loaded');
+  // });
+
+  // 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();
+      }
+    });
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
 }