diff --git a/core/src/main/java/com/themecleanflex/models/NavigationModel.java b/core/src/main/java/com/themecleanflex/models/NavigationModel.java index f5a14edf8..7d6de04f0 100644 --- a/core/src/main/java/com/themecleanflex/models/NavigationModel.java +++ b/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 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 getChildrenPages() { List childPages = new ArrayList(); - 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)); } } diff --git a/core/src/main/java/com/themecleanflex/models/NavigationnestedModel.java b/core/src/main/java/com/themecleanflex/models/NavigationnestedModel.java new file mode 100644 index 000000000..f23f63c45 --- /dev/null +++ b/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] + +} diff --git a/fragments/navigation/hatch.js b/fragments/navigation/hatch.js index 93b914be2..eb5b98fdd 100644 --- a/fragments/navigation/hatch.js +++ b/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), '') + 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('
{{isEditAndEmpty}}
') + + let hamburgerClasses = `{ + 'self-start': model.justifyitems === 'start', + 'self-end': model.justifyitems === 'end', + 'md:hidden': !model.showmobilemenuontablet, + 'lg:hidden': model.showmobilemenuontablet + }` + + let hamburger = `
|||
` + $.prepend(hamburger) } } diff --git a/fragments/navigation/model.json b/fragments/navigation/model.json index 66131d5f7..999555578 100644 --- a/fragments/navigation/model.json +++ b/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" diff --git a/fragments/navigation/template.html b/fragments/navigation/template.html index 13bfbcfb2..29feffeee 100644 --- a/fragments/navigation/template.html +++ b/fragments/navigation/template.html @@ -1,10 +1,36 @@ -