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.