Merge pull request #530 from glowing-bear/twemoji

Adds emoji support using Twitter's twemoji

README.md

@@ -83,4 +83,4 @@ If you wish to submit code, we try to make the contribution process as simple as
 
  We'd also like to ask you to join our IRC channel, #glowing-bear on freenode, so we can discuss your ideas and changes.
 
-If you're curious about the projects we're using, here's a list: [AngularJS](https://angularjs.org/), [Bootstrap](http://getbootstrap.com/), [Underscore](http://underscorejs.org/), [favico.js](http://lab.ejci.net/favico.js/), and [zlib.js](https://github.com/imaya/zlib.js). Technology-wise, [WebSockets](http://en.wikipedia.org/wiki/WebSocket) are the most important part, but we also use [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage), the [Notification Web API](https://developer.mozilla.org/en/docs/Web/API/notification), and last (but not least) [Apache Cordova](https://cordova.apache.org/) for our mobile app.
+If you're curious about the projects we're using, here's a list: [AngularJS](https://angularjs.org/), [Bootstrap](http://getbootstrap.com/), [Underscore](http://underscorejs.org/), [favico.js](http://lab.ejci.net/favico.js/), [twemoji](https://github.com/twitter/twemoji), and [zlib.js](https://github.com/imaya/zlib.js). Technology-wise, [WebSockets](http://en.wikipedia.org/wiki/WebSocket) are the most important part, but we also use [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage), the [Notification Web API](https://developer.mozilla.org/en/docs/Web/API/notification), and last (but not least) [Apache Cordova](https://cordova.apache.org/) for our mobile app.

css/glowingbear.css

@@ -522,6 +522,14 @@ li.buffer.indent.private a {
     user-select: none;
 }
 
+/* Scales emoji to font size */
+img.emoji {
+   height: 1em;
+   width: 1em;
+   margin: 0 .05em 0 .1em;
+   vertical-align: -0.1em;
+}
+
 /* */
 /* Mobile layout */
 /* */

index.html

@@ -18,6 +18,7 @@
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-touch.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
+    <script src="//twemoji.maxcdn.com/twemoji.min.js"></script>
     <script type="text/javascript" src="3rdparty/inflate.min.js"></script>
     <script type="text/javascript" src="js/localstorage.js"></script>
     <script type="text/javascript" src="js/weechat.js"></script>
@@ -272,7 +273,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
               <td class="prefix"><a ng-click="addMention(bufferline.prefix)"><span ng-repeat="part in ::bufferline.prefix" ng-class="::part.classes" ng-bind="::part.text"></span></a></td><!--
            --><td class="message"><!--
              --><div ng-repeat="metadata in ::bufferline.metadata" plugin data="::metadata"></div><!--
-             --><span ng-repeat="part in ::bufferline.content" class="text" ng-class="::part.classes" ng-bind-html="::part.text | linky:'_blank' | DOMfilter:'irclinky' | DOMfilter:'inlinecolour'"></span>
+             --><span ng-repeat="part in ::bufferline.content" class="text" ng-class="::part.classes" ng-bind-html="::part.text | linky:'_blank' | DOMfilter:'irclinky' | DOMfilter:'emojify':enableJSEmoji | DOMfilter:'inlinecolour' "></span>
               </td>
             </tr>
             <tr class="readmarker" ng-if="activeBuffer().lastSeen==$index">
@@ -427,6 +428,16 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
                   </div>
                 </form>
               </li>
+              <li>
+                <form class="form-inline" role="form">
+                  <div class="checkbox">
+                    <label>
+                      <input type="checkbox" ng-model="enableJSEmoji">
+                      Enable non-native Emoji support <span class="text-muted settings-help">Displays Emoji characters as images</span>
+                    </label>
+                  </div>
+                </form>
+              </li>
             </ul>
           </div>
           <div class="modal-footer">

js/filters.js

@@ -73,6 +73,9 @@ weechat.filter('DOMfilter', ['$filter', '$sce', function($filter, $sce) {
             return text;
         }
 
+        // hacky way to pass an extra argument without using .apply, which
+        // would require assembling an argument array. PERFORMANCE!!!
+        var extraArgument = (arguments.length > 2) ? arguments[2] : null;
         var filterFunction = $filter(filter);
         var el = document.createElement('div');
         el.innerHTML = text;
@@ -80,7 +83,7 @@ weechat.filter('DOMfilter', ['$filter', '$sce', function($filter, $sce) {
         // Recursive DOM-walking function applying the filter to the text nodes
         var process = function(node) {
             if (node.nodeType === 3) { // text node
-                var value = filterFunction(node.nodeValue);
+                var value = filterFunction(node.nodeValue, extraArgument);
                 if (value !== node.nodeValue) {
                     // we changed something. create a new node to replace the current one
                     // we could also only add its children but that would probably incur
@@ -136,4 +139,15 @@ weechat.filter('getBufferQuickKeys', function () {
     };
 });
 
+// Emojifis the string using https://github.com/twitter/twemoji
+weechat.filter('emojify', function() {
+    return function(text, enable_JS_Emoji) {
+        if (enable_JS_Emoji === true) {
+            return twemoji.parse(text);
+        } else {
+            return(text);
+        }
+    };
+});
+
 })();

js/glowingbear.js

@@ -298,6 +298,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     $store.bind($scope, "fontsize", "14px");
     // Save setting for readline keybindings
     $store.bind($scope, "readlineBindings", false);
+    // Save settings for non-native Emoji support
+    $store.bind($scope, "enableJSEmoji", false);
 
     if (!$scope.fontfamily) {
         if (utils.isMobileUi()) {