diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/.content.xml new file mode 100644 index 0000000000..5f8ea308be --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/.content.xml @@ -0,0 +1,5 @@ + + diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/.content.xml new file mode 100644 index 0000000000..bb56568646 --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/.content.xml @@ -0,0 +1,25 @@ + + + + + + diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.140.100.png b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.140.100.png new file mode 100644 index 0000000000..7e350c86b0 Binary files /dev/null and b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.140.100.png differ diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.140.100.png.dir/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.140.100.png.dir/.content.xml new file mode 100644 index 0000000000..34d9f64840 --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.140.100.png.dir/.content.xml @@ -0,0 +1,7 @@ + + + + diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.319.319.png b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.319.319.png new file mode 100644 index 0000000000..c3d97cde70 Binary files /dev/null and b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.319.319.png differ diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.319.319.png.dir/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.319.319.png.dir/.content.xml new file mode 100644 index 0000000000..34d9f64840 --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.319.319.png.dir/.content.xml @@ -0,0 +1,7 @@ + + + + diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.48.48.png b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.48.48.png new file mode 100644 index 0000000000..8aae24bb92 Binary files /dev/null and b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.48.48.png differ diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.48.48.png.dir/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.48.48.png.dir/.content.xml new file mode 100644 index 0000000000..34d9f64840 --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.48.48.png.dir/.content.xml @@ -0,0 +1,7 @@ + + + + diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/modal/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/modal/.content.xml new file mode 100644 index 0000000000..a0ac99e384 --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/modal/.content.xml @@ -0,0 +1,3 @@ + + diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/modal/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/modal/basic/.content.xml new file mode 100644 index 0000000000..1ba7dd3dca --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/modal/basic/.content.xml @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml index 8786fcc5dd..5357a799ae 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml @@ -5,4 +5,4 @@ cssProcessor="[default:none,min:none]" jsProcessor="[default:none,min:none]" categories="[core.forms.components.runtime.all]" - embed="[core.forms.components.runtime.base,core.forms.components.container.v2.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v1.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v1.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v2.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime]"/> + embed="[core.forms.components.runtime.base,core.forms.components.container.v2.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v1.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v1.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v2.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime,core.forms.components.modal.v1.runtime]"/> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/README.md new file mode 100644 index 0000000000..b329d4423d --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/README.md @@ -0,0 +1,71 @@ + +Adaptive Form Modal (v1) +==== + +## Introduction + +The Modal component is a part of the Adobe Forms Core Components library. It provides a dialog box or popup window that is displayed on top of the current page. + +## Features + +- Display content in a layer above the current page +- Close the modal when the Escape key is pressed +- Make the background inactive when the modal is open + +### Edit Dialog Properties +The following properties are written to JCR for this Form Panel component and are expected to be available as `Resource` properties: + +1. `./jcr:title` - defines the label to use for this field +2. `./hideTitle` - if set to `true`, the label of this field will be hidden +3. `./name` - defines the name of the field, which will be submitted with the form data +4. `./description` - defines a help message that can be rendered in the field as a hint for the user +5. `./readOnly` - if set to `true`, the filed will be read only + + +## Client Libraries +The component provides a `core.forms.components.termsandconditions.v1.runtime` client library category that contains the Javascript runtime for the component. +It should be added to a relevant site client library using the `embed` property. + + +## BEM Description +``` +BLOCK cmp-adaptiveform-modal + ELEMENT cmp-adaptiveform-modal__dialog + ELEMENT cmp-adaptiveform-modal__panel-container + MODIFIER cmp-adaptiveform-modal__panel-container--hidden + ELEMENT cmp-adaptiveform-modal__overlay + ELEMENT cmp-adaptiveform-modal__label-container + ELEMENT cmp-adaptiveform-modal__label + ELEMENT cmp-adaptiveform-modal__questionmark + ELEMENT cmp-adaptiveform-modal__shortdescription + ELEMENT cmp-adaptiveform-modal__longdescription +``` + +## JavaScript Data Attribute Bindings + +The following attributes must be added for the initialization of the text-input component in the form view: +1. `data-cmp-is="adaptiveFormModal"` +2. `data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"` + + +The following are optional attributes that can be added to the component in the form view: +1. `data-cmp-valid` having a boolean value to indicate whether the field is currently valid or not +2. `data-cmp-required` having a boolean value to indicate whether the field is currently required or not +3. `data-cmp-readonly` having a boolean value to indicate whether the field is currently readonly or not +4. `data-cmp-active` having a boolean value to indicate whether the field is currently active or not +5. `data-cmp-visible` having a boolean value to indicate whether the field is currently visible or not +6. `data-cmp-enabled` having a boolean value to indicate whether the field is currently enabled or not diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_design_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_design_dialog/.content.xml new file mode 100644 index 0000000000..3838032ab5 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_design_dialog/.content.xml @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_dialog/.content.xml new file mode 100644 index 0000000000..8afe73376f --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_dialog/.content.xml @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + <richTextTitle + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/richTextTitle"/> + <isTitleRichText + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/isTitleRichText"/> + <hideTitle + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/hideTitle"/> + <visible + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/visible"/> + <visible-typehint + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/visible-typehint"/> + <enabled + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/enabled"/> + <enabled-typehint + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/enabled-typehint"/> + <readonly + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/readonly"/> + <readonly-typehint + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/readonly-typehint"/> + </items> + </column> + </items> + </columns> + </items> + </basic> + <help + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/help"/> + <accessibility + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/panelcontainer/v1/panelcontainer/cq:dialog/content/items/tabs/items/accessibility"/> + <dor + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/dor"/> + <advanced + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="/mnt/overlay/fd/af/authoring/dialog/customProperties/cq:dialog/advanced"/> + </items> + </tabs> + </items> + </content> +</jcr:root> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_editConfig.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_editConfig.xml new file mode 100644 index 0000000000..2781716db4 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_editConfig.xml @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="UTF-8"?> +<jcr:root xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" + jcr:primaryType="cq:EditConfig" + cq:actions="[editannotate,-,copymove,delete,-,insert,-]" + cq:dialogMode="floating" + cq:layout="editbar" + cq:disableTargeting="{Boolean}true"> + <cq:actionConfigs jcr:primaryType="nt:unstructured"> + <editexpression + jcr:primaryType="nt:unstructured" + handler="CQ.FormsCoreComponents.editorhooks.openRuleEditor" + order="after CONFIGURE" + icon="bidRule" + text="Edit Rules"/> + <replace + jcr:primaryType="nt:unstructured" + condition="CQ.FormsCoreComponents.editorhooks.isReplaceable" + handler="CQ.FormsCoreComponents.editorhooks.replace" + icon="shuffle" + text="Replace"/> + <qualifiedName + jcr:primaryType="nt:unstructured" + handler="CQ.FormsCoreComponents.editorhooks.viewQualifiedName" + icon="viewSOMExpression" + text="View Qualified Name"/> + </cq:actionConfigs> + <cq:inplaceEditing + jcr:primaryType="cq:InplaceEditingConfig" + active="{Boolean}true" + configPath="inplaceEditingConfig" + editorType="plaintext"> + <inplaceEditingConfig + jcr:primaryType="nt:unstructured" + editElementQuery="label:first" + textPropertyName="jcr:title"/> + </cq:inplaceEditing> +</jcr:root> \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_template.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_template.xml index 5658ccbe59..c0fb7e4e63 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_template.xml +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_template.xml @@ -28,6 +28,5 @@ <fd:events jcr:primaryType="nt:unstructured" click="dispatchEvent(panelcontainer, 'custom:setProperty', {visible : true()})"/> - </button> </jcr:root> \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/css/modalview.css b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/css/modalview.css deleted file mode 100644 index 18a5f6141d..0000000000 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/css/modalview.css +++ /dev/null @@ -1,64 +0,0 @@ -/******************************************************************************* - * 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%; -} diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/js/modalview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/js/modalview.js deleted file mode 100644 index 57bfd6a464..0000000000 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/js/modalview.js +++ /dev/null @@ -1,119 +0,0 @@ -/******************************************************************************* - * 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); -})(); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/.content.xml similarity index 79% rename from ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/.content.xml rename to ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/.content.xml index cb54834104..dc4bbcb4d3 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/.content.xml +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/.content.xml @@ -3,4 +3,4 @@ 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]"/> + dependencies="[core.forms.components.runtime.base,core.forms.components.container.v2.runtime]"/> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/css.txt b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/css.txt similarity index 95% rename from ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/css.txt rename to ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/css.txt index 46ae9ad06a..b68ef0c202 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/css.txt +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/css.txt @@ -1,5 +1,5 @@ ############################################################################### -# Copyright 2022 Adobe +# Copyright 2023 Adobe # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. @@ -15,4 +15,4 @@ ############################################################################### #base=css -modalview.css +modal.css diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/css/modal.css b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/css/modal.css new file mode 100644 index 0000000000..0904e17619 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/css/modal.css @@ -0,0 +1,47 @@ +/******************************************************************************* + * 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__dialog{ + +} + +.cmp-adaptiveform-modal__panel-container { + +} + +.cmp-adaptiveform-modal__panel-container--hidden { + +} + +.cmp-adaptiveform-modal__overlay { + +} + +.cmp-adaptiveform-modal__errormessage{ + +} + +.cmp-adaptiveform-modal__label-container{ + +} + +.cmp-adaptiveform-modal__longdescription { + +} + +.cmp-adaptiveform-modal__shortdescription { + +} diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/js.txt b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/js.txt similarity index 96% rename from ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/js.txt rename to ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/js.txt index 6ceca79974..f108ec7a86 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/runtime/js.txt +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/js.txt @@ -1,5 +1,5 @@ ############################################################################### -# Copyright 2022 Adobe +# Copyright 2023 Adobe # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/js/modalview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/js/modalview.js new file mode 100644 index 0000000000..4fbeee7a9f --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/clientlibs/site/js/modalview.js @@ -0,0 +1,95 @@ +/******************************************************************************* + * 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`, + closePopupButton: `.${Modal.bemBlock}__close-button`, + dialog: `.${Modal.bemBlock}__dialog`, + panelContainer: `.${Modal.bemBlock}__panel-container`, + panelContainerHidden: `.${Modal.bemBlock}__panel-container--hidden`, + button: `.${Modal.bemBlock}__button`, + overlay: `.${Modal.bemBlock}__overlay` + }; + + constructor(params) { + super(params); + this.dialog = this.element.querySelector(Modal.selectors.dialog); + this.panelContainer = this.element.querySelector(Modal.selectors.panelContainer); + this.button = this.element.querySelector(Modal.selectors.button); + this.button.addEventListener('click', this.openModal.bind(this)); + document.addEventListener('keydown', this.handleKeyDown.bind(this)); + this.overlay = this.element.querySelector(Modal.selectors.overlay); + } + + openModal() { + this.dialog.style.display = 'block'; + this.panelContainer.classList.remove(Modal.selectors.panelContainerHidden); + document.body.classList.add(Modal.selectors.overlay.replace('.', '')); + } + + closeModal() { + this.dialog.style.display = 'none'; + this.panelContainer.classList.add(Modal.selectors.panelContainerHidden); + document.body.classList.remove(Modal.selectors.overlay.replace('.', '') + + ); + } + + handleKeyDown(event) { + if (event.key === 'Escape') { + this.closeModal(); + } + } + + getWidget() { + return null; + } + + getDescription() { + return this.element.querySelector(Modal.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); +})(); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/modal.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/modal.html index 16969f00c6..15782461c4 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/modal.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/modal.html @@ -29,21 +29,20 @@ data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component" id="${panel.id}" title="${panel.tooltipVisible ? '' : panel.tooltipText}" - data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}" - role="dialog"> + data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"> <div class="cmp-adaptiveform-modal__label-container"> <div data-sly-call="${label.label @componentId=widgetId, labelValue=panel.label.value, labelVisible=panel.label.visible, bemBlock='cmp-adaptiveform-modal'}" data-sly-unwrap></div> <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-adaptiveform-modal'}" data-sly-unwrap></div> </div> - <div class="cmp-adaptiveform-modal__overlay cmp-adaptiveform-modal__overlay--hidden" role="dialog" > - <div class="cmp-adaptiveform-modal__panel-container cmp-adaptiveform-modal__panel-container--hidden" data-sly-resource="${'panelcontainer'}"> - <button class="cmp-adaptiveform-modal__close">Close</button> + <div role="dialog"> + <div class="${wcmmode.preview || wcmmode.disabled ? 'cmp-adaptiveform-modal__dialog' : ''}"> + <div class="cmp-adaptiveform-modal__panel-container" data-sly-resource="${'panelcontainer'}"></div> </div> - <div class="cmp-adaptiveform-modal__button" data-sly-resource="${'button'}"></div> </div> + <div class="cmp-adaptiveform-modal__button" data-sly-resource="${'button'}"></div> <div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-adaptiveform-modal'}" data-sly-unwrap></div> <div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-adaptiveform-modal'}" data-sly-unwrap></div> -</div> \ No newline at end of file +</div>