Customize emoji conversion

Use image tags with :emoji: in a title attribute for an optimal
copy/paste ux.

// FREEBIE

js/emoji_util.js

@@ -6,9 +6,7 @@
     'use strict';
     window.emoji_util = window.emoji_util || {};
 
-    // The default version of this function has issues initing from the
+    // EmojiConverter overrides
-    // background page. Since we only support one environment, we can
-    // preconfigure it here.
     EmojiConvertor.prototype.init_env = function() {
         if (this.inits.env) {
             return;
@@ -16,10 +14,30 @@
         this.inits.env = 1;
         this.include_title = true;
         this.img_sets.apple.path = 'images/emoji/apple/';
-
-        this.img_path = 'images/emoji/unicode/';
         this.replace_mode = 'img';
-        this.supports_css = true;
+    };
+    EmojiConvertor.prototype.replace_unified = function(str) {
+        var self = this;
+        self.init_unified();
+        return str.replace(self.rx_unified, function(m, p1, p2) {
+            var val = self.map.unified[p1];
+            if (!val) { return m; }
+            var idx = null;
+            if (p2 == '\uD83C\uDFFB') { idx = '1f3fb'; }
+            if (p2 == '\uD83C\uDFFC') { idx = '1f3fc'; }
+            if (p2 == '\uD83C\uDFFD') { idx = '1f3fd'; }
+            if (p2 == '\uD83C\uDFFE') { idx = '1f3fe'; }
+            if (p2 == '\uD83C\uDFFF') { idx = '1f3ff'; }
+            if (idx) {
+                return self.replacement(val, null, null, {
+                    idx : idx,
+                    actual  : p2,
+                    wrapper : ':'
+                });
+            }
+            // wrap names in :'s
+            return self.replacement(val, ':' + self.data[val][3][0] + ':');
+        });
     };
     window.emoji = new EmojiConvertor();
     emoji.init_colons();

stylesheets/_global.scss

@@ -183,13 +183,6 @@ button.back {
   outline: solid 1px #2090ea;
 }
 
-img.emoji {
-   height: 1em;
-   width: 1em;
-   margin: 0 .05em 0 .1em;
-   vertical-align: -0.1em;
-}
-
 $avatar-size: 44px;
 
 .avatar {

stylesheets/manifest.css

@@ -180,12 +180,6 @@ button.back {
 .dropoff {
   outline: solid 1px #2090ea; }
 
-img.emoji {
-  height: 1em;
-  width: 1em;
-  margin: 0 .05em 0 .1em;
-  vertical-align: -0.1em; }
-
 .avatar {
   display: inline-block;
   height: 44px;