From 29e405aad6844063ec0ad47c7c986d6bc0e57717 Mon Sep 17 00:00:00 2001 From: nickago Date: Thu, 6 Aug 2015 15:50:37 -0700 Subject: Left and right arrows now scroll through files --- web/react/components/view_image.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'web/react/components') diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 4b2f8f650..dd3d98a8f 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -93,11 +93,22 @@ module.exports = React.createClass({ } ); + $(this.getDOMNode()).on('keyup', function(e) { + if(!e) { + return; + } else if (e.keyCode === 39) { + self.handleNext(); + } else if (e.keyCode === 37) { + self.handlePrev(); + } + }); + // keep track of whether or not this component is mounted so we can safely set the state asynchronously this.canSetState = true; }, componentWillUnmount: function() { this.canSetState = false; + $(this.getDOMNode()).off('keyup'); }, getPublicLink: function(e) { data = {}; -- cgit v1.2.3-1-g7c22 From b398819198b2ebd86787ae054b6d5229beeead71 Mon Sep 17 00:00:00 2001 From: nickago Date: Thu, 6 Aug 2015 16:28:29 -0700 Subject: Added cosmetic refactoring --- web/react/components/view_image.jsx | 213 +++++++++++++++++++----------------- 1 file changed, 113 insertions(+), 100 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index dd3d98a8f..6be6f62a0 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -5,96 +5,96 @@ var Client = require('../utils/client.jsx'); var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ - displayName: "ViewImageModal", + displayName: 'ViewImageModal', canSetState: false, handleNext: function() { var id = this.state.imgId + 1; - if (id > this.props.filenames.length-1) { + if (id > this.props.filenames.length - 1) { id = 0; } - this.setState({ imgId: id }); + this.setState({imgId: id}); this.loadImage(id); }, handlePrev: function() { var id = this.state.imgId - 1; if (id < 0) { - id = this.props.filenames.length-1; + id = this.props.filenames.length - 1; } - this.setState({ imgId: id }); + this.setState({imgId: id}); this.loadImage(id); }, componentWillReceiveProps: function(nextProps) { - this.setState({ imgId: nextProps.startId }); + this.setState({imgId: nextProps.startId}); }, loadImage: function(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); + var imgHeight = $(window).height() - 100; + if (this.state.loaded[id] || this.state.images[id]) { + $('.modal .modal-image .image-wrapper img').css('max-height', imgHeight); return; - }; + } var filename = this.props.filenames[id]; var fileInfo = utils.splitFileLocation(filename); var fileType = utils.getFileType(fileInfo.ext); - if (fileType === "image") { + if (fileType === 'image') { var self = this; var img = new Image(); img.load(this.getPreviewImagePath(filename), - function(){ + function() { var progress = self.state.progress; progress[id] = img.completedPercentage; - self.setState({ progress: progress }); - }); + self.setState({progress: progress}); + }); img.onload = function(imgid) { return function() { var loaded = self.state.loaded; loaded[imgid] = true; - self.setState({ loaded: loaded }); - $(self.refs.image.getDOMNode()).css("max-height",imgHeight); + self.setState({loaded: loaded}); + $(self.refs.image.getDOMNode()).css('max-height', imgHeight); }; }(id); var images = this.state.images; images[id] = img; - this.setState({ images: images }); + this.setState({images: images}); } else { // there's nothing to load for non-image files var loaded = this.state.loaded; loaded[id] = true; - this.setState({ loaded: loaded }); + this.setState({loaded: loaded}); } }, componentDidUpdate: function() { if (this.state.loaded[this.state.imgId]) { if (this.refs.imageWrap) { - $(this.refs.imageWrap.getDOMNode()).removeClass("default"); + $(this.refs.imageWrap.getDOMNode()).removeClass('default'); } } }, componentDidMount: function() { var self = this; - $("#"+this.props.modalId).on('shown.bs.modal', function() { - self.setState({ viewed: true }); + $('#' + this.props.modalId).on('shown.bs.modal', function() { + self.setState({viewed: true}); self.loadImage(self.state.imgId); - }) + }); - $(this.refs.modal.getDOMNode()).click(function(e){ - if (e.target == this || e.target == self.refs.imageBody.getDOMNode()) { + $(this.refs.modal.getDOMNode()).click(function(e) { + if (e.target === this || e.target === self.refs.imageBody.getDOMNode()) { $('.image_modal').modal('hide'); } }); $(this.refs.imageWrap.getDOMNode()).hover( function() { - $(self.refs.imageFooter.getDOMNode()).addClass("footer--show"); + $(self.refs.imageFooter.getDOMNode()).addClass('footer--show'); }, function() { - $(self.refs.imageFooter.getDOMNode()).removeClass("footer--show"); + $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show'); } ); $(this.getDOMNode()).on('keyup', function(e) { - if(!e) { + if (!e) { return; } else if (e.keyCode === 39) { self.handleNext(); @@ -110,19 +110,37 @@ module.exports = React.createClass({ this.canSetState = false; $(this.getDOMNode()).off('keyup'); }, - getPublicLink: function(e) { - data = {}; - data["channel_id"] = this.props.channelId; - data["user_id"] = this.props.userId; - data["filename"] = this.props.filenames[this.state.imgId]; + getPublicLink: function() { + 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(data) { - window.open(data["public_link"]); - }.bind(this), - function(err) { - }.bind(this) + function(serverData) { + window.open(serverData.public_link); + }, + function() { + } ); }, + getPreviewImagePath: function(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); + + 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; + + 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 = []; @@ -130,10 +148,10 @@ module.exports = React.createClass({ loaded.push(false); progress.push(0); } - return { imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {}, fileSizes: {} }; + return {imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {}, fileSizes: {}}; }, render: function() { - if (this.props.filenames.length < 1 || this.props.filenames.length-1 < this.state.imgId) { + if (this.props.filenames.length < 1 || this.props.filenames.length - 1 < this.state.imgId) { return
; } @@ -143,34 +161,34 @@ module.exports = React.createClass({ var name = decodeURIComponent(utils.getFileName(filename)); var content; - var bgClass = ""; + var bgClass = ''; if (this.state.loaded[this.state.imgId]) { var fileInfo = utils.splitFileLocation(filename); var fileType = utils.getFileType(fileInfo.ext); - if (fileType === "image") { + 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(); + 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}
-
{infoString}
+
+
{name}
+
{infoString}
); @@ -193,68 +211,63 @@ module.exports = React.createClass({ var percentage = Math.floor(this.state.progress[this.state.imgId]); content = (
- + { percentage > 0 ? - {"Previewing " + percentage + "%"} - : ""} + {'Previewing ' + percentage + '%'} + : ''} +
+ ); + bgClass = 'black-bg'; + } + + var publicLink = ''; + if (config.AllowPublicLink) { + publicLink = ( + ); - bgClass = "black-bg"; + } + + var leftArrow = ''; + var rightArrow = ''; + if (this.props.filenames.length > 1) { + leftArrow = ( + + + + ); + + rightArrow = ( + + + + ); } return ( -