Merge pull request #732 from glowing-bear/custom-css

Add support for custom CSS
10 years ago · 2c9e7c7023
parent 1df82da2be d34cf89aaa
commit 2c9e7c7023
2 changed files with 30 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -353,6 +353,17 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
                </form>
              </li>

+              <li class="standard-labels">
+                <form class="form-horizontal" role="form">
+                  <div class="form-group">
+                    <label for="custom-css" class="col-sm-3 control-label make-thinner">Custom CSS</label>
+                    <div class="col-sm-7">
+                      <textarea id="custom-css" class="form-control" ng-model="settings.customCSS"></textarea>
+                    </div>
+                  </div>
+                </form>
+              </li>
+
              <li>
                <form class="form-inline" role="form">
                  <div class="checkbox">
--- a/js/glowingbear.js
+++ b/js/glowingbear.js
@ -46,6 +46,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
        'readlineBindings': false,
        'enableJSEmoji': (utils.isMobileUi() ? false : true),
        'enableMathjax': false,
+        'customCSS': '',
    });
    $scope.settings = settings;

@ -424,6 +425,24 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
        })();
    });

+    settings.addCallback('customCSS', function(css) {
+        // We need to delete the old tag and add a new one so that the browser
+        // notices the change. Thus, first remove old custom CSS.
+        var old_css = document.getElementById('custom-css-tag');
+        if (old_css) {
+            old_css.parentNode.removeChild(old_css);
+        }
+
+        // Create new CSS tag
+        var new_css = document.createElement("style");
+        new_css.type = "text/css";
+        new_css.id = "custom-css-tag";
+        new_css.appendChild(document.createTextNode(css));
+        // Append it to the <head> tag
+        var heads = document.getElementsByTagName("head");
+        heads[0].appendChild(new_css);
+    });
+

    // Update font family when changed
    settings.addCallback('fontfamily', function(fontfamily) {