From 7bbf022978b5f79bbb58ad31389c83b949218a52 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 21 Oct 2018 16:18:02 +0900
Subject: [PATCH] Refactor

---
 src/client/app/common/scripts/note-mixin.ts   |  4 ---
 .../views/pages/deck/deck.column-core.vue     | 26 ++++++++-----------
 .../desktop/views/pages/deck/deck.column.vue  | 12 ++++++++-
 .../views/pages/deck/deck.direct-column.vue   |  8 ++----
 .../desktop/views/pages/deck/deck.direct.vue  |  8 ++----
 .../views/pages/deck/deck.hashtag-tl.vue      |  8 ++----
 .../desktop/views/pages/deck/deck.list-tl.vue |  8 ++----
 .../views/pages/deck/deck.mentions-column.vue |  8 ++----
 .../views/pages/deck/deck.mentions.vue        |  8 ++----
 .../desktop/views/pages/deck/deck.notes.vue   |  7 +----
 .../views/pages/deck/deck.tl-column.vue       |  9 +------
 .../app/desktop/views/pages/deck/deck.tl.vue  |  8 ++----
 12 files changed, 38 insertions(+), 76 deletions(-)

diff --git a/src/client/app/common/scripts/note-mixin.ts b/src/client/app/common/scripts/note-mixin.ts
index 1556d0660..cd3d3ae76 100644
--- a/src/client/app/common/scripts/note-mixin.ts
+++ b/src/client/app/common/scripts/note-mixin.ts
@@ -37,10 +37,6 @@ export default (opts: Opts = {}) => ({
 				'ctrl+q': this.renoteDirectly,
 				'up|k|shift+tab': this.focusBefore,
 				'down|j|tab': this.focusAfter,
-				'shift+up': () => this.$emit('parentFocus', 'up'),
-				'shift+down': () => this.$emit('parentFocus', 'down'),
-				'shift+left': () => this.$emit('parentFocus', 'left'),
-				'shift+right': () => this.$emit('parentFocus', 'right'),
 				'esc': this.blur,
 				'm|o': () => this.menu(true),
 				's': this.toggleShowContent,
diff --git a/src/client/app/desktop/views/pages/deck/deck.column-core.vue b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
index dd2483c5c..974c58235 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column-core.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
@@ -1,14 +1,14 @@
 <template>
-<x-widgets-column v-if="column.type == 'widgets'" :column="column" :is-stacked="isStacked"/>
-<x-notifications-column v-else-if="column.type == 'notifications'" :column="column" :is-stacked="isStacked"/>
-<x-tl-column v-else-if="column.type == 'home'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-tl-column v-else-if="column.type == 'local'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-direct-column v-else-if="column.type == 'direct'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
+<x-widgets-column v-if="column.type == 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-notifications-column v-else-if="column.type == 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'home'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'local'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-direct-column v-else-if="column.type == 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
 </template>
 
 <script lang="ts">
@@ -43,11 +43,7 @@ export default Vue.extend({
 	methods: {
 		focus() {
 			this.$children[0].focus();
-		},
-
-		parentFocus(direction) {
-			this.$emit('parentFocus', direction);
-		},
+		}
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index aced5848e..9b812cce6 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -2,7 +2,8 @@
 <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
 		@dragover.prevent.stop="onDragover"
 		@dragleave="onDragleave"
-		@drop.prevent.stop="onDrop">
+		@drop.prevent.stop="onDrop"
+		v-hotkey="keymap">
 	<header :class="{ indicate: count > 0 }"
 			draggable="true"
 			@click="goTop"
@@ -66,6 +67,15 @@ export default Vue.extend({
 	computed: {
 		isTemporaryColumn(): boolean {
 			return this.column == null;
+		},
+
+		keymap(): any {
+			return {
+				'shift+up': () => this.$parent.$emit('parentFocus', 'up'),
+				'shift+down': () => this.$parent.$emit('parentFocus', 'down'),
+				'shift+left': () => this.$parent.$emit('parentFocus', 'left'),
+				'shift+right': () => this.$parent.$emit('parentFocus', 'right'),
+			};
 		}
 	},
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.direct-column.vue b/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
index def111169..7744a755e 100644
--- a/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
@@ -2,7 +2,7 @@
 <x-column :name="name" :column="column" :is-stacked="isStacked">
 	<span slot="header">%fa:envelope R%{{ name }}</span>
 
-	<x-direct @parentFocus="parentFocus"/>
+	<x-direct/>
 </x-column>
 </template>
 
@@ -38,11 +38,7 @@ export default Vue.extend({
 	methods: {
 		focus() {
 			this.$refs.tl.focus();
-		},
-
-		parentFocus(direction) {
-			this.$emit('parentFocus', direction);
-		},
+		}
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.direct.vue b/src/client/app/desktop/views/pages/deck/deck.direct.vue
index 877c15604..47fb15370 100644
--- a/src/client/app/desktop/views/pages/deck/deck.direct.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.direct.vue
@@ -1,5 +1,5 @@
 <template>
-	<x-notes ref="timeline" :more="existMore ? more : null" @parentFocus="parentFocus"/>
+	<x-notes ref="timeline" :more="existMore ? more : null"/>
 </template>
 
 <script lang="ts">
@@ -93,11 +93,7 @@ export default Vue.extend({
 
 		focus() {
 			this.$refs.timeline.focus();
-		},
-
-		parentFocus(direction) {
-			this.$emit('parentFocus', direction);
-		},
+		}
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue b/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
index 9be5d8a8c..a4fdc2ce7 100644
--- a/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
@@ -1,5 +1,5 @@
 <template>
-<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView" @parentFocus="parentFocus"/>
+<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
 </template>
 
 <script lang="ts">
@@ -118,11 +118,7 @@ export default Vue.extend({
 
 		focus() {
 			this.$refs.timeline.focus();
-		},
-
-		parentFocus(direction) {
-			this.$emit('parentFocus', direction);
-		},
+		}
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.list-tl.vue b/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
index cd27743f9..714c26766 100644
--- a/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
@@ -1,5 +1,5 @@
 <template>
-<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView" @parentFocus="parentFocus"/>
+<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
 </template>
 
 <script lang="ts">
@@ -128,11 +128,7 @@ export default Vue.extend({
 
 		focus() {
 			this.$refs.timeline.focus();
-		},
-
-		parentFocus(direction) {
-			this.$emit('parentFocus', direction);
-		},
+		}
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue b/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
index ef0e4ad78..6598832ba 100644
--- a/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
@@ -2,7 +2,7 @@
 <x-column :name="name" :column="column" :is-stacked="isStacked">
 	<span slot="header">%fa:at%{{ name }}</span>
 
-	<x-mentions ref="tl" @parentFocus="parentFocus"/>
+	<x-mentions ref="tl"/>
 </x-column>
 </template>
 
@@ -38,11 +38,7 @@ export default Vue.extend({
 	methods: {
 		focus() {
 			this.$refs.tl.focus();
-		},
-
-		parentFocus(direction) {
-			this.$emit('parentFocus', direction);
-		},
+		}
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.mentions.vue b/src/client/app/desktop/views/pages/deck/deck.mentions.vue
index 29bf7d95c..7890e6840 100644
--- a/src/client/app/desktop/views/pages/deck/deck.mentions.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.mentions.vue
@@ -1,5 +1,5 @@
 <template>
-	<x-notes ref="timeline" :more="existMore ? more : null" @parentFocus="parentFocus"/>
+	<x-notes ref="timeline" :more="existMore ? more : null"/>
 </template>
 
 <script lang="ts">
@@ -89,11 +89,7 @@ export default Vue.extend({
 
 		focus() {
 			this.$refs.timeline.focus();
-		},
-
-		parentFocus(direction) {
-			this.$emit('parentFocus', direction);
-		},
+		}
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index e545f1825..be202affe 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -22,8 +22,7 @@
 				:key="note.id"
 				@update:note="onNoteUpdated(i, $event)"
 				:media-view="mediaView"
-				:mini="true"
-				@parentFocus="parentFocus"/>
+				:mini="true"/>
 			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
 				<span>%fa:angle-up%{{ note._datetext }}</span>
 				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
@@ -111,10 +110,6 @@ export default Vue.extend({
 			(this.$refs.notes as any).children[0].focus ? (this.$refs.notes as any).children[0].focus() : (this.$refs.notes as any).$el.children[0].focus();
 		},
 
-		parentFocus(direction) {
-			this.$emit('parentFocus', direction);
-		},
-
 		onNoteUpdated(i, note) {
 			Vue.set((this as any).notes, i, note);
 		},
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
index 6aa4711da..6faef3643 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
@@ -20,21 +20,18 @@
 		:media-only="column.isMediaOnly"
 		:media-view="column.isMediaView"
 		ref="tl"
-		@parentFocus="parentFocus"
 	/>
 	<x-hashtag-tl v-else-if="column.type == 'hashtag'"
 		:tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)"
 		:media-only="column.isMediaOnly"
 		:media-view="column.isMediaView"
 		ref="tl"
-		@parentFocus="parentFocus"
 	/>
 	<x-tl v-else
 		:src="column.type"
 		:media-only="column.isMediaOnly"
 		:media-view="column.isMediaView"
 		ref="tl"
-		@parentFocus="parentFocus"
 	/>
 </x-column>
 </template>
@@ -100,11 +97,7 @@ export default Vue.extend({
 
 		focus() {
 			this.$refs.tl.focus();
-		},
-
-		parentFocus(direction) {
-			this.$emit('parentFocus', direction);
-		},
+		}
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl.vue b/src/client/app/desktop/views/pages/deck/deck.tl.vue
index 318e661b7..e9507cdf2 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl.vue
@@ -1,5 +1,5 @@
 <template>
-<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView" @parentFocus="parentFocus"/>
+<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
 </template>
 
 <script lang="ts">
@@ -143,11 +143,7 @@ export default Vue.extend({
 
 		focus() {
 			(this.$refs.timeline as any).focus();
-		},
-
-		parentFocus(direction) {
-			this.$emit('parentFocus', direction);
-		},
+		}
 	}
 });
 </script>