From 8b23a9c74f8d37b54721b18e50b2ee637ee3090f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Wed, 14 Oct 2015 17:19:01 +0200
Subject: [PATCH] Introduce draganddrop feature detection and add it to
 FileDragAndDropDialog

---
 .../file_drag_and_drop_dialog.js              | 19 +++++++++++---
 js/utils/feature_detection_utils.js           | 26 +++++++++++++++++++
 2 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 js/utils/feature_detection_utils.js

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
index f74eb713..4cd92647 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
@@ -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}>
diff --git a/js/utils/feature_detection_utils.js b/js/utils/feature_detection_utils.js
new file mode 100644
index 00000000..d086c68c
--- /dev/null
+++ b/js/utils/feature_detection_utils.js
@@ -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);
\ No newline at end of file