Switched to using the jquery-dragster library to implement more consistent drag and drop support, rather than using the inconsistent html5 implementation

6 files changed, 172 insertions, 26 deletions

diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx
index e082abcd2..f382b848a 100644
--- a/web/react/components/file_upload.jsx
+++ b/web/react/components/file_upload.jsx
@@ -113,34 +113,30 @@ module.exports = React.createClass({
         var self = this;
 
         if (this.props.postType === 'post') {
-            $('body').on('dragover dragleave', '.app__content', function(e) {
-                e.preventDefault();
-            });
-            $('body').on('dragenter', '.app__content', function(e) {
-                e.preventDefault();
-                console.log('HERE');
-                $('.app__content').addClass('center-file-overlay');
-                $('.post-right__container').removeClass('right-file-overlay');
-            });
-            $('body').on('drop', '.app__content', function(e) {
-                e.preventDefault();
-                $('.app__content').removeClass('center-file-overlay');
-                self.handleDrop(e);
+            $('.app__content').dragster({
+                enter: function(dragsterEvent, e) {
+                    $('.app__content').addClass('center-file-overlay');
+                },
+                leave: function(dragsterEvent, e) {
+                    $('.app__content').removeClass('center-file-overlay');
+                },
+                drop: function(dragsterEvent, e) {
+                    $('.app__content').removeClass('center-file-overlay');
+                    self.handleDrop(e);
+                }
             });
         } else if (this.props.postType === 'comment') {
-            $('body').on('dragover dragleave', '.post-right__container', function(e) {
-                e.preventDefault();
-            });
-            $('body').on('dragenter', '.post-right__container', function(e) {
-                e.preventDefault();
-                console.log('HERE RIGHT');
-                $('.post-right__container').addClass('right-file-overlay');
-                $('.app__content').removeClass('center-file-overlay');
-            });
-            $('body').on('drop', '.post-right__container', function(e) {
-                e.preventDefault();
-                $('.post-right__container').removeClass('right-file-overlay');
-                self.handleDrop(e);
+            $('.post-right__container').dragster({
+                enter: function(dragsterEvent, e) {
+                    $('.post-right__container').addClass('right-file-overlay');
+                },
+                leave: function(dragsterEvent, e) {
+                    $('.post-right__container').removeClass('right-file-overlay');
+                },
+                drop: function(dragsterEvent, e) {
+                    $('.post-right__container').removeClass('right-file-overlay');
+                    self.handleDrop(e);
+                }
             });
         }
 
diff --git a/web/static/js/jquery-dragster/LICENSE b/web/static/js/jquery-dragster/LICENSE
new file mode 100644
index 000000000..b8b51dc0b
--- /dev/null
+++ b/web/static/js/jquery-dragster/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Jan Martin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/web/static/js/jquery-dragster/README.md b/web/static/js/jquery-dragster/README.md
new file mode 100644
index 000000000..1c28adaf0
--- /dev/null
+++ b/web/static/js/jquery-dragster/README.md
@@ -0,0 +1,17 @@
+Include [jquery.dragster.js](https://rawgithub.com/catmanjan/jquery-dragster/master/jquery.dragster.js) in page.
+
+Works in IE.
+
+```javascript
+$('.element').dragster({
+	enter: function (dragsterEvent, event) {
+		$(this).addClass('hover');
+	},
+	leave: function (dragsterEvent, event) {
+		$(this).removeClass('hover');
+	},
+	drop: function (dragsterEvent, event) {
+		$(this).removeClass('hover');
+	}
+});
+```
\ No newline at end of file
diff --git a/web/static/js/jquery-dragster/bower.json b/web/static/js/jquery-dragster/bower.json
new file mode 100644
index 000000000..a3cf7ed16
--- /dev/null
+++ b/web/static/js/jquery-dragster/bower.json
@@ -0,0 +1,25 @@
+{
+  "name": "jquery-dragster",
+  "version": "1.0.3",
+  "homepage": "https://github.com/catmanjan/jquery-dragster",
+  "authors": [
+    "catmanjan"
+  ],
+  "description": "Unified drag and drop listener",
+  "main": "jquery.dragster.js",
+  "keywords": [
+    "jquery",
+    "dragster",
+    "dragenter",
+    "dragleave",
+    "drop"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
diff --git a/web/static/js/jquery-dragster/jquery.dragster.js b/web/static/js/jquery-dragster/jquery.dragster.js
new file mode 100644
index 000000000..db73fe3f0
--- /dev/null
+++ b/web/static/js/jquery-dragster/jquery.dragster.js
@@ -0,0 +1,85 @@
+// 1.0.3
+/*
+The MIT License (MIT)
+
+Copyright (c) 2015 Jan Martin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+(function ($) {
+
+    $.fn.dragster = function (options) {
+        var settings = $.extend({
+            enter: $.noop,
+            leave: $.noop,
+            over: $.noop,
+            drop: $.noop
+        }, options);
+
+        return this.each(function () {
+            var first = false,
+                second = false,
+                $this = $(this);
+
+            $this.on({
+                dragenter: function (event) {
+                    if (first) {
+                        second = true;
+                        return;
+                    } else {
+                        first = true;
+                        $this.trigger('dragster:enter', event);
+                    }
+                    event.preventDefault();
+                },
+                dragleave: function (event) {
+                    if (second) {
+                        second = false;
+                    } else if (first) {
+                        first = false;
+                    }
+                    if (!first && !second) {
+                        $this.trigger('dragster:leave', event);
+                    }
+                    event.preventDefault();
+                },
+                dragover: function (event) {
+                    $this.trigger('dragster:over', event);
+                    event.preventDefault();
+                },
+                drop: function (event) {
+                    if (second) {
+                        second = false;
+                    } else if (first) {
+                        first = false;
+                    }
+                    if (!first && !second) {
+                        $this.trigger('dragster:drop', event);
+                    }
+                    event.preventDefault();
+                },
+                'dragster:enter': settings.enter,
+                'dragster:leave': settings.leave,
+                'dragster:over': settings.over,
+                'dragster:drop': settings.drop
+            });
+        });
+    };
+
+}(jQuery));
diff --git a/web/templates/head.html b/web/templates/head.html
index 7a7d4fe8e..dd5e9f46e 100644
--- a/web/templates/head.html
+++ b/web/templates/head.html
@@ -32,6 +32,8 @@
 
     <script src="/static/js/perfect-scrollbar-0.6.3.jquery.js"></script>
 
+    <script src="/static/js/jquery-dragster/jquery.dragster.js"></script>
+
     <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script>
 
     <script type="text/javascript" src="https://cloudfront.loggly.com/js/loggly.tracker.js" async></script>