Baseline template for Modal Component

examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/button/_cq_template.xml

@@ -3,4 +3,4 @@
     jcr:primaryType="nt:unstructured"
     jcr:title="Button"
     fieldType="button"
-    dorExclusion="true"/>
+    dorExclusion="true"/>

examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/modal/.content.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          jcr:primaryType="cq:Component"
+          jcr:title="Adaptive Form Modal"
+          jcr:description="Add an interactive button for opening a panel container in dialog."
+          sling:resourceSuperType="core/fd/components/form/modal/v1/modal"
+          componentGroup="Core Components Examples - Adaptive Form"/>

examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/modal/_cq_template.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+          jcr:primaryType="nt:unstructured"
+          jcr:title="Modal"
+          fieldType="panel">
+    <panelcontainer
+            fieldType="panel"
+            jcr:primaryType="nt:unstructured"
+            jcr:title="Panel"
+            sling:resourceType="core/fd/components/form/panelcontainer/v1/panelcontainer"
+            name="panelcontainer">
+        <fd:rules
+                jcr:primaryType="nt:unstructured"
+                validationStatus="valid"
+                visible="false()"/>
+        <fd:events
+                jcr:primaryType="nt:unstructured"/>
+    </panelcontainer>
+    <button
+            fieldType="button"
+            jcr:primaryType="nt:unstructured"
+            jcr:title="Open Modal"
+            sling:resourceType="core/fd/components/form/button/v1/button">
+        <fd:rules
+                jcr:primaryType="nt:unstructured"
+                validationStatus="valid"/>
+
+        <fd:events
+                jcr:primaryType="nt:unstructured"
+                click="dispatchEvent(panelcontainer, 'custom:setProperty', {visible : true()})"/>
+
+    </button>
+</jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/.content.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/.content.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="nt:unstructured">
+</jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/.content.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2022 Adobe
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          cq:icon="article"
+          cq:isContainer="{Boolean}true"
+          jcr:description="Modal"
+          jcr:primaryType="cq:Component"
+          jcr:title="Adaptive Form Modal (v1)"
+          sling:resourceSuperType="wcm/foundation/components/responsivegrid"
+          componentGroup=".core-adaptiveform"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_template.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+          jcr:primaryType="nt:unstructured"
+          jcr:title="Modal"
+          fieldType="panel">
+    <panelcontainer
+            fieldType="panel"
+            jcr:primaryType="nt:unstructured"
+            jcr:title="Panel"
+            sling:resourceType="core/fd/components/form/panelcontainer/v1/panelcontainer"
+            name="panelcontainer">
+        <fd:rules
+                jcr:primaryType="nt:unstructured"
+                validationStatus="valid"
+                visible="false()"/>
+        <fd:events
+                jcr:primaryType="nt:unstructured"/>
+    </panelcontainer>
+    <button
+            fieldType="button"
+            jcr:primaryType="nt:unstructured"
+            jcr:title="Open Modal"
+            sling:resourceType="core/fd/components/form/button/v1/button">
+        <fd:rules
+                jcr:primaryType="nt:unstructured"
+                validationStatus="valid"/>
+
+        <fd:events
+                jcr:primaryType="nt:unstructured"
+                click="dispatchEvent(panelcontainer, 'custom:setProperty', {visible : true()})"/>
+
+    </button>
+</jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/.content.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/.content.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="cq:ClientLibraryFolder"
+    allowProxy="{Boolean}true"
+    categories="[core.forms.components.modal.v1.runtime]"
+    dependencies="[core.forms.components.runtime.base,core.forms.components.container.v2.runtime, core.forms.components.panelcontainer.v1.runtime]"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/css.txt

@@ -0,0 +1,18 @@
+###############################################################################
+# Copyright 2022 Adobe
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+###############################################################################
+
+#base=css
+modalview.css

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/css/modalview.css

