Issues/149 - rework of navigation component

core/src/main/java/com/themecleanflex/models/NavigationModel.java

@@ -37,7 +37,7 @@
           "x-source": "inject",
           "x-form-label": "Exclude pages Excluded in Sitemap",
           "x-form-type": "materialswitch",
-          "x-form-default": false
+          "x-default": false
         },
         "justifyitems": {
           "type": "string",
@@ -60,6 +60,45 @@
             }
           }
         },
+        "levels": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-type": "number",
+          "x-form-label": "Levels",
+          "x-default": 1,
+          "x-form-min": 1
+        },
+        "mobiledropdownbg": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Transparent mobile dropdown background",
+          "x-form-type": "materialswitch",
+          "x-default": false
+        },
+        "showmobilemenuontablet": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Show Mobile menu on iPad/tablets",
+          "x-form-type": "materialswitch",
+          "x-default": false
+        },
+        "toggletype": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Collapse Style",
+          "x-form-type": "materialradio",
+          "x-default": "accordion",
+          "properties": {
+            "toggle": {
+              "x-form-name": "Toggle",
+              "x-form-value": "toggle"
+            },
+            "accordion": {
+              "x-form-name": "Accordion",
+              "x-form-value": "accordion"
+            }
+          }
+        },
         "bgref": {
           "x-form-type": "reference",
           "type": "object",
@@ -340,7 +379,7 @@ public class NavigationModel extends AbstractComponent {
 	@Inject
 	private String rootpage;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-type":"materialswitch","x-form-default":false} */
+	/* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-type":"materialswitch","x-default":false} */
 	@Inject
 	private String excludesitemapexcludes;
 
@@ -349,6 +388,24 @@ public class NavigationModel extends AbstractComponent {
 	@Default(values ="end")
 	private String justifyitems;
 
+	/* {"type":"string","x-source":"inject","x-form-type":"number","x-form-label":"Levels","x-default":1,"x-form-min":1} */
+	@Inject
+	@Default(values ="1")
+	private String levels;
+
+	/* {"type":"string","x-source":"inject","x-form-label":"Transparent mobile dropdown background","x-form-type":"materialswitch","x-default":false} */
+	@Inject
+	private String mobiledropdownbg;
+
+	/* {"type":"string","x-source":"inject","x-form-label":"Show Mobile menu on iPad/tablets","x-form-type":"materialswitch","x-default":false} */
+	@Inject
+	private String showmobilemenuontablet;
+
+	/* {"type":"string","x-source":"inject","x-form-label":"Collapse Style","x-form-type":"materialradio","x-default":"accordion","properties":{"toggle":{"x-form-name":"Toggle","x-form-value":"toggle"},"accordion":{"x-form-name":"Accordion","x-form-value":"accordion"}}} */
+	@Inject
+	@Default(values ="accordion")
+	private String toggletype;
+
 	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-type":"text"} */
 	@Inject
 	private String anchorname;
@@ -455,7 +512,7 @@ public String getRootpage() {
 		return rootpage;
 	}
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-type":"materialswitch","x-form-default":false} */
+	/* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-type":"materialswitch","x-default":false} */
 	public String getExcludesitemapexcludes() {
 		return excludesitemapexcludes;
 	}
@@ -465,6 +522,21 @@ public String getJustifyitems() {
 		return justifyitems;
 	}
 
+	/* {"type":"string","x-source":"inject","x-form-label":"Transparent mobile dropdown background","x-form-type":"materialswitch","x-default":false} */
+	public String getMobiledropdownbg() {
+		return mobiledropdownbg;
+	}
+
+	/* {"type":"string","x-source":"inject","x-form-label":"Show Mobile menu on iPad/tablets","x-form-type":"materialswitch","x-default":false} */
+	public String getShowmobilemenuontablet() {
+		return showmobilemenuontablet;
+	}
+
+	/* {"type":"string","x-source":"inject","x-form-label":"Collapse Style","x-form-type":"materialradio","x-default":"accordion","properties":{"toggle":{"x-form-name":"Toggle","x-form-value":"toggle"},"accordion":{"x-form-name":"Accordion","x-form-value":"accordion"}}} */
+	public String getToggletype() {
+		return toggletype;
+	}
+
 	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-type":"text"} */
 	public String getAnchorname() {
 		return anchorname;
@@ -578,13 +650,23 @@ public String getContentname() {
 
 	/* {"type":"string","x-source":"inject","x-form-type":"number","x-form-label":"Levels","x-form-default":1,"x-form-min":1} */
 	public String getLevels() {
-		return "2";
+		return levels == null ? "1" : levels;
 	}
 
 	public String getExcludeSitemapExcludes() {
 		return excludesitemapexcludes == null ? "false" : excludesitemapexcludes;
 	}
 
+  public String getRootPage() {
+		if(rootpage == null) {
+			PerPage currentPage =  getResource().adaptTo(PerPage.class);
+			if(currentPage != null) {
+				return currentPage.getPath();
+			}
+		}
+		return rootpage;
+  }
+
 	public String getRootPageTitle() {
 		PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
 		PerPage page = ppm.getPage(getRootpage());
@@ -609,10 +691,9 @@ public List<Page> getChildrenPages() {
 			PerPage page = ppm.getPage(getRootpage());
 			if (page != null) {
 				for (PerPage child : page.listChildren()) {
-					if(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) {
-						continue;
-					}
-					if (!child.getPath().equals(page.getPath())) {
+          if ( !(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false))
+							&& (!child.getPath().equals(page.getPath()))
+						) {
 						childPages.add(new Page(child, levels, excludeSitemap));
 					}
 				}
@@ -651,13 +732,12 @@ public Boolean getHasChildren() {
 
 	public List<Page> getChildrenPages() {
 		List<Page> childPages = new ArrayList<Page>();
-		System.out.println();
 		if(page != null) {
 			for (PerPage child: page.listChildren()) {
 				if(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) {
 					continue;
 				}
-				if(!child.getPath().equals(page.getPath())) {
+				if(levels > 0 && !child.getPath().equals(page.getPath())) {
 					childPages.add(new Page(child, levels-1, excludeSitemap));
 				}
 			}

core/src/main/java/com/themecleanflex/models/NavigationnestedModel.java

@@ -0,0 +1,57 @@
+package com.themecleanflex.models;
+
+import com.peregrine.nodetypes.models.AbstractComponent;
+import com.peregrine.nodetypes.models.IComponent;
+import org.apache.sling.api.resource.Resource;
+import org.apache.sling.models.annotations.DefaultInjectionStrategy;
+import org.apache.sling.models.annotations.Exporter;
+import org.apache.sling.models.annotations.Model;
+
+/*
+    //GEN[:DATA
+    {
+  "definitions": {
+    "Navigationnested": {
+      "type": "object",
+      "x-type": "component",
+      "properties": {}
+    }
+  },
+  "name": "Navigationnested",
+  "componentPath": "themecleanflex/components/navigationnested",
+  "package": "com.themecleanflex.models",
+  "modelName": "Navigationnested",
+  "classNameParent": "AbstractComponent"
+}
+//GEN]
+*/
+
+//GEN[:DEF
+@Model(
+        adaptables = Resource.class,
+        resourceType = "themecleanflex/components/navigationnested",
+        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+        adapters = IComponent.class
+)
+@Exporter(
+        name = "jackson",
+        extensions = "json"
+)
+
+//GEN]
+public class NavigationnestedModel extends AbstractComponent {
+
+    public NavigationnestedModel(Resource r) { super(r); }
+
+    //GEN[:INJECT
+
+//GEN]
+
+    //GEN[:GETTERS
+
+//GEN]
+
+    //GEN[:CUSTOMGETTERS
+    //GEN]
+
+}

fragments/navigation/hatch.js

@@ -3,32 +3,50 @@ module.exports = {
         f.wrap($, 'themecleanflex-components-block')
         f.bindAttribute($.parent(),'model','model')
 
-        let justify = `{
+        let navClasses = `{
             'justify-start': model.justifyitems === 'start',
             'justify-center': model.justifyitems === 'center',
-            'justify-end': model.justifyitems === 'end'
+            'justify-end': model.justifyitems === 'end',
+            'md:flex-row': !model.showmobilemenuontablet,
+            'lg:flex-row': model.showmobilemenuontablet
         }`
 
-        f.bindAttribute($, 'class', justify, false);
+        f.bindAttribute($, 'class', navClasses, false);
 
-        let rootItem = $.find('div').eq(0);
-        f.addFor( rootItem, 'model.childrenPages', 'child' );
+        f.bindAttribute($.find('ul'), 'class', `{ 'flex' : menuActive, 'hidden md:flex' : ( !menuActive && !model.showmobilemenuontablet ), 'hidden lg:flex' : ( !menuActive && model.showmobilemenuontablet ), 'md:flex-row md:flex-wrap': !model.showmobilemenuontablet, 'lg:flex-row lg:flex-wrap': model.showmobilemenuontablet}`, false);
+        f.bindAttribute($.find('ul'), 'style', "`list-style-type: none;padding: 0px;`", false);
+        f.bindAttribute($.find('ul'), 'ref', "`parent`");
 
-        let rootLink = $.find('a');
-        f.mapField(rootLink, 'child.title', "model.childrenPages", "title");
-        f.bindAttribute(rootLink, 'href', "child.childrenPages.length > 0 ? false : child.path +'.html'");
-        f.bindAttribute(rootLink, 'class', "model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'",false);
-
-        let nested = $.find('div').eq(1);
-        f.addIf(nested, 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0')
+        f.addFor($.find('li.children').first(), 'model.childrenPages', 'child')
+        f.bindAttribute($.find('li.children').first(), 'ref', "`directChildren`");
+        f.bindAttribute($.find('li.children').first(),'class', "`${active[i] ? 'active' : ''}`", false)
+        f.bindAttribute($.find('li.children > div').first(),'class', "`${active[i] ? 'bg-secondary' : ''}`", false)
+        f.bindAttribute($.find('li.children a').first(),'href',f.pathToUrl('child.path'))
+        f.bindAttribute($.find('li.children a').first(),'class',"`${active[i] ? 'active' : ''}`", false)
+        f.mapField($.find('li.children a').first(),'child.title')
 
-        let nestedLink = $.find('a').eq(1);
-        f.addFor( nestedLink, 'child.childrenPages', 'subchild' );
-        f.mapField( nestedLink, 'subchild.title' );
-        f.bindAttribute(nestedLink, 'href', "subchild.path + '.html'");
-        f.bindAttribute(nestedLink, 'class', "model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'",false);
+        f.replace( $.find('ul.nested').eq(0), '<themecleanflex-components-navigationnested v-bind:model="child" v-bind:parentmodel="model" style="list-style-type: none;padding: 0px;"></themecleanflex-components-navigationnested>')
+        f.addIf($.find('li.children themecleanflex-components-navigationnested').first(), 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0');
+        f.bindAttribute($.find('li.children themecleanflex-components-navigationnested').first(), 'class', "`${active[i] ? 'lg:hidden' : 'hidden'}`", false)
+        f.bindAttribute($.find('li.children themecleanflex-components-navigationnested').first(), 'toggleitem', "toggleItem")
+        f.bindAttribute($.find('li.children themecleanflex-components-navigationnested').first(), 'nestedliststyle', "nestedListStyle[i]")
+
+        let nestedArrow = $.find('svg');
+        f.bindAttribute(nestedArrow, "style", "`${active[i] ? 'transform:rotate(180deg);' : 'transform:rotate(0deg);'}`")
+        f.bindEvent(nestedArrow, 'click', "(e) => { toggleItem(i, e, active); }")
+        f.addIf(nestedArrow, 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0');
 
         f.addElse($);
         $.parent().prepend('<div class="p-5" v-if="isEditAndEmpty">{{isEditAndEmpty}}</div>')
+
+        let hamburgerClasses = `{
+            'self-start': model.justifyitems === 'start',
+            'self-end': model.justifyitems === 'end',
+            'md:hidden': !model.showmobilemenuontablet,
+            'lg:hidden': model.showmobilemenuontablet
+        }`
+
+        let hamburger = `<div class="font-bold text-xl cursor-pointer block transform-rotate-90 m-3" v-bind:class="${hamburgerClasses}" style="width:24px;" v-on:click="toggleMenu">|||</div>`
+        $.prepend(hamburger)
     }
 }

fragments/navigation/model.json

@@ -16,7 +16,7 @@
           "x-source": "inject",
           "x-form-label": "Exclude pages Excluded in Sitemap",
           "x-form-type": "materialswitch",
-          "x-form-default": false
+          "x-default": false
         },
         "justifyitems": {
           "type": "string",
@@ -37,6 +37,45 @@
             }
           }
         },
+        "levels": {
+          "type":"string",
+          "x-source":"inject",
+          "x-form-type":"number",
+          "x-form-label":"Levels",
+          "x-default":1,
+          "x-form-min":1
+        },
+        "mobiledropdownbg": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Transparent mobile dropdown background",
+          "x-form-type": "materialswitch",
+          "x-default": false
+        },
+        "showmobilemenuontablet": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Show Mobile menu on iPad/tablets",
+          "x-form-type": "materialswitch",
+          "x-default": false
+        },
+        "toggletype": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Collapse Style",
+          "x-form-type": "materialradio",
+          "x-default": "accordion",
+          "properties": {
+            "toggle": {
+              "x-form-name": "Toggle",
+              "x-form-value": "toggle"
+            },
+            "accordion": {
+              "x-form-name": "Accordion",
+              "x-form-value": "accordion"
+            }
+          }
+        },
         "bgref": {
           "x-form-type": "reference",
         	"$ref": "fragments/block/model.json#/definitions/Block"