From 8042f3ae0b667f5caff1b4147ce828a101f4b426 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Wed, 2 Oct 2024 14:22:34 +0200
Subject: [PATCH] makes the menu point active with the url matches

---
 public/js/components/Cis/Menu.js       | 11 +++++-
 public/js/components/Cis/Menu/Entry.js | 46 +++++++++++++++++++++++---
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index f44819011..92e189af3 100755
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -21,9 +21,17 @@ export default {
             entries: [],
 			activeEntry:null,
 			url:null,
+			highestMatchingUrlCount:0,
         };
     },
 	methods:{
+		checkHighestMatchingUrlCount(count){
+			if(count > this.highestMatchingUrlCount)
+			{
+				this.highestMatchingUrlCount = count;
+			}
+		},
+
 		setActiveEntry(content_id){
 			this.activeEntry = content_id;
 		}
@@ -34,6 +42,7 @@ export default {
     template: /*html*/`
 	<!--<p>CISVUE HEADER</p>
 	<p>active entry content_id : {{activeEntry}}</p>
+	<p>highest count : {{highestMatchingUrlCount}}</p>
 	-->
 	<button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -61,7 +70,7 @@ export default {
 				</ul>
 				<div id="nav-main-menu" class="collapse collapse-horizontal show">
 					<div>
-						<cis-menu-entry @activeEntry="setActiveEntry" :activeContent="activeEntry" v-for="entry in entries" :key="entry.content_id" :entry="entry" />
+						<cis-menu-entry @UrlCount="checkHighestMatchingUrlCount" @activeEntry="setActiveEntry" :highestMatchingUrlCount="highestMatchingUrlCount" :activeContent="activeEntry" v-for="entry in entries" :key="entry.content_id" :entry="entry" />
 					</div>
 				</div>
 			</div>
diff --git a/public/js/components/Cis/Menu/Entry.js b/public/js/components/Cis/Menu/Entry.js
index 4e659329b..062c63e89 100755
--- a/public/js/components/Cis/Menu/Entry.js
+++ b/public/js/components/Cis/Menu/Entry.js
@@ -6,16 +6,29 @@ export default {
             type: Number,
             default: 1
         },
-		activeContent: String
+		activeContent: String,
+		highestMatchingUrlCount: Number,
     },
     data: () => {
         return {
             collapse: null,
+			urlCount:0,
         }
     },
-	emits: ["activeEntry"],
+	emits: ["activeEntry", "UrlCount"],
 	watch:{
-
+		highestMatchingUrlCount: function(newValue)
+		{
+			// if this entry has the most matching url parts then it should be active
+			if (newValue == this.urlCount)
+			{
+				this.entry.menu_open = true;
+			}
+			else
+			{
+				this.entry.menu_open = false;
+			}
+		},
 		activeContent: function(newValue){
 			if(newValue == this.entry.content_id){
 				// wenn der Menupunkt nicht bereits offen ist
@@ -104,7 +117,31 @@ export default {
         }
     },
     methods: {
+		passUrlCount(count){
+			this.$emit("UrlCount",count);
+		},
+		getUrlMatchPoints(url,link){
+			let splitted_link = link.split('/');
+			let splitted_url = url.href.split('/');
+
+			let count = 0;
+
+			for(let part_url of splitted_url)
+			{
+				for (let part_link of splitted_link)
+				{
+					if(part_url == part_link)
+					{
+						count++;
+					}
+				}
+			}
+			this.urlCount = count;
+			this.$emit("UrlCount",count);
+		},
 		checkActiveUrl(url){
+			this.getUrlMatchPoints(url,this.link);
+			
 			let url_hash_spaceSymbol_regex = new RegExp("%20","gi");
 			let url_hash_sharpSymbol_regex = new RegExp("^#");
 			let url_hash = url.hash;
@@ -167,6 +204,7 @@ export default {
 	<!-- DEBUGGIING PRINTS
 	<p>entry content_id: {{JSON.stringify(entry.content_id,null,2)}}</p>
 	<p>entry menu: {{JSON.stringify(entry.menu_open,null,2)}}</p>
+	<p>highest count : {{urlCount}}</p>
 	-->
 	<div v-if="entry.template_kurzbz == 'include'">
         INCLUDE
@@ -192,7 +230,7 @@ export default {
             </div>
             <ul ref="children"
                 class="nav w-100 collapse">
-                <cis-menu-entry @activeEntry="resendEmit" :activeContent="activeContent" v-for="child in entry.childs" :key="child" :entry="child" :level="level + 1"/>
+                <cis-menu-entry @UrlCount="passUrlCount" @activeEntry="resendEmit" :activeContent="activeContent" v-for="child in entry.childs" :key="child" :entry="child" :level="level + 1"/>
             </ul>
         </template>
         <a v-else