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

convert VectorHomePage into ES6 and have it nicely override HomePage

Browse source
This commit is contained in:
Matthew Hodgson 2018-04-18 10:20:35 +01:00
parent c8b26a1002
commit 7ee534388b
1 changed files with 10 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
src/components/structures/VectorHomePage.js
View file

@ -18,97 +18,22 @@ limitations under the License.
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import request from 'browser-request'; import HomePage from 'matrix-react-sdk/lib/components/structures/HomePage';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import sanitizeHtml from 'sanitize-html'; import sanitizeHtml from 'sanitize-html';
import sdk from 'matrix-react-sdk/lib'; import { _t } from 'matrix-react-sdk/lib/languageHandler';
module.exports = React.createClass({ class VectorHomePage extends HomePage {
displayName: 'VectorHomePage', displayName = 'VectorHomePage'
statics: { static replaces = 'HomePage'
replaces: 'HomePage',
},
propTypes: { // we're overriding the base component here, for Riot-specific tweaks
// URL base of the team server. Optional. translate(s) {
teamServerUrl: React.PropTypes.string,
// Team token. Optional. If set, used to get the static homepage of the team
// associated. If unset, homePageUrl will be used.
teamToken: React.PropTypes.string,
// URL to use as the iFrame src. Defaults to /home.html.
homePageUrl: React.PropTypes.string,
},
getInitialState: function() {
return {
iframeSrc: '',
page: '',
};
},
translate: function(s) {
s = sanitizeHtml(_t(s)); s = sanitizeHtml(_t(s));
// ugly fix for https://github.com/vector-im/riot-web/issues/4243 // ugly fix for https://github.com/vector-im/riot-web/issues/4243
s = s.replace(/Riot\.im/, '<a href="https://riot.im" target="_blank" rel="noopener">Riot.im</a>'); s = s.replace(/Riot\.im/, '<a href="https://riot.im" target="_blank" rel="noopener">Riot.im</a>');
s = s.replace(/\[matrix\]/, '<a href="https://matrix.org" target="_blank" rel="noopener"><img width="79" height="34" alt="[matrix]" style="padding-left: 1px;vertical-align: middle" src="home/images/matrix.svg"/></a>'); s = s.replace(/\[matrix\]/, '<a href="https://matrix.org" target="_blank" rel="noopener"><img width="79" height="34" alt="[matrix]" style="padding-left: 1px;vertical-align: middle" src="home/images/matrix.svg"/></a>');
return s; return s;
},
componentWillMount: function() {
this._unmounted = false;
if (this.props.teamToken && this.props.teamServerUrl) {
this.setState({
iframeSrc: `${this.props.teamServerUrl}/static/${this.props.teamToken}/home.html`
});
} }
else { }
// we use request() to inline the homepage into the react component
// so that it can inherit CSS and theming easily rather than mess around
// with iframes and trying to synchronise document.stylesheets.
let src = this.props.homePageUrl || 'home.html'; module.exports = VectorHomePage;
request(
{ method: "GET", url: src },
(err, response, body) => {
if (this._unmounted) {
return;
}
if (err || response.status < 200 || response.status >= 300) {
console.warn(`Error loading home page: ${err}`);
this.setState({ page: _t("Couldn't load home page") });
return;
}
body = body.replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1)=>this.translate(g1));
this.setState({ page: body });
}
);
}
},
componentWillUnmount: function() {
this._unmounted = true;
},
render: function() {
if (this.state.iframeSrc) {
return (
<div className="mx_HomePage">
<iframe src={ this.state.iframeSrc } />
</div>
);
}
else {
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
return (
<GeminiScrollbarWrapper autoshow={true} className="mx_HomePage">
<div className="mx_HomePage_body" dangerouslySetInnerHTML={{ __html: this.state.page }}>
</div>
</GeminiScrollbarWrapper>
);
}
}
});