diff --git a/website/client/src/components/appFooter.vue b/website/client/src/components/appFooter.vue
index 186470c6e2..69ec6b0e2f 100644
--- a/website/client/src/components/appFooter.vue
+++ b/website/client/src/components/appFooter.vue
@@ -366,12 +366,6 @@
class="btn btn-secondary"
@click="makeAdmin()"
>Make Admin
-
- External Link Modal
-
@@ -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!');
- },
},
};
diff --git a/website/client/src/components/externalLinkModal.vue b/website/client/src/components/externalLinkModal.vue
index 1ff7ca2c54..4d332f8d12 100644
--- a/website/client/src/components/externalLinkModal.vue
+++ b/website/client/src/components/externalLinkModal.vue
@@ -39,7 +39,7 @@
@@ -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();
},
},
};
diff --git a/website/client/src/directives/markdown.js b/website/client/src/directives/markdown.js
index 2c210f5e74..7756a6221b 100644
--- a/website/client/src/directives/markdown.js
+++ b/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();
diff --git a/website/client/src/main.js b/website/client/src/main.js
index d52f73f0ee..7a9e39a2f3 100644
--- a/website/client/src/main.js
+++ b/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);
};
diff --git a/website/client/src/router/index.js b/website/client/src/router/index.js
index 4ea5092447..09727c789e 100644
--- a/website/client/src/router/index.js
+++ b/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.