Skip to content

Commit

Permalink
#149 updated navigation comp to use navigationnested comp
Browse files Browse the repository at this point in the history
  • Loading branch information
@smcgrath0
smcgrath0 committed Aug 17, 2020
1 parent 0e15b6a commit b730d40
Show file tree
Hide file tree
Showing 7 changed files with 143 additions and 206 deletions.
27 changes: 0 additions & 27 deletions core/src/main/java/com/themecleanflex/models/NavigationModel.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,23 +68,6 @@
"x-form-default": 1,
"x-form-min": 1
},
"mobiletoggletype": {
"type": "string",
"x-source": "inject",
"x-form-label": "Collapse Style for mobile",
"x-form-type": "materialradio",
"x-default": "toggle",
"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",
Expand Down Expand Up @@ -378,11 +361,6 @@ public class NavigationModel extends AbstractComponent {
@Inject
private String levels;

/* {"type":"string","x-source":"inject","x-form-label":"Collapse Style for mobile","x-form-type":"materialradio","x-default":"toggle","properties":{"toggle":{"x-form-name":"Toggle","x-form-value":"toggle"},"accordion":{"x-form-name":"Accordion","x-form-value":"accordion"}}} */
@Inject
@Default(values ="toggle")
private String mobiletoggletype;

/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-type":"text"} */
@Inject
private String anchorname;
Expand Down Expand Up @@ -499,11 +477,6 @@ public String getJustifyitems() {
return justifyitems;
}

/* {"type":"string","x-source":"inject","x-form-label":"Collapse Style for mobile","x-form-type":"materialradio","x-default":"toggle","properties":{"toggle":{"x-form-name":"Toggle","x-form-value":"toggle"},"accordion":{"x-form-name":"Accordion","x-form-value":"accordion"}}} */
public String getMobiletoggletype() {
return mobiletoggletype;
}

/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-type":"text"} */
public String getAnchorname() {
return anchorname;
Expand Down
38 changes: 11 additions & 27 deletions fragments/navigation/hatch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,20 @@ module.exports = {

f.bindAttribute($, 'class', justify, false);

let rootItem = $.find('div').eq(0);
f.addFor( rootItem, 'model.childrenPages', 'child' );
f.bindAttribute($.find('ul'), 'class', `{ 'flex' : menuActive, 'hidden md:flex' : !menuActive }`, false);
f.bindAttribute($.find('ul'), 'style', "`list-style-type: none;padding: 0px;`", false);

let rootLink = $.find('a').eq(0);
f.bindAttribute( rootLink, "aria-expanded", "`active[i] ? 'true' : 'false'`")
f.addFor($.find('li.children').first(), 'model.childrenPages', 'child')
f.bindAttribute($.find('li.children a').first(),'href',f.pathToUrl('child.path'))
f.mapField($.find('li.children a').first(),'child.title')

let allLinks = $.find('a');
f.mapField(allLinks, 'child.title', "model.childrenPages", "title");
f.bindAttribute(allLinks, 'href', "child.path +'.html'");
f.bindAttribute(allLinks, '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" 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');

let nested = $.find('div').eq(0);
f.bindAttribute( nested, 'class', `{ 'flex' : menuActive, 'hidden md:flex' : !menuActive, 'bg-secondary': active[i], 'md:bg-primary' : active[i] }`, false);

let nestedArrow = $.find('svg').eq(0);
f.addIf(nestedArrow, 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0')
f.bindEvent(nestedArrow, 'click', "toggleItem(i)")
f.bindAttribute(nestedArrow, "style", "`transform:${active[i] ? 'rotate(180deg)': 'rotate(0)'};`")

let nestedListContainer = $.find("div").eq(2);
f.bindAttribute(nestedListContainer, "style", "`height:${active[i] ? heights[i] + 'px' : '0px'};`")

let nestedList = $.find("div").eq(3);
f.bindAttribute(nestedList, "ref", "`tabContent${i}`")

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);
let nestedArrow = $.find('svg');
f.bindAttribute(nestedArrow, "style", "`transform:rotate(180deg);`")
f.bindEvent(nestedArrow, 'click', "(e) => { toggleItem(i, e) }")
f.addIf(nestedArrow, 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0');

f.addElse($);
$.parent().prepend('<div class="p-5" v-if="isEditAndEmpty">{{isEditAndEmpty}}</div>')
Expand Down
32 changes: 7 additions & 25 deletions fragments/navigation/model.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,31 +37,13 @@
}
}
},
"levelsdeep": {
"type": "string",
"x-source": "inject",
"x-form-label": "Levels Deep",
"x-form-type": "materialrange",
"x-default": 1,
"x-form-min": 1,
"x-form-max": 5
},
"mobiletoggletype": {
"type": "string",
"x-source": "inject",
"x-form-label": "Collapse Style for mobile",
"x-form-type": "materialradio",
"x-default": "toggle",
"properties": {
"toggle": {
"x-form-name": "Toggle",
"x-form-value": "toggle"
},
"accordion": {
"x-form-name": "Accordion",
"x-form-value": "accordion"
}
}
"levels": {
"type":"string",
"x-source":"inject",
"x-form-type":"number",
"x-form-label":"Levels",
"x-form-default":1,
"x-form-min":1
},
"bgref": {
"x-form-type": "reference",
Expand Down
39 changes: 38 additions & 1 deletion fragments/navigation/template.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav class="flex md:flex-row flex-col z-10 w-full">
<!-- <nav class="flex md:flex-row flex-col z-10 w-full">
<div class="flex flex-col dropdown-container">
<div class="flex justify-between md:justify-start items-center md:items-start">
<a class="p-3 no-underline flex-grow"></a>
Expand All @@ -14,4 +14,41 @@
</div>
</div>
</div>
</nav> -->

<nav class="flex md:flex-row flex-col z-10 w-full">
<ul class="flex flex-col md:flex-row">
<li class="children ml-2 relative dropdown-container">
<div class="flex justify-between md:justify-start items-center md:items-start">
<a class="p-3 no-underline flex-grow" href="">Sub Page 1</a>
<svg width="16" height="16" viewBox="0 0 16 16" focusable="false"
class="block md:hidden transition-transform duration-150 ease-in-out m-3 cursor-pointer">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"
/>
</svg>
</div>
<ul class="flex flex-col nested dropdown-list md:absolute">
<li>
<div class="flex justify-between md:justify-start items-center md:items-start dropdown-container">
<a class="p-3 no-underline flex-grow" href="">Sub Page 1</a>
<svg width="16" height="16" viewBox="0 0 16 16" focusable="false"
class="block md:hidden transition-transform duration-150 ease-in-out m-3 cursor-pointer">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"
/>
</svg>
</div>
</li>
<li>
<div class="flex justify-between md:justify-start items-center md:items-start dropdown-container">
<a class="p-3 no-underline flex-grow" href="">Sub Page 1</a>
<svg width="16" height="16" viewBox="0 0 16 16" focusable="false"
class="block md:hidden transition-transform duration-150 ease-in-out m-3 cursor-pointer">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"
/>
</svg>
</div>
</li>
</ul>
</li>
</ul>
</nav>
92 changes: 40 additions & 52 deletions fragments/navigation/template.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,25 @@
}" v-else>
<div class="font-bold text-xl cursor-pointer block md:hidden transform-rotate-90 self-end m-3"
style="width:24px;" v-on:click="toggleMenu">|||</div>
<div class="flex flex-col dropdown-container" v-for="(child, i) in model.childrenPages"
:key="child.path || i" v-bind:class="{ 'flex' : menuActive, 'hidden md:flex' : !menuActive, 'bg-secondary': active[i], 'md:bg-primary' : active[i] }">
<div class="flex justify-between md:justify-start items-center md:items-start">
<a class="p-3 no-underline flex-grow" v-bind:aria-expanded="`active[i] ? 'true' : 'false'`"
v-bind:data-per-inline="`model.childrenPages.${i}.title`" v-bind:href="child.path +'.html'"
v-bind:class="model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'">{{child.title}}</a>
<svg width="16" height="16" viewBox="0 0 16 16" focusable="false"
class="block md:hidden transition-transform duration-150 ease-in-out m-3 cursor-pointer"
v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0"
v-on:click="toggleItem(i)" v-bind:style="`transform:${active[i] ? 'rotate(180deg)': 'rotate(0)'};`">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"
/>
</svg>
</div>
<div class="self-stretch relative transition-height duration-200 ease-in-out overflow-hidden md:overflow-unset"
v-bind:style="`height:${active[i] ? heights[i] + 'px' : '0px'};`">
<div class="flex flex-col dropdown-list relative md:absolute" v-bind:ref="`tabContent${i}`">
<a class="p-3 no-underline" v-bind:data-per-inline="`model.childrenPages.${i}.title`"
v-bind:href="subchild.path + '.html'" v-bind:class="model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'"
v-for="(subchild, i) in child.childrenPages" :key="subchild.path || i"
data-per-inline="subchild.title">{{subchild.title}}</a>
<ul class="flex flex-col md:flex-row" v-bind:class="{ 'flex' : menuActive, 'hidden md:flex' : !menuActive }"
v-bind:style="`list-style-type: none;padding: 0px;`">
<li class="children ml-2 relative dropdown-container" v-for="(child, i) in model.childrenPages"
:key="child.path || i">
<div class="flex justify-between md:justify-start items-center md:items-start">
<a class="p-3 no-underline flex-grow" v-bind:href="$helper.pathToUrl(child.path)"
data-per-inline="child.title">{{child.title}}</a>
<svg width="16" height="16" viewBox="0 0 16 16" focusable="false"
class="block md:hidden transition-transform duration-150 ease-in-out m-3 cursor-pointer"
v-bind:style="`transform:rotate(180deg);`" v-on:click="(e) =&gt; { toggleItem(i, e) }"
v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"
/>
</svg>
</div>
</div>
</div>
<themecleanflex-components-navigationnested v-bind:model="child" style="list-style-type: none;padding: 0px;"
v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0"></themecleanflex-components-navigationnested>
</li>
</ul>
</nav>
</themecleanflex-components-block>
</template>
Expand All @@ -41,46 +36,40 @@
export default {
props: ['model'],
data: function() {
const numElements = this.model.childrenPages ? this.model.childrenPages.length : 0;
return {
menuActive: false,
active: new Array(numElements).fill(false),
heights: new Array(numElements).fill(0),
}
},
created() {
addEventListener("resize", this.setHeights);
},
destroyed() {
removeEventListener("resize", this.setHeights);
},
mounted: function() {
this.setHeights();
window.addEventListener('pageRendered', (e) => {
if (this.menuActive) {
this.toggleMenu();
}
}, false);
},
methods: {
beforeSave(data) {
delete data.childrenPages
return data
},
setHeights: function() {
this.heights.forEach( (item,i) => {
Vue.set(this.heights, i, this.$refs[`tabContent${i}`][0].clientHeight )
});
},
toggleItem(i) {
if (this.model.mobiletoggletype === 'accordion') {
this.active.forEach( (active,j) => {
Vue.set(this.active, j, j === i ? !this.active[j] : false);
Vue.set(this.heights, i, this.$refs[`tabContent${i}`][0].clientHeight);
})
toggleItem(i, e) {
let parentItem, item;
if (e.target.nodeName.toLowerCase() === 'svg') {
parentItem = e.path[2];
item = e.path[0];
}
if (e.target.nodeName.toLowerCase() === 'path') {
parentItem = e.path[3];
item = e.path[1];
}
if(parentItem.querySelector('ul').classList.contains('hidden')) {
item.style.transform = "rotate(0deg)";
parentItem.classList.add('bg-secondary')
parentItem.classList.add('md:bg-primary')
parentItem.querySelector('ul').classList.remove('hidden');
parentItem.querySelector('ul').classList.remove('md:flex');
} else {
Vue.set(this.active, i, !this.active[i])
Vue.set(this.heights, i, this.$refs[`tabContent${i}`][0].clientHeight);
item.style.transform = "rotate(180deg)";
parentItem.classList.remove('bg-secondary')
parentItem.classList.remove('md:bg-primary')
parentItem.querySelector('ul').classList.add('hidden');
parentItem.querySelector('ul').classList.add('md:flex');
}
},
toggleMenu: function(){
Expand All @@ -104,9 +93,8 @@
.flex.dropdown-list {
display: none;
}
.flex.dropdown-container:hover .flex.dropdown-list, .flex.dropdown-container:focus-within .flex.dropdown-list {
.relative.dropdown-container:hover > .flex.dropdown-list, .relative.dropdown-container:focus-within > .flex.dropdown-list {
display: flex;
}
}
</style>

29 changes: 7 additions & 22 deletions ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/dialog.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,28 +38,13 @@
"model": "justifyitems"
},
{
"type": "material-range",
"placeholder": "levelsdeep",
"label": "Levels Deep",
"model": "levelsdeep",
"min": 1,
"max": 5
},
{
"type": "material-radios",
"values": [
{
"name": "Toggle",
"value": "toggle"
},
{
"name": "Accordion",
"value": "accordion"
}
],
"placeholder": "mobiletoggletype",
"label": "Collapse Style for mobile",
"model": "mobiletoggletype"
"type": "input",
"inputType": "number",
"placeholder": "levels",
"label": "Levels",
"model": "levels",
"default": 1,
"min": 1
},
{
"type": "input",
Expand Down
Loading

0 comments on commit b730d40

Please sign in to comment.