From 8c280b0b152e5e8ad483bdf4f7382d06c6b9048e Mon Sep 17 00:00:00 2001 From: Franz Liedke Date: Sun, 15 May 2016 22:42:15 +0900 Subject: [PATCH] Use newly extracted KeyboardNavigatable util for emoji dropdown Refs flarum/core#264. --- .../mentions/js/forum/dist/extension.js | 60 ++++++++----------- .../js/forum/src/addComposerAutocomplete.js | 11 +++- .../src/components/AutocompleteDropdown.js | 33 +++------- 3 files changed, 44 insertions(+), 60 deletions(-) diff --git a/extensions/mentions/js/forum/dist/extension.js b/extensions/mentions/js/forum/dist/extension.js index ddc62c41c..2de388796 100644 --- a/extensions/mentions/js/forum/dist/extension.js +++ b/extensions/mentions/js/forum/dist/extension.js @@ -131,8 +131,8 @@ if (typeof module != 'undefined' && typeof module.exports != 'undefined') { ; 'use strict'; -System.register('flarum/mentions/addComposerAutocomplete', ['flarum/extend', 'flarum/components/ComposerBody', 'flarum/helpers/avatar', 'flarum/helpers/username', 'flarum/helpers/highlight', 'flarum/utils/string', 'flarum/mentions/components/AutocompleteDropdown'], function (_export, _context) { - var extend, ComposerBody, avatar, usernameHelper, highlight, truncate, AutocompleteDropdown; +System.register('flarum/mentions/addComposerAutocomplete', ['flarum/extend', 'flarum/components/ComposerBody', 'flarum/helpers/avatar', 'flarum/helpers/username', 'flarum/helpers/highlight', 'flarum/utils/KeyboardNavigatable', 'flarum/utils/string', 'flarum/mentions/components/AutocompleteDropdown'], function (_export, _context) { + var extend, ComposerBody, avatar, usernameHelper, highlight, KeyboardNavigatable, truncate, AutocompleteDropdown; function addComposerAutocomplete() { extend(ComposerBody.prototype, 'config', function (original, isInitialized) { if (isInitialized) return; @@ -158,7 +158,16 @@ System.register('flarum/mentions/addComposerAutocomplete', ['flarum/extend', 'fl 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. @@ -311,6 +320,8 @@ System.register('flarum/mentions/addComposerAutocomplete', ['flarum/extend', 'fl usernameHelper = _flarumHelpersUsername.default; }, function (_flarumHelpersHighlight) { highlight = _flarumHelpersHighlight.default; + }, function (_flarumUtilsKeyboardNavigatable) { + KeyboardNavigatable = _flarumUtilsKeyboardNavigatable.default; }, function (_flarumUtilsString) { truncate = _flarumUtilsString.truncate; }, function (_flarumMentionsComponentsAutocompleteDropdown) { @@ -743,39 +754,20 @@ System.register('flarum/mentions/components/AutocompleteDropdown', ['flarum/Comp } }, { 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/mentions/js/forum/src/addComposerAutocomplete.js b/extensions/mentions/js/forum/src/addComposerAutocomplete.js index a0a084919..bdcd420ca 100644 --- a/extensions/mentions/js/forum/src/addComposerAutocomplete.js +++ b/extensions/mentions/js/forum/src/addComposerAutocomplete.js @@ -5,6 +5,7 @@ import ComposerBody from 'flarum/components/ComposerBody'; import avatar from 'flarum/helpers/avatar'; import usernameHelper from 'flarum/helpers/username'; import highlight from 'flarum/helpers/highlight'; +import KeyboardNavigatable from 'flarum/utils/KeyboardNavigatable'; import { truncate } from 'flarum/utils/string'; import AutocompleteDropdown from 'flarum/mentions/components/AutocompleteDropdown'; @@ -34,9 +35,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/mentions/js/forum/src/components/AutocompleteDropdown.js b/extensions/mentions/js/forum/src/components/AutocompleteDropdown.js index ef079d782..7dbee86bb 100644 --- a/extensions/mentions/js/forum/src/components/AutocompleteDropdown.js +++ b/extensions/mentions/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; + navigate(delta) { + this.keyWasJustPressed = true; + this.setIndex(this.index + delta, true); + clearTimeout(this.keyWasJustPressedTimeout); + this.keyWasJustPressedTimeout = setTimeout(() => this.keyWasJustPressed = false, 500); + } - 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 - } + complete() { + this.$('li').eq(this.index).find('button').click(); } setIndex(index, scrollToItem) {