github-mirror/framework
github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-20 23:24:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use newly extracted KeyboardNavigatable util for emoji dropdown

Browse Source 
Refs flarum/core#264.
This commit is contained in:
Franz Liedke 2016-05-15 22:36:18 +09:00
parent a3b92ed02c
commit dbf82e4641
3 changed files with 45 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
extensions/emoji/js/forum/dist/extension.js vendored
View File

@ -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',

11
extensions/emoji/js/forum/src/addComposerAutocomplete.js
View File

@ -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;

35
extensions/emoji/js/forum/src/components/AutocompleteDropdown.js
View File

@ -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) {