github-mirror/framework
github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-03-15 00:05:12 +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 23:18:29 +09:00
parent 7190cd84b4
commit 84974d3f31
2 changed files with 55 additions and 77 deletions
Show Stats 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';
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'));
}
}
}, {

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 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}/>
</div>
@ -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'));
}
}