ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-26 11:16:28 +02:00
Code Issues Releases Wiki Activity

Introduce draganddrop feature detection and add it to FileDragAndDropDialog

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-10-14 17:19:01 +02:00
parent 27010aa2b0
commit 8b23a9c74f
2 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
View File

@ -4,6 +4,8 @@ import React from 'react';
import Router from 'react-router';
import { getLangText } from '../../../utils/lang_utils';
import { dragAndDropAvailable } from '../../../utils/feature_detection_utils';
let Link = Router.Link;
@ -24,6 +26,17 @@ let FileDragAndDropDialog = React.createClass({
mixins: [Router.State],
getDragDialog(fileClass) {
if(dragAndDropAvailable) {
return [
<p>{getLangText('Drag %s here', fileClass)}</p>,
<p>{getLangText('or')}</p>
];
} else {
return null;
}
},
render() {
const queryParams = this.getQuery();
@ -64,8 +77,7 @@ let FileDragAndDropDialog = React.createClass({
if(this.props.multipleFiles) {
return (
<span className="file-drag-and-drop-dialog">
<p>{getLangText('Drag %s here', this.props.fileClassToUpload.plural)}</p>
<p>{getLangText('or')}</p>
{this.getDragDialog(this.props.fileClassToUpload.plural)}
<span
className="btn btn-default"
onClick={this.props.onClick}>
@ -78,8 +90,7 @@ let FileDragAndDropDialog = React.createClass({
return (
<span className="file-drag-and-drop-dialog">
<p>{getLangText('Drag a %s here', this.props.fileClassToUpload.singular)}</p>
<p>{getLangText('or')}</p>
{this.getDragDialog(this.props.fileClassToUpload.singular)}
<span
className="btn btn-default"
onClick={this.props.onClick}>

26
js/utils/feature_detection_utils.js Normal file
View File

@ -0,0 +1,26 @@
'use strict';
/**
* PLEASE
*
* postfix your function with '-Available'.
*
* Like this:
*
* featureNameAvailable
*
*/
/**
* Even though it is not recommended to check (and maintain) the used browser,
* we're checking the browser's ability to drag and drop with this statement as
* there is no other way of detecting it another way.
*
* See this discussion for clarity:
* - https://github.com/Modernizr/Modernizr/issues/57#issuecomment-35831605
*
* @type {bool} Is drag and drop available on this browser
*/
export const dragAndDropAvailable = 'draggable' in document.createElement('div') &&
!/Mobile|Android|Slick\/|Kindle|BlackBerry|Opera Mini|Opera Mobi/i.test(navigator.userAgent);