From 1415560d52eee7bb4f5bdf8b6d433e591273847a Mon Sep 17 00:00:00 2001 From: nickago Date: Tue, 11 Aug 2015 14:58:43 -0700 Subject: get public link now displays in the same window pane on mobile, but in a new tab on desktop. Also added proptypes --- web/react/components/view_image.jsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index dc85b53e5..0bed4eaa4 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -6,6 +6,13 @@ 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() { var id = this.state.imgId + 1; @@ -118,7 +125,11 @@ module.exports = React.createClass({ data.filename = this.props.filenames[this.state.imgId]; Client.getPublicLink(data, function(serverData) { - window.open(serverData.public_link); + if (utils.isMobile()) { + window.location.href = serverData.public_link; + } else { + window.open(serverData.public_link); + } }, function() { } @@ -145,7 +156,7 @@ module.exports = React.createClass({ getInitialState: function() { var loaded = []; var progress = []; - for (var i = 0; i < this.props.filenames.length; i ++) { + for (var i = 0; i < this.props.filenames.length; i++) { loaded.push(false); progress.push(0); } @@ -213,7 +224,7 @@ module.exports = React.createClass({ content = (
- { percentage > 0 ? + {percentage > 0 ? {'Previewing ' + percentage + '%'} : ''}
-- cgit v1.2.3-1-g7c22 From 2dfc9206f352671753e21757e9ebec80b9bea08a Mon Sep 17 00:00:00 2001 From: nickago Date: Thu, 13 Aug 2015 08:28:35 -0700 Subject: Added cosmetic refactoring --- web/react/components/view_image.jsx | 40 +++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 17 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 0bed4eaa4..20a02b595 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -63,8 +63,8 @@ module.exports = React.createClass({ progress[id] = img.completedPercentage; self.setState({progress: progress}); }); - img.onload = function(imgid) { - return function() { + img.onload = function onload(imgid) { + return function onloadReturn() { var loaded = self.state.loaded; loaded[imgid] = true; self.setState({loaded: loaded}); @@ -90,21 +90,21 @@ module.exports = React.createClass({ }, componentDidMount: function() { var self = this; - $('#' + this.props.modalId).on('shown.bs.modal', function() { + $('#' + this.props.modalId).on('shown.bs.modal', function onModalShow() { self.setState({viewed: true}); self.loadImage(self.state.imgId); }); - $(this.refs.modal.getDOMNode()).click(function(e) { + $(this.refs.modal.getDOMNode()).click(function onModalClick(e) { if (e.target === this || e.target === self.refs.imageBody.getDOMNode()) { $('.image_modal').modal('hide'); } }); $(this.refs.imageWrap.getDOMNode()).hover( - function() { + function onModalHover() { $(self.refs.imageFooter.getDOMNode()).addClass('footer--show'); - }, function() { + }, function offModalHover() { $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show'); } ); @@ -124,14 +124,14 @@ module.exports = React.createClass({ data.user_id = this.props.userId; data.filename = this.props.filenames[this.state.imgId]; Client.getPublicLink(data, - function(serverData) { + function sucess(serverData) { if (utils.isMobile()) { window.location.href = serverData.public_link; } else { window.open(serverData.public_link); } }, - function() { + function error() { } ); }, @@ -209,7 +209,7 @@ module.exports = React.createClass({ if (!(filename in this.state.fileSizes)) { var self = this; - utils.getFileSize(utils.getFileUrl(filename), function(fileSize) { + utils.getFileSize(utils.getFileUrl(filename), function fileSizeOp(fileSize) { if (self.canSetState) { var fileSizes = self.state.fileSizes; fileSizes[filename] = fileSize; @@ -221,14 +221,20 @@ module.exports = React.createClass({ } else { // display a progress indicator when the preview for an image is still loading var percentage = Math.floor(this.state.progress[this.state.imgId]); - content = ( -
- - {percentage > 0 ? - {'Previewing ' + percentage + '%'} - : ''} -
- ); + if (percentage) { + content = ( +
+ + {'Previewing ' + percentage + '%'} +
+ ); + } else { + content = ( +
+ +
+ ); + } bgClass = 'black-bg'; } -- cgit v1.2.3-1-g7c22