Clean up gemoji resources, fix emoji menu scrollbar. Fix #118

app/css/app.css

@@ -1206,11 +1206,32 @@ span.emoji {
   *display: inline;
   height: 18px;
   width: 18px;
-  background-size: 18px;
   background-repeat: no-repeat;
   text-indent: -9999px;
 }
 
+/* widths and heights calculated according to spritesheet dimensions and icon size */
+.emoji-spritesheet-0 {
+  background-size: 486px 126px;
+  background-image: url('../img/emojisprite_0.png');
+}
+.emoji-spritesheet-1 {
+  background-size: 522px 72px;
+  background-image: url('../img/emojisprite_1.png');
+}
+.emoji-spritesheet-2 {
+  background-size: 594px 126px;
+  background-image: url('../img/emojisprite_2.png');
+}
+.emoji-spritesheet-3 {
+  background-size: 612px 54px;
+  background-image: url('../img/emojisprite_3.png');
+}
+.emoji-spritesheet-4 {
+  background-size: 612px 108px;
+  background-image: url('../img/emojisprite_4.png');
+}
+
 .im_history_not_selected {
   text-align: center;
   color: #999;

app/js/services.js

@@ -2238,6 +2238,7 @@ angular.module('myApp.services', [])
   var emojiUtf = [],
       emojiMap = {},
       emojiData = Config.Emoji,
+      emojiIconSize = 18,
       emojiCode;
 
   for (emojiCode in emojiData) {
@@ -2259,8 +2260,21 @@ angular.module('myApp.services', [])
       }).
       replace(/</g, '&lt;').
       replace(/>/g, '&gt;');
-  };
+  }
 
+  function getEmojiSpritesheetCoords(emojiCode) {
+    var i, row, column, totalColumns;
+    for (var cat = 0; cat < Config.EmojiCategories.length; cat++) {
+      totalColumns = Config.EmojiCategorySpritesheetDimens[cat][1];
+      i = Config.EmojiCategories[cat].indexOf(emojiCode);
+      if (i > -1) {
+        row = Math.floor(i / totalColumns);
+        column = (i % totalColumns);
+        return { category: cat, row: row, column: column };
+      }
+    }
+    return null;
+  }
 
   function wrapRichText(text, options) {
     if (!text || !text.length) {
@@ -2275,10 +2289,9 @@ angular.module('myApp.services', [])
         raw = text,
         html = [],
         url,
-        emojiTitle,
+        emojiStyle = '',
         emojiFound = false;
 
-
     while ((match = raw.match(regExp))) {
       // console.log(2, match);
       html.push(encodeEntities(raw.substr(0, match.index)));
@@ -2317,15 +2330,15 @@ angular.module('myApp.services', [])
 
         if (emojiCode = emojiMap[match[6]]) {
           emojiFound = true;
-          emojiTitle = encodeEntities(emojiData[emojiCode][1][0]);
+          var emojiTitle = encodeEntities(emojiData[emojiCode][1][0]);
+          var emojiCoords = getEmojiSpritesheetCoords(emojiCode);
+          var xoffset = -(emojiIconSize * emojiCoords.column);
+          var yoffset = -(emojiIconSize * emojiCoords.row);
+          emojiStyle = 'background-position:' + xoffset + 'px ' + yoffset + 'px;';
           html.push(
-            '<span class="emoji emoji-file-',
-            encodeEntities(emojiCode),
-            '" title="',
-            emojiTitle,
-            '">:',
-            emojiTitle,
-            ':</span>'
+            '<span class="emoji emoji-spritesheet-'+emojiCoords.category+'" ',
+            'title="', emojiTitle, '">',
+            ':', emojiTitle, ':</span>'
           );
         } else {
           html.push(encodeEntities(match[6]));
@@ -2341,8 +2354,8 @@ angular.module('myApp.services', [])
     // console.log(3, text, html);
 
     if (emojiFound) {
-      text = text.replace(/<span class="emoji emoji-file-([0-9a-f]+?)"(.+?)<\/span>/g,
-                          '<span class="emoji" style="background-image: url(\'vendor/gemoji/images/$1.png\')"$2</span>');
+      text = text.replace(/<span class="emoji emoji-spritesheet-([0-9]+?)"(.+?)<\/span>/g,
+                          '<span class="emoji emoji-spritesheet-$1" style="'+emojiStyle+'" $2</span>');
     }
 
     // console.log(4, text, html);

app/vendor/gemoji/THIRDPARTY_LICENSE

@@ -1,14 +0,0 @@
-octocat, squirrel, shipit
-Copyright (c) 2013 GitHub Inc. All rights reserved.
-
-bowtie, neckbeard, fu
-Copyright (c) 2013 37signals, LLC. All rights reserved.
-
-feelsgood, finnadie, goberserk, godmode, hurtrealbad, rage 1-4, suspect
-Copyright (c) 2013 id Software. All rights reserved.
-
-trollface
-Copyright (c) 2013 whynne@deviantart. All rights reserved.
-
-All other images
-Copyright (c) 2013 Apple Inc. All rights reserved.