#149 added navgiation nested recursive component

headwirecom · Aug 17, 2020 · a1337a0 · a1337a0
1 parent b730d40
commit a1337a0
Show file tree

Hide file tree

Showing 11 changed files with 252 additions and 22 deletions.
diff --git a/fragments/navigationnested/hatch.js b/fragments/navigationnested/hatch.js
@@ -0,0 +1,15 @@
+module.exports = {
+    convert: function($, f) {
+        f.bindAttribute($, 'style', "`list-style-type: none;padding: 0px;display:${active[i] ? 'flex' : 'none'};`", 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')
+        f.replace( $.find('ul.nested').eq(0), '<themecleanflex-components-navigationnested v-bind:model="child" style="top:0; left: 100%;list-style-type: none; padding: 0px"></themecleanflex-components-navigationnested>')
+        f.addIf($.find('themecleanflex-components-navigationnested').first(), 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0')
+
+        let nestedArrow = $.find('svg').eq(0);
+        f.addIf(nestedArrow, 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0');
+        f.bindAttribute(nestedArrow, "style", "`transform:rotate(180deg);`")
+        f.bindEvent(nestedArrow, 'click', "(e) => { toggleItem(i, e) }")
+    }
+}
diff --git a/fragments/navigationnested/model.json b/fragments/navigationnested/model.json
@@ -0,0 +1,10 @@
+{
+    "definitions": {
+      "Navigationnested": {
+        "type": "object",
+        "x-type": "component",
+        "properties": {
+        }
+      }
+    }
+  }
diff --git a/fragments/navigationnested/readme.md b/fragments/navigationnested/readme.md
@@ -0,0 +1,3 @@
+# Navigation Nested
+
+Used by the Navigation component
diff --git a/fragments/navigationnested/sample.json b/fragments/navigationnested/sample.json
@@ -0,0 +1,6 @@
+{
+    "title": "Navigationnested",
+    "group": ".hidden",
+    "model": {
+    }
+  }
diff --git a/fragments/navigationnested/template.html b/fragments/navigationnested/template.html
@@ -0,0 +1,68 @@
+<!-- <div>
+<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">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">
+            <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">
+        <div class="flex flex-col dropdown-list relative md:absolute">
+            <div class="nested">
+                <div class="flex justify-between md:justify-start items-center md:items-start">
+                    <a class="p-3 no-underline flex-grow">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">
+                        <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">
+                    <div class="flex flex-col dropdown-list relative md:absolute">
+                        <a class="p-3 no-underline">subchild title</a>
+                    </div>
+                </div>
+            </div>
+            <a class="p-3 no-underline">subchild title</a>
+        </div>
+    </div>
+</div>
+</div> -->
+
+<ul class="flex flex-col dropdown-list md:absolute">
+    <li class="children 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 absolute">
+            <li>
+                <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>
+            </li>
+            <li>
+                <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>
+            </li>
+        </ul>
+    </li>
+</ul>
diff --git a/fragments/navigationnested/template.vue b/fragments/navigationnested/template.vue
@@ -0,0 +1,65 @@
+<template>
+  <ul class="flex flex-col dropdown-list md:absolute" v-bind:style="`list-style-type: none;padding: 0px;display:${active[i] ? 'flex' : 'none'};`">
+    <li class="children 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-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0"
+        v-bind:style="`transform:rotate(180deg);`" v-on:click="(e) =&gt; { toggleItem(i, e) }">
+          <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>
+      <themecleanflex-components-navigationnested v-bind:model="child" style="top:0; left: 100%;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>
+</template>
+
+
+<script>
+    export default {
+        props: ['model'],
+        methods: {
+            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 {
+                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');
+              }
+            },
+        },
+    }
+    
+</script>
+
+<style>
+@media (min-width: 768px) {
+  .flex.dropdown-list {
+    display: none;
+  }
+  .relative.dropdown-container:hover > .flex.dropdown-list, .relative.dropdown-container:focus-within > .flex.dropdown-list {
+    display: flex;
+  }
+}
+</style>
diff --git a/...ps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/.content.xml b/...ps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/.content.xml
@@ -0,0 +1,4 @@
+<?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:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Navigationnested" group=".hidden">
+  <jcr:content jcr:primaryType="nt:unstructured"/>
+</jcr:root>
diff --git a/...pps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/dialog.json b/...pps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/dialog.json
@@ -0,0 +1 @@
+{}
diff --git a/...ps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/template.vue b/...ps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/template.vue
@@ -0,0 +1,68 @@
+<template>
+  <ul class="flex flex-col dropdown-list md:absolute hidden md:flex" v-bind:style="`list-style-type: none;padding: 0px;`">
+    <li class="children 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-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0"
+        v-bind:style="`transform: rotate(180deg);`"
+        v-on:click="(e) => {
+              toggleItem(i, e)
+            }">
+          <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>
+      <themecleanflex-components-navigationnested v-bind:model="child"
+      style="top:0; left: 100%;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>
+</template>
+
+
+<script>
+    export default {
+        props: ['model'],
+        methods: {
+            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 {
+                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');
+              }
+            },
+        },
+    }
+    
+</script>
+
+<style>
+@media (min-width: 768px) {
+  .flex.dropdown-list {
+    display: none;
+  }
+  .relative.dropdown-container:hover > .flex.dropdown-list, .relative.dropdown-container:focus-within > .flex.dropdown-list {
+    display: flex;
+  }
+}
+</style>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html
@@ -40,4 +40,5 @@
     $peregrineApp.loadComponent('themecleanflex-components-menubuttons')
     $peregrineApp.loadComponent('themecleanflex-components-socialicons')
     $peregrineApp.loadComponent('themecleanflex-components-pagelistnested')
+    $peregrineApp.loadComponent('themecleanflex-components-navigationnested')
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css
@@ -621,16 +621,6 @@ video {
   background-color: var(--bg-secondary);
 }
 
-.hover\:bg-black:hover {
-  --bg-opacity: 1;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, var(--bg-opacity));
-}
-
-.hover\:bg-gray-200:hover {
-  background-color: var(--color-gray-200);
-}
-
 .hover\:bg-blue-700:hover {
   background-color: var(--color-blue-700);
 }
@@ -759,10 +749,6 @@ video {
   align-self: center;
 }
 
-.self-stretch {
-  align-self: stretch;
-}
-
 .justify-start {
   justify-content: flex-start;
 }
@@ -1100,10 +1086,6 @@ video {
   color: rgba(255, 255, 255, var(--text-opacity));
 }
 
-.text-gray-200 {
-  color: var(--color-gray-200);
-}
-
 .text-gray-800 {
   color: var(--color-gray-800);
 }
@@ -1136,10 +1118,6 @@ video {
   color: rgba(255, 255, 255, var(--text-opacity));
 }
 
-.hover\:text-gray-200:hover {
-  color: var(--color-gray-200);
-}
-
 .hover\:text-red-600:hover {
   color: var(--color-red-600);
 }
@@ -1284,6 +1262,17 @@ video {
   z-index: 10;
 }
 
+.transform {
+  --transform-translate-x: 0;
+  --transform-translate-y: 0;
+  --transform-rotate: 0;
+  --transform-skew-x: 0;
+  --transform-skew-y: 0;
+  --transform-scale-x: 1;
+  --transform-scale-y: 1;
+  transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
+}
+
 .transition-colors {
   transition-property: background-color, border-color, color, fill, stroke;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Navigation Nested

		Used by the Navigation component