Add "more..." to emoji popup in composer.

This commit is contained in:
Robin Ward 2015-09-29 16:16:29 -04:00
parent 321d1bd0a9
commit 4986314122
5 changed files with 47 additions and 21 deletions

View File

@ -160,13 +160,15 @@ var toolbar = function(selected){
var PER_ROW = 12, PER_PAGE = 60;
var bindEvents = function(page,offset){
var bindEvents = function(page, offset, options) {
var composerController = Discourse.__container__.lookup('controller:composer');
$('.emoji-page a').click(function(){
var title = $(this).attr('title');
trackEmojiUsage(title);
composerController.appendTextAtCursor(":" + title + ":", {space: true});
const prefix = options.skipPrefix ? "" : ":";
composerController.appendTextAtCursor(`${prefix}${title}:`, {space: !options.skipPrefix});
closeSelector();
return false;
}).hover(function(){
@ -178,21 +180,21 @@ var bindEvents = function(page,offset){
});
$('.emoji-modal .nav .next a').click(function(){
render(page, offset+PER_PAGE);
render(page, offset+PER_PAGE, options);
});
$('.emoji-modal .nav .prev a').click(function(){
render(page, offset-PER_PAGE);
render(page, offset-PER_PAGE, options);
});
$('.emoji-modal .toolbar a').click(function(){
var p = parseInt($(this).data('group-id'));
render(p, 0);
render(p, 0, options);
return false;
});
};
var render = function(page, offset){
var render = function(page, offset, options) {
localStorage.emojiPage = page;
localStorage.emojiOffset = offset;
@ -222,10 +224,12 @@ var render = function(page, offset){
var rendered = Ember.TEMPLATES["emoji-toolbar.raw"](model);
$('body').append(rendered);
bindEvents(page, offset);
bindEvents(page, offset, options);
};
var showSelector = function(){
var showSelector = function(options) {
options = options || {};
$('body').append('<div class="emoji-modal-wrapper"></div>');
$('.emoji-modal-wrapper').click(function(){
@ -234,7 +238,7 @@ var showSelector = function(){
var page = parseInt(localStorage.emojiPage) || 0;
var offset = parseInt(localStorage.emojiOffset) || 0;
render(page, offset);
render(page, offset, options);
$('body, textarea').on('keydown.emoji', function(e){
if(e.which === 27){

View File

@ -1,8 +1,14 @@
<div class='autocomplete'>
<ul>
{{#each option in options}}
{{#each option in options}}
<li>
<a href><img src='{{option.src}}' class='emoji'> {{option.code}}</a>
<a href>
{{#if option.src}}
<img src={{option.src}} class='emoji'> {{option.code}}
{{else}}
{{option.label}}
{{/if}}
</a>
</li>
{{/each}}
</ul>

View File

@ -5,6 +5,7 @@ import positioningWorkaround from 'discourse/lib/safari-hacks';
import debounce from 'discourse/lib/debounce';
import { linkSeenMentions, fetchUnseenMentions } from 'discourse/lib/link-mentions';
import { headerHeight } from 'discourse/views/header';
import { showSelector } from 'discourse/lib/emoji/emoji-toolbar';
const ComposerView = Ember.View.extend(Ember.Evented, {
_lastKeyTimeout: null,
@ -185,13 +186,23 @@ const ComposerView = Ember.View.extend(Ember.Evented, {
if (!this.siteSettings.enable_emoji) { return; }
const template = this.container.lookup('template:emoji-selector-autocomplete.raw');
this.$('.wmd-input').autocomplete({
template: template,
key: ":",
transformComplete(v) { return v.code + ":"; },
dataSource(term){
return new Ember.RSVP.Promise(function(resolve) {
const full = ":" + term;
transformComplete(v) {
if (v.code) {
return `${v.code}:`;
} else {
showSelector({ skipPrefix: true });
return "";
}
},
dataSource(term) {
return new Ember.RSVP.Promise(resolve => {
const full = `:${term}`;
term = term.toLowerCase();
if (term === "") {
@ -205,10 +216,13 @@ const ComposerView = Ember.View.extend(Ember.Evented, {
const options = Discourse.Emoji.search(term, {maxResults: 5});
return resolve(options);
}).then(function(list) {
return list.map(function(i) {
return {code: i, src: Discourse.Emoji.urlFor(i)};
});
}).then(list => list.map(code => {
return {code, src: Discourse.Emoji.urlFor(code)};
})).then(list => {
if (list.length) {
list.push({ label: I18n.t("composer.more_emoji") });
}
return list;
});
}
});

View File

@ -73,6 +73,9 @@
//= require ./discourse/components/topic-notifications-button
//= require ./discourse/lib/link-mentions
//= require ./discourse/views/header
//= require ./discourse/dialects/dialect
//= require ./discourse/lib/emoji/emoji
//= require ./discourse/lib/emoji/emoji-toolbar
//= require ./discourse/views/composer
//= require ./discourse/lib/show-modal
//= require ./discourse/lib/screen-track
@ -90,8 +93,6 @@
//= require ./discourse/helpers/loading-spinner
//= require ./discourse/helpers/category-link
//= require ./discourse/lib/export-result
//= require ./discourse/dialects/dialect
//= require ./discourse/lib/emoji/emoji
//= require_tree ./discourse/lib
//= require ./discourse/router

View File

@ -831,6 +831,7 @@ en:
composer:
emoji: "Emoji :smile:"
more_emoji: "more..."
options: "Options"
whisper: "whisper"