From 31ce3aa31296a1809cabc02f1ed6c92b328f5b3e Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 18 Sep 2018 05:35:06 +0900 Subject: キーボードショートカットを強化するなど MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/app/common/keycode.ts | 139 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 src/client/app/common/keycode.ts (limited to 'src/client/app/common/keycode.ts') diff --git a/src/client/app/common/keycode.ts b/src/client/app/common/keycode.ts new file mode 100644 index 0000000000..c5ea6cb484 --- /dev/null +++ b/src/client/app/common/keycode.ts @@ -0,0 +1,139 @@ +export default searchInput => { + // Keyboard Events + if (searchInput && typeof searchInput === 'object') { + const hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode; + if (hasKeyCode) { + searchInput = hasKeyCode; + } + } + + // Numbers + // if (typeof searchInput === 'number') { + // return names[searchInput] + // } + + // Everything else (cast to string) + const search = String(searchInput); + + // check codes + const foundNamedKeyCodes = codes[search.toLowerCase()]; + if (foundNamedKeyCodes) { + return foundNamedKeyCodes; + } + + // check aliases + const foundNamedKeyAliases = aliases[search.toLowerCase()]; + if (foundNamedKeyAliases) { + return foundNamedKeyAliases; + } + + // weird character? + if (search.length === 1) { + return search.charCodeAt(0); + } + + return undefined; +}; + +/** + * Get by name + * + * exports.code['enter'] // => 13 + */ + +export const codes = { + 'backspace': 8, + 'tab': 9, + 'enter': 13, + 'shift': 16, + 'ctrl': 17, + 'alt': 18, + 'pause/break': 19, + 'caps lock': 20, + 'esc': 27, + 'space': 32, + 'page up': 33, + 'page down': 34, + 'end': 35, + 'home': 36, + 'left': 37, + 'up': 38, + 'right': 39, + 'down': 40, + // 'add': 43, + 'insert': 45, + 'delete': 46, + 'command': 91, + 'left command': 91, + 'right command': 93, + 'numpad *': 106, + // 'numpad +': 107, + 'numpad +': 43, + 'numpad add': 43, // as a trick + 'numpad -': 109, + 'numpad .': 110, + 'numpad /': 111, + 'num lock': 144, + 'scroll lock': 145, + 'my computer': 182, + 'my calculator': 183, + ';': 186, + '=': 187, + ',': 188, + '-': 189, + '.': 190, + '/': 191, + '`': 192, + '[': 219, + '\\': 220, + ']': 221, + "'": 222 +}; + +// Helper aliases + +export const aliases = { + 'windows': 91, + '⇧': 16, + '⌥': 18, + '⌃': 17, + '⌘': 91, + 'ctl': 17, + 'control': 17, + 'option': 18, + 'pause': 19, + 'break': 19, + 'caps': 20, + 'return': 13, + 'escape': 27, + 'spc': 32, + 'pgup': 33, + 'pgdn': 34, + 'ins': 45, + 'del': 46, + 'cmd': 91 +}; + +/*! +* Programatically add the following +*/ + +// lower case chars +for (let i = 97; i < 123; i++) { + codes[String.fromCharCode(i)] = i - 32; +} + +// numbers +for (let i = 48; i < 58; i++) { + codes[i - 48] = i; +} + +// function keys +for (let i = 1; i < 13; i++) { + codes['f' + i] = i + 111; +} + +// numpad keys +for (let i = 0; i < 10; i++) { + codes['numpad ' + i] = i + 96; +} -- cgit v1.2.3-freya From 55e2ae1408e056295d37681814b62f24a50a617e Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 18 Sep 2018 09:11:52 +0900 Subject: Improve usability --- src/client/app/common/hotkey.ts | 6 ++- src/client/app/common/keycode.ts | 3 +- .../common/views/components/reaction-picker.vue | 61 +++++++++++++++++++++- .../app/desktop/views/components/notes.note.vue | 15 ++++-- 4 files changed, 75 insertions(+), 10 deletions(-) (limited to 'src/client/app/common/keycode.ts') diff --git a/src/client/app/common/hotkey.ts b/src/client/app/common/hotkey.ts index 10cbeea543..62726887d1 100644 --- a/src/client/app/common/hotkey.ts +++ b/src/client/app/common/hotkey.ts @@ -13,8 +13,10 @@ const getKeyMap = keymap => Object.keys(keymap).map(input => { case 'meta': result[keyName] = true; break; - default: + default: { result.keyCode = keyCode(keyName); + if (!Array.isArray(result.keyCode)) result.keyCode = [result.keyCode]; + } } }); @@ -45,7 +47,7 @@ export default { for (const hotkey of el._keymap) { if (el._hotkey_global && reservedKeyCodes.includes(`'${e.keyCode}'`)) break; - const callback = hotkey.keyCode === e.keyCode && + const callback = hotkey.keyCode.includes(e.keyCode) && !!hotkey.ctrl === e.ctrlKey && !!hotkey.alt === e.altKey && !!hotkey.shift === e.shiftKey && diff --git a/src/client/app/common/keycode.ts b/src/client/app/common/keycode.ts index c5ea6cb484..0324a5389a 100644 --- a/src/client/app/common/keycode.ts +++ b/src/client/app/common/keycode.ts @@ -67,8 +67,7 @@ export const codes = { 'left command': 91, 'right command': 93, 'numpad *': 106, - // 'numpad +': 107, - 'numpad +': 43, + 'numpad plus': [43, 107], 'numpad add': 43, // as a trick 'numpad -': 109, 'numpad .': 110, diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue index c329241d8a..4e27fb36e3 100644 --- a/src/client/app/common/views/components/reaction-picker.vue +++ b/src/client/app/common/views/components/reaction-picker.vue @@ -3,7 +3,7 @@

{{ title }}

-
+
@@ -50,12 +50,19 @@ export default Vue.extend({ type: Boolean, required: false, default: false + }, + + showFocus: { + type: Boolean, + required: false, + default: false } }, data() { return { - title: placeholder + title: placeholder, + focus: null }; }, @@ -63,6 +70,9 @@ export default Vue.extend({ keymap(): any { return { 'esc': this.close, + 'enter': this.choose, + 'space': this.choose, + 'numpad plus': this.choose, '1': () => this.react('like'), 'numpad 1': () => this.react('like'), '2': () => this.react('love'), @@ -83,12 +93,24 @@ export default Vue.extend({ 'numpad 9': () => this.react('rip'), '0': () => this.react('pudding'), 'numpad 0': () => this.react('pudding'), + 'up': this.focusUp, + 'right': this.focusRight, + 'down': this.focusDown, + 'left': this.focusLeft, }; } }, + watch: { + focus(i) { + this.$refs.buttons.childNodes[i].focus(); + } + }, + mounted() { this.$nextTick(() => { + this.focus = 0; + const popover = this.$refs.popover as any; const rect = this.source.getBoundingClientRect(); @@ -164,6 +186,26 @@ export default Vue.extend({ this.destroyDom(); } }); + }, + + 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(); } } }); @@ -249,6 +291,21 @@ root(isDark) width 240px 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 rgba($theme-color, 0.3) + border-radius 4px + > button padding 0 width 40px diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue index fadf47e628..b8c5f31511 100644 --- a/src/client/app/desktop/views/components/notes.note.vue +++ b/src/client/app/desktop/views/components/notes.note.vue @@ -48,7 +48,7 @@ -