@@ -0,0 +1,64 @@
+/*******************************************************************************
+ * Copyright 2024 Adobe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+
+.cmp-adaptiveform-modal__panel-container {
+    /* ... */
+    z-index: 100; /* Make sure the panel container is above the overlay */
+    transition: opacity 0.3s, transform 0.3s;
+    opacity: 0;
+    transform: translateY(-10%);
+}
+
+.cmp-adaptiveform-modal__panel-container--hidden {
+    display: none;
+}
+
+.cmp-adaptiveform-modal__panel-container--visible {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.cmp-adaptiveform-modal__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
+    z-index: 99; /* Make sure the overlay is below the panel container */
+}
+
+.cmp-adaptiveform-modal__overlay--hidden {
+    display: none;
+}
+
+.cmp-adaptiveform-modal__overlay--visible {
+    display: block;
+}
+
+.cmp-adaptiveform-modal__close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: #f1f1f1;
+    color: #333;
+    border: none;
+    font-size: 24px;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 50%;
+}

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/js.txt

@@ -0,0 +1,18 @@
+###############################################################################
+# Copyright 2022 Adobe
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+###############################################################################
+
+#base=js
+modalview.js

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/js/modalview.js

@@ -0,0 +1,119 @@
+/*******************************************************************************
+ * Copyright 2024 Adobe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+(function () {
+
+    class Modal extends FormView.FormPanel {
+        static NS = FormView.Constants.NS;
+        static IS = "adaptiveFormModal";
+        static bemBlock = 'cmp-adaptiveform-modal';
+        static selectors = {
+            self: "[data-" + this.NS + '-is="' + this.IS + '"]',
+            label: `.${Modal.bemBlock}__label`,
+            description: `.${Modal.bemBlock}__longdescription`,
+            qm: `.${Modal.bemBlock}__questionmark`,
+            tooltipDiv: `.${Modal.bemBlock}__shortdescription`,
+            closeButton: `.${Modal.bemBlock}__close`,
+            openButton: `.${Modal.bemBlock}__button`,
+            panelContainer: `.${Modal.bemBlock}__panel-container`,
+            overlay: `.${Modal.bemBlock}__overlay`
+        };
+
+        constructor(params) {
+            super(params);
+            this.setupEventListeners();
+            this.#handleScroll()
+        }
+
+        showModal() {
+            var overlay = this.element.querySelector(this.constructor.selectors.overlay);
+            overlay.classList.remove(`${this.constructor.bemBlock}__overlay--hidden`);
+            overlay.classList.add(`${this.constructor.bemBlock}__overlay--visible`);
+
+            // Prevent background scrolling
+            document.body.style.overflow = 'hidden';
+        }
+
+        hideModal() {
+            var overlay = this.element.querySelector(this.constructor.selectors.overlay);
+            overlay.classList.remove(`${this.constructor.bemBlock}__overlay--visible`);
+            overlay.classList.add(`${this.constructor.bemBlock}__overlay--hidden`);
+
+            // Allow background scrolling
+            document.body.style.overflow = 'auto';
+        }
+
+
+        setupEventListeners() {
+            var openButton = this.element.querySelector(Modal.selectors.openButton);
+            var closeButton = this.element.querySelector(Modal.selectors.closeButton);
+
+            // Open the modal when the open button is clicked
+            openButton.addEventListener('click', () => {
+                this.showModal();
+            });
+
+            // Close the modal when the close button is clicked
+            closeButton.addEventListener('click', () => {
+                this.hideModal();
+            });
+
+            // Close the modal when the 'Esc' key is pressed
+            document.addEventListener('keydown', (event) => {
+                if (event.key === 'Escape') {
+                    this.hideModal();
+                }
+            });
+        }
+
+        #handleScroll() {
+            var panelContainer = this.element.querySelector(this.constructor.selectors.panelContainer);
+
+            // Add scroll to the panel container
+            panelContainer.style.overflowY = 'auto';
+            panelContainer.style.maxHeight = '100vh';
+        }
+
+        getWidget() {
+            return null;
+        }
+
+        getDescription() {
+            return this.element.querySelector(TermsAndConditions.selectors.description);
+        }
+
+        getLabel() {
+            return null;
+        }
+
+        getErrorDiv() {
+            return null;
+        }
+
+        getTooltipDiv() {
+            return this.element.querySelector(Modal.selectors.tooltipDiv);
+        }
+
+        getQuestionMarkDiv() {
+            return this.element.querySelector(Modal.selectors.qm);
+        }
+
+
+    }
+
+    FormView.Utils.setupField(({element, formContainer}) => {
+        return new Modal({element, formContainer})
+    }, Modal.selectors.self);
+})();