Complete emoji support, with categories. Fix #56

.gitignore

@@ -1,8 +1,9 @@
 .DS_Store
+.idea
 
 # Node.js package manager
 /node_modules
 /npm-debug.log
 dist
 package_dist
-webogram*.zip
+webogram*.zip

app/css/app.css

@@ -1564,7 +1564,7 @@ img.img_fullsize {
   z-index: 999;
   width: 180px;
   margin-left: -91px;
-  margin-top: -232px;
+  margin-top: -260px;
   overflow: hidden;
 }
 .emoji-items-wrap1 {
@@ -1574,6 +1574,55 @@ img.img_fullsize {
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
+.emoji-items-wrap1 .emoji-menu-tabs {
+    width: 100%;
+}
+.emoji-items-wrap1 .emoji-menu-tabs td {
+    text-align: center;
+    color: white;
+}
+.emoji-menu-tabs .emoji-menu-tab {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background: url(../img/icons/EmojiTabSheet.png) no-repeat;
+    background-size: 120px 48px;
+}
+.icon-smile {
+    background-position: 0 0 !important;
+}
+.icon-smile-selected {
+    background-position: 0 -24px !important;
+    border-bottom: 1px solid white;
+}
+.icon-flower {
+    background-position: -24px 0 !important;
+}
+.icon-flower-selected {
+    background-position: -24px -24px !important;
+    border-bottom: 1px solid white;
+}
+.icon-bell {
+    background-position: -48px 0 !important;
+}
+.icon-bell-selected {
+    background-position: -48px -24px !important;
+    border-bottom: 1px solid white;
+}
+.icon-car {
+    background-position: -72px 0 !important;
+}
+.icon-car-selected {
+    background-position: -72px -24px !important;
+    border-bottom: 1px solid white;
+}
+.icon-grid {
+    background-position: -96px 0 !important;
+}
+.icon-grid-selected {
+    background-position: -96px -24px !important;
+    border-bottom: 1px solid white;
+}
 .emoji-menu .emoji-items-wrap {
   position: relative;
   height: 190px;
@@ -1587,7 +1636,7 @@ img.img_fullsize {
   vertical-align: middle;
   border: 0 none;
 }
-.emoji-menu a {
+.emoji-menu .emoji-items a {
   margin: -1px 0 0 -1px;
   /*border: 1px solid #f2f2f2;*/
   padding: 4px;
@@ -1595,7 +1644,7 @@ img.img_fullsize {
   float: left;
   border-radius: 2px;
 }
-.emoji-menu a:hover {
+.emoji-menu .emoji-items a:hover {
   background-color: rgba(0,0,0, 0.5);
   /*background-color: #fffae7;*/
 }

app/js/app.js

@@ -38,21 +38,23 @@ angular.module('myApp', [
 ]).
 config(['$locationProvider', '$routeProvider', '$compileProvider', function($locationProvider, $routeProvider, $compileProvider) {
 
-  var icons = {}, reverseIcons = {}, i, j, hex, name, dataItem,
-      ranges = [[0x1f600, 0x1f637], [0x261d, 0x263f], [0x270a, 0x270c], [0x1f446, 0x1f450]];
+  var icons = {}, reverseIcons = {}, i, j, hex, name, dataItem, row, column, totalColumns;
 
-  for (j in ranges) {
-    for (i = ranges[j][0]; i <= ranges[j][1]; i++) {
-      hex = i.toString(16);
-      if (dataItem = Config.Emoji[hex]) {
-        name = dataItem[1][0];
-        icons[':' + name + ':'] = hex + '.png';
-        reverseIcons[name] = dataItem[0];
-      }
+  for (j = 0; j < Config.EmojiCategories.length; j++) {
+    totalColumns = Config.EmojiCategorySpritesheetDimens[j][1];
+    for (i = 0; i < Config.EmojiCategories[j].length; i++) {
+      dataItem = Config.Emoji[Config.EmojiCategories[j][i]];
+      name = dataItem[1][0];
+      row = Math.floor(i / totalColumns);
+      column = (i % totalColumns);
+      icons[':' + name + ':'] = [j, row, column, ':'+name+':'];
+      reverseIcons[name] = dataItem[0];
     }
   }
 
-  $.emojiarea.path = 'vendor/gemoji/images';
+  $.emojiarea.spritesheetPath = 'img/emojisprite_!.png';
+  $.emojiarea.spritesheetDimens = Config.EmojiCategorySpritesheetDimens;
+  $.emojiarea.iconSize = 20;
   $.emojiarea.icons = icons;
   $.emojiarea.reverseIcons = reverseIcons;
 

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

@@ -29,8 +29,14 @@
 
 	// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
+	/*! MODIFICATION START
+	 Options 'spritesheetPath', 'spritesheetDimens', 'iconSize' added by Andre Staltz.
+	 */
 	$.emojiarea = {
 		path: '',
+		spritesheetPath: '',
+		spritesheetDimens: [],
+		iconSize: 20,
 		icons: {},
 		defaults: {
 			button: null,
@@ -38,6 +44,7 @@
 			buttonPosition: 'after'
 		}
 	};
+	/*! MODIFICATION END */
 
 	$.fn.emojiarea = function(options) {
 		options = $.extend({}, $.emojiarea.defaults, options);
@@ -198,14 +205,28 @@
 		this.$button = $button;
 	};
 
+	/*! MODIFICATION START
+	 This function was modified by Andre Staltz so that the icon is created from a spritesheet.
+	 */
 	EmojiArea.createIcon = function(emoji) {
-		var filename = $.emojiarea.icons[emoji];
-		var path = $.emojiarea.path || '';
-		if (path.length && path.charAt(path.length - 1) !== '/') {
-			path += '/';
-		}
-		return '<img src="' + path + filename + '" alt="' + util.htmlEntities(emoji) + '">';
+		var category = emoji[0];
+		var row = emoji[1];
+		var column = emoji[2];
+		var name = emoji[3];
+		var filename = $.emojiarea.spritesheetPath;
+		var xoffset = -($.emojiarea.iconSize * column);
+		var yoffset = -($.emojiarea.iconSize * row);
+		var scaledWidth = ($.emojiarea.spritesheetDimens[category][1] * $.emojiarea.iconSize);
+		var scaledHeight = ($.emojiarea.spritesheetDimens[category][0] * $.emojiarea.iconSize);
+
+		var style = 'display:inline-block;';
+		style += 'width:' + $.emojiarea.iconSize + 'px;';
+		style += 'height:' + $.emojiarea.iconSize + 'px;';
+		style += 'background:url(\'' + filename.replace('!',category) + '\') ' + xoffset + 'px ' + yoffset + 'px no-repeat;';
+		style += 'background-size:' + scaledWidth + 'px ' + scaledHeight + 'px;';
+		return '<img src="img/blank.gif" class="img" style="'+ style +'" alt="' + util.htmlEntities(name) + '">';
 	};
+	/*! MODIFICATION END */
 
 	// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -272,7 +293,8 @@
 		var emojis = $.emojiarea.icons;
 		for (var key in emojis) {
 			if (emojis.hasOwnProperty(key)) {
-				html = html.replace(new RegExp(util.escapeRegex(key), 'g'), EmojiArea.createIcon(key));
+				/* MODIFICATION: Following line was modified by Andre Staltz, to use new implementation of createIcon function.*/
+				html = html.replace(new RegExp(util.escapeRegex(key), 'g'), EmojiArea.createIcon(emojis[key]));
 			}
 		}
 		this.$editor.html(html);
@@ -293,17 +315,17 @@
 			Following code was modified by Igor Zhukov, in order to improve rich text paste
 		*/
 	EmojiArea_WYSIWYG.prototype.onPaste = function(e) {
-    var text = (e.originalEvent || e).clipboardData.getData('text/plain'),
-    		self = this;
-    setTimeout(function () {
-	    self.onChange();
-    }, 0);
-    if (text.length) {
-	    document.execCommand('insertText', false, text);
-	    return cancelEvent(e);
-    }
-    return true;
-	}
+		var text = (e.originalEvent || e).clipboardData.getData('text/plain'),
+				self = this;
+		setTimeout(function () {
+			self.onChange();
+		}, 0);
+		if (text.length) {
+			document.execCommand('insertText', false, text);
+			return cancelEvent(e);
+		}
+		return true;
+	};
 	/*! MODIFICATION END */
 
 	EmojiArea_WYSIWYG.prototype.onChange = function(e) {
@@ -312,7 +334,8 @@
 
 	EmojiArea_WYSIWYG.prototype.insert = function(emoji) {
 		var content;
-		var $img = $(EmojiArea.createIcon(emoji));
+		/* MODIFICATION: Following line was modified by Andre Staltz, to use new implementation of createIcon function.*/
+		var $img = $(EmojiArea.createIcon($.emojiarea.icons[emoji]));
 		if ($img[0].attachEvent) {
 			$img[0].attachEvent('onresizestart', function(e) { e.returnValue = false; }, false);
 		}
@@ -403,8 +426,16 @@
 
 		/*! MODIFICATION START
 			Following code was modified by Igor Zhukov, in order to add scrollbars and tail to EmojiMenu
+			Also modified by Andre Staltz, to include tabs for categories, on the menu header.
 		*/
 		this.$itemsTailWrap = $('<div class="emoji-items-wrap1"></div>').appendTo(this.$menu);
+		this.$categoryTabs = $('<table class="emoji-menu-tabs"><tr>' +
+		'<td><a class="emoji-menu-tab icon-smile" ></a></td>' +
+		'<td><a class="emoji-menu-tab icon-flower"></a></td>' +
+		'<td><a class="emoji-menu-tab icon-bell"></a></td>' +
+		'<td><a class="emoji-menu-tab icon-car"></a></td>' +
+		'<td><a class="emoji-menu-tab icon-grid"></a></td>' +
+		'</tr></table>').appendTo(this.$itemsTailWrap);
 		this.$itemsWrap = $('<div class="emoji-items-wrap nano"></div>').appendTo(this.$itemsTailWrap);
 		this.$items = $('<div class="emoji-items content">').appendTo(this.$itemsWrap);
 		$('<div class="emoji-menu-tail">').appendTo(this.$menu);
@@ -447,6 +478,16 @@
 		});
 
 		this.$menu.on('click', 'a', function(e) {
+			/*! MODIFICATION START
+			 Following code was modified by Andre Staltz, to capture clicks on category tabs and change the category selection.
+			 */
+			if ($(this).hasClass('emoji-menu-tab')) {
+				if (self.getTabIndex(this) !== self.currentCategory) {
+					self.selectCategory(self.getTabIndex(this));
+				}
+				return false;
+			}
+			/*! MODIFICATION END */
 			var emoji = $('.label', $(this)).text();
 			window.setTimeout(function() {
 				self.onItemSelected(emoji);
@@ -462,14 +503,38 @@
 			return false;
 		});
 
-		this.load();
+		/* MODIFICATION: Following line was modified by Andre Staltz, in order to select a default category. */
+		this.selectCategory(0);
 	};
 
+	/*! MODIFICATION START
+	 Following code was added by Andre Staltz, to implement category selection.
+	 */
+	EmojiMenu.prototype.getTabIndex = function(tab) {
+		return this.$categoryTabs.find('.emoji-menu-tab').index(tab);
+	};
+
+	EmojiMenu.prototype.selectCategory = function(category) {
+		var self = this;
+		this.$categoryTabs.find('.emoji-menu-tab').each(function(index) {
+			if (index === category) {
+				this.className += '-selected';
+			}
+			else {
+				this.className = this.className.replace('-selected', '');
+			}
+		});
+		this.currentCategory = category;
+		this.load(category);
+	};
+	/*! MODIFICATION END */
+
 	EmojiMenu.prototype.onItemSelected = function(emoji) {
 		this.emojiarea.insert(emoji);
 	};
 
-	EmojiMenu.prototype.load = function() {
+	/* MODIFICATION: The following function argument was modified by Andre Staltz, in order to load only icons from a category. */
+	EmojiMenu.prototype.load = function(category) {
 		var html = [];
 		var options = $.emojiarea.icons;
 		var path = $.emojiarea.path;
@@ -478,9 +543,9 @@
 		}
 
 		for (var key in options) {
-			if (options.hasOwnProperty(key)) {
-				var filename = options[key];
-				html.push('<a href="javascript:void(0)" title="' + util.htmlEntities(key) + '">' + EmojiArea.createIcon(key) + '<span class="label">' + util.htmlEntities(key) + '</span></a>');
+			/* MODIFICATION: The following 2 lines were modified by Andre Staltz, in order to load only icons from the specified category. */
+			if (options.hasOwnProperty(key) && options[key][0] === category) {
+				html.push('<a href="javascript:void(0)" title="' + util.htmlEntities(key) + '">' + EmojiArea.createIcon(options[key]) + '<span class="label">' + util.htmlEntities(key) + '</span></a>');
 			}
 		}