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

Cache the tinted SVGs for MFileBody as data URLs (#559)

Browse source 
* Use a list of callbacks for things that need tinting.

Rather than gutwrenching the internals of TintableSVG inside the Tinter.

* Share a data: url for the tinted download svg in MFileBody

* Check image exists before tinting

* Add comments

* Use fetch+DomParser rather than XMLHttpRequest

* Remove comment about XMLHttpRequest
This commit is contained in:
Mark Haines 2016-11-16 14:16:51 +00:00 • committed by GitHub
parent 218ced0276
commit 6ccc825f0d
3 changed files with 85 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/Tinter.js
View file

@ -153,7 +153,25 @@ function rgbToHex(rgb) {
return '#' + (0x1000000 + val).toString(16).slice(1)
}
// List of functions to call when the tint changes.
const tintables = [];
module.exports = {
/**
* Register a callback to fire when the tint changes.
* This is used to rewrite the tintable SVGs with the new tint.
*
* It's not possible to unregister a tintable callback. So this can only be
* used to register a static callback. If a set of tintables will change
* over time then the best bet is to register a single callback for the
* entire set.
*
* @param {Function} tintable Function to call when the tint changes.
*/
registerTintable : function(tintable) {
tintables.push(tintable);
},
tint: function(primaryColor, secondaryColor, tertiaryColor) {
if (!cached) {
@ -201,12 +219,9 @@ module.exports = {
// 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();
});
}
tintables.forEach(function(tintable) {
tintable();
});
},
// XXX: we could just move this all into TintableSvg, but as it's so similar
@ -265,5 +280,5 @@ module.exports = {
svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
}
if (DEBUG) console.log("applySvgFixups end");
},
}
};