ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-30 13:41:57 +02: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,
handleResumeFile: React.PropTypes.func,
multiple: React.PropTypes.bool,
dropzoneInactive: React.PropTypes.bool
dropzoneInactive: React.PropTypes.bool,
areAssetsDownloadable: React.PropTypes.bool
},
handleDragStart(event) {
@ -154,7 +155,8 @@ let FileDragAndDrop = React.createClass({
handleDeleteFile={this.handleDeleteFile}
handleCancelFile={this.handleCancelFile}
handlePauseFile={this.handlePauseFile}
handleResumeFile={this.handleResumeFile}/>
handleResumeFile={this.handleResumeFile}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>
<input
multiple={this.props.multiple}
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,
handleCancelFile: React.PropTypes.func,
handlePauseFile: React.PropTypes.func,
handleResumeFile: React.PropTypes.func
handleResumeFile: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
},
toggleUploadProcess() {
@ -51,13 +52,15 @@ let FileDragAndDropPreview = React.createClass({
onClick={this.handleDeleteFile}
progress={this.props.file.progress}
url={this.props.file.url}
toggleUploadProcess={this.toggleUploadProcess}/>);
toggleUploadProcess={this.toggleUploadProcess}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
} else {
previewElement = (<FileDragAndDropPreviewOther
onClick={this.handleDeleteFile}
progress={this.props.file.progress}
type={this.props.file.type.split('/')[1]}
toggleUploadProcess={this.toggleUploadProcess}/>);
toggleUploadProcess={this.toggleUploadProcess}
areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
}
return (

24
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,
url: React.PropTypes.string,
toggleUploadProcess: React.PropTypes.func,
downloadFile: React.PropTypes.func
downloadFile: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
},
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) {
e.preventDefault();
e.stopPropagation();
@ -58,9 +48,15 @@ let FileDragAndDropPreviewImage = React.createClass({
} 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) {
actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
// 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 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 (

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

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

@ -3,40 +3,65 @@
import React from 'react';
import ProgressBar from 'react-progressbar';
import AppConstants from '../../constants/application_constants';
let FileDragAndDropPreviewOther = React.createClass({
propTypes: {
type: React.PropTypes.string,
progress: React.PropTypes.number,
onClick: React.PropTypes.func
areAssetsDownloadable: React.PropTypes.bool,
toggleUploadProcess: React.PropTypes.func,
downloadFile: React.PropTypes.func,
},
getInitialState() {
return {
loading: false
paused: true
};
},
onClick(e) {
toggleUploadProcess(e) {
e.preventDefault();
e.stopPropagation();
this.setState({
loading: true
paused: !this.state.paused
});
this.props.onClick(e);
this.props.toggleUploadProcess();
},
downloadFile() {
console.log('implement this');
},
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 (
<div
className="file-drag-and-drop-preview">
<ProgressBar completed={this.props.progress} color="black"/>
<div className="file-drag-and-drop-preview-table-wrapper">
<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>
</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
}),
setIsUploadReady: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func
isReadyForFormSubmission: React.PropTypes.func,
areAssetsDownloadable: React.PropTypes.bool
},
getDefaultProps() {
@ -463,6 +464,7 @@ var ReactS3FineUploader = React.createClass({
handlePauseFile={this.handlePauseFile}
handleResumeFile={this.handleResumeFile}
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} />
</div>
);

5
js/components/edition.js
View File

@ -253,7 +253,7 @@ let EditionSummary = React.createClass({
<Row>
<Col md={12}>
<AclButtonList
className="pull-left"
className="text-center"
availableAcls={this.props.edition.acl}
editions={[this.props.edition]}
handleSuccess={this.handleSuccess} />
@ -539,7 +539,8 @@ let FileUploader = React.createClass({
params: {
'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'
}}
setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}/>
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
areAssetsDownloadable={false}/>
);
}
});