Hamburger menu core component (#1331)

rajatofficial · rajatkhurana-adobe · web-flow · commit e6fa8bb0494f · 2024-10-17T16:22:46.000+05:30
* initial commit

* hamburger menu enhanced

* code enhancement

* test case fixed

* sorting issue fixed

* hamburger menu enhancements

* test cases added

* nesting support till level 3

* breadcrumbs and two way sync added

* test cases fixes

* nesting level changed and commented code removed

* text changed

* test case added

* code refactored

* test cases fixed

* accessibility improvements

* custom nesting level support added

* nesting n level addded

* nesting support removed along with css cleanup

* test cases fixed

* cases fixed

* SOC implemented

* hamburger menu code restructured

* BEM fixed

* review comments incorporated

* java doc version update

* review comments incorporated II

* review comments incorporated II

* review comments incorporated II

* code refactoring

* code refactoring

* test cases fixes after bem change

* test cases fixes after bem change

---------

Co-authored-by: Rajat Khurana &lt;rajatkhurana@adobe.com&gt;
diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v2/form/FormContainerImpl.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v2/form/FormContainerImpl.java
@@ -76,6 +76,7 @@ public class FormContainerImpl extends AbstractContainerImpl implements FormCont
     private static final String DOR_TEMPLATE_TYPE = "dorTemplateType";
     private static final String FD_SCHEMA_TYPE = "fd:schemaType";
     private static final String FD_SCHEMA_REF = "fd:schemaRef";
+    private static final String FD_IS_HAMBURGER_MENU_ENABLED = "fd:isHamburgerMenuEnabled";
     public static final String FD_FORM_DATA_ENABLED = "fd:formDataEnabled";
     public static final String FD_ROLE_ATTRIBUTE = "fd:roleAttribute";
 
@@ -95,6 +96,9 @@ public class FormContainerImpl extends AbstractContainerImpl implements FormCont
     @Nullable
     private String clientLibRef;
 
+    @ValueMapValue(name = FD_IS_HAMBURGER_MENU_ENABLED, injectionStrategy = InjectionStrategy.OPTIONAL)
+    private Boolean isHamburgerMenuEnabled = false;
+
     protected String contextPath = StringUtils.EMPTY;
     private boolean formDataEnabled = false;
 
@@ -257,6 +261,10 @@ public String getPrefillService() {
         return prefillService;
     }
 
+    public Boolean getIsHamburgerMenuEnabled() {
+        return isHamburgerMenuEnabled;
+    }
+
     @Override
     public String getRoleAttribute() {
         return roleAttribute;
@@ -317,6 +325,7 @@ public String getLanguageDirection() {
         if (StringUtils.isNotBlank(getSchemaRef())) {
             properties.put(FD_SCHEMA_REF, getSchemaRef());
         }
+        properties.put(FD_IS_HAMBURGER_MENU_ENABLED, getIsHamburgerMenuEnabled());
         // adding a custom property to know if form data is enabled
         // this is done so that an extra API call from the client can be avoided
         if (StringUtils.isNotBlank(getPrefillService()) ||
diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/FormContainer.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/FormContainer.java
@@ -145,6 +145,17 @@ default Boolean isEnabled() {
         return true;
     }
 
+    /**
+     * Returns the hamburger menu support
+     *
+     * @return the hamburger menu support of the form
+     * @since com.adobe.cq.forms.core.components.models.form 5.7.5
+     */
+    @JsonIgnore
+    default Boolean getIsHamburgerMenuEnabled() {
+        return false;
+    }
+
     @Override
     @JsonIgnore
     default Label getLabel() {
diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/package-info.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/package-info.java
@@ -35,7 +35,7 @@
  * </p>
  */
 
-@Version("5.7.4")
+@Version("5.7.5")
 package com.adobe.cq.forms.core.components.models.form;
 
 import org.osgi.annotation.versioning.Version;
diff --git a/bundles/af-core/src/test/java/com/adobe/cq/forms/core/components/internal/models/v1/form/FormContainerTest.java b/bundles/af-core/src/test/java/com/adobe/cq/forms/core/components/internal/models/v1/form/FormContainerTest.java
@@ -98,4 +98,11 @@ void testGetLanguageDirection() {
         assertEquals("ltr", formContainerMock.getLanguageDirection());
     }
 
+    @Test
+    void testIsHamburgerMenuEnabled() {
+        FormContainer formContainerMock = Mockito.mock(FormContainer.class);
+        Mockito.when(formContainerMock.getIsHamburgerMenuEnabled()).thenCallRealMethod();
+        assertEquals(false, formContainerMock.getIsHamburgerMenuEnabled());
+    }
+
 }
diff --git a/bundles/af-core/src/test/java/com/adobe/cq/forms/core/components/internal/models/v2/form/FormContainerImplTest.java b/bundles/af-core/src/test/java/com/adobe/cq/forms/core/components/internal/models/v2/form/FormContainerImplTest.java
@@ -484,4 +484,10 @@ void testNoFieldType() {
         FormContainer formContainer = Utils.getComponentUnderTest(PATH_FORM_WITHOUT_FIELDTYPE, FormContainer.class, context);
         assertEquals(FieldType.FORM.getValue(), formContainer.getFieldType());
     }
+
+    @Test
+    public void testGetIsHamburgerMenuEnabled() {
+        FormContainer formContainer = Utils.getComponentUnderTest(PATH_FORM_1, FormContainer.class, context);
+        assertFalse(Boolean.valueOf(formContainer.getIsHamburgerMenuEnabled().toString()));
+    }
 }
diff --git a/bundles/af-core/src/test/resources/form/formcontainer/exporter-formcontainerv2.json b/bundles/af-core/src/test/resources/form/formcontainer/exporter-formcontainerv2.json
@@ -12,6 +12,7 @@
       "fd:enableAutoSave":false
     },
     "fd:path": "/content/forms/af/demo/jcr:content/formcontainerv2",
+    "fd:isHamburgerMenuEnabled": false,
     "fd:schemaType": "BASIC",
     "fd:formDataEnabled": true,
     "customProp": "customPropValue",
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/formcontainer/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/formcontainer/.content.xml
@@ -0,0 +1,5 @@
+<?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" xmlns:rep="internal"
+    jcr:mixinTypes="[rep:AccessControllable]"
+    jcr:primaryType="sling:Folder"
+    hidden="true"/>
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/formcontainer/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/formcontainer/basic/.content.xml
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/README.md
@@ -61,6 +61,15 @@ This approach is implemented to optimize performance by avoiding additional netw
 ```
 BLOCK cmp-adaptiveform-container
     ELEMENT cmp-adaptiveform-container__wrapper
+    ELEMENT cmp-adaptiveform-container__hamburger-menu
+    ELEMENT cmp-adaptiveform-container__hamburger-menu-top
+    ELEMENT cmp-adaptiveform-container__hamburger-menu-icon-container
+    ELEMENT cmp-adaptiveform-container__hamburger-menu-icon
+    ELEMENT cmp-adaptiveform-container__hamburger-menu-middle
+    ELEMENT cmp-adaptiveform-container__hamburger-menu-bottom
+    ELEMENT cmp-adaptiveform-container__hamburger-menu-active-item-title
+    MODIFIER cmp-adaptiveform-container__hamburger-menu-button--prev
+    MODIFIER cmp-adaptiveform-container__hamburger-menu-button--next
 ```
 
 In edit mode, the BEM structure includes a modifier for the cmp-adaptiveform-container block,
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/_cq_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/_cq_dialog/.content.xml
@@ -84,6 +84,14 @@
                                         ignoreData="{Boolean}true"
                                         name="./specVersion"
                                         value="0.14.2"/>
+                                    <hamburgerMenu
+                                      jcr:primaryType="nt:unstructured"
+                                      granite:class="cmp-adaptiveform-container__hamburger-toggle"
+                                      sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
+                                      name="./fd:isHamburgerMenuEnabled"
+                                      text="Enable the hamburger menu for mobile view"
+                                      fieldDescription="Select the option to display the hamburger menu for efficient navigation on mobile devices."
+                                      value="{Boolean}true"/>
                                 </items>
                             </container>
                         </items>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/editor/js/editDialog.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/editor/js/editDialog.js
@@ -16,4 +16,4 @@
 (function($, channel, Coral) {
     "use strict";
 
-})(jQuery, jQuery(document), Coral);
+})(jQuery, jQuery(document), Coral);
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/css/formcontainerview.css b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/css/formcontainerview.css
@@ -13,10 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ******************************************************************************/
-
 form:not(.cmp-adaptiveform-container--edit) [data-cmp-visible="false"] {
     display: none !important;
 }
 .cmp-adaptiveform-container--loading{
-  
+
 }
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js.txt b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js.txt
@@ -15,4 +15,5 @@
 ###############################################################################
 
 #base=js
