From 84974d3f31f795b69cb148a0188a9e9228963fe5 Mon Sep 17 00:00:00 2001 From: Franz Liedke Date: Sun, 15 May 2016 23:18:29 +0900 Subject: [PATCH] Use newly extracted KeyboardNavigatable util for emoji dropdown Refs flarum/core#264. --- extensions/tags/js/forum/dist/extension.js | 86 ++++++++----------- .../src/components/TagDiscussionModal.js | 46 ++++------ 2 files changed, 55 insertions(+), 77 deletions(-) diff --git a/extensions/tags/js/forum/dist/extension.js b/extensions/tags/js/forum/dist/extension.js index 014af4da1..68ad9f0c6 100644 --- a/extensions/tags/js/forum/dist/extension.js +++ b/extensions/tags/js/forum/dist/extension.js @@ -406,8 +406,8 @@ System.register('flarum/tags/components/DiscussionTaggedPost', ['flarum/componen });; 'use strict'; -System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components/Modal', 'flarum/components/DiscussionPage', 'flarum/components/Button', 'flarum/helpers/highlight', 'flarum/utils/classList', 'flarum/utils/extractText', 'flarum/tags/helpers/tagLabel', 'flarum/tags/helpers/tagIcon', 'flarum/tags/utils/sortTags'], function (_export, _context) { - var Modal, DiscussionPage, Button, highlight, classList, extractText, tagLabel, tagIcon, sortTags, TagDiscussionModal; +System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components/Modal', 'flarum/components/DiscussionPage', 'flarum/components/Button', 'flarum/helpers/highlight', 'flarum/utils/classList', 'flarum/utils/extractText', 'flarum/utils/KeyboardNavigatable', 'flarum/tags/helpers/tagLabel', 'flarum/tags/helpers/tagIcon', 'flarum/tags/utils/sortTags'], function (_export, _context) { + var Modal, DiscussionPage, Button, highlight, classList, extractText, KeyboardNavigatable, tagLabel, tagIcon, sortTags, TagDiscussionModal; return { setters: [function (_flarumComponentsModal) { Modal = _flarumComponentsModal.default; @@ -421,6 +421,8 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components classList = _flarumUtilsClassList.default; }, function (_flarumUtilsExtractText) { extractText = _flarumUtilsExtractText.default; + }, function (_flarumUtilsKeyboardNavigatable) { + KeyboardNavigatable = _flarumUtilsKeyboardNavigatable.default; }, function (_flarumTagsHelpersTagLabel) { tagLabel = _flarumTagsHelpersTagLabel.default; }, function (_flarumTagsHelpersTagIcon) { @@ -440,6 +442,8 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components babelHelpers.createClass(TagDiscussionModal, [{ key: 'init', value: function init() { + var _this2 = this; + babelHelpers.get(Object.getPrototypeOf(TagDiscussionModal.prototype), 'init', this).call(this); this.tags = sortTags(app.store.all('tags').filter(function (tag) { @@ -461,6 +465,15 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components this.maxPrimary = app.forum.attribute('maxPrimaryTags'); this.minSecondary = app.forum.attribute('minSecondaryTags'); this.maxSecondary = app.forum.attribute('maxSecondaryTags'); + + this.navigator = new KeyboardNavigatable(); + this.navigator.onUp(function () { + return _this2.setIndex(_this2.getCurrentNumericIndex() - 1, true); + }).onDown(function () { + return _this2.setIndex(_this2.getCurrentNumericIndex() + 1, true); + }).onSelect(this.select.bind(this)).onRemove(function () { + return _this2.selected.splice(_this2.selected.length - 1, 1); + }); } }, { key: 'primaryCount', @@ -537,7 +550,7 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components }, { key: 'content', value: function content() { - var _this2 = this; + var _this3 = this; var tags = this.tags; var filter = this.filter().toLowerCase(); @@ -548,20 +561,20 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components // makes it impossible to select a child if its parent hasn't been selected. tags = tags.filter(function (tag) { var parent = tag.parent(); - return parent === false || _this2.selected.indexOf(parent) !== -1; + return parent === false || _this3.selected.indexOf(parent) !== -1; }); // If the number of selected primary/secondary tags is at the maximum, then // we'll filter out all other tags of that type. if (primaryCount >= this.maxPrimary) { tags = tags.filter(function (tag) { - return !tag.isPrimary() || _this2.selected.indexOf(tag) !== -1; + return !tag.isPrimary() || _this3.selected.indexOf(tag) !== -1; }); } if (secondaryCount >= this.maxSecondary) { tags = tags.filter(function (tag) { - return tag.isPrimary() || _this2.selected.indexOf(tag) !== -1; + return tag.isPrimary() || _this3.selected.indexOf(tag) !== -1; }); } @@ -594,8 +607,8 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components return m( 'span', { className: 'TagsInput-tag', onclick: function onclick() { - _this2.removeTag(tag); - _this2.onready(); + _this3.removeTag(tag); + _this3.onready(); } }, tagLabel(tag) ); @@ -605,12 +618,12 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components placeholder: extractText(this.getInstruction(primaryCount, secondaryCount)), value: this.filter(), oninput: m.withAttr('value', this.filter), - onkeydown: this.onkeydown.bind(this), + onkeydown: this.navigator.navigate.bind(this.navigator), onfocus: function onfocus() { - return _this2.focused = true; + return _this3.focused = true; }, onblur: function onblur() { - return _this2.focused = false; + return _this3.focused = false; } }) ) ), @@ -633,7 +646,7 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components 'ul', { className: 'TagDiscussionModal-list SelectTagList' }, tags.filter(function (tag) { - return filter || !tag.parent() || _this2.selected.indexOf(tag.parent()) !== -1; + return filter || !tag.parent() || _this3.selected.indexOf(tag.parent()) !== -1; }).map(function (tag) { return m( 'li', @@ -642,14 +655,14 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components pinned: tag.position() !== null, child: !!tag.parent(), colored: !!tag.color(), - selected: _this2.selected.indexOf(tag) !== -1, - active: _this2.index === tag + selected: _this3.selected.indexOf(tag) !== -1, + active: _this3.index === tag }), style: { color: tag.color() }, onmouseover: function onmouseover() { - return _this2.index = tag; + return _this3.index = tag; }, - onclick: _this2.toggleTag.bind(_this2, tag) + onclick: _this3.toggleTag.bind(_this3, tag) }, tagIcon(tag), m( @@ -686,38 +699,15 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components this.onready(); } }, { - key: 'onkeydown', - value: function onkeydown(e) { - switch (e.which) { - case 40: - case 38: - // Down/Up - e.preventDefault(); - this.setIndex(this.getCurrentNumericIndex() + (e.which === 40 ? 1 : -1), true); - break; - - case 13: - // Return - e.preventDefault(); - if (e.metaKey || e.ctrlKey || this.selected.indexOf(this.index) !== -1) { - if (this.selected.length) { - this.$('form').submit(); - } - } else { - this.getItem(this.index)[0].dispatchEvent(new Event('click')); - } - break; - - case 8: - // Backspace - if (e.target.selectionStart === 0 && e.target.selectionEnd === 0) { - e.preventDefault(); - this.selected.splice(this.selected.length - 1, 1); - } - break; - - default: - // no default + key: 'select', + value: function select(e) { + // Ctrl + Enter submits the selection, just Enter completes the current entry + if (e.metaKey || e.ctrlKey || this.selected.indexOf(this.index) !== -1) { + if (this.selected.length) { + this.$('form').submit(); + } + } else { + this.getItem(this.index)[0].dispatchEvent(new Event('click')); } } }, { diff --git a/extensions/tags/js/forum/src/components/TagDiscussionModal.js b/extensions/tags/js/forum/src/components/TagDiscussionModal.js index 29e8e9c41..28b7038b3 100644 --- a/extensions/tags/js/forum/src/components/TagDiscussionModal.js +++ b/extensions/tags/js/forum/src/components/TagDiscussionModal.js @@ -4,6 +4,7 @@ import Button from 'flarum/components/Button'; import highlight from 'flarum/helpers/highlight'; import classList from 'flarum/utils/classList'; import extractText from 'flarum/utils/extractText'; +import KeyboardNavigatable from 'flarum/utils/KeyboardNavigatable'; import tagLabel from 'flarum/tags/helpers/tagLabel'; import tagIcon from 'flarum/tags/helpers/tagIcon'; @@ -30,6 +31,13 @@ export default class TagDiscussionModal extends Modal { this.maxPrimary = app.forum.attribute('maxPrimaryTags'); this.minSecondary = app.forum.attribute('minSecondaryTags'); this.maxSecondary = app.forum.attribute('maxSecondaryTags'); + + this.navigator = new KeyboardNavigatable(); + this.navigator + .onUp(() => this.setIndex(this.getCurrentNumericIndex() - 1, true)) + .onDown(() => this.setIndex(this.getCurrentNumericIndex() + 1, true)) + .onSelect(this.select.bind(this)) + .onRemove(() => this.selected.splice(this.selected.length - 1, 1)); } primaryCount() { @@ -151,7 +159,7 @@ export default class TagDiscussionModal extends Modal { placeholder={extractText(this.getInstruction(primaryCount, secondaryCount))} value={this.filter()} oninput={m.withAttr('value', this.filter)} - onkeydown={this.onkeydown.bind(this)} + onkeydown={this.navigator.navigate.bind(this.navigator)} onfocus={() => this.focused = true} onblur={() => this.focused = false}/> @@ -219,34 +227,14 @@ export default class TagDiscussionModal extends Modal { this.onready(); } - onkeydown(e) { - switch (e.which) { - case 40: - case 38: // Down/Up - e.preventDefault(); - this.setIndex(this.getCurrentNumericIndex() + (e.which === 40 ? 1 : -1), true); - break; - - case 13: // Return - e.preventDefault(); - if (e.metaKey || e.ctrlKey || this.selected.indexOf(this.index) !== -1) { - if (this.selected.length) { - this.$('form').submit(); - } - } else { - this.getItem(this.index)[0].dispatchEvent(new Event('click')); - } - break; - - case 8: // Backspace - if (e.target.selectionStart === 0 && e.target.selectionEnd === 0) { - e.preventDefault(); - this.selected.splice(this.selected.length - 1, 1); - } - break; - - default: - // no default + select(e) { + // Ctrl + Enter submits the selection, just Enter completes the current entry + if (e.metaKey || e.ctrlKey || this.selected.indexOf(this.index) !== -1) { + if (this.selected.length) { + this.$('form').submit(); + } + } else { + this.getItem(this.index)[0].dispatchEvent(new Event('click')); } }