imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

switch Tinter from using dispatch to a synchronous update when changing the colourscheme, to avoid CSS getting out of sync with SVG colours

Browse source
This commit is contained in:
Matthew Hodgson 2016-04-16 01:00:10 +01:00
parent 4fb31662e1
commit 8db14bde60
4 changed files with 60 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/Tinter.js
View file

@ -15,11 +15,14 @@ limitations under the License.
*/
var dis = require("./dispatcher");
var sdk = require("./index");
// FIXME: these vars should be bundled up and attached to
// 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
@ -75,6 +78,7 @@ var svgAttrs = [
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 >:(
@ -105,13 +109,16 @@ function calcCssFixups() {
}
}
}
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) {
@ -135,6 +142,7 @@ function rgbToHex(rgb) {
module.exports = {
tint: function(primaryColor, secondaryColor, tertiaryColor) {
if (!cached) {
calcCssFixups();
cached = true;
@ -173,11 +181,19 @@ module.exports = {
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
dis.dispatch({ action: 'tint_update' });
// 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
@ -189,6 +205,7 @@ module.exports = {
// 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;
@ -223,14 +240,17 @@ module.exports = {
}
}
}
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");
},
};