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

multiple URL preview support

Browse source
This commit is contained in:
Matthew Hodgson 2016-05-24 00:54:20 +01:00
parent 817a3debec
commit 39a3d6fdd4
1 changed files with 29 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/views/messages/TextualBody.js
View file

@ -45,9 +45,9 @@ module.exports = React.createClass({
getInitialState: function() {
return {
// the URL (if any) to be previewed with a LinkPreviewWidget
// the URLs (if any) to be previewed with a LinkPreviewWidget
// inside this TextualBody.
link: null,
links: null,
// track whether the preview widget is hidden
widgetHidden: false,
@ -57,9 +57,11 @@ module.exports = React.createClass({
componentDidMount: function() {
linkifyElement(this.refs.content, linkifyMatrix.options);
var link = this.findLink(this.refs.content.children);
if (link) {
this.setState({ link: link.getAttribute("href") });
var links = this.findLinks(this.refs.content.children);
if (links.length) {
this.setState({ links: links.map((link)=>{
return link.getAttribute("href");
})});
// lazy-load the hidden state of the preview widget from localstorage
if (global.localStorage) {
@ -77,24 +79,28 @@ module.exports = React.createClass({
return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() ||
nextProps.highlights !== this.props.highlights ||
nextProps.highlightLink !== this.props.highlightLink ||
nextState.link !== this.state.link ||
nextState.links !== this.state.links ||
nextState.widgetHidden !== this.state.widgetHidden);
},
findLink: function(nodes) {
findLinks: function(nodes) {
var links = [];
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.tagName === "A" && node.getAttribute("href"))
{
return this.isLinkPreviewable(node) ? node : undefined;
if (this.isLinkPreviewable(node)) {
links.push(node);
}
}
else if (node.tagName === "PRE" || node.tagName === "CODE") {
return;
continue;
}
else if (node.children && node.children.length) {
return this.findLink(node.children)
links = links.concat(this.findLinks(node.children));
}
}
return links;
},
isLinkPreviewable: function(node) {
@ -160,14 +166,17 @@ module.exports = React.createClass({
{highlightLink: this.props.highlightLink});
var widget;
if (this.state.link && !this.state.widgetHidden) {
var widgets;
if (this.state.links && !this.state.widgetHidden) {
var LinkPreviewWidget = sdk.getComponent('rooms.LinkPreviewWidget');
widget = <LinkPreviewWidget
link={ this.state.link }
widgets = this.state.links.map((link)=>{
return <LinkPreviewWidget
key={ link }
link={ link }
mxEvent={ this.props.mxEvent }
onCancelClick={ this.onCancelClick }
onWidgetLoad={ this.props.onWidgetLoad }/>;
});
}
switch (content.msgtype) {
@ -176,21 +185,21 @@ module.exports = React.createClass({
return (
<span ref="content" className="mx_MEmoteBody mx_EventTile_content">
* { name } { body }
{ widget }
{ widgets }
</span>
);
case "m.notice":
return (
<span ref="content" className="mx_MNoticeBody mx_EventTile_content">
{ body }
{ widget }
{ widgets }
</span>
);
default: // including "m.text"
return (
<span ref="content" className="mx_MTextBody mx_EventTile_content">
{ body }
{ widget }
{ widgets }
</span>
);
}