From 95e59007cceacc9cec2c5a8bf20db0d6143a7895 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Fri, 29 Nov 2024 12:29:59 +0100
Subject: [PATCH] refactor(Settings/NavUser Collapsibles): closes the
 collapsibles if the user clicks outside of the elements

---
 public/js/components/Cis/Menu.js            | 25 ++++++++++++---------
 public/js/components/searchbar/searchbar.js | 24 +++++++++++++++-----
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index 25fd32fcb..717ac88f5 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -51,16 +51,18 @@ export default {
 		}
 	},
 	methods: {
-		toggleCollapsibles(target){
-			switch(target){
-				case 'settings':
-					this.navUserDropdown?.hide();
-					break;
-				case 'navUserDropdown':
-					this.$refs.searchbar?.settingsDropdown?.hide();
-					break;
+		checkSettingsVisibility: function (event) {
+			// hides the settings collapsible if the user clicks somewhere else
+			if (!this.$refs.navUserDropdown.contains(event.target)) {
+				this.navUserDropdown.hide();
 			}
 		},
+		handleShowNavUser(){
+			document.addEventListener("click", this.checkSettingsVisibility);
+		},
+		handleHideNavUser(){
+			document.removeEventListener("click", this.checkSettingsVisibility);
+		},
 		makeParentContentActive(content_id, collection=this.entries, parent=null){
 			for(let entry of collection){
 				if(entry.content_id == content_id){
@@ -89,7 +91,7 @@ export default {
 	<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>
     </button>
-	<fhc-searchbar @showSettings="toggleCollapsibles" ref="searchbar" id="nav-search" class="fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
+	<fhc-searchbar ref="searchbar" id="nav-search" class="fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
     <a id="nav-logo" class="d-none d-lg-block" :href="rootUrl">
         <img :src="logoUrl" alt="Logo">
     </a>
@@ -97,7 +99,10 @@ export default {
 		<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
 			<img :src="avatarUrl" class="avatar rounded-circle"/>
 		</button>
-		<ul ref="navUserDropdown" @[\`show.bs.collapse\`]="toggleCollapsibles('navUserDropdown')" id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
+		<ul ref="navUserDropdown"
+		@[\`shown.bs.collapse\`]="handleShowNavUser"
+		@[\`hide.bs.collapse\`]="handleHideNavUser"
+		id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
 			<li class="btn-level-2"><a class="btn btn-level-2 rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
 			<li class="btn-level-2">
 				<cis-sprachen></cis-sprachen>
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 1e290cf69..a25ada4fe 100644
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -7,12 +7,10 @@ import prestudent from "./prestudent.js";
 
 export default {
     props: [ "searchoptions", "searchfunction" ],
-    emits: ['showSettings'],
     data: function() {
       return {
         searchtimer: null,
         hidetimer: null,
-        showsettings: false,
         searchsettings: {
             searchstr: '',
             types: [],
@@ -65,8 +63,10 @@ export default {
               </div>
             </div>
 
-            <div id="searchSettings"  ref="settings"  @[\`show.bs.collapse\`]="$emit('showSettings','settings')"
-                 class="top-100 end-0 searchbar_settings text-white collapse" tabindex="-1">
+            <div id="searchSettings"  ref="settings"
+				@[\`shown.bs.collapse\`]="handleShowSettings"
+				@[\`hide.bs.collapse\`]="handleHideSettings"
+                class="top-100 end-0 searchbar_settings text-white collapse" tabindex="-1">
               <div class="d-flex flex-column m-3" v-if="this.searchoptions.types.length > 0">
               <span class="fw-light mb-2">Suche filtern nach:</span>  
               <template v-for="(type, index) in this.searchoptions.types" :key="type">
@@ -87,7 +87,6 @@ export default {
     },
     beforeMount: function() {
         this.updateSearchOptions();
-        
     },
 	mounted(){
 		this.settingsDropdown = new bootstrap.Collapse(this.$refs.settings, {
@@ -102,6 +101,21 @@ export default {
 		}
 	},
     methods: {
+		checkSettingsVisibility: function(event) {
+			// hides the settings collapsible if the user clicks somewhere else
+			if (!this.$refs.settings.contains(event.target))
+			{
+				this.settingsDropdown.hide();
+			}
+		},
+		handleShowSettings: function() {
+			// adds the event listener checkSettingsVisibility only when the collapsible is shown
+			document.addEventListener("click", this.checkSettingsVisibility);
+		},
+		handleHideSettings: function () {
+			// removes the event listener checkSettingsVisibility when the collapsible is hidden
+			document.removeEventListener("click", this.checkSettingsVisibility);
+		},
         updateSearchOptions: function() {
             this.searchsettings.types = [];
             for( const idx in this.searchoptions.types ) {