Use newly extracted KeyboardNavigatable util for emoji dropdown

Refs flarum/core#264.

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) {
+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, truncate, AutocompleteDropdown;
+  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);
+            this.setIndex(this.index + delta, 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
           }
+        }, {
+          key: 'complete',
+          value: function complete() {
+            this.$('li').eq(this.index).find('button').click();
           }
         }, {
           key: 'setIndex',

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;

extensions/mentions/js/forum/src/components/AutocompleteDropdown.js

@@ -28,32 +28,15 @@ export default class AutocompleteDropdown extends Component {
     this.active = false;
   }
 
-  navigate(e) {
+  navigate(delta) {
-    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);
+    this.setIndex(this.index + delta, 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) {