+hamburgerMenu.js
 formcontainerview.js
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js/formcontainerview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js/formcontainerview.js
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright 2022 Adobe
+ * 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.
@@ -25,9 +25,12 @@
             self: "[data-" + this.NS + '-is="' + this.IS + '"]',
         };
         static loadingClass = `${FormContainerV2.bemBlock}--loading`;
+        #hamburgerMenuInstance = '';
+
         constructor(params) {
             super(params);
             let self = this;
+            this.#hamburgerMenuInstance = new HamburgerMenu(this);
             this._model.subscribe((action) => {
                 let state = action.target.getState();
                 // execute the handler only if there are no rules configured on submitSuccess event.
@@ -75,6 +78,10 @@
             this.#setupAutoSave(self.getModel());
         }
 
+        initialiseHamburgerMenu() {
+            this.#hamburgerMenuInstance.init();
+        }
+
         /**
          * Register time based auto save
          * @param formModel.
@@ -101,6 +108,7 @@
     async function onDocumentReady() {
         const startTime = new Date().getTime();
         let elements = document.querySelectorAll(FormContainerV2.selectors.self);
+
         for (let i = 0; i < elements.length; i++) {
             let loaderToAdd = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ elements[i].id + "']");
             if(loaderToAdd){
@@ -111,6 +119,7 @@
         function onInit(e) {
             let formContainer =  e.detail;
             let formEl = formContainer.getFormElement();
+            formContainer.initialiseHamburgerMenu();
             setTimeout(() => {
                 let loaderToRemove = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ formEl.id + "']");
                 if(loaderToRemove){
@@ -144,5 +153,4 @@
     } else {
         document.addEventListener("DOMContentLoaded", onDocumentReady);
     }
-
 })();
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js/hamburgerMenu.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js/hamburgerMenu.js
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/container.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/container.html
diff --git a/ui.tests/test-module/specs/formContainer/formContainer.runtime.cy.js b/ui.tests/test-module/specs/formContainer/formContainer.runtime.cy.js

Original file line number	Diff line number	Diff line change
`@@ -98,4 +98,11 @@ void testGetLanguageDirection() {`
`98`	`98`	`assertEquals("ltr", formContainerMock.getLanguageDirection());`
`99`	`99`	`}`
`100`	`100`
	`101`	`+ @Test`
	`102`	`+ void testIsHamburgerMenuEnabled() {`
	`103`	`+ FormContainer formContainerMock = Mockito.mock(FormContainer.class);`
	`104`	`+ Mockito.when(formContainerMock.getIsHamburgerMenuEnabled()).thenCallRealMethod();`
	`105`	`+ assertEquals(false, formContainerMock.getIsHamburgerMenuEnabled());`
	`106`	`+ }`
	`107`	`+`
`101`	`108`	`}`
Original file line number	Diff line number	Diff line change
`@@ -484,4 +484,10 @@ void testNoFieldType() {`
`484`	`484`	`FormContainer formContainer = Utils.getComponentUnderTest(PATH_FORM_WITHOUT_FIELDTYPE, FormContainer.class, context);`
`485`	`485`	`assertEquals(FieldType.FORM.getValue(), formContainer.getFieldType());`
`486`	`486`	`}`
	`487`	`+`
	`488`	`+ @Test`
	`489`	`+ public void testGetIsHamburgerMenuEnabled() {`
	`490`	`+ FormContainer formContainer = Utils.getComponentUnderTest(PATH_FORM_1, FormContainer.class, context);`
	`491`	`+ assertFalse(Boolean.valueOf(formContainer.getIsHamburgerMenuEnabled().toString()));`
	`492`	`+ }`
`487`	`493`	`}`