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

app/assets/javascripts/discourse/lib/emoji/emoji-toolbar.js.es6

@@ -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){

app/assets/javascripts/discourse/templates/emoji-selector-autocomplete.raw.hbs

@@ -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>

app/assets/javascripts/discourse/views/composer.js.es6

@@ -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){
+      transformComplete(v) {
-        return new Ember.RSVP.Promise(function(resolve) {
+        if (v.code) {
-          const full = ":" + term;
+          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) {
+        }).then(list => list.map(code => {
-          return list.map(function(i) {
+          return {code, src: Discourse.Emoji.urlFor(code)};
-            return {code: i, src: Discourse.Emoji.urlFor(i)};
+        })).then(list => {
-          });
+          if (list.length) {
+            list.push({ label: I18n.t("composer.more_emoji") });
+          }
+          return list;
         });
       }
     });

app/assets/javascripts/main_include.js

@@ -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
 

config/locales/client.en.yml

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