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>
This commit is contained in:
Jo-Philipp Wich 2021-11-11 12:39:41 +01:00
parent 5b3fa3cdc7
commit d775279dbd

View file

@ -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)
);
},
});