Fixed multiple emoji highlight

app/css/app.css

@@ -1697,9 +1697,9 @@ img.img_fullsize {
 .emoji-menu {
   position: absolute;
   z-index: 999;
-  width: 206px;
+  width: 220px;
-  margin-left: -100px;
+  margin-left: -107px;
-  margin-top: -233px;
+  margin-top: -245px;
   overflow: hidden;
 
   border: 1px #dfdfdf solid;
@@ -1735,21 +1735,12 @@ img.img_fullsize {
 .emoji-menu-tabs .icon-smile {background-position: -9px -34px; }
 .emoji-menu-tabs .icon-smile-selected {background-position: -9px -5px; }
 
-.is_2x .emoji-menu-tabs .icon-smile {background-position: -9px -37px; }
-.is_2x .emoji-menu-tabs .icon-smile-selected {background-position: -9px -8px; }
-
 .emoji-menu-tabs .icon-flower {background-position: -9px -145px; }
 .emoji-menu-tabs .icon-flower-selected {background-position: -9px -118px; }
 
-.is_2x .emoji-menu-tabs .icon-flower {background-position: -9px -145px; }
-.is_2x .emoji-menu-tabs .icon-flower-selected {background-position: -9px -119px; }
-
 .emoji-menu-tabs .icon-bell {background-position: -9px -90px; }
 .emoji-menu-tabs .icon-bell-selected {background-position: -9px -62px; }
 
-.is_2x .emoji-menu-tabs .icon-bell {background-position: -9px -91px; }
-.is_2x .emoji-menu-tabs .icon-bell-selected {background-position: -9px -64px; }
-
 .emoji-menu-tabs .icon-car {background-position: -9px -196px; }
 .emoji-menu-tabs .icon-car-selected {background-position: -9px -170px; }
 
@@ -1774,7 +1765,7 @@ img.img_fullsize {
 
 .emoji-menu .emoji-items-wrap {
   position: relative;
-  height: 162px;
+  height: 174px;
 }
 .emoji-menu .emoji-items {
   padding-right: 8px;
@@ -1788,8 +1779,7 @@ img.img_fullsize {
 }
 .emoji-menu .emoji-items a {
   margin: -1px 0 0 -1px;
-  /*border: 1px solid #f2f2f2;*/
+  padding: 5px;
-  padding: 4px;
   display: block;
   float: left;
   border-radius: 2px;

app/js/services.js

@@ -2290,8 +2290,9 @@ angular.module('myApp.services', [])
         raw = text,
         html = [],
         url,
-        emojiStyle = '',
+        emojiFound = false,
-        emojiFound = false;
+        emojiTitle,
+        emojiCoords;
 
     while ((match = raw.match(regExp))) {
       // console.log(2, match);
@@ -2331,13 +2332,16 @@ angular.module('myApp.services', [])
 
         if (emojiCode = emojiMap[match[6]]) {
           emojiFound = true;
-          var emojiTitle = encodeEntities(emojiData[emojiCode][1][0]);
+          emojiTitle = encodeEntities(emojiData[emojiCode][1][0]);
-          var emojiCoords = getEmojiSpritesheetCoords(emojiCode);
+          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-spritesheet-'+emojiCoords.category+'" ',
+            '<span class="emoji emoji-',
+            emojiCoords.category,
+            '-',
+            (emojiIconSize * emojiCoords.column),
+            '-',
+            (emojiIconSize * emojiCoords.row),
+            '" ',
             'title="',emojiTitle, '">',
             ':', emojiTitle, ':</span>'
           );
@@ -2355,8 +2359,8 @@ angular.module('myApp.services', [])
     // console.log(3, text, html);
 
     if (emojiFound) {
-      text = text.replace(/<span class="emoji emoji-spritesheet-([0-9]+?)"(.+?)<\/span>/g,
+      text = text.replace(/<span class="emoji emoji-(\d)-(\d+)-(\d+)"(.+?)<\/span>/g,
-                          '<span class="emoji emoji-spritesheet-$1" style="'+emojiStyle+'" $2</span>');
+                          '<span class="emoji emoji-spritesheet-$1" style="background-position: -$2px -$3px;" $4</span>');
     }
 
     // console.log(4, text, html);