fix: Fix Navigation Url when external link - MEED-7881 - Meeds-io/mee…

…ds#2622 (#4215) Prior to this change, the external link behavior wasn't the same switch Navigation Node display mode: - Desktop Menu Item - Desktop Menu Sub item (displayed in Second or Third Level) - Mobile Menu Item - Mobile Menu Sub item (displayed in Second or Third Level) Thus, when clicking on external link in Mobile, the behavior is just to open the URL as it was a current page URL. This change will introduce the usage of **AutoLink** API in order to ensure the URL behavior consistency comparing to provided link by the user. In addition, when a Dash is used in user provided URL, the behavior has been improved to always open the URL and not let the builtin behavior occurs, which will not change to the opened page.
Meeds-io · Dec 3, 2024 · 55de785 · 55de785
1 parent 1c4da1b
commit 55de785
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 83 deletions.
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>