luci-base: firewall.js: add getZoneColorStyle() helper

The getZoneColorStyle() function will produce CSS style properties that
describe the color value of the zone. The color declaration is divided
into a CSS variable called `--zone-color-rgb` which holds the RGB value
of the color and a `background-color` property assigning these values
as background property.

This allows themes to override the color with derived values, e.g. by
applying an alpha channel.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 11 insertions, 1 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/firewall.js b/modules/luci-base/htdocs/luci-static/resources/firewall.js
index 4fa4954ba6..a682af46d0 100644
--- a/modules/luci-base/htdocs/luci-static/resources/firewall.js
+++ b/modules/luci-base/htdocs/luci-static/resources/firewall.js
@@ -224,7 +224,17 @@ Firewall = L.Class.extend({
 		}, this));
 	},
 
-	getColorForName: getColorForName
+	getColorForName: getColorForName,
+
+	getZoneColorStyle: function(zone) {
+		var hex = (zone instanceof Zone) ? zone.getColor() : getColorForName((zone != null && zone != '*') ? zone : null);
+
+		return '--zone-color-rgb:%d, %d, %d; background-color:rgb(var(--zone-color-rgb))'.format(
+			parseInt(hex.substring(1, 3), 16),
+			parseInt(hex.substring(3, 5), 16),
+			parseInt(hex.substring(5, 7), 16)
+		);
+	},
 });