mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-07-31 13:40:20 +02:00
Code Issues 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:42:15 +09:00
parent ff54deb83d
commit 8c280b0b15
3 changed files with 44 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
extensions/mentions/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/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',

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

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

33
extensions/mentions/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;
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) {