Meeds-io · boubaker · Dec 3, 2024 · Nov 28, 2024
diff --git a/webapp/src/main/webapp/vue-apps/common/js/NavigationUtils.js b/webapp/src/main/webapp/vue-apps/common/js/NavigationUtils.js
@@ -0,0 +1,33 @@
+/*
+ * This file is part of the Meeds project (https://meeds.io/).
+ * 
+ * Copyright (C) 2020 - 2024 Meeds Association [email protected]
+ * 
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+export function getNavigationNodeUri(baseSiteUri, navigation) {
+  const hasPage = !!navigation?.pageKey;
+  const pageUrl = hasPage && `${baseSiteUri}${navigation.uri}`;
+  const pageLink = navigation?.pageLink && Autolinker.parse(navigation?.pageLink, {
+    email: true,
+  })?.[0]?.getUrl?.() || navigation?.pageLink;
+  navigation.nodeUri = pageLink || pageUrl;
+  return navigation.nodeUri;
+}
+
+export function getNavigationNodeTarget(navigation) {
+  navigation.nodeTarget = navigation?.target === 'SAME_TAB' && '_self' || '_blank';
+  return navigation.nodeTarget;
+}
diff --git a/webapp/src/main/webapp/vue-apps/common/main.js b/webapp/src/main/webapp/vue-apps/common/main.js
@@ -20,6 +20,7 @@ import * as navigationService from '../common/js/NavigationService.js';
 import * as profileSettingsService from '../common/js/ProfileSettingsService.js';
 import * as profileLabelService from '../common/js/ProfileLabelService.js';
 import * as siteService from './js/SiteService.js';
+import * as navigationUtils from './js/NavigationUtils.js';
 
 // get overrided components if exists
 if (extensionRegistry) {
@@ -97,6 +98,9 @@ window.Object.defineProperty(Vue.prototype, '$profileLabelService', {
 window.Object.defineProperty(Vue.prototype, '$navigationService', {
   value: navigationService,
 });
+window.Object.defineProperty(Vue.prototype, '$navigationUtils', {
+  value: navigationUtils,
+});
 
 if (eXo.env.portal.userIdentityId) {
   window.Object.defineProperty(Vue.prototype, '$currentUserIdentity', {

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuItem.vue b/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuItem.vue
@@ -41,8 +41,7 @@
         v-on="on"
         v-bind="attrs"
         role="tab"
-        @click.stop="checkLink(navigation, $event)"
-        @click="openUrl(navigationNodeUri, navigationNodeTarget)"
+        @click="checkLink"
         @change="updateNavigationState">
         <span
           class="text-truncate-3">
@@ -107,10 +106,10 @@ export default {
       return !!this.navigation?.pageKey;
     },
     navigationNodeUri() {
-      return this.navigation?.pageLink || (this.hasPage && `${this.baseSiteUri}${this.navigation.uri}`);
+      return this.$navigationUtils.getNavigationNodeUri(this.baseSiteUri, this.navigation);
     },
     navigationNodeTarget() {
-      return this.navigation?.target === 'SAME_TAB' && '_self' || '_blank';
+      return this.$navigationUtils.getNavigationNodeTarget(this.navigation);
     },
     childrenHasPage() {
       return this.checkChildrenHasPage(this.navigation);
@@ -138,11 +137,18 @@ export default {
     updateNavigationState() {
       this.$emit('update-navigation-state', this.navigationNodeUri);
     },
-    checkLink(navigation, e) {
-      if (!navigation.pageKey) {
+    checkLink(e) {
+      if (!this.navigationNodeUri) {
+        e.stopPropagation();
         e.preventDefault();
       }
-      if (navigation.children) {
+      if (this.navigationNodeUri?.includes?.('#')) {
+        if (this.navigationNodeTarget === '_blank') {
+          window.open(this.navigationNodeUri);
+        } else {
+          window.location.href = this.navigationNodeUri;
+        }
+      } else if (this.hasChildren && this.childrenHasPage) {
         this.openDropMenu();
       }
     },
@@ -182,16 +188,6 @@ export default {
       });
       return childrenHasPage;
     },
-    openUrl(url, target) {
-      if (url) {
-        if (!url?.match?.(/^(https?:\/\/|javascript:|\/portal\/)/)) {
-          url = `//${url}`;
-        } else if (url?.match?.(/^(\/portal\/)/)) {
-          url = `${window.location.origin}${url}`;
-        }
-        window.open(url, target);
-      }
-    },
   }
 };
 </script>
diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuSubItem.vue b/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuSubItem.vue
@@ -29,7 +29,7 @@
       :target="navigationNodeTarget"
       :link="!!hasPage"
       class="pt-0 pb-0"
-      @click.stop="checkLink(navigation, $event)">
+      @click="checkLink">
       <v-menu
         v-model="showMenu"
         rounded
@@ -118,16 +118,14 @@ export default {
       return this.checkChildrenHasPage(this.navigation);
     },
     navigationNodeUri() {
-      return this.navigation?.pageLink
-        && this.urlVerify(this.navigation?.pageLink)
-        || (this.hasPage && `${this.baseSiteUri}${this.navigation.uri}`);
+      return this.$navigationUtils.getNavigationNodeUri(this.baseSiteUri, this.navigation);
+    },
+    navigationNodeTarget() {
+      return this.$navigationUtils.getNavigationNodeTarget(this.navigation);
     },
     isSelected() {
       return this.navigationNodeUri === this.selectedPath;
     },
-    navigationNodeTarget() {
-      return this.navigation?.target === 'SAME_TAB' && '_self' || '_blank';
-    },
   },
   watch: {
     isSelected: {
@@ -153,12 +151,20 @@ export default {
     this.$root.$on('close-sibling-drop-menus-children', this.handleCloseSiblingMenus);
   },
   methods: {
-    checkLink(navigation, e) {
-      if (!navigation.pageKey) {
+    checkLink(e) {
+      if (!this.navigationNodeUri) {
+        e.stopPropagation();
         e.preventDefault();
       } else {
         this.$emit('update-navigation-state', `${this.parentNavigationUri}`);
       }
+      if (this.navigationNodeUri?.includes?.('#')) {
+        if (this.navigationNodeTarget === '_blank') {
+          window.open(this.navigationNodeUri);
+        } else {
+          window.location.href = this.navigationNodeUri;
+        }
+      }
     },
     updateNavigationState(value) {
       this.$emit('update-navigation-state', value);
@@ -179,12 +185,6 @@ export default {
       });
       return childrenHasPage;
     },
-    urlVerify(url) {
-      if (!url.match(/^(https?:\/\/|javascript:|\/portal\/)/)) {
-        url = `//${url}`;
-      }
-      return url ;
-    },
     handleCloseSiblingMenus(emitter) {
       if (!emitter?.navigation?.pageLink && !emitter?.navigationNodeUri?.includes?.(this.navigationNodeUri) && this.showMenu) {
         this.showMenu = false;

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/components/mobile/NavigationMobileMenuItem.vue b/webapp/src/main/webapp/vue-apps/top-bar-menu/components/mobile/NavigationMobileMenuItem.vue
@@ -28,12 +28,13 @@
       <v-tab
         class="mx-auto pa-1 text-break navigation-mobile-menu-tab"
         v-bind="attrs"
-        :href="`${baseSiteUri}${navigation.uri}`"
+        :href="navigationNodeUri"
+        :target="navigationNodeTarget"
         :disabled="!hasPage && !hasChildren"
         :link="hasPage"
         :aria-label="navigation.label"
         role="tab"
-        @click.stop="checkLink(navigation, $event)"
+        @click="checkLink"
         @change="updateNavigationState(navigation.uri)">
         <span
           class="text-truncate-3 pt-2">
@@ -69,11 +70,6 @@
 
 <script>
 export default {
-  data () {
-    return {
-      showMenu: false,
-    };
-  },
   props: {
     navigation: {
       type: Object,
@@ -84,6 +80,9 @@ export default {
       default: null
     }
   },
+  data: () => ({
+    showMenu: false,
+  }),
   created() {
     document.addEventListener('click', this.handleCloseMenu);
     this.$root.$on('close-sibling-drop-menus', this.handleCloseSiblingMenus);
@@ -94,24 +93,39 @@ export default {
     },
     hasPage() {
       return !!this.navigation?.pageKey;
-    }
+    },
+    navigationNodeUri() {
+      return this.$navigationUtils.getNavigationNodeUri(this.baseSiteUri, this.navigation);
+    },
+    navigationNodeTarget() {
+      return this.$navigationUtils.getNavigationNodeTarget(this.navigation);
+    },
   },
   methods: {
     updateNavigationState(value) {
       this.$emit('update-navigation-state', `${this.baseSiteUri}${value}`);
     },
-    checkLink(navigation, e) {
-      if (!navigation.pageKey) {
-        e.preventDefault();
+    checkLink(e) {
+      if (!this.navigationNodeUri) {
+        e?.stopPropagation?.();
+        e?.preventDefault?.();
       }
-      if (navigation.children) {
-        this.openDropMenu();
+      if (this.navigationNodeUri?.includes?.('#')) {
+        if (this.navigationNodeTarget === '_blank') {
+          window.open(this.navigationNodeUri);
+        } else {
+          window.location.href = this.navigationNodeUri;
+        }
+      } else if (this.hasChildren && this.checkChildrenHasPage(this.navigation)) {
+        this.openDropMenu(false, e);
       }
     },
-    openDropMenu(persist) {
+    openDropMenu(persist, event) {
       if (!persist && this.showMenu) {
         this.showMenu = false;
       } else if (!this.showMenu) {
+        event?.stopPropagation?.();
+        event?.preventDefault?.();
         this.$root.$emit('close-sibling-drop-menus', this);
         this.$nextTick().then(() => {
           this.showMenu = true;
@@ -129,7 +143,23 @@ export default {
           this.showMenu = false;
         }, 100);
       }
-    }
+    },
+    checkChildrenHasPage(navigation) {
+      let childrenHasPage = false;
+      navigation.children.forEach(child => {
+        if (childrenHasPage === true) {
+          return;
+        }
+        if (child.pageKey) {
+          childrenHasPage = true;
+        } else if (child.children.length > 0) {
+          childrenHasPage = this.checkChildrenHasPage(child);
+        } else {
+          childrenHasPage = false;
+        }
+      });
+      return childrenHasPage;
+    },
   }
 };
 </script>