mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
convert VectorHomePage into ES6 and have it nicely override HomePage
This commit is contained in:
parent
c8b26a1002
commit
7ee534388b
@ -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';
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
|
module.exports = VectorHomePage;
|
||||||
|
Loading…
Reference in New Issue
Block a user