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

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

@ -1,22 +1,13 @@
import { acceptance } from "helpers/qunit-helpers";
import { IMAGE_VERSION as v } from 'pretty-text/emoji';
import {
keyValueStore,
EMOJI_USAGE,
EMOJI_SCROLL_Y,
EMOJI_SELECTED_DIVERSITY
} from 'discourse/components/emoji-picker';
import { resetCache } from 'discourse/components/emoji-picker';
acceptance("EmojiPicker", {
loggedIn: true,
beforeEach() {
keyValueStore.setObject({ key: EMOJI_USAGE, value: [] });
keyValueStore.setObject({ key: EMOJI_SCROLL_Y, value: 0 });
keyValueStore.setObject({ key: EMOJI_SELECTED_DIVERSITY, value: 1 });
}
beforeEach() { resetCache() }
});
QUnit.skip("emoji picker can be opened/closed", assert => {
QUnit.test("emoji picker can be opened/closed", assert => {
visit("/t/internationalization-localization/280");
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");
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");
click("#topic-footer-buttons .btn.create");
click("button.emoji.btn");
@ -68,16 +59,10 @@ QUnit.skip("emoji picker has sections", assert => {
0,
"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");
click("#topic-footer-buttons .btn.create");
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");
click("#topic-footer-buttons .btn.create");
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");
click("#topic-footer-buttons .btn.create");
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");
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");
click("#topic-footer-buttons .btn.create");