summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/react/components/file_attachment.jsx109
-rw-r--r--web/react/components/file_attachment_list.jsx47
-rw-r--r--web/react/components/post_body.jsx123
-rw-r--r--web/react/components/post_right.jsx131
4 files changed, 176 insertions, 234 deletions
diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
new file mode 100644
index 000000000..4a81dd8f3
--- /dev/null
+++ b/web/react/components/file_attachment.jsx
@@ -0,0 +1,109 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var utils = require('../utils/utils.jsx');
+
+module.exports = React.createClass({
+ displayName: "FileAttachment",
+ propTypes: {
+ filenames: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
+ index: React.PropTypes.number.isRequired,
+ imageModalId: React.PropTypes.string.isRequired,
+ handleImageClick: React.PropTypes.func
+ },
+ componentDidMount: function() {
+ var filename = this.props.filenames[this.props.index];
+
+ var self = this;
+
+ if (filename) {
+ var fileInfo = utils.splitFileLocation(filename);
+ if (Object.keys(fileInfo).length === 0) return;
+
+ var type = utils.getFileType(fileInfo.ext);
+
+ // This is a temporary patch to fix issue with old files using absolute paths
+ if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
+ fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
+ }
+ fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
+
+ if (type === "image") {
+ $('<img/>').attr('src', fileInfo.path+'_thumb.jpg').load(function(path, name){ return function() {
+ $(this).remove();
+ if (name in self.refs) {
+ var imgDiv = self.refs[name].getDOMNode();
+
+ $(imgDiv).removeClass('post__load');
+ $(imgDiv).addClass('post__image');
+
+ var re1 = new RegExp(' ', 'g');
+ var re2 = new RegExp('\\(', 'g');
+ var re3 = new RegExp('\\)', 'g');
+ var url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
+ $(imgDiv).css('background-image', 'url('+url+'_thumb.jpg)');
+ }
+ }}(fileInfo.path, filename));
+ }
+ }
+ },
+ render: function() {
+ var filenames = this.props.filenames;
+ var filename = filenames[this.props.index];
+
+ var fileInfo = utils.splitFileLocation(filename);
+ if (Object.keys(fileInfo).length === 0) return null;
+
+ var type = utils.getFileType(fileInfo.ext);
+
+ // This is a temporary patch to fix issue with old files using absolute paths
+ if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
+ fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
+ }
+ fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
+
+ var thumbnail;
+ if (type === "image") {
+ thumbnail = (
+ <a className="post-image__thumbnail" href="#" onClick={this.props.handleImageClick}
+ data-img-id={this.props.index} data-toggle="modal" data-target={"#" + this.props.imageModalId }>
+ <div ref={filename} className="post__load" style={{backgroundImage: 'url(/static/images/load.gif)'}}/>
+ </a>
+ );
+ } else {
+ thumbnail = (
+ <a href={fileInfo.path + (fileInfo.ext ? "." + fileInfo.ext : "")} download={fileInfo.name + (fileInfo.ext ? "." + fileInfo.ext : "")}>
+ <div className={"file-icon "+utils.getIconClassName(type)}/>
+ </a>
+ );
+ }
+
+ var containerClassName = "post-image__column";
+ if (type !== "image") {
+ containerClassName += " custom-file";
+ }
+
+ // TODO fix the race condition here where the file size may arrive before the rest of the page is rendered
+ // asynchronously request the size of the file so that we can display it next to the thumbnail
+ utils.getFileSize(fileInfo.path + "." + fileInfo.ext, function(self, _filename) {
+ return function(size) {
+ if ((_filename + "__size") in self.refs) {
+ self.refs[_filename + "__size"].getDOMNode().innerHTML = " " + utils.fileSizeToString(size);
+ }
+ }
+ }(this, filename));
+
+ return (
+ <div className={containerClassName} key={filename}>
+ {thumbnail}
+ <div className="post-image__details">
+ <div className="post-image__name">{fileInfo.name}</div>
+ <div>
+ <span className="post-image__type">{fileInfo.ext.toUpperCase()}</span>
+ <span className="post-image__size" ref={filename + "__size"}></span>
+ </div>
+ </div>
+ </div>
+ );
+ }
+});
diff --git a/web/react/components/file_attachment_list.jsx b/web/react/components/file_attachment_list.jsx
new file mode 100644
index 000000000..0b52d6a70
--- /dev/null
+++ b/web/react/components/file_attachment_list.jsx
@@ -0,0 +1,47 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var ViewImageModal = require('./view_image.jsx');
+var FileAttachment = require('./file_attachment.jsx');
+var Constants = require('../utils/constants.jsx');
+
+module.exports = React.createClass({
+ displayName: "FileAttachmentList",
+ propTypes: {
+ filenames: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
+ postId: React.PropTypes.string.isRequired,
+ channelId: React.PropTypes.string,
+ userId: React.PropTypes.string
+ },
+ getInitialState: function() {
+ return {startImgId: 0};
+ },
+ render: function() {
+ var filenames = this.props.filenames;
+
+ var postImageModalId = "view_image_modal_" + this.props.postId;
+
+ var postFiles = [];
+ for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
+ postFiles.push(<FileAttachment key={i} filenames={filenames} index={i} imageModalId={postImageModalId} handleImageClick={this.handleImageClick} />);
+ }
+
+ return (
+ <div>
+ <div className="post-image__columns">
+ {postFiles}
+ </div>
+ <ViewImageModal
+ channelId={this.props.channelId}
+ userId={this.props.userId}
+ modalId={postImageModalId}
+ startId={this.state.startImgId}
+ imgCount={0}
+ filenames={filenames} />
+ </div>
+ );
+ },
+ handleImageClick: function(e) {
+ this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'))});
+ }
+});
diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx
index 29687b94e..d29784db9 100644
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -1,63 +1,23 @@
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
-var CreateComment = require( './create_comment.jsx' );
+var FileAttachmentList = require('./file_attachment_list.jsx');
var UserStore = require('../stores/user_store.jsx');
var utils = require('../utils/utils.jsx');
-var ViewImageModal = require('./view_image.jsx');
-var Constants = require('../utils/constants.jsx');
module.exports = React.createClass({
- handleImageClick: function(e) {
- this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'))});
- },
componentWillReceiveProps: function(nextProps) {
var linkData = utils.extractLinks(nextProps.post.message);
this.setState({ links: linkData["links"], message: linkData["text"] });
},
- componentDidMount: function() {
- var filenames = this.props.post.filenames;
- var self = this;
- if (filenames) {
- var re1 = new RegExp(' ', 'g');
- var re2 = new RegExp('\\(', 'g');
- var re3 = new RegExp('\\)', 'g');
- for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
- var fileInfo = utils.splitFileLocation(filenames[i]);
- if (Object.keys(fileInfo).length === 0) continue;
-
- var type = utils.getFileType(fileInfo.ext);
-
- // This is a temporary patch to fix issue with old files using absolute paths
- if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
- fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
- }
- fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
-
- if (type === "image") {
- $('<img/>').attr('src', fileInfo.path+'_thumb.jpg').load(function(path, name){ return function() {
- $(this).remove();
- if (name in self.refs) {
- var imgDiv = self.refs[name].getDOMNode();
- $(imgDiv).removeClass('post__load');
- $(imgDiv).addClass('post__image');
- var url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
- $(imgDiv).css('background-image', 'url('+url+'_thumb.jpg)');
- }
- }}(fileInfo.path, filenames[i]));
- }
- }
- }
- },
getInitialState: function() {
var linkData = utils.extractLinks(this.props.post.message);
- return { startImgId: 0, links: linkData["links"], message: linkData["text"] };
+ return { links: linkData["links"], message: linkData["text"] };
},
render: function() {
var post = this.props.post;
var filenames = this.props.post.filenames;
var parentPost = this.props.parentPost;
- var postImageModalId = "view_image_modal_" + post.id;
var inner = utils.textToJsx(this.state.message);
var comment = "";
@@ -99,69 +59,8 @@ module.exports = React.createClass({
postClass += " post-comment";
}
- var postFiles = [];
- var images = [];
- if (filenames) {
- for (var i = 0; i < filenames.length; i++) {
- var fileInfo = utils.splitFileLocation(filenames[i]);
- if (Object.keys(fileInfo).length === 0) continue;
-
- var type = utils.getFileType(fileInfo.ext);
-
- // This is a temporary patch to fix issue with old files using absolute paths
- if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
- fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
- }
- fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
-
- var thumbnail;
- if (type === "image") {
- thumbnail = (
- <a className="post-image__thumbnail" href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }>
- <div ref={filenames[i]} className="post__load" style={{backgroundImage: 'url(/static/images/load.gif)'}}/>
- </a>
- );
- } else {
- thumbnail = (
- <a href={fileInfo.path + (fileInfo.ext ? "." + fileInfo.ext : "")} download={fileInfo.name + (fileInfo.ext ? "." + fileInfo.ext : "")}>
- <div className={"file-icon "+utils.getIconClassName(type)}/>
- </a>
- );
- }
-
- var containerClassName = "post-image__column";
- if (type !== "image") {
- containerClassName += " custom-file";
- }
-
- postFiles.push(
- <div className={containerClassName} key={filenames[i]}>
- {thumbnail}
- <div className="post-image__details">
- <div className="post-image__name">{fileInfo.name}</div>
- <div>
- <span className="post-image__type">{fileInfo.ext.toUpperCase()}</span>
- <span className="post-image__size" ref={filenames[i] + "__size"}></span>
- </div>
- </div>
- </div>
- );
-
- // asynchronously request the size of the file so that we can display it next to the thumbnail
- utils.getFileSize(fileInfo.path + "." + fileInfo.ext, function(self, filename) {
- return function(size) {
- self.refs[filename + "__size"].getDOMNode().innerHTML = " " + utils.fileSizeToString(size);
- }
- }(this, filenames[i]));
-
- if (type === "image") {
- images.push(filenames[i]);
- }
- }
- }
-
var embed;
- if (postFiles.length === 0 && this.state.links) {
+ if (filenames.length === 0 && this.state.links) {
embed = utils.getEmbed(this.state.links[0]);
}
@@ -170,21 +69,13 @@ module.exports = React.createClass({
{ comment }
<p key={post.id+"_message"} className={postClass}><span>{inner}</span></p>
{ filenames && filenames.length > 0 ?
- <div className="post-image__columns">
- { postFiles }
- </div>
- : "" }
- { embed }
-
- { images.length > 0 ?
- <ViewImageModal
+ <FileAttachmentList
+ postId={post.id}
channelId={post.channel_id}
userId={post.user_id}
- modalId={postImageModalId}
- startId={this.state.startImgId}
- imgCount={post.img_count}
- filenames={images} />
+ filenames={filenames} />
: "" }
+ { embed }
</div>
);
}
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index 8097a181e..861f03673 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -10,7 +10,7 @@ var utils = require('../utils/utils.jsx');
var SearchBox =require('./search_bar.jsx');
var CreateComment = require( './create_comment.jsx' );
var Constants = require('../utils/constants.jsx');
-var ViewImageModal = require('./view_image.jsx');
+var FileAttachmentList = require('./file_attachment_list.jsx');
var ActionTypes = Constants.ActionTypes;
RhsHeaderPost = React.createClass({
@@ -55,17 +55,8 @@ RhsHeaderPost = React.createClass({
});
RootPost = React.createClass({
- handleImageClick: function(e) {
- this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'))});
- },
- getInitialState: function() {
- return { startImgId: 0 };
- },
render: function() {
-
- var postImageModalId = "rhs_view_image_modal_" + this.props.post.id;
var message = utils.textToJsx(this.props.post.message);
- var filenames = this.props.post.filenames;
var isOwner = UserStore.getCurrentId() == this.props.post.user_id;
var timestamp = UserStore.getProfile(this.props.post.user_id).update_at;
var channel = ChannelStore.get(this.props.post.channel_id);
@@ -84,42 +75,6 @@ RootPost = React.createClass({
channelName = (channel.type === 'D') ? "Private Message" : channel.display_name;
}
- if (filenames) {
- var postFiles = [];
- var images = [];
- var re1 = new RegExp(' ', 'g');
- var re2 = new RegExp('\\(', 'g');
- var re3 = new RegExp('\\)', 'g');
- for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
- var fileInfo = utils.splitFileLocation(filenames[i]);
- var ftype = utils.getFileType(fileInfo.ext);
-
- // This is a temporary patch to fix issue with old files using absolute paths
- if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
- fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
- }
- fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
-
- if (ftype === "image") {
- var url = fileInfo.path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
- postFiles.push(
- <div className="post-image__column" key={fileInfo.path}>
- <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={fileInfo.path} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a>
- </div>
- );
- images.push(filenames[i]);
- } else {
- postFiles.push(
- <div className="post-image__column custom-file" key={fileInfo.path}>
- <a href={fileInfo.path+"."+fileInfo.ext} download={fileInfo.name+"."+fileInfo.ext}>
- <div className={"file-icon "+utils.getIconClassName(ftype)}/>
- </a>
- </div>
- );
- }
- }
- }
-
return (
<div className={"post post--root " + currentUserCss}>
<div className="post-right-channel__name">{ channelName }</div>
@@ -146,19 +101,12 @@ RootPost = React.createClass({
</ul>
<div className="post-body">
<p>{message}</p>
- { filenames.length > 0 ?
- <div className="post-image__columns">
- { postFiles }
- </div>
- : "" }
- { images.length > 0 ?
- <ViewImageModal
- channelId={this.props.post.channel_id}
- userId={this.props.post.user_id}
- modalId={postImageModalId}
- startId={this.state.startImgId}
- imgCount={this.props.post.img_count}
- filenames={images} />
+ { this.props.post.filenames && this.props.post.filenames.length > 0 ?
+ <FileAttachmentList
+ postId={this.props.post.id}
+ channelId={this.props.post.channel_id}
+ userId={this.props.post.user_id}
+ filenames={this.props.post.filenames} />
: "" }
</div>
</div>
@@ -169,14 +117,7 @@ RootPost = React.createClass({
});
CommentPost = React.createClass({
- handleImageClick: function(e) {
- this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'))});
- },
- getInitialState: function() {
- return { startImgId: 0 };
- },
render: function() {
-
var commentClass = "post";
var currentUserCss = "";
@@ -184,8 +125,6 @@ CommentPost = React.createClass({
currentUserCss = "current--user";
}
- var postImageModalId = "rhs_comment_view_image_modal_" + this.props.post.id;
- var filenames = this.props.post.filenames;
var isOwner = UserStore.getCurrentId() == this.props.post.user_id;
var type = "Post"
@@ -193,43 +132,6 @@ CommentPost = React.createClass({
type = "Comment"
}
- if (filenames) {
- var postFiles = [];
- var images = [];
- var re1 = new RegExp(' ', 'g');
- var re2 = new RegExp('\\(', 'g');
- var re3 = new RegExp('\\)', 'g');
- for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
-
- var fileInfo = utils.splitFileLocation(filenames[i]);
- var type = utils.getFileType(fileInfo.ext);
-
- // This is a temporary patch to fix issue with old files using absolute paths
- if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
- fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
- }
- fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
-
- if (type === "image") {
- var url = fileInfo.path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
- postFiles.push(
- <div className="post-image__column" key={fileInfo.path}>
- <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={fileInfo.path} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a>
- </div>
- );
- images.push(filenames[i]);
- } else {
- postFiles.push(
- <div className="post-image__column custom-file" key={fileInfo.path}>
- <a href={fileInfo.path+"."+fileInfo.ext} download={fileInfo.name+"."+fileInfo.ext}>
- <div className={"file-icon "+utils.getIconClassName(type)}/>
- </a>
- </div>
- );
- }
- }
- }
-
var message = utils.textToJsx(this.props.post.message);
var timestamp = UserStore.getCurrentUser().update_at;
@@ -256,19 +158,12 @@ CommentPost = React.createClass({
</ul>
<div className="post-body">
<p>{message}</p>
- { filenames.length > 0 ?
- <div className="post-image__columns">
- { postFiles }
- </div>
- : "" }
- { images.length > 0 ?
- <ViewImageModal
- channelId={this.props.post.channel_id}
- userId={this.props.post.user_id}
- modalId={postImageModalId}
- startId={this.state.startImgId}
- imgCount={this.props.post.img_count}
- filenames={images} />
+ { this.props.post.filenames && this.props.post.filenames.length > 0 ?
+ <FileAttachmentList
+ postId={this.props.post.id}
+ channelId={this.props.post.channel_id}
+ userId={this.props.post.user_id}
+ filenames={this.props.post.filenames} />
: "" }
</div>
</div>
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-30 22:47:59 +0000