mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-24 09:03:05 +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 23:18:29 +09:00
parent 7190cd84b4
commit 84974d3f31
2 changed files with 55 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
extensions/tags/js/forum/dist/extension.js vendored
View File

@@ -406,8 +406,8 @@ System.register('flarum/tags/components/DiscussionTaggedPost', ['flarum/componen
});; });;
'use strict'; '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) { 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, tagLabel, tagIcon, sortTags, TagDiscussionModal; var Modal, DiscussionPage, Button, highlight, classList, extractText, KeyboardNavigatable, tagLabel, tagIcon, sortTags, TagDiscussionModal;
return { return {
setters: [function (_flarumComponentsModal) { setters: [function (_flarumComponentsModal) {
Modal = _flarumComponentsModal.default; Modal = _flarumComponentsModal.default;
@@ -421,6 +421,8 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components
classList = _flarumUtilsClassList.default; classList = _flarumUtilsClassList.default;
}, function (_flarumUtilsExtractText) { }, function (_flarumUtilsExtractText) {
extractText = _flarumUtilsExtractText.default; extractText = _flarumUtilsExtractText.default;
}, function (_flarumUtilsKeyboardNavigatable) {
KeyboardNavigatable = _flarumUtilsKeyboardNavigatable.default;
}, function (_flarumTagsHelpersTagLabel) { }, function (_flarumTagsHelpersTagLabel) {
tagLabel = _flarumTagsHelpersTagLabel.default; tagLabel = _flarumTagsHelpersTagLabel.default;
}, function (_flarumTagsHelpersTagIcon) { }, function (_flarumTagsHelpersTagIcon) {
@@ -440,6 +442,8 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components
babelHelpers.createClass(TagDiscussionModal, [{ babelHelpers.createClass(TagDiscussionModal, [{
key: 'init', key: 'init',
value: function init() { value: function init() {
var _this2 = this;
babelHelpers.get(Object.getPrototypeOf(TagDiscussionModal.prototype), 'init', this).call(this); babelHelpers.get(Object.getPrototypeOf(TagDiscussionModal.prototype), 'init', this).call(this);
this.tags = sortTags(app.store.all('tags').filter(function (tag) { 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.maxPrimary = app.forum.attribute('maxPrimaryTags');
this.minSecondary = app.forum.attribute('minSecondaryTags'); this.minSecondary = app.forum.attribute('minSecondaryTags');
this.maxSecondary = app.forum.attribute('maxSecondaryTags'); 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', key: 'primaryCount',
@@ -537,7 +550,7 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components
}, { }, {
key: 'content', key: 'content',
value: function content() { value: function content() {
var _this2 = this; var _this3 = this;
var tags = this.tags; var tags = this.tags;
var filter = this.filter().toLowerCase(); 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. // makes it impossible to select a child if its parent hasn't been selected.
tags = tags.filter(function (tag) { tags = tags.filter(function (tag) {
var parent = tag.parent(); 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 // If the number of selected primary/secondary tags is at the maximum, then
// we'll filter out all other tags of that type. // we'll filter out all other tags of that type.
if (primaryCount >= this.maxPrimary) { if (primaryCount >= this.maxPrimary) {
tags = tags.filter(function (tag) { 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) { if (secondaryCount >= this.maxSecondary) {
tags = tags.filter(function (tag) { 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( return m(
'span', 'span',
{ className: 'TagsInput-tag', onclick: function onclick() { { className: 'TagsInput-tag', onclick: function onclick() {
_this2.removeTag(tag); _this3.removeTag(tag);
_this2.onready(); _this3.onready();
} }, } },
tagLabel(tag) tagLabel(tag)
); );
@@ -605,12 +618,12 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components
placeholder: extractText(this.getInstruction(primaryCount, secondaryCount)), placeholder: extractText(this.getInstruction(primaryCount, secondaryCount)),
value: this.filter(), value: this.filter(),
oninput: m.withAttr('value', this.filter), oninput: m.withAttr('value', this.filter),
onkeydown: this.onkeydown.bind(this), onkeydown: this.navigator.navigate.bind(this.navigator),
onfocus: function onfocus() { onfocus: function onfocus() {
return _this2.focused = true; return _this3.focused = true;
}, },
onblur: function onblur() { onblur: function onblur() {
return _this2.focused = false; return _this3.focused = false;
} }) } })
) )
), ),
@@ -633,7 +646,7 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components
'ul', 'ul',
{ className: 'TagDiscussionModal-list SelectTagList' }, { className: 'TagDiscussionModal-list SelectTagList' },
tags.filter(function (tag) { 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) { }).map(function (tag) {
return m( return m(
'li', 'li',
@@ -642,14 +655,14 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components
pinned: tag.position() !== null, pinned: tag.position() !== null,
child: !!tag.parent(), child: !!tag.parent(),
colored: !!tag.color(), colored: !!tag.color(),
selected: _this2.selected.indexOf(tag) !== -1, selected: _this3.selected.indexOf(tag) !== -1,
active: _this2.index === tag active: _this3.index === tag
}), }),
style: { color: tag.color() }, style: { color: tag.color() },
onmouseover: function onmouseover() { 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), tagIcon(tag),
m( m(
@@ -686,38 +699,15 @@ System.register('flarum/tags/components/TagDiscussionModal', ['flarum/components
this.onready(); this.onready();
} }
}, { }, {
key: 'onkeydown', key: 'select',
value: function onkeydown(e) { value: function select(e) {
switch (e.which) { // Ctrl + Enter submits the selection, just Enter completes the current entry
case 40: if (e.metaKey || e.ctrlKey || this.selected.indexOf(this.index) !== -1) {
case 38: if (this.selected.length) {
// Down/Up this.$('form').submit();
e.preventDefault(); }
this.setIndex(this.getCurrentNumericIndex() + (e.which === 40 ? 1 : -1), true); } else {
break; this.getItem(this.index)[0].dispatchEvent(new Event('click'));
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
} }
} }
}, { }, {

46
extensions/tags/js/forum/src/components/TagDiscussionModal.js
View File

@@ -4,6 +4,7 @@ import Button from 'flarum/components/Button';
import highlight from 'flarum/helpers/highlight'; import highlight from 'flarum/helpers/highlight';
import classList from 'flarum/utils/classList'; import classList from 'flarum/utils/classList';
import extractText from 'flarum/utils/extractText'; import extractText from 'flarum/utils/extractText';
import KeyboardNavigatable from 'flarum/utils/KeyboardNavigatable';
import tagLabel from 'flarum/tags/helpers/tagLabel'; import tagLabel from 'flarum/tags/helpers/tagLabel';
import tagIcon from 'flarum/tags/helpers/tagIcon'; import tagIcon from 'flarum/tags/helpers/tagIcon';
@@ -30,6 +31,13 @@ export default class TagDiscussionModal extends Modal {
this.maxPrimary = app.forum.attribute('maxPrimaryTags'); this.maxPrimary = app.forum.attribute('maxPrimaryTags');
this.minSecondary = app.forum.attribute('minSecondaryTags'); this.minSecondary = app.forum.attribute('minSecondaryTags');
this.maxSecondary = app.forum.attribute('maxSecondaryTags'); 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() { primaryCount() {
@@ -151,7 +159,7 @@ export default class TagDiscussionModal extends Modal {
placeholder={extractText(this.getInstruction(primaryCount, secondaryCount))} placeholder={extractText(this.getInstruction(primaryCount, secondaryCount))}
value={this.filter()} value={this.filter()}
oninput={m.withAttr('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} onfocus={() => this.focused = true}
onblur={() => this.focused = false}/> onblur={() => this.focused = false}/>
</div> </div>
@@ -219,34 +227,14 @@ export default class TagDiscussionModal extends Modal {
this.onready(); this.onready();
} }
onkeydown(e) { select(e) {
switch (e.which) { // Ctrl + Enter submits the selection, just Enter completes the current entry
case 40: if (e.metaKey || e.ctrlKey || this.selected.indexOf(this.index) !== -1) {
case 38: // Down/Up if (this.selected.length) {
e.preventDefault(); this.$('form').submit();
this.setIndex(this.getCurrentNumericIndex() + (e.which === 40 ? 1 : -1), true); }
break; } else {
this.getItem(this.index)[0].dispatchEvent(new Event('click'));
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
} }
} }