From 0076aae8968c937017cabceb7d748f13c13681a5 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Fri, 19 Jul 2019 19:04:12 +0200
Subject: [PATCH] import drag and drop files

---
 static/js/addItemDialog.js |  9 +++++++
 static/js/importScreen.js  | 54 ++++++++++++++++++++++++++++++++++++++
 static/js/pandora.js       | 31 ++++++++++++++++++++++
 static/js/utils.js         | 25 ++++++++++++++++++
 4 files changed, 119 insertions(+)
 create mode 100644 static/js/importScreen.js

diff --git a/static/js/addItemDialog.js b/static/js/addItemDialog.js
index 465a8da7..71361fda 100644
--- a/static/js/addItemDialog.js
+++ b/static/js/addItemDialog.js
@@ -69,6 +69,15 @@ pandora.ui.addItemDialog = function(options) {
         title: Ox._('Add {0}', [pandora.site.itemName.singular]),
         width: 544
     });
+    if (options.files) {
+        that.options({content: $screen.start()});
+        $button.options({disabled: true});
+        Ox.serialMap(options.files, function(file, index, files, callback) {
+            getFileInfo(file, function(info) {
+                callback(Ox.extend(info, {file: file}));
+            });
+        }, onInfo);
+    }
 
     function createButton() {
         $button = Ox[selected == 'upload' ? 'FileButton' : 'Button']({
diff --git a/static/js/importScreen.js b/static/js/importScreen.js
new file mode 100644
index 00000000..8749647c
--- /dev/null
+++ b/static/js/importScreen.js
@@ -0,0 +1,54 @@
+'use strict';
+
+pandora.ui.importScreen = function() {
+
+    var that = Ox.Element()
+        .attr({id: 'importScreen'})
+        .css({
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            zIndex: 1000
+        })
+        .on({
+            click: function() {
+                that.remove();
+            },
+            dragleave: function() {
+                that.remove();
+            }
+        });
+
+    Ox.Element()
+        .css({
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: pandora.hasCapability('canAddItems') ? 192 : 256,
+            height: 16,
+            padding: '8px 0',
+            borderRadius: 8,
+            margin: 'auto',
+            background: 'rgba(255, 255, 255, 0.9)',
+            fontSize: 13,
+            color: 'rgb(0, 0, 0)',
+            textAlign: 'center'
+        })
+        .text(
+            Ox._(pandora.hasCapability('canAddItems') ? (
+                'Import {0}'
+            ) : (
+                'You are not allowed to import {0}'
+            ),
+            [pandora.user.ui.section == 'documents' ? 'Documents' : pandora.site.itemName.plural])
+        )
+        .appendTo(that);
+
+    return that;
+
+};
diff --git a/static/js/pandora.js b/static/js/pandora.js
index 0962c235..0c0f76ba 100644
--- a/static/js/pandora.js
+++ b/static/js/pandora.js
@@ -281,6 +281,37 @@ appPanel
             resize: pandora.resizeWindow,
             unload: pandora.unloadWindow
         })
+        Ox.$document.on({
+            dragenter: function(event) {
+                if (Ox.contains(event.originalEvent.dataTransfer.types, 'Files')) {
+                    event.originalEvent.preventDefault();
+                    event.originalEvent.stopPropagation();
+                    if (!$('#importScreen').length) {
+                        pandora.ui.importScreen().appendTo(Ox.$body);
+                    }
+                } else {
+                    console.log(event.originalEvent.dataTransfer);
+                }
+            },
+            dragover: function(event) {
+                event.originalEvent.preventDefault();
+                event.originalEvent.stopPropagation();
+            },
+            dragstart: function(event) {
+                event.originalEvent.preventDefault();
+                event.originalEvent.stopPropagation();
+            },
+            drop: function(event) {
+                $('#importScreen').remove();
+                if (pandora.hasCapability('canAddItems')) {
+                    if (event.originalEvent.dataTransfer.files.length) {
+                        event.originalEvent.preventDefault();
+                        event.originalEvent.stopPropagation();
+                        pandora.uploadDroppedFiles(event.originalEvent.dataTransfer.files)
+                    }
+                }
+            }
+        });
         Ox.extend(pandora, {
             $ui: {},
             site: data.site,
diff --git a/static/js/utils.js b/static/js/utils.js
index 5825e724..8bb3a9dc 100644
--- a/static/js/utils.js
+++ b/static/js/utils.js
@@ -404,6 +404,31 @@ pandora.createLinks = function($element) {
     });
 };
 
+pandora.uploadDroppedFiles = function(files) {
+    var documentExtensions = ['pdf', /* 'epub', 'txt', */ 'png', 'gif', 'jpg'];
+    files = Ox.map(files, function(file) { return file});
+
+    if (files.every(function(file) {
+        var extension = file.name.split('.').pop().toLowerCase()
+        return Ox.contains(documentExtensions, extension)
+    })) {
+        pandora.ui.uploadDocumentDialog({
+            files: files
+        }, function(files) {
+            if (files) {
+                Ox.Request.clearCache('findDocuments');
+                if (pandora.user.ui.document || pandora.user.ui.section != 'documents') {
+                    pandora.UI.set({section: 'documents', document: ''});
+                } else {
+                    pandora.$ui.list && pandora.$ui.list.reloadList();
+                }
+            }
+        }).open();
+    } else {
+        pandora.ui.addItemDialog({files: files}).open()
+    }
+};
+
 (function() {
 
     pandora.doHistory = function(action, items, targets, index, callback) {