Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-18 06:35:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

support lightboxes for image previews

Browse Source
This commit is contained in:
Matthew Hodgson 2016-04-04 00:18:18 +01:00
parent 0eb7b627fc
commit 96b0f42db2
3 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,6 +50,7 @@ module.exports = React.createClass({
if (content.info) {
params.width = content.info.w;
params.height = content.info.h;
params.size = content.info.size;
}
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");

28
src/components/views/rooms/LinkPreviewWidget.js
View File

@ -18,8 +18,10 @@ limitations under the License.
var React = require('react');
var sdk = require('../../../index');
var MatrixClientPeg = require('../../../MatrixClientPeg');
var ImageUtils = require('../../../ImageUtils');
var Modal = require('../../../Modal');
var linkify = require('linkifyjs');
var linkifyElement = require('linkifyjs/element');
@ -61,6 +63,30 @@ module.exports = React.createClass({
linkifyElement(this.refs.description, linkifyMatrix.options);
},
onImageClick: function(ev) {
var p = this.state.preview;
if (ev.button == 0 && !ev.metaKey) {
ev.preventDefault();
var ImageView = sdk.getComponent("elements.ImageView");
var src = p["og:image"];
if (src && src.startsWith("mxc://")) {
src = MatrixClientPeg.get().mxcUrlToHttp(src);
}
var params = {
src: src,
width: p["og:image:width"],
height: p["og:image:height"],
name: p["og:title"] || p["og:description"],
size: p["matrix:image:size"],
link: this.props.link,
};
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
}
},
render: function() {
var p = this.state.preview;
if (!p) return <div/>;
@ -80,7 +106,7 @@ module.exports = React.createClass({
var img;
if (image) {
img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
<a href={ this.props.link } target="_blank"><img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={ image }/></a>
<img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={ image } onClick={ this.onImageClick }/>
</div>
}