Merge pull request #27 from joemaller/extend-styles

switch notify styles to object, enable single rule overrides
BrowserSync · Nov 10, 2015 · 6487baf · 6487baf
2 parents fba0957 + be84108
commit 6487baf
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 18 deletions.
diff --git a/lib/notify.js b/lib/notify.js
@@ -3,21 +3,21 @@
 var scroll = require("./ghostmode.scroll");
 var utils  = require("./browser.utils");
 
-var styles = [
-    "display: none",
-    "padding: 15px",
-    "font-family: sans-serif",
-    "position: fixed",
-    "font-size: 0.9em",
-    "z-index: 9999",
-    "right: 0px",
-    "top: 0px",
-    "border-bottom-left-radius: 5px",
-    "background-color: #1B2032",
-    "margin: 0",
-    "color: white",
-    "text-align: center"
-];
+var styles = {
+    display: "none",
+    padding: "15px",
+    fontFamily: "sans-serif",
+    position: "fixed",
+    fontSize: "0.9em",
+    zIndex: 9999,
+    right: 0,
+    top: 0,
+    borderBottomLeftRadius: "5px",
+    backgroundColor: "#1B2032",
+    margin: 0,
+    color: "white",
+    textAlign: "center"
+};
 
 var elem;
 var options;
@@ -34,12 +34,29 @@ exports.init = function (bs) {
     var cssStyles = styles;
 
     if (options.notify.styles) {
-        cssStyles = options.notify.styles;
+
+        if (Object.prototype.toString.call(options.notify.styles) === "[object Array]") {
+            // handle original array behavior, replace all styles with a joined copy
+            cssStyles = options.notify.styles.join(";");
+        } else {
+            for (var key in options.notify.styles) {
+                if (options.notify.styles.hasOwnProperty(key)) {
+                    cssStyles[key] = options.notify.styles[key];
+                }
+            }
+        }
     }
 
     elem = document.createElement("DIV");
     elem.id = "__bs_notify__";
-    elem.style.cssText = cssStyles.join(";");
+
+    if (typeof cssStyles === "string") {
+       elem.style.cssText = cssStyles;
+    } else {
+        for (var rule in cssStyles) {
+            elem.style[rule] = cssStyles[rule];
+        }
+    }
 
     var flashFn = exports.watchEvent(bs);
 

diff --git a/test/client-new/notify.js b/test/client-new/notify.js
@@ -10,7 +10,7 @@ describe("The Notify Element", function() {
         var expected = "rgb(27, 32, 50)";
         assert.equal(actual, expected);
     });
-    it("can be initialised with custom styles", function() {
+    it("can be initialised with custom styles array", function() {
 
         bs.options.notify = {
             styles: [
@@ -30,6 +30,23 @@ describe("The Notify Element", function() {
         var expected = "yellow";
         assert.equal(actual, expected);
     });
+    it("can be initialised with custom style overrides", function() {
+
+        bs.options.notify = {
+            styles: {
+                fontSize: "18px",
+                backgroundColor: "plum"
+            }
+        };
+        var elem     = notify.init(bs);
+        var actualFontSize   = elem.style.fontSize;
+        var expectedFontSize = "18px";
+        var actualBGColor   = elem.style.backgroundColor;
+        var expectedBGColor = "plum";
+        assert.equal(actualFontSize, expectedFontSize);
+        assert.equal(actualBGColor, expectedBGColor);
+    });
+
 
     it("can return a callback for watching", function(){
         var stub = sinon.stub(notify, "flash");