feat(links): route to selected link

website/client/src/components/appFooter.vue

@@ -366,12 +366,6 @@
               class="btn btn-secondary"
               @click="makeAdmin()"
             >Make Admin</a>
-            <a
-              class="btn btn-danger"
-              @click="externalLinkModal()"
-            >
-              External Link Modal
-            </a>
           </div>
         </div>
       </div>
@@ -903,10 +897,6 @@ export default {
     donate () {
       this.$root.$emit('bv::show::modal', 'buy-gems', { alreadyTracked: true });
     },
-    externalLinkModal () {
-      this.$root.$emit('bv::show::modal', 'external-link-modal');
-      console.log('Hi!');
-    },
   },
 };
 </script>

website/client/src/components/externalLinkModal.vue

@@ -39,7 +39,7 @@
       <button
         v-once
         class="btn btn-primary"
-        @click="close()"
+        @click="proceed()"
       >
         {{ $t('continue') }}
       </button>
@@ -51,9 +51,14 @@
 @import '~@/assets/scss/colors.scss';
 
 #external-link-modal {
+  &.modal {
+    display: flex !important;
+  }
+
   .modal-md {
     max-width: 448px;
     min-width: 330px;
+    margin: auto;
 
   .modal-close {
     position: absolute;
@@ -142,12 +147,25 @@ export default {
         close: closeIcon,
         exclamation: exclamationIcon,
       }),
+      url: '',
     };
   },
+  mounted () {
+    this.$root.$on('habitica:external-link', url => {
+      this.url = url;
+      this.$root.$emit('bv::show::modal', 'external-link-modal');
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('habitica:external-link');
+  },
   methods: {
     close () {
       this.$root.$emit('bv::hide::modal', 'external-link-modal');
-      console.log('Bye!');
+    },
+    proceed () {
+      window.open(this.url, '_blank').focus();
+      this.close();
     },
   },
 };

website/client/src/directives/markdown.js

@@ -14,10 +14,10 @@ export default function markdown (el, { value, oldValue }) {
   for (let i = 0; i < allLinks.length; i += 1) {
     const link = allLinks[i];
 
-    // todo middleclick or ctrl+click to open it in a new tab
-    // todo? should a normal click leave the current page or also open it in a new tab?
-    // ... hopefully this wont create memory leaks
     link.addEventListener('click', e => {
+      if (e.ctrlKey) {
+        return;
+      }
       e.stopPropagation();
       e.preventDefault();
 

website/client/src/main.js

@@ -43,5 +43,5 @@ const vueInstance = new Vue({
 export default vueInstance;
 
 window.externalLink = url => {
-  vueInstance.$root.$emit('bv::show::modal', 'external-link-modal', url);
+  vueInstance.$root.$emit('habitica:external-link', url);
 };

website/client/src/router/index.js

@@ -377,8 +377,6 @@ const router = new VueRouter({
       ],
     },
 
-    { name: 'externalLink', path: '/external' },
-
     // Only used to handle some redirects
     // See router.beforeEach
     { path: '/redirect/:redirect', name: 'redirect' },
@@ -395,11 +393,6 @@ router.beforeEach(async (to, from, next) => {
 
   if (to.name === 'redirect') return handleRedirect(to, from, next);
 
-  if (to.name === 'externalLink') {
-    setTimeout(() => router.app.$emit('bv::show::modal', 'external-link-modal'), 500);
-    return null;
-  }
-
   if (!isUserLoggedIn && routeRequiresLogin) {
     // Redirect to the login page unless the user is trying to reach the
     // root of the website, in which case show the home page.