Dynamically load twemoji if required

index.html

@@ -19,7 +19,6 @@
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-sanitize.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>

js/glowingbear.js

@@ -377,6 +377,22 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         }
     });
 
+    // To reduce loading times for users who don't want twemoji,
+    // load it only if the setting is enabled.
+    // This also fires when the page is loaded.
+    settings.addCallback('enableJSEmoji', function(enabled) {
+        if (enabled && !$rootScope.twemoji_init) {
+            // Load twemoji only once
+            $rootScope.twemoji_init = true;
+            (function() {
+                var script = document.createElement("script");
+                script.type = "text/javascript";
+                script.src  = "//twemoji.maxcdn.com/twemoji.min.js";
+                document.getElementsByTagName("head")[0].appendChild(script);
+            })();
+        }
+    });
+
     // Update font family when changed
     settings.addCallback('fontfamily', function(fontfamily) {
         utils.changeClassStyle('favorite-font', 'fontFamily', fontfamily);