Merge PR #1313 into 11.0

Signed-off-by pedrobaeza

web_drop_target/README.rst

@@ -44,6 +44,9 @@ To use this module, you need to:
 #. drag a file from your local computer onto an Odoo form view
 #. it should become an attachment of the currently opened record
 
+.. image:: https://raw.githubusercontent.com/web_drop_target/static/description/screenshot.png
+    :alt: Screenshot
+
 Development
 ===========
 
@@ -82,7 +85,9 @@ Contributors
 ~~~~~~~~~~~~
 
 * Holger Brunn <hbrunn@therp.nl>
+* Pablo Fuentes <pablo@studio73.es>
 * Akim Juillerat <akim.juillerat@camptocamp.com>
+* Enric Tobella <etobella@creublanca.es>
 
 Maintainers
 ~~~~~~~~~~~

web_drop_target/__manifest__.py

@@ -2,7 +2,7 @@
 # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html).
 {
     "name": "Drop target support",
-    "version": "11.0.1.0.0",
+    "version": "11.0.2.0.0",
     "author": "Therp BV,Odoo Community Association (OCA)",
     "website": "https://github.com/OCA/web",
     "license": "AGPL-3",
@@ -10,8 +10,12 @@
     "summary": "Allows to drag files into Odoo",
     "depends": [
         'web',
+        'document'
     ],
     "data": [
         'views/templates.xml',
     ],
+    "qweb": [
+        'static/src/xml/widgets.xml',
+    ]
 }

web_drop_target/i18n/fr.po

@@ -0,0 +1,24 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+#	* web_drop_target
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 11.0+e\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-07-10 14:31+0000\n"
+"PO-Revision-Date: 2018-07-10 14:31+0000\n"
+"Last-Translator: <>\n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. module: web_drop_target
+#. openerp-web
+#: code:addons/web_drop_target/static/src/xml/widgets.xml:10
+#, python-format
+msgid "Drop your files here"
+msgstr "Déposez les fichiers ici"
+

web_drop_target/i18n/web_drop_target.pot

@@ -1,5 +1,6 @@
 # Translation of Odoo Server.
 # This file contains the translation of the following modules:
+#	* web_drop_target
 #
 msgid ""
 msgstr ""
@@ -12,3 +13,10 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#. module: web_drop_target
+#. openerp-web
+#: code:addons/web_drop_target/static/src/xml/widgets.xml:11
+#, python-format
+msgid "Drop your files here"
+msgstr ""
+

web_drop_target/readme/CONTRIBUTORS.rst

@@ -1,2 +1,4 @@
 * Holger Brunn <hbrunn@therp.nl>
-* Akim Juillerat <akim.juillerat@camptocamp.com>
+* Pablo Fuentes <pablo@studio73.es>
+* Akim Juillerat <akim.juillerat@camptocamp.com>
+* Enric Tobella <etobella@creublanca.es>

web_drop_target/readme/DEVELOP.rst

@@ -1,3 +1,3 @@
 **Libraries**
 
-* `base64js <https://raw.githubusercontent.com/beatgammit/base64-js>`_.
+* `base64js <https://raw.githubusercontent.com/beatgammit/base64-js>`_.

web_drop_target/readme/ROADMAP.rst

@@ -2,4 +2,4 @@
 * handle multiple files
 * add an upload progress meter for huge files
 * trigger custom events about different stages of the drop operation for other addons to hook in
-* Install document module to display attachments in the sidebar
+* Install document module to display attachments in the sidebar

web_drop_target/readme/USAGE.rst

@@ -1,4 +1,7 @@
 To use this module, you need to:
 
 #. drag a file from your local computer onto an Odoo form view
-#. it should become an attachment of the currently opened record
+#. it should become an attachment of the currently opened record
+
+.. image:: /web_drop_target/static/description/screenshot.png
+    :alt: Screenshot

web_drop_target/static/description/index.html

