PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

oops, we actually need to cache the fixups in TintableSvg

Browse source
This commit is contained in:
Matthew Hodgson 2016-01-07 03:59:09 +00:00
parent 0f52c0a514
commit 296b626ed9
2 changed files with 43 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
src/Tinter.js
View file

@ -93,37 +93,6 @@ function calcCssFixups() {
}
}
function calcSvgFixups(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.
var fixups = [];
for (var i = 0; i < svgs.length; i++) {
var svgDoc = svgs[i].contentDocument;
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,
});
}
}
}
}
}
return fixups;
}
function applyCssFixups() {
for (var i = 0; i < cssFixups.length; i++) {
var cssFixup = cssFixups[i];
@ -131,13 +100,6 @@ function applyCssFixups() {
}
}
function applySvgFixups(fixups) {
for (var i = 0; i < fixups.length; i++) {
var svgFixup = fixups[i];
svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
}
}
function hexToRgb(color) {
if (color[0] === '#') color = color.slice(1);
if (color.length === 3) {
@ -192,12 +154,44 @@ module.exports = {
dis.dispatch({ action: 'tint_update' });
},
tintSvg: function(svg) {
// XXX: we should probably faff around with toggling the visibility of the node to avoid flashing the wrong colour.
// (although this would result in an even worse flicker as the element redraws)
var fixups = calcSvgFixups([ svg ]);
if (fixups.length) {
applySvgFixups(fixups);
// 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.
var fixups = [];
for (var i = 0; i < svgs.length; i++) {
var svgDoc = svgs[i].contentDocument;
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,
});
}
}
}
}
}
return fixups;
},
applySvgFixups: function(fixups) {
for (var i = 0; i < fixups.length; i++) {
var svgFixup = fixups[i];
svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
}
},
};

7
src/components/views/elements/TintableSvg.js
View file

@ -24,6 +24,8 @@ var Tinter = require("../../../Tinter");
module.exports = React.createClass({
displayName: 'TintableSvg',
fixups: [],
propTypes: {
src: React.PropTypes.string.isRequired,
width: React.PropTypes.string.isRequired,
@ -48,11 +50,12 @@ module.exports = React.createClass({
onAction: function(payload) {
if (payload.action !== 'tint_update') return;
Tinter.tintSvg(ReactDOM.findDOMNode(this));
Tinter.applySvgFixups(this.fixups);
},
onLoad: function(event) {
Tinter.tintSvg(event.target);
this.fixups = Tinter.calcSvgFixups([event.target]);
Tinter.applySvgFixups(this.fixups);
},
render: function() {