✨ Use middle click to open links and crates in new tab

WebCrateApp · Oct 12, 2021 · c80c4bd · c80c4bd
1 parent 57711f6
commit c80c4bd
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 24 deletions.
diff --git a/client/components/Link/Item.vue b/client/components/Link/Item.vue
@@ -5,6 +5,7 @@
     @[dragStartEvent].stop="startDrag($event)"
     @[dragStopEvent].stop="stopDrag($event)"
     @click.stop="openLinkDetails"
+    @click.middle="openLinkPage"
   >
     <div class="link-item" @mouseover="hover = true" @mouseleave="hover = false">
       <Img v-if="showImage && link.meta && link.meta.image" :src="imageUrl" class="image" @loaded="imageLoaded" />
@@ -92,12 +93,15 @@ export default {
 	methods: {
 		openLinkDetails() {
 			if (window.innerWidth < 500) {
-				this.$switchToPageOrCrate(this.link.id, { fullPage: true, isPublic: !this.endpoint && !this.editable })
+				this.openLinkPage()
 				return
 			}
 
 			this.$modal.show('linkDetails', { link: this.link.id, editable: this.editable, endpoint: this.endpoint })
 		},
+		openLinkPage() {
+			this.$switchToPageOrCrate(this.link.id, { fullPage: true, isPublic: !this.endpoint && !this.editable, newTab: true })
+		},
 		startDrag(e) {
 			this.drag = true
 			e.dataTransfer.dropEffect = 'move'

diff --git a/client/components/Modal/Search.vue b/client/components/Modal/Search.vue
@@ -11,7 +11,14 @@
     <div v-else-if="searchValue">
       <div v-if="crates.length > 0" class="section">
         <h2>Crates</h2>
-        <CrateListItem v-for="crate in crates" :key="crate.id" :icon="crate.icon" :name="crate.name" @click.native.stop="changeCrate(crate)" />
+        <CrateListItem
+          v-for="crate in crates"
+          :key="crate.id"
+          :icon="crate.icon"
+          :name="crate.name"
+          @click.native.stop="changeCrate(crate)"
+          @click.middle.native.stop="changeCrate(crate, true)"
+        />
       </div>
       <div v-if="links.length > 0" class="section" infinite-wrapper="test">
         <h2>Links</h2>
@@ -24,6 +31,7 @@
           :icon="link.meta && link.meta.icon"
           :crate="link.crate && getCrate(link.crate)"
           @click.native.stop="openLink(link)"
+          @click.middle.native.stop="openLink(link, true)"
         />
         <div v-if="lastLink" class="more">
           <button class="no-button" @click="loadMore">
@@ -90,18 +98,23 @@ export default {
 
 			this.loading = false
 		}, 500),
-		changeCrate(crate) {
-			this.$switchToPageOrCrate(crate.id)
-			this.close()
+		changeCrate(crate, newTab = false) {
+			this.$switchToPageOrCrate(crate.id, { newTab })
+
+			if (!newTab) {
+				this.close()
+			}
 		},
-		openLink(link) {
+		openLink(link, newTab = false) {
 			const currentCrate = this.currentCrate && this.currentCrate.id
 
-			if (window.innerWidth < 500) {
-				this.$switchToPageOrCrate(link.id, { fullPage: true })
+			if (newTab) {
+				this.$switchToPageOrCrate(link.id, { fullPage: true, newTab: true })
+			} else if (window.innerWidth < 500) {
+				this.$switchToPageOrCrate(link.id, { fullPage: true, newTab })
 				this.$modal.hide()
 			} else if (link.crate && (link.crate !== currentCrate)) {
-				this.$switchToPageOrCrate(link.crate, { link: link.id })
+				this.$switchToPageOrCrate(link.crate, { link: link.id, newTab })
 			} else {
 				this.$modal.replace('linkDetails', { link: link.id })
 			}

diff --git a/client/components/SideBar/Menu.vue b/client/components/SideBar/Menu.vue
@@ -15,14 +15,15 @@
       <div v-shortkey="['ctrl', 'h']" @shortkey="changePage('home')"></div>
       <div v-shortkey="['ctrl', 'alt', 'n']" @shortkey="showModal('addCrate')"></div>
       <div class="menus">
-        <SideBarMenuItem name="Home" icon="home" :selected="currentPage === 'home'" @click.native="changePage('home')" />
+        <SideBarMenuItem name="Home" icon="home" :selected="currentPage === 'home'" @click.native="changePage('home')" @click.middle.native.stop="changePage('home', true)" />
         <SideBarMenuItem
           name="Inbox"
           icon="inbox"
           :selected="currentCrate === 'null'"
           crate-id="null"
           :editable="true"
           @click.native="changePage('null')"
+          @click.middle.native.stop="changePage('inbox', true)"
         />
         <SideBarMenuItem name="Quick Search" icon="search" @click.native.stop="showModal('search')" />
       </div>
@@ -44,6 +45,7 @@
           :editable="crate.id !== undefined && crate.endpoint === undefined"
           :error="crate.deleted"
           @click.native="changeCrate(crate)"
+          @click.middle.native.stop="changeCrate(crate, true)"
           @shortkey.native="changeCrate(crate)"
         />
       </div>
@@ -64,6 +66,7 @@
           :editable="crate.id && !crate.endpoint"
           :error="crate.deleted"
           @click.native="changeCrate(crate)"
+          @click.middle.native.stop="changeCrate(crate, true)"
           @shortkey.native="changeCrate(crate)"
         />
       </div>
@@ -153,11 +156,11 @@ export default {
 		}
 	},
 	methods: {
-		changeCrate(crate) {
-			this.$switchToPageOrCrate(crate.id, { external: crate.endpoint !== undefined })
+		changeCrate(crate, newTab = false) {
+			this.$switchToPageOrCrate(crate.id, { external: crate.endpoint !== undefined, newTab })
 		},
-		changePage(page) {
-			this.$switchToPageOrCrate(page)
+		changePage(page, newTab = false) {
+			this.$switchToPageOrCrate(page, { newTab })
 		},
 		showModal(value) {
 			this.$modal.show(value)

diff --git a/client/pages/link/_.vue b/client/pages/link/_.vue
@@ -15,7 +15,7 @@
           {{ crate.name }}
         </p>
       </div>
-      <div v-else-if="crate === 'null'" class="crate-backlink hover-button" @click.stop="openCrate">
+      <div v-else-if="crateId === 'null'" class="crate-backlink hover-button" @click.stop="openCrate">
         <Icon name="arrowLeft" />
         <span>📭</span>
         <p>

diff --git a/client/plugins/helpers.js b/client/plugins/helpers.js
@@ -61,32 +61,44 @@ export default ({ env, store, app }, inject) => {
 	})
 
 	inject('switchToPageOrCrate', (pageOrCrate, opts = {}) => {
-		const { link, external, fullPage, crate, isPublic } = opts
+		const { link, external, fullPage, crate, isPublic, newTab } = opts
 
 		let newPath
+		let newPage
+		let newCrate
+
+		// Switch to home page
 		if (pageOrCrate === undefined || pageOrCrate === 'home') {
-			store.commit('SET_CURRENT_PAGE', 'home')
-			store.commit('SET_CURRENT_CRATE', undefined)
+			newPage = 'home'
+			newCrate = undefined
 			newPath = '/'
+
+		// Switch to inbox page
 		} else if (pageOrCrate === 'inbox' || pageOrCrate === 'null') {
-			store.commit('SET_CURRENT_PAGE', undefined)
-			store.commit('SET_CURRENT_CRATE', 'null')
+			newPage = undefined
+			newCrate = 'null'
 			newPath = `/inbox`
+
+		// Open the link page
 		} else if (fullPage) {
-			store.commit('SET_CURRENT_PAGE', undefined)
-			store.commit('SET_CURRENT_CRATE', crate || undefined)
+			newPage = undefined
+			newCrate = crate || undefined
 
+			// Use different path depending on the type of link
 			if (isPublic) {
 				newPath = `/link/public/${ pageOrCrate }`
 			} else if (external) {
 				newPath = `/link/${ pageOrCrate }?externalCrate=${ external }`
 			} else {
 				newPath = `/link/${ pageOrCrate }`
 			}
+
+		// Open a crate
 		} else {
-			store.commit('SET_CURRENT_PAGE', undefined)
-			store.commit('SET_CURRENT_CRATE', pageOrCrate)
+			newPage = undefined
+			newCrate = pageOrCrate
 
+			// Use different path depending on the type of crate
 			if (isPublic) {
 				newPath = `/crate/public/${ pageOrCrate }`
 			} else if (external) {
@@ -96,10 +108,20 @@ export default ({ env, store, app }, inject) => {
 			}
 		}
 
+		// Open the link modal
 		if (link !== undefined) {
 			newPath += `/?link=${ link }`
 		}
 
+		// Open in new tab
+		if (newTab) {
+			window.open(newPath, '_blank')
+			return
+		}
+
+		store.commit('SET_CURRENT_PAGE', newPage)
+		store.commit('SET_CURRENT_CRATE', newCrate)
+
 		app.router.push(newPath)
 	})