Merge pull request #557 from glowing-bear/mathjax

Add MathJax support

index.html

@@ -278,7 +278,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:'emojify':settings.enableJSEmoji | DOMfilter:'inlinecolour' "></span>
+             --><span ng-repeat="part in ::bufferline.content" class="text" ng-class="::part.classes.concat(['line-' + part.$$hashKey.replace(':','_')])" ng-bind-html="::part.text | linky:'_blank' | DOMfilter:'irclinky' | DOMfilter:'emojify':settings.enableJSEmoji | DOMfilter:'inlinecolour' | DOMfilter:'mathjax':('.line-' + part.$$hashKey.replace(':','_')):settings.enableMathjax"></span>
               </td>
             </tr>
             <tr class="readmarker" ng-if="activeBuffer().lastSeen==$index">
@@ -448,6 +448,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="settings.enableMathjax">
+                      Enable LaTeX math rendering
+                    </label>
+                  </div>
+                </form>
+              </li>
             </ul>
           </div>
           <div class="modal-footer">

js/filters.js

@@ -73,9 +73,11 @@ weechat.filter('DOMfilter', ['$filter', '$sce', function($filter, $sce) {
             return text;
         }
 
-        // hacky way to pass an extra argument without using .apply, which
+        // hacky way to pass extra arguments without using .apply, which
         // would require assembling an argument array. PERFORMANCE!!!
         var extraArgument = (arguments.length > 2) ? arguments[2] : null;
+        var thirdArgument = (arguments.length > 3) ? arguments[3] : null;
+
         var filterFunction = $filter(filter);
         var el = document.createElement('div');
         el.innerHTML = text;
@@ -83,7 +85,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, extraArgument);
+                var value = filterFunction(node.nodeValue, extraArgument, thirdArgument);
                 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
@@ -150,4 +152,19 @@ weechat.filter('emojify', function() {
     };
 });
 
+weechat.filter('mathjax', function() {
+    return function(text, selector, enabled) {
+        if (!enabled || typeof(MathJax) === "undefined") {
+            return text;
+        }
+        if (text.indexOf("$$") != -1 || text.indexOf("\\[") != -1 || text.indexOf("\\(") != -1) {
+            // contains math
+            var math = document.querySelector(selector);
+            MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]);
+        }
+
+        return text;
+    };
+});
+
 })();

js/glowingbear.js

@@ -36,7 +36,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         'fontsize': '14px',
         'fontfamily': (utils.isMobileUi() ? 'sans-serif' : 'Inconsolata, Consolas, Monaco, Ubuntu Mono, monospace'),
         'readlineBindings': false,
-        'enableJSEmoji': false
+        'enableJSEmoji': false,
+        'enableMathjax': false,
     });
     $scope.settings = settings;
 
@@ -393,6 +394,30 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         }
     });
 
+    // To prevent unnecessary loading times for users who don't
+    // want MathJax, load it only if the setting is enabled.
+    // This also fires when the page is loaded if enabled.
+    settings.addCallback('enableMathjax', function(enabled) {
+        if (enabled && !$rootScope.mathjax_init) {
+            // Load MathJax only once
+            $rootScope.mathjax_init = true;
+            (function () {
+                var head = document.getElementsByTagName("head")[0], script;
+                script = document.createElement("script");
+                script.type = "text/x-mathjax-config";
+                script[(window.opera ? "innerHTML" : "text")] =
+                    "MathJax.Hub.Config({\n" +
+                    "  tex2jax: { inlineMath: [['$$','$$'], ['\\\\(','\\\\)']], displayMath: [['\\\\[','\\\\]']] },\n" +
+                    "});";
+                head.appendChild(script);
+                script = document.createElement("script");
+                script.type = "text/javascript";
+                script.src  = "//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML";
+                head.appendChild(script);
+            })();
+        }
+    });
+
     // Update font family when changed
     settings.addCallback('fontfamily', function(fontfamily) {
         utils.changeClassStyle('favorite-font', 'fontFamily', fontfamily);