From 772053713adfa50cb1cb673ce8404a6862dbfbf4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 22 Jul 2015 16:04:00 -0700
Subject: [PATCH] lightbox image viewing (that needs CSS)

---
 skins/base/views/molecules/MImageTile.js | 17 ++++++++++++++++-
 src/ComponentBroker.js                   |  1 +
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/skins/base/views/molecules/MImageTile.js b/skins/base/views/molecules/MImageTile.js
index 783583cb..4b581e38 100644
--- a/skins/base/views/molecules/MImageTile.js
+++ b/skins/base/views/molecules/MImageTile.js
@@ -21,6 +21,10 @@ var React = require('react');
 var MImageTileController = require("../../../../src/controllers/molecules/MImageTile");
 
 var MatrixClientPeg = require('../../../../src/MatrixClientPeg');
+var Modal = require('../../../../src/Modal');
+var ComponentBroker = require('../../../../src/ComponentBroker');
+
+var ImageView = ComponentBroker.get("atoms/ImageView");
 
 module.exports = React.createClass({
     displayName: 'MImageTile',
@@ -48,6 +52,17 @@ module.exports = React.createClass({
         }
     },
 
+    onClick: function(ev) {
+        ev.preventDefault();
+        var content = this.props.mxEvent.getContent();
+        var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(content.url);
+        Modal.createDialog(ImageView, {
+            src: httpUrl,
+            width: content.info.w,
+            height: content.info.h
+        });
+    },
+
     render: function() {
         var content = this.props.mxEvent.getContent();
         var cli = MatrixClientPeg.get();
@@ -60,7 +75,7 @@ module.exports = React.createClass({
 
         return (
             <span className="mx_MImageTile">
-                <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
+                <a href="#" onClick={this.onClick}>
                     <img src={cli.mxcUrlToHttp(content.url, 320, 240)} alt={content.body} style={imgStyle} />
                 </a>
             </span>
diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js
index e74d8ecc..2476ff6a 100644
--- a/src/ComponentBroker.js
+++ b/src/ComponentBroker.js
@@ -103,6 +103,7 @@ require('../skins/base/views/molecules/RoomDropTarget');
 require('../skins/base/views/molecules/BottomLeftMenu');
 require('../skins/base/views/molecules/DateSeparator');
 require('../skins/base/views/atoms/voip/VideoFeed');
+require('../skins/base/views/atoms/ImageView');
 require('../skins/base/views/molecules/voip/VideoView');
 require('../skins/base/views/molecules/voip/CallView');
 require('../skins/base/views/molecules/voip/IncomingCallBox');