From d94e67d5971410e42a71f063dfead16712e32796 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Tue, 1 Sep 2015 12:21:43 -0400 Subject: Reformatted view_image.jsx to meet style guide requirements. --- web/react/components/view_image.jsx | 224 +++++++++++++++++++++++------------- 1 file changed, 146 insertions(+), 78 deletions(-) (limited to 'web/react') diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 24efce0f1..5851c5af6 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -1,36 +1,47 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var Client = require('../utils/client.jsx'); -var utils = require('../utils/utils.jsx'); +var Client = require('../Utils/client.jsx'); +var Utils = require('../Utils/Utils.jsx'); -module.exports = React.createClass({ - displayName: 'ViewImageModal', - propTypes: { - filenames: React.PropTypes.array, - modalId: React.PropTypes.string, - channelId: React.PropTypes.string, - userId: React.PropTypes.string, - startId: React.PropTypes.number - }, - canSetState: false, - handleNext: function() { +export default class ViewImageModal extends React.Component { + constructor(props) { + super(props); + + this.canSetState = false; + + this.loadImage = this.loadImage.bind(this); + this.handleNext = this.handleNext.bind(this); + this.handlePrev = this.handlePrev.bind(this); + this.handleKeyPress = this.handleKeyPress.bind(this); + this.getPublicLink = this.getPublicLink.bind(this); + this.getPreviewImagePath = this.getPreviewImagePath.bind(this); + + var loaded = []; + var progress = []; + for (var i = 0; i < this.props.filenames.length; i++) { + loaded.push(false); + progress.push(0); + } + this.state = {imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {}, fileSizes: {}}; + } + handleNext() { var id = this.state.imgId + 1; if (id > this.props.filenames.length - 1) { id = 0; } this.setState({imgId: id}); this.loadImage(id); - }, - handlePrev: function() { + } + handlePrev() { var id = this.state.imgId - 1; if (id < 0) { id = this.props.filenames.length - 1; } this.setState({imgId: id}); this.loadImage(id); - }, - handleKeyPress: function handleKeyPress(e) { + } + handleKeyPress(e) { if (!e) { return; } else if (e.keyCode === 39) { @@ -38,11 +49,11 @@ module.exports = React.createClass({ } else if (e.keyCode === 37) { this.handlePrev(); } - }, - componentWillReceiveProps: function(nextProps) { + } + componentWillReceiveProps(nextProps) { this.setState({imgId: nextProps.startId}); - }, - loadImage: function(id) { + } + loadImage(id) { var imgHeight = $(window).height() - 100; if (this.state.loaded[id] || this.state.images[id]) { $('.modal .modal-image .image-wrapper img').css('max-height', imgHeight); @@ -51,26 +62,26 @@ module.exports = React.createClass({ var filename = this.props.filenames[id]; - var fileInfo = utils.splitFileLocation(filename); - var fileType = utils.getFileType(fileInfo.ext); + var fileInfo = Utils.splitFileLocation(filename); + var fileType = Utils.getFileType(fileInfo.ext); if (fileType === 'image') { var self = this; var img = new Image(); img.load(this.getPreviewImagePath(filename), - function() { + function load() { var progress = self.state.progress; progress[id] = img.completedPercentage; self.setState({progress: progress}); }); - img.onload = function onload(imgid) { + img.onload = (function onload(imgid) { return function onloadReturn() { var loaded = self.state.loaded; loaded[imgid] = true; self.setState({loaded: loaded}); $(self.refs.image.getDOMNode()).css('max-height', imgHeight); }; - }(id); + }(id)); var images = this.state.images; images[id] = img; this.setState({images: images}); @@ -80,15 +91,15 @@ module.exports = React.createClass({ loaded[id] = true; this.setState({loaded: loaded}); } - }, - componentDidUpdate: function() { + } + componentDidUpdate() { if (this.state.loaded[this.state.imgId]) { if (this.refs.imageWrap) { $(this.refs.imageWrap.getDOMNode()).removeClass('default'); } } - }, - componentDidMount: function() { + } + componentDidMount() { var self = this; $('#' + this.props.modalId).on('shown.bs.modal', function onModalShow() { self.setState({viewed: true}); @@ -133,90 +144,93 @@ module.exports = React.createClass({ // keep track of whether or not this component is mounted so we can safely set the state asynchronously this.canSetState = true; - }, - componentWillUnmount: function() { + } + componentWillUnmount() { this.canSetState = false; $(window).off('keyup', this.handleKeyPress); - }, - getPublicLink: function() { + } + getPublicLink() { var data = {}; data.channel_id = this.props.channelId; data.user_id = this.props.userId; data.filename = this.props.filenames[this.state.imgId]; Client.getPublicLink(data, function sucess(serverData) { - if (utils.isMobile()) { + if (Utils.isMobile()) { window.location.href = serverData.public_link; } else { window.open(serverData.public_link); } }, - function error() { - } + function error() {} ); - }, - getPreviewImagePath: function(filename) { + } + getPreviewImagePath(filename) { // Returns the path to a preview image that can be used to represent a file. - var fileInfo = utils.splitFileLocation(filename); - var fileType = utils.getFileType(fileInfo.ext); + var fileInfo = Utils.splitFileLocation(filename); + var fileType = Utils.getFileType(fileInfo.ext); if (fileType === 'image') { // 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; + fileInfo.path = Utils.getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path; return fileInfo.path + '_preview.jpg'; } // only images have proper previews, so just use a placeholder icon for non-images - return utils.getPreviewImagePathForFileType(fileType); - }, - getInitialState: function() { - var loaded = []; - var progress = []; - for (var i = 0; i < this.props.filenames.length; i++) { - loaded.push(false); - progress.push(0); - } - return {imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {}, fileSizes: {}}; - }, - render: function() { + return Utils.getPreviewImagePathForFileType(fileType); + } + render() { if (this.props.filenames.length < 1 || this.props.filenames.length - 1 < this.state.imgId) { return
; } var filename = this.props.filenames[this.state.imgId]; - var fileUrl = utils.getFileUrl(filename); + var fileUrl = Utils.getFileUrl(filename); - var name = decodeURIComponent(utils.getFileName(filename)); + var name = decodeURIComponent(Utils.getFileName(filename)); var content; var bgClass = ''; if (this.state.loaded[this.state.imgId]) { - var fileInfo = utils.splitFileLocation(filename); - var fileType = utils.getFileType(fileInfo.ext); + var fileInfo = Utils.splitFileLocation(filename); + var fileType = Utils.getFileType(fileInfo.ext); if (fileType === 'image') { // image files just show a preview of the file content = ( - - + + ); } else { // non-image files include a section providing details about the file var infoString = 'File type ' + fileInfo.ext.toUpperCase(); if (this.state.fileSizes[filename] && this.state.fileSizes[filename] >= 0) { - infoString += ', Size ' + utils.fileSizeToString(this.state.fileSizes[filename]); + infoString += ', Size ' + Utils.fileSizeToString(this.state.fileSizes[filename]); } content = (
- + - +
{name}
@@ -232,15 +246,14 @@ module.exports = React.createClass({ Client.getFileInfo( filename, - function(data) { + function success(data) { if (self.canSetState) { var fileSizes = self.state.fileSizes; - fileSizes[filename] = parseInt(data["size"], 10); + fileSizes[filename] = parseInt(data.size, 10); self.setState(fileSizes); } }, - function(err) { - } + function fail() {} ); } } @@ -250,14 +263,22 @@ module.exports = React.createClass({ if (percentage) { content = (
- - {'Previewing ' + percentage + '%'} + + + {'Previewing ' + percentage + '%'} +
); } else { content = (
- +
); } @@ -268,7 +289,14 @@ module.exports = React.createClass({ if (config.AllowPublicLink) { publicLink = (
- Get Public Link + + Get Public Link + |
); @@ -299,18 +327,43 @@ module.exports = React.createClass({ } return ( -