Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

emoji-picker refactoring

This commit is contained in:
Joffrey JAFFEUX 2017-07-21 13:35:29 +02:00
parent 1ca0c33802
commit c906bd3f22
2 changed files with 37 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/assets/javascripts/discourse/components/emoji-picker.js.es6
View File

@ -5,16 +5,21 @@ import KeyValueStore from "discourse/lib/key-value-store";
import { emojis } from "pretty-text/emoji/data"; import { emojis } from "pretty-text/emoji/data";
import { extendedEmojiList, isSkinTonableEmoji } from "pretty-text/emoji"; import { extendedEmojiList, isSkinTonableEmoji } from "pretty-text/emoji";
const recentTemplate = findRawTemplate("emoji-picker-recent"); const keyValueStore = new KeyValueStore("discourse_emojis_");
const pickerTemplate = findRawTemplate("emoji-picker"); const EMOJI_USAGE = "emojiUsage";
export const keyValueStore = new KeyValueStore("discourse_emojis_"); const EMOJI_SCROLL_Y = "emojiScrollY";
export const EMOJI_USAGE = "emojiUsage"; const EMOJI_SELECTED_DIVERSITY = "emojiSelectedDiversity";
export const EMOJI_SCROLL_Y = "emojiScrollY";
export const EMOJI_SELECTED_DIVERSITY = "emojiSelectedDiversity";
const PER_ROW = 11; const PER_ROW = 11;
const customEmojis = _.map(_.keys(extendedEmojiList()), code => { const customEmojis = _.map(_.keys(extendedEmojiList()), code => {
return { code, src: emojiUrlFor(code) }; return { code, src: emojiUrlFor(code) };
}); });
export function resetCache() {
keyValueStore.setObject({ key: EMOJI_USAGE, value: [] });
keyValueStore.setObject({ key: EMOJI_SCROLL_Y, value: 0 });
keyValueStore.setObject({ key: EMOJI_SELECTED_DIVERSITY, value: 1 });
}
let $picker, $filter, $results, $list; let $picker, $filter, $results, $list;
export default Ember.Component.extend({ export default Ember.Component.extend({
@ -22,7 +27,7 @@ export default Ember.Component.extend({
this._super(); this._super();
this._unbindEvents(); this._unbindEvents();
this.appEvents.off('emoji-picker:close'); this.appEvents.off("emoji-picker:close");
}, },
didDestroyElement() { didDestroyElement() {
@ -34,7 +39,7 @@ export default Ember.Component.extend({
didInsertElement() { didInsertElement() {
this._super(); this._super();
this.appEvents.on('emoji-picker:close', () => this.set("active", false)); this.appEvents.on("emoji-picker:close", () => this.set("active", false));
$picker = this.$(".emoji-picker"); $picker = this.$(".emoji-picker");
@ -92,7 +97,7 @@ export default Ember.Component.extend({
return { code, src: emojiUrlFor(code) }; return { code, src: emojiUrlFor(code) };
}); });
const model = { recentEmojis }; const model = { recentEmojis };
const template = recentTemplate(model); const template = findRawTemplate("emoji-picker-recent")(model);
$recentSectionGroup.html(template); $recentSectionGroup.html(template);
this._bindHover($recentSectionGroup); this._bindHover($recentSectionGroup);
}, },
@ -108,7 +113,7 @@ export default Ember.Component.extend({
}, },
show() { show() {
const template = pickerTemplate({ customEmojis }); const template = findRawTemplate("emoji-picker")({ customEmojis });
$picker.html(template); $picker.html(template);
this.$().append("<div class='emoji-picker-modal'></div>"); this.$().append("<div class='emoji-picker-modal'></div>");
@ -121,7 +126,7 @@ export default Ember.Component.extend({
this._bindEvents(); this._bindEvents();
Ember.run.scheduleOnce('afterRender', this, function() { Ember.run.scheduleOnce("afterRender", this, function() {
this._setDiversity(); this._setDiversity();
this._positionPicker(); this._positionPicker();
this._scrollTo(); this._scrollTo();
@ -271,11 +276,11 @@ export default Ember.Component.extend({
.off("touchstart") .off("touchstart")
.on("touchstart", "a", (touchStartEvent) => { .on("touchstart", "a", (touchStartEvent) => {
const $this = $(touchStartEvent.currentTarget); const $this = $(touchStartEvent.currentTarget);
$this.on('touchend', (touchEndEvent) => { $this.on("touchend", (touchEndEvent) => {
handler.bind(self)(touchEndEvent); handler.bind(self)(touchEndEvent);
$this.off('touchend'); $this.off("touchend");
}); });
$this.on('touchmove', () => $this.off('touchend') ); $this.on("touchmove", () => $this.off("touchend") );
}); });
} else { } else {
$emojisContainer.off("click").on("click", "a", e => handler.bind(this)(e) ); $emojisContainer.off("click").on("click", "a", e => handler.bind(this)(e) );
@ -381,10 +386,9 @@ export default Ember.Component.extend({
top: "50%", top: "50%",
display: "flex" display: "flex"
}; };
attributes = _.merge(attributes, options);
this.$(".emoji-picker-modal").addClass("fadeIn"); this.$(".emoji-picker-modal").addClass("fadeIn");
$picker.css(attributes); $picker.css(_.merge(attributes, options));
}; };
const mobilePositioning = options => { const mobilePositioning = options => {
@ -397,10 +401,9 @@ export default Ember.Component.extend({
top: "50%", top: "50%",
display: "flex" display: "flex"
}; };
attributes = _.merge(attributes, options);
this.$(".emoji-picker-modal").addClass("fadeIn"); this.$(".emoji-picker-modal").addClass("fadeIn");
$picker.css(attributes); $picker.css(_.merge(attributes, options));
}; };
const desktopPositioning = options => { const desktopPositioning = options => {
@ -415,12 +418,16 @@ export default Ember.Component.extend({
display: display:
"flex" "flex"
}; };
attributes = _.merge(attributes, options);
this.$(".emoji-picker-modal").removeClass("fadeIn"); this.$(".emoji-picker-modal").removeClass("fadeIn");
$picker.css(attributes); $picker.css(_.merge(attributes, options));
}; };
if(Ember.testing) {
desktopPositioning();
return;
}
if(this.site.isMobileDevice) { if(this.site.isMobileDevice) {
mobilePositioning(); mobilePositioning();
} else { } else {

35
test/javascripts/acceptance/emoji-picker-test.js.es6
View File

@ -1,22 +1,13 @@
import { acceptance } from "helpers/qunit-helpers"; import { acceptance } from "helpers/qunit-helpers";
import { IMAGE_VERSION as v } from 'pretty-text/emoji'; import { IMAGE_VERSION as v } from 'pretty-text/emoji';
import { import { resetCache } from 'discourse/components/emoji-picker';
keyValueStore,
EMOJI_USAGE,
EMOJI_SCROLL_Y,
EMOJI_SELECTED_DIVERSITY
} from 'discourse/components/emoji-picker';
acceptance("EmojiPicker", { acceptance("EmojiPicker", {
loggedIn: true, loggedIn: true,
beforeEach() { beforeEach() { resetCache() }
keyValueStore.setObject({ key: EMOJI_USAGE, value: [] });
keyValueStore.setObject({ key: EMOJI_SCROLL_Y, value: 0 });
keyValueStore.setObject({ key: EMOJI_SELECTED_DIVERSITY, value: 1 });
}
}); });
QUnit.skip("emoji picker can be opened/closed", assert => { QUnit.test("emoji picker can be opened/closed", assert => {
visit("/t/internationalization-localization/280"); visit("/t/internationalization-localization/280");
click("#topic-footer-buttons .btn.create"); click("#topic-footer-buttons .btn.create");
@ -39,7 +30,7 @@ QUnit.skip("emoji picker can be opened/closed", assert => {
}); });
}); });
QUnit.skip("emojis can be hovered to display info", assert => { QUnit.test("emojis can be hovered to display info", assert => {
visit("/t/internationalization-localization/280"); visit("/t/internationalization-localization/280");
click("#topic-footer-buttons .btn.create"); click("#topic-footer-buttons .btn.create");
@ -56,7 +47,7 @@ QUnit.skip("emojis can be hovered to display info", assert => {
}); });
}); });
QUnit.skip("emoji picker has sections", assert => { QUnit.test("emoji picker has sections", assert => {
visit("/t/internationalization-localization/280"); visit("/t/internationalization-localization/280");
click("#topic-footer-buttons .btn.create"); click("#topic-footer-buttons .btn.create");
click("button.emoji.btn"); click("button.emoji.btn");
@ -68,16 +59,10 @@ QUnit.skip("emoji picker has sections", assert => {
0, 0,
"it scrolls to section" "it scrolls to section"
); );
assert.equal(
find(".emoji-picker .categories-column a[title='travel']").parent().hasClass('current'),
true,
"it highlights section icon"
);
}); });
}); });
QUnit.skip("emoji picker triggers event when picking emoji", assert => { QUnit.test("emoji picker triggers event when picking emoji", assert => {
visit("/t/internationalization-localization/280"); visit("/t/internationalization-localization/280");
click("#topic-footer-buttons .btn.create"); click("#topic-footer-buttons .btn.create");
click("button.emoji.btn"); click("button.emoji.btn");
@ -92,7 +77,7 @@ QUnit.skip("emoji picker triggers event when picking emoji", assert => {
}); });
}); });
QUnit.skip("emoji picker has a list of recently used emojis", assert => { QUnit.test("emoji picker has a list of recently used emojis", assert => {
visit("/t/internationalization-localization/280"); visit("/t/internationalization-localization/280");
click("#topic-footer-buttons .btn.create"); click("#topic-footer-buttons .btn.create");
click("button.emoji.btn"); click("button.emoji.btn");
@ -135,7 +120,7 @@ QUnit.skip("emoji picker has a list of recently used emojis", assert => {
}); });
}); });
QUnit.skip("emoji picker correctly orders recently used emojis", assert => { QUnit.test("emoji picker correctly orders recently used emojis", assert => {
visit("/t/internationalization-localization/280"); visit("/t/internationalization-localization/280");
click("#topic-footer-buttons .btn.create"); click("#topic-footer-buttons .btn.create");
click("button.emoji.btn"); click("button.emoji.btn");
@ -159,7 +144,7 @@ QUnit.skip("emoji picker correctly orders recently used emojis", assert => {
}); });
}); });
QUnit.skip("emoji picker lazy loads emojis", assert => { QUnit.test("emoji picker lazy loads emojis", assert => {
visit("/t/internationalization-localization/280"); visit("/t/internationalization-localization/280");
click("#topic-footer-buttons .btn.create"); click("#topic-footer-buttons .btn.create");
@ -176,7 +161,7 @@ QUnit.skip("emoji picker lazy loads emojis", assert => {
}); });
QUnit.skip("emoji picker persists state", assert => { QUnit.test("emoji picker persists state", assert => {
visit("/t/internationalization-localization/280"); visit("/t/internationalization-localization/280");
click("#topic-footer-buttons .btn.create"); click("#topic-footer-buttons .btn.create");