OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

support fixing up dynamically loaded SVGs

pull/21833/head
Matthew Hodgson 2016-01-05 03:34:52 +00:00
parent 555abdae30
commit 001dc8612b
7 changed files with 74 additions and 25 deletions

1
src/SlashCommands.js
View File

@ -45,6 +45,7 @@ var commands = {
tint: function(room_id, args) {
Tinter.tint(args);
return success();
},
encrypt: function(room_id, args) {

59
src/Tinter.js
View File

@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
var dis = require('./dispatcher');
var registered = false;
if (!registered) {
dis.register(_onAction);
}
var keyRgb = [
"rgb(118, 207, 166)",
"rgb(234, 245, 240)",
@ -30,6 +37,15 @@ var keyRgb = [
var keyHex = [
"#76CFA6",
"#EAF5F0",
"#D3EFE1",
];
// cache of our replacement colours
// defaults to our keys.
var colors = [
keyHex[0],
keyHex[1],
keyHex[2],
];
var cssFixups = [
@ -60,6 +76,8 @@ var svgAttrs = [
"stroke",
];
var svgNodes = {};
var cached = false;
function calcCssFixups() {
@ -83,9 +101,11 @@ function calcCssFixups() {
}
}
function calcSvgFixups() {
var svgs = document.getElementsByClassName("mx_Svg");
function calcSvgFixups(nodes) {
var svgs = nodes || document.getElementsByClassName("mx_Svg");
var fixups = [];
for (var i = 0; i < svgs.length; i++) {
var svgDoc = svgs[i].contentDocument;
if (!svgDoc) continue;
var tags = svgDoc.getElementsByTagName("*");
@ -95,7 +115,7 @@ function calcSvgFixups() {
var attr = svgAttrs[k];
for (var l = 0; l < keyHex.length; l++) {
if (tag.getAttribute(attr) && tag.getAttribute(attr).toUpperCase() === keyHex[l]) {
svgFixups.push({
fixups.push({
node: tag,
attr: attr,
index: l,
@ -105,26 +125,35 @@ function calcSvgFixups() {
}
}
}
return fixups;
}
function applyCssFixups(primaryColor, secondaryColor, tertiaryColor) {
var colors = [primaryColor, secondaryColor, tertiaryColor];
function applyCssFixups() {
for (var i = 0; i < cssFixups.length; i++) {
var cssFixup = cssFixups[i];
cssFixup.style[cssFixup.attr] = colors[cssFixup.index];
}
}
function applySvgFixups(primaryColor, secondaryColor, tertiaryColor) {
var colors = [primaryColor, secondaryColor, tertiaryColor];
for (var i = 0; i < svgFixups.length; i++) {
var svgFixup = svgFixups[i];
function applySvgFixups(fixups) {
for (var i = 0; i < fixups.length; i++) {
var svgFixup = fixups[i];
svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
}
}
function _onAction(payload) {
if (payload.action !== "svg_onload") return;
// 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([ payload.svg ]);
if (fixups.length) {
svgFixups = svgFixups.concat(fixups); // XXX: this leaks fixups
applySvgFixups(fixups);
}
}
function hexToRgb(color) {
if (color[0] === '#') color = color.slice(1);
if (color.length === 3) {
@ -148,7 +177,7 @@ module.exports = {
tint: function(primaryColor, secondaryColor, tertiaryColor) {
if (!cached) {
calcCssFixups();
calcSvgFixups();
svgFixups = calcSvgFixups();
cached = true;
}
@ -171,13 +200,15 @@ module.exports = {
tertiaryColor = rgbToHex(rgb1);
}
colors = [primaryColor, secondaryColor, tertiaryColor];
// go through manually fixing up the stylesheets.
applyCssFixups(primaryColor, secondaryColor, tertiaryColor);
applyCssFixups();
// 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.
applySvgFixups(primaryColor, secondaryColor, tertiaryColor);
applySvgFixups(svgFixups);
}
};

12
src/components/structures/RoomView.js
View File

@ -1093,6 +1093,10 @@ module.exports = React.createClass({
});
},
onSvgLoad: function(event) {
dis.dispatch({ action: "svg_onload", svg: event.target });
},
render: function() {
var RoomHeader = sdk.getComponent('rooms.RoomHeader');
var MessageComposer = sdk.getComponent('rooms.MessageComposer');
@ -1194,7 +1198,7 @@ module.exports = React.createClass({
<div className="mx_RoomView_tabCompleteWrapper">
<TabCompleteBar entries={this.tabComplete.peek(6)} />
<div className="mx_RoomView_tabCompleteEol" title="->|">
<object className="mx_Svg" type="image/svg+xml" data="img/eol.svg" width="22" height="16"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/eol.svg" width="22" height="16"/>
Auto-complete
</div>
</div>
@ -1268,7 +1272,7 @@ module.exports = React.createClass({
if (this.state.draggingFile) {
fileDropTarget = <div className="mx_RoomView_fileDropTarget">
<div className="mx_RoomView_fileDropTargetLabel" title="Drop File Here">
<object className="mx_Svg" type="image/svg+xml" data="img/upload-big.svg" width="45" height="59"/><br/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/upload-big.svg" width="45" height="59"/><br/>
Drop File Here
</div>
</div>;
@ -1306,7 +1310,7 @@ module.exports = React.createClass({
if (call.type === "video") {
zoomButton = (
<div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title="Fill screen">
<object className="mx_Svg" type="image/svg+xml" data="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
</div>
);
@ -1338,7 +1342,7 @@ module.exports = React.createClass({
{ videoMuteButton }
{ zoomButton }
{ statusBar }
<object className="mx_Svg" type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
</div>
}

7
src/components/views/messages/MFileBody.js
View File

@ -19,6 +19,7 @@ limitations under the License.
var React = require('react');
var filesize = require('filesize');
var MatrixClientPeg = require('../../../MatrixClientPeg');
var dis = require("../../../dispatcher");
module.exports = React.createClass({
displayName: 'MFileBody',
@ -45,6 +46,10 @@ module.exports = React.createClass({
return linkText;
},
onSvgLoad: function(event) {
dis.dispatch({ action: "svg_onload", svg: event.target });
},
render: function() {
var content = this.props.mxEvent.getContent();
var cli = MatrixClientPeg.get();
@ -57,7 +62,7 @@ module.exports = React.createClass({
<span className="mx_MFileBody">
<div className="mx_MImageBody_download">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
<img src="img/download.png" width="10" height="12"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/download.svg" width="12" height="14"/>
Download {text}
</a>
</div>

2
src/components/views/messages/MImageBody.js
View File

@ -118,7 +118,7 @@ module.exports = React.createClass({
</a>
<div className="mx_MImageBody_download">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
<img src="img/download.png" width="10" height="12"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/download.svg" width="12" height="14"/>
Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
</a>
</div>

10
src/components/views/rooms/MessageComposer.js
View File

@ -457,6 +457,10 @@ module.exports = React.createClass({
});
},
onSvgLoad: function(event) {
dis.dispatch({ action: "svg_onload", svg: event.target });
},
render: function() {
var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
var uploadInputStyle = {display: 'none'};
@ -474,11 +478,11 @@ module.exports = React.createClass({
else {
callButton =
<div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title="Voice call">
<object className="mx_Svg" type="image/svg+xml" data="img/voice.svg" width="16" height="26"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/voice.svg" width="16" height="26"/>
</div>
videoCallButton =
<div className="mx_MessageComposer_videocall" onClick={this.onCallClick} title="Video call">
<object className="mx_Svg" type="image/svg+xml" data="img/call.svg" width="30" height="22"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/call.svg" width="30" height="22"/>
</div>
}
@ -493,7 +497,7 @@ module.exports = React.createClass({
<textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
</div>
<div className="mx_MessageComposer_upload" onClick={this.onUploadClick} title="Upload file">
<object className="mx_Svg" type="image/svg+xml" data="img/upload.svg" width="19" height="24"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/upload.svg" width="19" height="24"/>
<input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
</div>
{ hangupButton }

8
src/components/views/rooms/RoomHeader.js
View File

@ -66,6 +66,10 @@ module.exports = React.createClass({
getRoomName: function() {
return this.refs.name_edit.value;
},
onSvgLoad: function(event) {
dis.dispatch({ action: "svg_onload", svg: event.target });
},
render: function() {
var EditableText = sdk.getComponent("elements.EditableText");
@ -136,7 +140,7 @@ module.exports = React.createClass({
if (this.props.onLeaveClick) {
leave_button =
<div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick} title="Leave room">
<object className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
width="26" height="20"/>
</div>;
}
@ -145,7 +149,7 @@ module.exports = React.createClass({
if (this.props.onForgetClick) {
forget_button =
<div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick} title="Forget room">
<object className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
width="26" height="20"/>
</div>;
}