ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-29 00:58:03 +02:00
Code Issues Releases Wiki Activity

Fix simulate click for Opera

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-10-19 14:22:20 +02:00
parent 984761a386
commit 019ff6c7ed
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
View File

@ -12,6 +12,7 @@ import { getLangText } from '../../../utils/lang_utils';
// Taken from: https://github.com/fedosejev/react-file-drag-and-drop // Taken from: https://github.com/fedosejev/react-file-drag-and-drop
let FileDragAndDrop = React.createClass({ let FileDragAndDrop = React.createClass({
propTypes: { propTypes: {
className: React.PropTypes.string,
onDrop: React.PropTypes.func.isRequired, onDrop: React.PropTypes.func.isRequired,
onDragOver: React.PropTypes.func, onDragOver: React.PropTypes.func,
onInactive: React.PropTypes.func, onInactive: React.PropTypes.func,
@ -107,6 +108,7 @@ let FileDragAndDrop = React.createClass({
}, },
handleOnClick() { handleOnClick() {
let evt;
// when multiple is set to false and the user already uploaded a piece, // when multiple is set to false and the user already uploaded a piece,
// do not propagate event // do not propagate event
if(this.props.dropzoneInactive) { if(this.props.dropzoneInactive) {
@ -118,14 +120,17 @@ let FileDragAndDrop = React.createClass({
return; return;
} }
// Firefox only recognizes the simulated mouse click if bubbles is set to true, try {
// but since Google Chrome propagates the event much further than needed, we evt = new MouseEvent('click', {
// need to stop propagation as soon as the event is created view: window,
let evt = new MouseEvent('click', { bubbles: true,
view: window, cancelable: true
bubbles: true, });
cancelable: true } catch(e) {
}); // For browsers that do not support the new MouseEvent syntax
evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
}
this.refs.fileinput.getDOMNode().dispatchEvent(evt); this.refs.fileinput.getDOMNode().dispatchEvent(evt);
}, },
@ -157,10 +162,10 @@ let FileDragAndDrop = React.createClass({
<div className="file-drag-and-drop-hashing-dialog"> <div className="file-drag-and-drop-hashing-dialog">
<p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p> <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
<p> <p>
<a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a> <a onClick={handleCancelHashing}> {getLangText('Cancel hashing')}</a>
</p> </p>
<ProgressBar <ProgressBar
now={Math.ceil(this.props.hashingProgress)} now={Math.ceil(hashingProgress)}
label="%(percent)s%" label="%(percent)s%"
className="ascribe-progress-bar"/> className="ascribe-progress-bar"/>
</div> </div>
@ -187,12 +192,23 @@ let FileDragAndDrop = React.createClass({
handleResumeFile={this.handleResumeFile} handleResumeFile={this.handleResumeFile}
areAssetsDownloadable={areAssetsDownloadable} areAssetsDownloadable={areAssetsDownloadable}
areAssetsEditable={areAssetsEditable}/> areAssetsEditable={areAssetsEditable}/>
{/*
Opera doesn't trigger simulated click events
if the targeted input has `display:none` set.
Which means we need to set its visibility to hidden
instead of using `display:none`.
See:
- http://stackoverflow.com/questions/12880604/jquery-triggerclick-not-working-on-opera-if-the-element-is-not-displayed
*/}
<input <input
multiple={multiple} multiple={multiple}
ref="fileinput" ref="fileinput"
type="file" type="file"
style={{ style={{
display: 'none', visibility: 'hidden',
position: 'absolute',
top: 0,
height: 0, height: 0,
width: 0 width: 0
}} }}