リアクションピッカーでテキストボックスにフォーカスするように

mei23 · Apr 15, 2019 · 5ee3b5f · 5ee3b5f
1 parent 2deb164
commit 5ee3b5f
Showing 1 changed file with 5 additions and 75 deletions.
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
@@ -3,7 +3,7 @@
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ isMobile: $root.isMobile }" ref="popover">
 		<p v-if="!$root.isMobile">{{ title }}</p>
-		<div class="buttons" ref="buttons" :class="{ showFocus }">
+		<div class="buttons" ref="buttons">
 			<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" :title="$t('@.reactions.like')" v-particle><mk-reaction-icon reaction="like"/></button>
 			<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" :title="$t('@.reactions.love')" v-particle><mk-reaction-icon reaction="love"/></button>
 			<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" :title="$t('@.reactions.laugh')" v-particle><mk-reaction-icon reaction="laugh"/></button>
@@ -16,7 +16,7 @@
 			<button @click="react('pudding')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="10" :title="$t('@.reactions.pudding')" v-particle><mk-reaction-icon reaction="pudding"/></button>
 		</div>
 		<div v-if="enableEmojiReaction" class="text">
-			<input v-model="text" placeholder="絵文字入力" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
+			<input v-model="text" placeholder="絵文字入力" @keyup.enter="reactText" @keydown.esc="close" @input="tryReactText" v-autocomplete="{ model: 'text' }" ref="text">
 			<button title="決定" @click="reactText"><fa icon="check"/></button>
 			<button title="選択" class="emoji" @click="emoji" ref="emoji" v-if="!$root.isMobile">
 				<fa :icon="['far', 'laugh']"/>
@@ -50,12 +50,6 @@ export default Vue.extend({
 			required: false
 		},
 
-		showFocus: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-
 		animation: {
 			type: Boolean,
 			required: false,
@@ -69,51 +63,26 @@ export default Vue.extend({
 			title: this.$t('choose-reaction'),
 			text: null,
 			enableEmojiReaction: false,
-			focus: null
 		};
 	},
 
 	computed: {
 		keymap(): any {
 			return {
 				'esc': this.close,
-				'enter|space|plus': this.choose,
-				'up|k': this.focusUp,
-				'left|h|shift+tab': this.focusLeft,
-				'right|l|tab': this.focusRight,
-				'down|j': this.focusDown,
-				'1': () => this.react('like'),
-				'2': () => this.react('love'),
-				'3': () => this.react('laugh'),
-				'4': () => this.react('hmm'),
-				'5': () => this.react('surprise'),
-				'6': () => this.react('congrats'),
-				'7': () => this.react('angry'),
-				'8': () => this.react('confused'),
-				'9': () => this.react('rip'),
-				'0': () => this.react('pudding'),
 			};
 		}
 	},
 
-	watch: {
-		focus(i) {
-			this.$refs.buttons.children[i].focus();
-
-			if (this.showFocus) {
-				this.title = this.$refs.buttons.children[i].title;
-			}
-		}
-	},
-
 	mounted() {
 		this.$root.getMeta().then(meta => {
 			this.enableEmojiReaction = meta.enableEmojiReaction;
+			this.$nextTick(() => {
+				if (this.$refs.text) this.$refs.text.focus();
+			});
 		});
 
 		this.$nextTick(() => {
-			this.focus = 0;
-
 			const popover = this.$refs.popover as any;
 
 			const rect = this.source.getBoundingClientRect();
@@ -214,26 +183,6 @@ export default Vue.extend({
 				}
 			});
 		},
-
-		focusUp() {
-			this.focus = this.focus == 0 ? 9 : this.focus < 5 ? (this.focus + 4) : (this.focus - 5);
-		},
-
-		focusDown() {
-			this.focus = this.focus == 9 ? 0 : this.focus >= 5 ? (this.focus - 4) : (this.focus + 5);
-		},
-
-		focusRight() {
-			this.focus = this.focus == 9 ? 0 : (this.focus + 1);
-		},
-
-		focusLeft() {
-			this.focus = this.focus == 0 ? 9 : (this.focus - 1);
-		},
-
-		choose() {
-			this.$refs.buttons.childNodes[this.focus].click();
-		}
 	}
 });
 </script>
@@ -302,21 +251,6 @@ export default Vue.extend({
 			width 216px
 			text-align center
 
-			&.showFocus
-				> button:focus
-					z-index 1
-
-					&:after
-						content ""
-						pointer-events none
-						position absolute
-						top 0
-						right 0
-						bottom 0
-						left 0
-						border 2px solid var(--primaryAlpha03)
-						border-radius 4px
-
 			> button
 				padding 0
 				width 40px
@@ -356,10 +290,6 @@ export default Vue.extend({
 					border-color var(--primaryAlpha02)
 					transition border-color .1s ease
 
-				&:focus
-					border-color var(--primaryAlpha05)
-					transition border-color 0s ease
-
 			> button
 				cursor pointer
 				padding 0 8px