@@ -393,6 +393,7 @@ ul.auto-toc {
 <li>drag a file from your local computer onto an Odoo form view</li>
 <li>it should become an attachment of the currently opened record</li>
 </ol>
+<img alt="Screenshot" src="https://raw.githubusercontent.com/web_drop_target/static/description/screenshot.png" />
 </div>
 <div class="section" id="development">
 <h1><a class="toc-backref" href="#id2">Development</a></h1>
@@ -431,7 +432,9 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 <h2><a class="toc-backref" href="#id7">Contributors</a></h2>
 <ul class="simple">
 <li>Holger Brunn &lt;<a class="reference external" href="mailto:hbrunn&#64;therp.nl">hbrunn&#64;therp.nl</a>&gt;</li>
+<li>Pablo Fuentes &lt;<a class="reference external" href="mailto:pablo&#64;studio73.es">pablo&#64;studio73.es</a>&gt;</li>
 <li>Akim Juillerat &lt;<a class="reference external" href="mailto:akim.juillerat&#64;camptocamp.com">akim.juillerat&#64;camptocamp.com</a>&gt;</li>
+<li>Enric Tobella &lt;<a class="reference external" href="mailto:etobella&#64;creublanca.es">etobella&#64;creublanca.es</a>&gt;</li>
 </ul>
 </div>
 <div class="section" id="maintainers">

web_drop_target/static/src/js/web_drop_target.js

@@ -3,17 +3,18 @@
 /*global Uint8Array base64js*/
 
 odoo.define('web_drop_target', function(require) {
-    var    FormController = require('web.FormController');
+    var FormController = require('web.FormController');
+    var core = require('web.core');
+    var qweb = core.qweb;
 
     // this is the main contribution of this addon: A mixin you can use
     // to make some widget a drop target. Read on how to use this yourself
     var DropTargetMixin = {
         // add the mime types you want to support here, leave empty for
-        // all types. For more control, override _get_drop_item in your class
+        // all types. For more control, override _get_drop_items in your class
         _drop_allowed_types: [],
 
-        // a class being applied when the user drags something we can handle
+        _drop_overlay: null,
-        _drag_over_class: 'o_drag_over',
 
         start: function() {
             var result = this._super.apply(this, arguments);
@@ -25,70 +26,68 @@ odoo.define('web_drop_target', function(require) {
         },
 
         _on_drop: function(e) {
-            var drop_item = this._get_drop_item(e);
+            if (!this._drop_overlay){
-            if(!drop_item) {
                 return;
             }
-            jQuery(e.delegateTarget).removeClass(this._drag_over_class);
+            var drop_items = this._get_drop_items(e);
-            var reader = new FileReader();
-            reader.onloadend = this.proxy(
-                _.partial(this._handle_file_drop, drop_item.getAsFile())
-            );
-            reader.readAsArrayBuffer(drop_item.getAsFile());
             e.preventDefault();
+            this._remove_overlay();
+            if (!drop_items) {
+                return;
+            }
+            this._handle_drop_items(drop_items, e)
         },
 
         _on_dragenter: function(e) {
-            if(this._get_drop_item(e)) {
+            e.preventDefault();
-                e.preventDefault();
+            this._add_overlay();
-                jQuery(e.delegateTarget).addClass(this._drag_over_class);
+            return false;
-                return false;
-            }
         },
 
         _on_dragleave: function(e) {
-            jQuery(e.delegateTarget).removeClass(this._drag_over_class);
+            this._remove_overlay();
+            e.preventDefault();
         },
 
-        _get_drop_item: function(e) {
+        _get_drop_items: function(e) {
             var self = this,
                 dataTransfer = e.originalEvent.dataTransfer,
-                drop_item = null;
+                drop_items = [];
-            _.each(dataTransfer.items, function(item) {
+            _.each(dataTransfer.files, function(item) {
-                if(
+                if (
                     _.contains(self._drop_allowed_types, item.type) ||
                     _.isEmpty(self._drop_allowed_types)
                 ) {
-                    drop_item = item;
+                    drop_items.push(item);
                 }
             });
-            return drop_item;
+            return drop_items;
         },
 
         // eslint-disable-next-line no-unused-vars
-        _handle_file_drop: function(drop_file, e) {
+        _handle_drop_items: function(drop_items, e) {
             // do something here, for example call the helper function below
             // e is the on_load_end handler for the FileReader above,
             // so e.target.result contains an ArrayBuffer of the data
         },
 
-        _handle_file_drop_attach: function(
+        _create_attachment: function(file, reader, e, res_model, res_id, extra_data) {
-                drop_file, e, res_model, res_id, extra_data
-        ) {
             // helper to upload an attachment and update the sidebar
             var self = this;
             return this._rpc({
                 model: 'ir.attachment',
                 method: 'create',
-                args: [{
+                args: [
-                    'name': drop_file.name,
+                    _.extend({
-                    'datas': base64js.fromByteArray(
+                        name: file.name,
-                            new Uint8Array(e.target.result)
+                        datas: base64js.fromByteArray(
+                            new Uint8Array(reader.result)
                         ),
-                    'datas_fname': drop_file.name,
+                        datas_fname: file.name,
-                    'res_model': res_model,
+                        res_model: res_model,
-                    'res_id': res_id,
+                        res_id: res_id,
-                }],
+                    }, extra_data || {})
+                ],
             })
             .then(function() {
                 // try to find a sidebar and update it if we found one
@@ -96,13 +95,58 @@ odoo.define('web_drop_target', function(require) {
                 while(p && !p.sidebar) {
                     p = p.getParent ? p.getParent() : null;
                 }
-                if(p) {
+                if (p) {
                     var sidebar = p.sidebar;
-                    if(sidebar && _.isFunction(sidebar._onFileUploaded)) {
+                    if (sidebar && _.isFunction(sidebar._onFileUploaded)) {
                         sidebar._onFileUploaded();
                     }
                 }
             });
+        },
+
+        _file_reader_error_handler: function(e){
+            console.error(e);
+        },
+
+        _handle_file_drop_attach: function(
+            item, e, res_model, res_id, extra_data
+        ) {
+            var self = this;
+            var file = item;
+            if (!file || !(file instanceof Blob)) {
+                return;
+            }
+            var reader = new FileReader();
+            reader.onloadend = self.proxy(
+                _.partial(self._create_attachment, file, reader, e, res_model, res_id, extra_data)
+            );
+            reader.onerror = self.proxy('_file_reader_error_handler');
+            reader.readAsArrayBuffer(file);
+        },
+
+        _add_overlay: function() {
+            if (!this._drop_overlay){
+                var o_content = jQuery('.o_content'),
+                    view_manager = jQuery('.o_view_manager_content');
+                this._drop_overlay = jQuery(
+                    qweb.render('web_drop_target.drop_overlay')
+                );
+                var o_content_position = o_content.position();
+                this._drop_overlay.css({
+                    'top': o_content_position.top, 
+                    'left': o_content_position.left,
+                    'width': view_manager.width(),
+                    'height': view_manager.height()
+                });
+                o_content.append(this._drop_overlay);
+            }
+        },
+        
+        _remove_overlay: function() {
+            if (this._drop_overlay) {
+                this._drop_overlay.remove();
+                this._drop_overlay = null;
+            }
         }
     };
 
@@ -111,18 +155,23 @@ odoo.define('web_drop_target', function(require) {
     FormController.include(_.extend(DropTargetMixin, {
         _get_drop_file: function() {
             // disable drag&drop when we're on an unsaved record
-            if(!this.datarecord.id) {
+            if (!this.datarecord.id) {
                 return null;
             }
             return this._super.apply(this, arguments);
         },
-        _handle_file_drop: function(drop_file, e) {
+        _handle_drop_items: function(drop_items, e) {
-            return this._handle_file_drop_attach(
+            var self = this;
-                drop_file, e, this.renderer.state.model, this.renderer.state.res_id
+            _.each(drop_items, function(item, e) {
-            );
+                return self._handle_file_drop_attach(
+                    item, e, self.renderer.state.model,
+                    self.renderer.state.res_id
+                );
+            });
         }
     }));
 
+
     return {
         'DropTargetMixin': DropTargetMixin,
     };

web_drop_target/static/src/less/web_drop_target.less

@@ -0,0 +1,19 @@
+.o_content {
+    .o_drag_over{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255,255,255,0.6);
+        border: 1px dashed #4c4c4c;
+        pointer-events: none;
+        .o_drag_over_content{
+            position: relative;
+            top: 50%;
+            transform: translate(0%, -50%);
+            width: 100%;
+            text-align: center;
+        }
+    }
+}

web_drop_target/static/src/xml/widgets.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<template>
+    <t t-name="web_drop_target.drop_overlay">
+        <div class="o_drag_over">
+            <div class="o_drag_over_content">
+                <div>
+                    <i class="fa fa-file-o fa-5x" aria-hidden="true"></i>
+                </div>
+                <div>
+                    <h2>Drop your files here</h2>
+                </div>
+            </div>
+        </div>
+    </t>
+</template>
+

web_drop_target/views/templates.xml

@@ -4,7 +4,7 @@
         <xpath expr="." position="inside">
             <script type="text/javascript" src="/web_drop_target/static/lib/base64js.min.js"></script>
             <script type="text/javascript" src="/web_drop_target/static/src/js/web_drop_target.js"></script>
-            <link rel="stylesheet" href="/web_drop_target/static/src/css/web_drop_target.css"/>
+            <link rel="stylesheet" href="/web_drop_target/static/src/less/web_drop_target.less"/>
         </xpath>
     </template>
 </odoo>