diff --git a/app/assets/javascripts/discourse/lib/emoji/emoji-toolbar.js.es6 b/app/assets/javascripts/discourse/lib/emoji/emoji-toolbar.js.es6 index 7ea7a7b0296..ee449e3ccda 100644 --- a/app/assets/javascripts/discourse/lib/emoji/emoji-toolbar.js.es6 +++ b/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('
'); $('.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){ diff --git a/app/assets/javascripts/discourse/templates/emoji-selector-autocomplete.raw.hbs b/app/assets/javascripts/discourse/templates/emoji-selector-autocomplete.raw.hbs index a01fbde0bd5..ac1f2a4755e 100644 --- a/app/assets/javascripts/discourse/templates/emoji-selector-autocomplete.raw.hbs +++ b/app/assets/javascripts/discourse/templates/emoji-selector-autocomplete.raw.hbs @@ -1,8 +1,14 @@
diff --git a/app/assets/javascripts/discourse/views/composer.js.es6 b/app/assets/javascripts/discourse/views/composer.js.es6 index a2213969484..62d3dad0ec4 100644 --- a/app/assets/javascripts/discourse/views/composer.js.es6 +++ b/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){ - 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; }); } }); diff --git a/app/assets/javascripts/main_include.js b/app/assets/javascripts/main_include.js index 757f7308ec3..d1c49d58d1c 100644 --- a/app/assets/javascripts/main_include.js +++ b/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 diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index a0af30ff9af..f13b5edaace 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -831,6 +831,7 @@ en: composer: emoji: "Emoji :smile:" + more_emoji: "more..." options: "Options" whisper: "whisper"