ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 09:35:10 +01:00
Code Issues Releases Wiki Activity

made download functionality optional

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-30 13:53:02 +02:00
parent ea47f7a371
commit 8c3dfc4b73
8 changed files with 65 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/components/ascribe_uploader/file_drag_and_drop.js
View File

@ -24,7 +24,8 @@ let FileDragAndDrop = React.createClass({
handlePauseFile: React.PropTypes.func, handlePauseFile: React.PropTypes.func,
handleResumeFile: React.PropTypes.func, handleResumeFile: React.PropTypes.func,
multiple: React.PropTypes.bool, multiple: React.PropTypes.bool,
dropzoneInactive: React.PropTypes.bool dropzoneInactive: React.PropTypes.bool,
areAssetsDownloadable: React.PropTypes.bool
}, },
handleDragStart(event) { handleDragStart(event) {
@ -154,7 +155,8 @@ let FileDragAndDrop = React.createClass({
handleDeleteFile={this.handleDeleteFile} handleDeleteFile={this.handleDeleteFile}
handleCancelFile={this.handleCancelFile} handleCancelFile={this.handleCancelFile}
handlePauseFile={this.handlePauseFile} handlePauseFile={this.handlePauseFile}
handleResumeFile={this.handleResumeFile}/> handleResumeFile={this.handleResumeFile}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>
<input <input
multiple={this.props.multiple} multiple={this.props.multiple}
ref="fileinput" ref="fileinput"

9
js/components/ascribe_uploader/file_drag_and_drop_preview.js
View File

@ -16,7 +16,8 @@ let FileDragAndDropPreview = React.createClass({
handleDeleteFile: React.PropTypes.func, handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func, handleCancelFile: React.PropTypes.func,
handlePauseFile: React.PropTypes.func, handlePauseFile: React.PropTypes.func,
handleResumeFile: React.PropTypes.func handleResumeFile: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
}, },
toggleUploadProcess() { toggleUploadProcess() {
@ -51,13 +52,15 @@ let FileDragAndDropPreview = React.createClass({
onClick={this.handleDeleteFile} onClick={this.handleDeleteFile}
progress={this.props.file.progress} progress={this.props.file.progress}
url={this.props.file.url} url={this.props.file.url}
toggleUploadProcess={this.toggleUploadProcess}/>); toggleUploadProcess={this.toggleUploadProcess}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
} else { } else {
previewElement = (<FileDragAndDropPreviewOther previewElement = (<FileDragAndDropPreviewOther
onClick={this.handleDeleteFile} onClick={this.handleDeleteFile}
progress={this.props.file.progress} progress={this.props.file.progress}
type={this.props.file.type.split('/')[1]} type={this.props.file.type.split('/')[1]}
toggleUploadProcess={this.toggleUploadProcess}/>); toggleUploadProcess={this.toggleUploadProcess}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
} }
return ( return (

22
js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
View File

@ -10,7 +10,8 @@ let FileDragAndDropPreviewImage = React.createClass({
progress: React.PropTypes.number, progress: React.PropTypes.number,
url: React.PropTypes.string, url: React.PropTypes.string,
toggleUploadProcess: React.PropTypes.func, toggleUploadProcess: React.PropTypes.func,
downloadFile: React.PropTypes.func downloadFile: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
}, },
getInitialState() { getInitialState() {
@ -19,17 +20,6 @@ let FileDragAndDropPreviewImage = React.createClass({
}; };
}, },
/*onClick(e) {
e.preventDefault();
e.stopPropagation();
this.setState({
loading: true
});
this.props.onClick(e);
},*/
toggleUploadProcess(e) { toggleUploadProcess(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -58,9 +48,15 @@ let FileDragAndDropPreviewImage = React.createClass({
} else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) { } else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Resume uploading" onClick={this.toggleUploadProcess}/>; actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Resume uploading" onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress === 100) { } else if(this.props.progress === 100) {
// only if assets are actually downloadable, there should be a download icon if the process is already at
// 100%. If not, no actionSymbol should be displayed
if(this.props.areAssetsDownloadable) {
actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>; actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
}
} else { } else {
actionSymbol = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />; actionSymbol = <img height={35} className="action-file" src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
} }
return ( return (

6
js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
View File

@ -10,7 +10,8 @@ let FileDragAndDropPreviewIterator = React.createClass({
handleDeleteFile: React.PropTypes.func, handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func, handleCancelFile: React.PropTypes.func,
handlePauseFile: React.PropTypes.func, handlePauseFile: React.PropTypes.func,
handleResumeFile: React.PropTypes.func handleResumeFile: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
}, },
render() { render() {
@ -26,7 +27,8 @@ let FileDragAndDropPreviewIterator = React.createClass({
handleDeleteFile={this.props.handleDeleteFile} handleDeleteFile={this.props.handleDeleteFile}
handleCancelFile={this.props.handleCancelFile} handleCancelFile={this.props.handleCancelFile}
handlePauseFile={this.props.handlePauseFile} handlePauseFile={this.props.handlePauseFile}
handleResumeFile={this.props.handleResumeFile}/> handleResumeFile={this.props.handleResumeFile}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>
); );
} else { } else {
return null; return null;

39
js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
View File

@ -3,40 +3,65 @@
import React from 'react'; import React from 'react';
import ProgressBar from 'react-progressbar'; import ProgressBar from 'react-progressbar';
import AppConstants from '../../constants/application_constants';
let FileDragAndDropPreviewOther = React.createClass({ let FileDragAndDropPreviewOther = React.createClass({
propTypes: { propTypes: {
type: React.PropTypes.string, type: React.PropTypes.string,
progress: React.PropTypes.number, progress: React.PropTypes.number,
onClick: React.PropTypes.func areAssetsDownloadable: React.PropTypes.bool,
toggleUploadProcess: React.PropTypes.func,
downloadFile: React.PropTypes.func,
}, },
getInitialState() { getInitialState() {
return { return {
loading: false paused: true
}; };
}, },
onClick(e) { toggleUploadProcess(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.setState({ this.setState({
loading: true paused: !this.state.paused
}); });
this.props.onClick(e); this.props.toggleUploadProcess();
},
downloadFile() {
console.log('implement this');
}, },
render() { render() {
//let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
let actionSymbol;
if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title="Pause upload" onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Resume uploading" onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress === 100) {
// only if assets are actually downloadable, there should be a download icon if the process is already at
// 100%. If not, no actionSymbol should be displayed
if(this.props.areAssetsDownloadable) {
actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
}
} else {
actionSymbol = <img height={35} src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
}
return ( return (
<div <div
className="file-drag-and-drop-preview"> className="file-drag-and-drop-preview">
<ProgressBar completed={this.props.progress} color="black"/> <ProgressBar completed={this.props.progress} color="black"/>
<div className="file-drag-and-drop-preview-table-wrapper"> <div className="file-drag-and-drop-preview-table-wrapper">
<div className="file-drag-and-drop-preview-other"> <div className="file-drag-and-drop-preview-other">
<span className="glyphicon glyphicon-pause delete-file" aria-hidden="true" title="Delete or cancel upload"/> {actionSymbol}
<span>{'.' + this.props.type}</span> <span>{'.' + this.props.type}</span>
</div> </div>
</div> </div>

4
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -83,7 +83,8 @@ var ReactS3FineUploader = React.createClass({
enableAuto: React.PropTypes.bool enableAuto: React.PropTypes.bool
}), }),
setIsUploadReady: React.PropTypes.func, setIsUploadReady: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func isReadyForFormSubmission: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
}, },
getDefaultProps() { getDefaultProps() {
@ -463,6 +464,7 @@ var ReactS3FineUploader = React.createClass({
handlePauseFile={this.handlePauseFile} handlePauseFile={this.handlePauseFile}
handleResumeFile={this.handleResumeFile} handleResumeFile={this.handleResumeFile}
multiple={this.props.multiple} multiple={this.props.multiple}
areAssetsDownloadable={this.props.areAssetsDownloadable}
dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} /> dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} />
</div> </div>
); );

5
js/components/edition.js
View File

@ -253,7 +253,7 @@ let EditionSummary = React.createClass({
<Row> <Row>
<Col md={12}> <Col md={12}>
<AclButtonList <AclButtonList
className="pull-left" className="text-center"
availableAcls={this.props.edition.acl} availableAcls={this.props.edition.acl}
editions={[this.props.edition]} editions={[this.props.edition]}
handleSuccess={this.handleSuccess} /> handleSuccess={this.handleSuccess} />
@ -539,7 +539,8 @@ let FileUploader = React.createClass({
params: { params: {
'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null 'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
} }
}}/> }}
areAssetsDownloadable={true}/>
); );
} }
}); });

3
js/components/register_piece.js
View File

@ -212,7 +212,8 @@ let FileUploader = React.createClass({
sizeLimit: '25000000000' sizeLimit: '25000000000'
}} }}
setIsUploadReady={this.props.setIsUploadReady} setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}/> isReadyForFormSubmission={this.props.isReadyForFormSubmission}
areAssetsDownloadable={false}/>
); );
} }
}); });