Close #290: show recently used emojis under input area

app/css/desktop.css

@@ -383,6 +383,27 @@ a.footer_lang_link.active:active {
   min-width: 60px;
 }
 
+.im_emoji_quick_select_area {
+  display: block;
+  height: 30px;
+  overflow: hidden;
+  padding: 0 5px;
+}
+
+.im_emoji_quick_select_area a {
+  display: inline-block;
+  margin: 3px 0;
+  padding: 2px;
+}
+
+.im_emoji_quick_select_area a:hover {
+  background-color: #edf2f5;
+}
+
+.im_emoji_quick_select_area a .label {
+  display: none;
+}
+
 .im_message_selected .im_message_date,
 .im_message_selected .im_message_document_size,
 .im_message_selected .im_message_audio_duration,
@@ -928,4 +949,4 @@ div.im_panel_own_photo {
 
 .changelog_modal_window .modal-dialog {
   max-width: 506px;
-}
+}

app/js/directives.js

@@ -882,9 +882,10 @@ angular.module('myApp.directives', ['myApp.filters'])
           fileSelects = $('input', element),
           dropbox = $('.im_send_dropbox_wrap', element)[0],
           emojiButton = $('.im_emoji_btn', element)[0],
+          emojiQuickSelect = !Config.Mobile ? $('.im_emoji_quick_select_area', element)[0] : false,
           editorElement = messageField,
           dragStarted, dragTimeout,
-          emojiArea = $(messageField).emojiarea({button: emojiButton, norealTime: true}),
+          emojiArea = $(messageField).emojiarea({button: emojiButton, norealTime: true, quickSelect: emojiQuickSelect}),
           emojiMenu = $('.emoji-menu', element)[0],
           submitBtn = $('.im_submit', element)[0],
           richTextarea = $('.emoji-wysiwyg-editor', element)[0];

app/partials/desktop/im.html

@@ -250,9 +250,13 @@
                       <i class="icon icon-emoji"></i>
                     </div>
 
-                    <button type="submit" class="btn btn-success im_submit">
+                    <button type="submit" class="btn btn-success im_submit pull-left">
                       <span class="im_submit_text" my-i18n="im_submit_message"></span>
                     </button>
+
+                    <div class="im_emoji_quick_select_area">
+                    </div>
+
                   </form>
                 </div>
 

app/vendor/jquery.emojiarea/jquery.emojiarea.js

@@ -171,7 +171,7 @@
 	/*! MODIFICATION START
 		 This function was added by Igor Zhukov to save recent used emojis.
 		 */
-	util.emojiInserted = function (emojiKey, menu) {
+	util.emojiInserted = function (emojiKey, menu, quickSelect) {
 		ConfigStorage.get('emojis_recent', function (curEmojis) {
 			curEmojis = curEmojis || [];
 
@@ -192,6 +192,10 @@
 			if (menu) {
 				menu.updateRecentTab(curEmojis);
 			}
+
+			if (quickSelect) {
+				quickSelect.load(0);
+			}
 		})
 	};
 	/*! MODIFICATION END */
@@ -207,6 +211,11 @@
 		this.$editor.on('blur', function() { self.hasFocus = false; });
 
 		this.setupButton();
+
+		if (this.options.quickSelect) {
+			var $items = $(this.options.quickSelect);
+			this.quickSelect = new EmojiQuickSelectArea(self, $items);
+		}
 	};
 
 	EmojiArea.prototype.setupButton = function() {
@@ -278,7 +287,7 @@
 		if (!$.emojiarea.icons.hasOwnProperty(emoji)) return;
 		util.insertAtCursor(emoji, this.$textarea[0]);
 		/* MODIFICATION: Following line was added by Igor Zhukov, in order to save recent emojis */
-		util.emojiInserted(emoji, this.menu);
+		util.emojiInserted(emoji, this.menu, this.quickSelect);
 		this.$textarea.trigger('change');
 	};
 
@@ -397,7 +406,7 @@
 		/*! MODIFICATION END */
 
 		/* MODIFICATION: Following line was added by Igor Zhukov, in order to save recent emojis */
-		util.emojiInserted(emoji, this.menu);
+		util.emojiInserted(emoji, this.menu, this.quickSelect);
 
 
 		this.onChange();
@@ -611,7 +620,7 @@
 		var updateItems = function () {
 			self.$items.html(html.join(''));
 
-			if (!Config.Mobile) {
+			if (!Config.Mobile && self.$itemsWrap) {
 				setTimeout(function () {
 					self.$itemsWrap.nanoScroller();
 				}, 100);
@@ -707,4 +716,21 @@
 		};
 	})();
 
-})(jQuery, window, document);
+	var EmojiQuickSelectArea = function(emojiarea, $items) {
+		var self = this;
+
+		this.emojiarea = emojiarea;
+		this.$items = $items;
+
+		this.load(0);
+		this.$items.on('click', 'a', function(e) {
+			var emoji = $('.label', $(this)).text();
+			self.onItemSelected(emoji);
+			e.stopPropagation();
+			return false;
+		});
+	};
+
+	util.extend(EmojiQuickSelectArea.prototype, EmojiMenu.prototype);
+
+})(jQuery, window, document);