mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-17 22:14:58 +08:00
257 lines
8.4 KiB
JavaScript
257 lines
8.4 KiB
JavaScript
/*
|
|
Copyright 2015 OpenMarket Ltd
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
var dis = require("./dispatcher");
|
|
var sdk = require("./index");
|
|
|
|
// FIXME: these vars should be bundled up and attached to
|
|
// module.exports otherwise this will break when included by both
|
|
// react-sdk and apps layered on top.
|
|
|
|
var DEBUG = 0;
|
|
|
|
// The colour keys to be replaced as referred to in SVGs
|
|
var keyRgb = [
|
|
"rgb(118, 207, 166)", // Vector Green
|
|
"rgb(234, 245, 240)", // Vector Light Green
|
|
"rgba(118, 207, 166, 0.2)", // BottomLeftMenu overlay (20% Vector Green)
|
|
];
|
|
|
|
// Some algebra workings for calculating the tint % of Vector Green & Light Green
|
|
// x * 118 + (1 - x) * 255 = 234
|
|
// x * 118 + 255 - 255 * x = 234
|
|
// x * 118 - x * 255 = 234 - 255
|
|
// (255 - 118) x = 255 - 234
|
|
// x = (255 - 234) / (255 - 118) = 0.16
|
|
|
|
// The colour keys to be replaced as referred to in SVGs
|
|
var keyHex = [
|
|
"#76CFA6", // Vector Green
|
|
"#EAF5F0", // Vector Light Green
|
|
"#D3EFE1", // BottomLeftMenu overlay (20% Vector Green overlaid on Vector Light Green)
|
|
];
|
|
|
|
// cache of our replacement colours
|
|
// defaults to our keys.
|
|
var colors = [
|
|
keyHex[0],
|
|
keyHex[1],
|
|
keyHex[2],
|
|
];
|
|
|
|
var cssFixups = [
|
|
// {
|
|
// style: a style object that should be fixed up taken from a stylesheet
|
|
// attr: name of the attribute to be clobbered, e.g. 'color'
|
|
// index: ordinal of primary, secondary or tertiary
|
|
// }
|
|
];
|
|
|
|
// CSS attributes to be fixed up
|
|
var cssAttrs = [
|
|
"color",
|
|
"backgroundColor",
|
|
"borderColor",
|
|
"borderTopColor",
|
|
"borderBottomColor",
|
|
"borderLeftColor",
|
|
];
|
|
|
|
var svgAttrs = [
|
|
"fill",
|
|
"stroke",
|
|
];
|
|
|
|
var cached = false;
|
|
|
|
function calcCssFixups() {
|
|
if (DEBUG) console.log("calcSvgFixups start");
|
|
for (var i = 0; i < document.styleSheets.length; i++) {
|
|
var ss = document.styleSheets[i];
|
|
if (!ss) continue; // well done safari >:(
|
|
// Chromium apparently sometimes returns null here; unsure why.
|
|
// see $14534907369972FRXBx:matrix.org in HQ
|
|
// ...ah, it's because there's a third party extension like
|
|
// privacybadger inserting its own stylesheet in there with a
|
|
// resource:// URI or something which results in a XSS error.
|
|
// See also #vector:matrix.org/$145357669685386ebCfr:matrix.org
|
|
// ...except some browsers apparently return stylesheets without
|
|
// hrefs, which we have no choice but ignore right now
|
|
if (ss.href && !ss.href.endsWith("/bundle.css")) continue;
|
|
if (!ss.cssRules) continue;
|
|
for (var j = 0; j < ss.cssRules.length; j++) {
|
|
var rule = ss.cssRules[j];
|
|
if (!rule.style) continue;
|
|
for (var k = 0; k < cssAttrs.length; k++) {
|
|
var attr = cssAttrs[k];
|
|
for (var l = 0; l < keyRgb.length; l++) {
|
|
if (rule.style[attr] === keyRgb[l]) {
|
|
cssFixups.push({
|
|
style: rule.style,
|
|
attr: attr,
|
|
index: l,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (DEBUG) console.log("calcSvgFixups end");
|
|
}
|
|
|
|
function applyCssFixups() {
|
|
if (DEBUG) console.log("applyCssFixups start");
|
|
for (var i = 0; i < cssFixups.length; i++) {
|
|
var cssFixup = cssFixups[i];
|
|
cssFixup.style[cssFixup.attr] = colors[cssFixup.index];
|
|
}
|
|
if (DEBUG) console.log("applyCssFixups end");
|
|
}
|
|
|
|
function hexToRgb(color) {
|
|
if (color[0] === '#') color = color.slice(1);
|
|
if (color.length === 3) {
|
|
color = color[0] + color[0] +
|
|
color[1] + color[1] +
|
|
color[2] + color[2];
|
|
}
|
|
var val = parseInt(color, 16);
|
|
var r = (val >> 16) & 255;
|
|
var g = (val >> 8) & 255;
|
|
var b = val & 255;
|
|
return [r, g, b];
|
|
}
|
|
|
|
function rgbToHex(rgb) {
|
|
var val = (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
|
|
return '#' + (0x1000000 + val).toString(16).slice(1)
|
|
}
|
|
|
|
module.exports = {
|
|
tint: function(primaryColor, secondaryColor, tertiaryColor) {
|
|
|
|
if (!cached) {
|
|
calcCssFixups();
|
|
cached = true;
|
|
}
|
|
|
|
if (!primaryColor) {
|
|
primaryColor = "#76CFA6"; // Vector green
|
|
secondaryColor = "#EAF5F0"; // Vector light green
|
|
}
|
|
|
|
if (!secondaryColor) {
|
|
var x = 0.16; // average weighting factor calculated from vector green & light green
|
|
var rgb = hexToRgb(primaryColor);
|
|
rgb[0] = x * rgb[0] + (1 - x) * 255;
|
|
rgb[1] = x * rgb[1] + (1 - x) * 255;
|
|
rgb[2] = x * rgb[2] + (1 - x) * 255;
|
|
secondaryColor = rgbToHex(rgb);
|
|
}
|
|
|
|
if (!tertiaryColor) {
|
|
var x = 0.19;
|
|
var rgb1 = hexToRgb(primaryColor);
|
|
var rgb2 = hexToRgb(secondaryColor);
|
|
rgb1[0] = x * rgb1[0] + (1 - x) * rgb2[0];
|
|
rgb1[1] = x * rgb1[1] + (1 - x) * rgb2[1];
|
|
rgb1[2] = x * rgb1[2] + (1 - x) * rgb2[2];
|
|
tertiaryColor = rgbToHex(rgb1);
|
|
}
|
|
|
|
if (colors[0] === primaryColor &&
|
|
colors[1] === secondaryColor &&
|
|
colors[2] === tertiaryColor)
|
|
{
|
|
return;
|
|
}
|
|
|
|
colors = [primaryColor, secondaryColor, tertiaryColor];
|
|
|
|
if (DEBUG) console.log("Tinter.tint");
|
|
|
|
// go through manually fixing up the stylesheets.
|
|
applyCssFixups();
|
|
|
|
// tell all the SVGs to go fix themselves up
|
|
// we don't do this as a dispatch otherwise it will visually lag
|
|
var TintableSvg = sdk.getComponent("elements.TintableSvg");
|
|
if (TintableSvg.mounts) {
|
|
Object.keys(TintableSvg.mounts).forEach((id) => {
|
|
TintableSvg.mounts[id].tint();
|
|
});
|
|
}
|
|
},
|
|
|
|
// XXX: we could just move this all into TintableSvg, but as it's so similar
|
|
// to the CSS fixup stuff in Tinter (just that the fixups are stored in TintableSvg)
|
|
// keeping it here for now.
|
|
calcSvgFixups: function(svgs) {
|
|
// go through manually fixing up SVG colours.
|
|
// we could do this by stylesheets, but keeping the stylesheets
|
|
// updated would be a PITA, so just brute-force search for the
|
|
// key colour; cache the element and apply.
|
|
|
|
if (DEBUG) console.log("calcSvgFixups start for " + svgs);
|
|
var fixups = [];
|
|
for (var i = 0; i < svgs.length; i++) {
|
|
var svgDoc;
|
|
try {
|
|
svgDoc = svgs[i].contentDocument;
|
|
}
|
|
catch(e) {
|
|
var msg = 'Failed to get svg.contentDocument of ' + svgs[i].toString();
|
|
if (e.message) {
|
|
msg += e.message;
|
|
}
|
|
if (e.stack) {
|
|
msg += ' | stack: ' + e.stack;
|
|
}
|
|
console.error(e);
|
|
}
|
|
if (!svgDoc) continue;
|
|
var tags = svgDoc.getElementsByTagName("*");
|
|
for (var j = 0; j < tags.length; j++) {
|
|
var tag = tags[j];
|
|
for (var k = 0; k < svgAttrs.length; k++) {
|
|
var attr = svgAttrs[k];
|
|
for (var l = 0; l < keyHex.length; l++) {
|
|
if (tag.getAttribute(attr) && tag.getAttribute(attr).toUpperCase() === keyHex[l]) {
|
|
fixups.push({
|
|
node: tag,
|
|
attr: attr,
|
|
index: l,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (DEBUG) console.log("calcSvgFixups end");
|
|
|
|
return fixups;
|
|
},
|
|
|
|
applySvgFixups: function(fixups) {
|
|
if (DEBUG) console.log("applySvgFixups start for " + fixups);
|
|
for (var i = 0; i < fixups.length; i++) {
|
|
var svgFixup = fixups[i];
|
|
svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
|
|
}
|
|
if (DEBUG) console.log("applySvgFixups end");
|
|
},
|
|
};
|