From dbf82e464176a3cf83e002cc346b971272e364dc Mon Sep 17 00:00:00 2001 From: Franz Liedke Date: Sun, 15 May 2016 22:36:18 +0900 Subject: [PATCH] Use newly extracted KeyboardNavigatable util for emoji dropdown Refs flarum/core#264. --- extensions/emoji/js/forum/dist/extension.js | 60 ++++++++----------- .../js/forum/src/addComposerAutocomplete.js | 11 +++- .../src/components/AutocompleteDropdown.js | 35 +++-------- 3 files changed, 45 insertions(+), 61 deletions(-) diff --git a/extensions/emoji/js/forum/dist/extension.js b/extensions/emoji/js/forum/dist/extension.js index 894344974..826e8efed 100644 --- a/extensions/emoji/js/forum/dist/extension.js +++ b/extensions/emoji/js/forum/dist/extension.js @@ -131,8 +131,8 @@ if (typeof module != 'undefined' && typeof module.exports != 'undefined') { ; 'use strict'; -System.register('flarum/emoji/addComposerAutocomplete', ['flarum/extend', 'flarum/components/ComposerBody', 'flarum/emoji/helpers/emojiMap', 'flarum/emoji/components/AutocompleteDropdown'], function (_export, _context) { - var extend, ComposerBody, emojiMap, AutocompleteDropdown; +System.register('flarum/emoji/addComposerAutocomplete', ['flarum/extend', 'flarum/components/ComposerBody', 'flarum/emoji/helpers/emojiMap', 'flarum/utils/KeyboardNavigatable', 'flarum/emoji/components/AutocompleteDropdown'], function (_export, _context) { + var extend, ComposerBody, emojiMap, KeyboardNavigatable, AutocompleteDropdown; function addComposerAutocomplete() { var emojiKeys = Object.keys(emojiMap); @@ -159,7 +159,16 @@ System.register('flarum/emoji/addComposerAutocomplete', ['flarum/extend', 'flaru dropdown.hide(); }; - $textarea.after($container).on('keydown', dropdown.navigate.bind(dropdown)).on('click keyup', function (e) { + this.navigator = new KeyboardNavigatable(); + this.navigator.when(function () { + return dropdown.active; + }).onUp(function () { + return dropdown.navigate(-1); + }).onDown(function () { + return dropdown.navigate(1); + }).onSelect(dropdown.complete.bind(dropdown)).onCancel(dropdown.hide.bind(dropdown)).bindTo($textarea); + + $textarea.after($container).on('click keyup', function (e) { var _this = this; // Up, down, enter, tab, escape, left, right. @@ -315,6 +324,8 @@ System.register('flarum/emoji/addComposerAutocomplete', ['flarum/extend', 'flaru ComposerBody = _flarumComponentsComposerBody.default; }, function (_flarumEmojiHelpersEmojiMap) { emojiMap = _flarumEmojiHelpersEmojiMap.default; + }, function (_flarumUtilsKeyboardNavigatable) { + KeyboardNavigatable = _flarumUtilsKeyboardNavigatable.default; }, function (_flarumEmojiComponentsAutocompleteDropdown) { AutocompleteDropdown = _flarumEmojiComponentsAutocompleteDropdown.default; }], @@ -377,39 +388,20 @@ System.register('flarum/emoji/components/AutocompleteDropdown', ['flarum/Compone } }, { key: 'navigate', - value: function navigate(e) { + value: function navigate(delta) { var _this2 = this; - if (!this.active) return; - - switch (e.which) { - case 40:case 38: - // Down/Up - this.keyWasJustPressed = true; - this.setIndex(this.index + (e.which === 40 ? 1 : -1), true); - clearTimeout(this.keyWasJustPressedTimeout); - this.keyWasJustPressedTimeout = setTimeout(function () { - return _this2.keyWasJustPressed = false; - }, 500); - e.preventDefault(); - break; - - case 13:case 9: - // Enter/Tab - this.$('li').eq(this.index).find('button').click(); - e.preventDefault(); - break; - - case 27: - // Escape - this.hide(); - e.stopPropagation(); - e.preventDefault(); - break; - - default: - // no default - } + this.keyWasJustPressed = true; + this.setIndex(this.index + delta, true); + clearTimeout(this.keyWasJustPressedTimeout); + this.keyWasJustPressedTimeout = setTimeout(function () { + return _this2.keyWasJustPressed = false; + }, 500); + } + }, { + key: 'complete', + value: function complete() { + this.$('li').eq(this.index).find('button').click(); } }, { key: 'setIndex', diff --git a/extensions/emoji/js/forum/src/addComposerAutocomplete.js b/extensions/emoji/js/forum/src/addComposerAutocomplete.js index fbebd5427..2d5ea721a 100644 --- a/extensions/emoji/js/forum/src/addComposerAutocomplete.js +++ b/extensions/emoji/js/forum/src/addComposerAutocomplete.js @@ -3,6 +3,7 @@ import { extend } from 'flarum/extend'; import ComposerBody from 'flarum/components/ComposerBody'; import emojiMap from 'flarum/emoji/helpers/emojiMap'; +import KeyboardNavigatable from 'flarum/utils/KeyboardNavigatable'; import AutocompleteDropdown from 'flarum/emoji/components/AutocompleteDropdown'; @@ -32,9 +33,17 @@ export default function addComposerAutocomplete() { dropdown.hide(); }; + this.navigator = new KeyboardNavigatable(); + this.navigator + .when(() => dropdown.active) + .onUp(() => dropdown.navigate(-1)) + .onDown(() => dropdown.navigate(1)) + .onSelect(dropdown.complete.bind(dropdown)) + .onCancel(dropdown.hide.bind(dropdown)) + .bindTo($textarea); + $textarea .after($container) - .on('keydown', dropdown.navigate.bind(dropdown)) .on('click keyup', function(e) { // Up, down, enter, tab, escape, left, right. if ([9, 13, 27, 40, 38, 37, 39].indexOf(e.which) !== -1) return; diff --git a/extensions/emoji/js/forum/src/components/AutocompleteDropdown.js b/extensions/emoji/js/forum/src/components/AutocompleteDropdown.js index 965911fd3..499b260ce 100644 --- a/extensions/emoji/js/forum/src/components/AutocompleteDropdown.js +++ b/extensions/emoji/js/forum/src/components/AutocompleteDropdown.js @@ -28,32 +28,15 @@ export default class AutocompleteDropdown extends Component { this.active = false; } - navigate(e) { - if (!this.active) return; - - switch (e.which) { - case 40: case 38: // Down/Up - this.keyWasJustPressed = true; - this.setIndex(this.index + (e.which === 40 ? 1 : -1), true); - clearTimeout(this.keyWasJustPressedTimeout); - this.keyWasJustPressedTimeout = setTimeout(() => this.keyWasJustPressed = false, 500); - e.preventDefault(); - break; - - case 13: case 9: // Enter/Tab - this.$('li').eq(this.index).find('button').click(); - e.preventDefault(); - break; - - case 27: // Escape - this.hide(); - e.stopPropagation(); - e.preventDefault(); - break; - - default: - // no default - } + navigate(delta) { + this.keyWasJustPressed = true; + this.setIndex(this.index + delta, true); + clearTimeout(this.keyWasJustPressedTimeout); + this.keyWasJustPressedTimeout = setTimeout(() => this.keyWasJustPressed = false, 500); + } + + complete() { + this.$('li').eq(this.index).find('button').click(); } setIndex(index, scrollToItem) {