Techsystech
/
web
mirror of https://github.com/OCA/web.git
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Merge PR #2036 into 13.0 

Signed-off-by pedrobaeza
pull/2045/head
OCA-git-bot 2021-09-28 08:00:08 +00:00
parent 88cfd7f142 1c0c2609dd
commit 734495f684
6 changed files with 267 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web_drop_target/README.rst
View File

@ -89,6 +89,9 @@ Contributors
* Akim Juillerat <akim.juillerat@camptocamp.com> * Akim Juillerat <akim.juillerat@camptocamp.com>
* Enric Tobella <etobella@creublanca.es> * Enric Tobella <etobella@creublanca.es>
* Lois Rilo <lois.rilo@forgeflow.com> * Lois Rilo <lois.rilo@forgeflow.com>
* `Tecnativa <https://www.tecnativa.com>`__:
* Alexandre D. Díaz
Maintainers Maintainers
~~~~~~~~~~~ ~~~~~~~~~~~

3
web_drop_target/readme/CONTRIBUTORS.rst
View File

@ -3,3 +3,6 @@
* Akim Juillerat <akim.juillerat@camptocamp.com> * Akim Juillerat <akim.juillerat@camptocamp.com>
* Enric Tobella <etobella@creublanca.es> * Enric Tobella <etobella@creublanca.es>
* Lois Rilo <lois.rilo@forgeflow.com> * Lois Rilo <lois.rilo@forgeflow.com>
* `Tecnativa <https://www.tecnativa.com>`__:
* Alexandre D. Díaz

6
web_drop_target/static/description/index.html
View File

@ -3,7 +3,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils 0.15.1: http://docutils.sourceforge.net/" /> <meta name="generator" content="Docutils: http://docutils.sourceforge.net/" />
<title>Drop target support</title> <title>Drop target support</title>
<style type="text/css"> <style type="text/css">
@ -436,6 +436,10 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
<li>Akim Juillerat &lt;<a class="reference external" href="mailto:akim.juillerat&#64;camptocamp.com">akim.juillerat&#64;camptocamp.com</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> <li>Enric Tobella &lt;<a class="reference external" href="mailto:etobella&#64;creublanca.es">etobella&#64;creublanca.es</a>&gt;</li>
<li>Lois Rilo &lt;<a class="reference external" href="mailto:lois.rilo&#64;forgeflow.com">lois.rilo&#64;forgeflow.com</a>&gt;</li> <li>Lois Rilo &lt;<a class="reference external" href="mailto:lois.rilo&#64;forgeflow.com">lois.rilo&#64;forgeflow.com</a>&gt;</li>
<li><a class="reference external" href="https://www.tecnativa.com">Tecnativa</a>:<ul>
<li>Alexandre D. Díaz</li>
</ul>
</li>
</ul> </ul>
</div> </div>
<div class="section" id="maintainers"> <div class="section" id="maintainers">

364
web_drop_target/static/src/js/web_drop_target.js
View File

@ -1,84 +1,233 @@
/* global Uint8Array, base64js */
// Copyright 2018 Therp BV <https://therp.nl> // Copyright 2018 Therp BV <https://therp.nl>
// Copyright 2021 Tecnativa - Alexandre D. Díaz
// License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html). // License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html).
/* global Uint8Array base64js*/
odoo.define("web_drop_target", function(require) { odoo.define("web_drop_target", function(require) {
"use strict"; "use strict";
var FormController = require("web.FormController"); const FormController = require("web.FormController");
var core = require("web.core"); const core = require("web.core");
var qweb = core.qweb; const qweb = core.qweb;
// This is the main contribution of this addon: A mixin you can use // 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 // To make some widget a drop target. Read on how to use this yourself
var DropTargetMixin = { const DropTargetMixin = {
// Add the mime types you want to support here, leave empty for // Add the mime types you want to support here, leave empty for
// All types. For more control, override _get_drop_items in your class // All types. For more control, override _get_drop_items in your class
_drop_allowed_types: [], _drop_allowed_types: [],
// Determine the zone where can drop files
_drop_zone_selector: ".o_content",
_drop_overlay: null, /**
* @override
*/
start: function() { start: function() {
var result = this._super.apply(this, arguments); const $body = $("body");
this.$el.on("drop.widget_events", this.proxy("_on_drop")); this._dropZoneNS = _.uniqueId("o_dz_"); // For event namespace used when multiple chat window is open
this.$el.on("dragenter.widget_events", this.proxy("_on_dragenter")); $body.on(
this.$el.on("dragover.widget_events", this.proxy("_on_dragenter")); "dragleave." + this._dropZoneNS,
this.$el.on("dragleave.widget_events", this.proxy("_on_dragleave")); this._onBodyFileDragLeave.bind(this)
return result; );
$body.on(
"dragover." + this._dropZoneNS,
this._onBodyFileDragover.bind(this)
);
$body.on("drop." + this._dropZoneNS, this._onBodyFileDrop.bind(this));
return this._super.apply(this, arguments).then(result => {
_.defer(this._add_overlay.bind(this));
return result;
});
}, },
_on_drop: function(e) { /**
if (!this._drop_overlay) { * @override
return; */
} destroy: function() {
var drop_items = this._get_drop_items(e); this._super.apply(this, arguments);
e.preventDefault(); const $body = $("body");
$body.off("dragleave." + this._dropZoneNS);
$body.off("dragover." + this._dropZoneNS);
$body.off("drop." + this._dropZoneNS);
this._remove_overlay(); this._remove_overlay();
if (!drop_items) {
return;
}
this._handle_drop_items(drop_items, e);
}, },
_on_dragenter: function(e) { /**
e.preventDefault(); * @override
this._add_overlay(); */
_update: function() {
return this._super.apply(this, arguments).then(result => {
this._remove_overlay();
_.defer(this._add_overlay.bind(this));
return result;
});
},
/**
* TODO: Change the name to follow the standard in new versions
*
* @private
* @returns {Number}
*/
_get_record_id: function() {
// Implement when including this mixin. Return the record ID.
console.log("'_get_record_id': Not Implemented");
return false; return false;
}, },
_on_dragleave: function(e) { /**
this._remove_overlay(); * TODO: Change the name to follow the standard in new versions
e.preventDefault(); *
}, * @private
*/
_add_overlay: function() {
if (!this._drop_overlay || this._drop_overlay.length === 0) {
this.$drop_zone = this.$(this._drop_zone_selector).last();
// Element that represents the zone where you can drop files
// TODO: This name is preserved for not breaking the compatibility with other modules,
// but should be changed in new versions to follow the standard ($name)
this._drop_overlay = $(
qweb.render("web_drop_target.drop_overlay", {
id: this._get_record_id(),
})
);
this.$drop_zone.append(this._drop_overlay);
_get_drop_items: function(e) { this._drop_overlay.on("drop", this._on_drop.bind(this));
if (this._get_record_id()) {
var self = this,
dataTransfer = e.originalEvent.dataTransfer,
drop_items = [];
_.each(dataTransfer.files, function(item) {
if (
_.contains(self._drop_allowed_types, item.type) ||
_.isEmpty(self._drop_allowed_types)
) {
drop_items.push(item);
}
});
return drop_items;
} }
return null;
}, },
/**
* TODO: Change the name to follow the standard in new versions
*
* @private
*/
_remove_overlay: function() {
if (this._drop_overlay && this._drop_overlay.length) {
this._drop_overlay.off("drop");
this._drop_overlay.remove();
this._drop_overlay = null;
}
},
/** ********************
* HANDLE EVENTS
**********************/
/**
* @private
* @param {MouseEvent} ev
*/
_onBodyFileDragLeave: function(ev) {
// On every dragenter chain created with parent child element
// That's why dragleave is fired every time when a child elemnt is hovered
// so here we hide dropzone based on mouse position
if (
ev.originalEvent.clientX <= 0 ||
ev.originalEvent.clientY <= 0 ||
ev.originalEvent.clientX >= window.innerWidth ||
ev.originalEvent.clientY >= window.innerHeight
) {
this._drop_overlay.addClass("d-none");
}
},
/**
* @private
* @param {MouseEvent} ev
*/
_onBodyFileDragover: function(ev) {
ev.preventDefault();
if (!_.isEmpty(this._get_drop_items(ev))) {
const drop_zone_offset = this.$drop_zone.offset();
const overlay_css = {
top: drop_zone_offset.top,
left: drop_zone_offset.left,
width: this.$drop_zone.width(),
height: this.$drop_zone.height(),
};
if (!this._get_record_id()) {
overlay_css.background = "#FF000020";
}
this._drop_overlay.css(overlay_css);
this._drop_overlay.removeClass("d-none");
}
},
/**
* @private
* @param {MouseEvent} ev
*/
_onBodyFileDrop: function(ev) {
ev.preventDefault();
this._drop_overlay.addClass("d-none");
},
/**
* TODO: Change the name to follow the standard in new versions
*
* @private
* @param {MouseEvent} ev
*/
_on_drop: function(ev) {
if (!this._drop_overlay || this._drop_overlay.length === 0) {
return;
}
ev.preventDefault();
const drop_items = this._get_drop_items(ev);
if (_.isEmpty(drop_items)) {
return;
}
this._handle_drop_items(drop_items, ev);
},
/**
* TODO: Change the name to follow the standard in new versions
*
* @private
* @param {MouseEvent} ev
*/
_get_drop_items: function(ev) {
let drop_items = [];
if (this._get_record_id()) {
const dataTransfer = ev.originalEvent.dataTransfer;
if (_.isEmpty(this._drop_allowed_types)) {
drop_items = _.clone(dataTransfer.files);
} else {
drop_items = _.filter(dataTransfer.files, item =>
_.contains(this._drop_allowed_types, item.type)
);
}
}
return drop_items;
},
/**
* TODO: Change the name to follow the standard in new versions
*
* @private
* @param {Array} drop_items
* @param {MouseEvent} ev
*/
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
_handle_drop_items: function(drop_items, e) { _handle_drop_items: function(drop_items, ev) {
// Do something here, for example call the helper function below // Do something here, for example call the helper function below
// e is the on_load_end handler for the FileReader above, // e is the on_load_end handler for the FileReader above,
// so e.target.result contains an ArrayBuffer of the data // so e.target.result contains an ArrayBuffer of the data
}, },
_create_attachment: function(file, reader, e, res_model, res_id, extra_data) { /**
* TODO: Change the name to follow the standard in new versions
*
* @private
* @param {Object} file
* @param {FileReader} reader
* @param {String} res_model
* @param {Number} res_id
* @param {Object} extra_data
*/
_create_attachment: function(file, reader, res_model, res_id, extra_data) {
// Helper to upload an attachment and update the sidebar // Helper to upload an attachment and update the sidebar
var self = this;
return this._rpc({ return this._rpc({
model: "ir.attachment", model: "ir.attachment",
method: "create", method: "create",
@ -92,100 +241,69 @@ odoo.define("web_drop_target", function(require) {
res_model: res_model, res_model: res_model,
res_id: res_id, res_id: res_id,
}, },
extra_data || {} extra_data
), ),
], ],
}).then(function() { }).then(() => {
// Find the chatter among the children, there should be only // Find the chatter among the children, there should be only
// one // one
var res = _.filter(self.getChildren(), "chatter"); const res = _.chain(this.getChildren())
if (res.length) { .filter("chatter")
res[0].chatter._reloadAttachmentBox(); .first()
res[0].chatter.trigger_up("reload"); .value();
res[0].chatter.$(".o_chatter_button_attachment").click(); if (res) {
// This launch a 'reload' of the view
res.chatter._reloadAttachmentBox();
res.chatter.$(".o_chatter_button_attachment").click();
} }
}); });
}, },
_file_reader_error_handler: function(e) { /**
console.error(e); * TODO: Change the name to follow the standard in new versions
*
* @private
* @param {ErrorEvent} ev
*/
_file_reader_error_handler: function(ev) {
console.error(ev);
}, },
_handle_file_drop_attach: function(item, e, res_model, res_id, extra_data) { /**
var self = this; * TODO: Change the name to follow the standard in new versions
var file = item; *
if (!file || !(file instanceof Blob)) { * @private
* @param {Object} item
*/
_handle_file_drop_attach: function(item) {
if (!item || !(item instanceof Blob)) {
return; return;
} }
var reader = new FileReader(); const res_model = this.renderer.state.model;
reader.onloadend = self.proxy( const res_id = this.renderer.state.res_id;
_.partial( const reader = new FileReader();
self._create_attachment, reader.onloadend = this._create_attachment.bind(
file, this,
reader, item,
e, reader,
res_model, res_model,
res_id, res_id,
extra_data undefined
)
); );
reader.onerror = self.proxy("_file_reader_error_handler"); reader.onerror = this._file_reader_error_handler.bind(this);
reader.readAsArrayBuffer(file); reader.readAsArrayBuffer(item);
},
_get_record_id: function() {
// Implement when including this mixin. Return the record ID.
console.log("'_get_record_id': Not Implemented");
return false;
},
_add_overlay: function() {
var self = this;
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", {
id: self._get_record_id(),
})
);
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(),
});
if (!this._get_record_id()) {
this._drop_overlay.css("background", "#FF000020");
}
o_content.append(this._drop_overlay);
}
},
_remove_overlay: function() {
if (this._drop_overlay) {
this._drop_overlay.remove();
this._drop_overlay = null;
}
}, },
}; };
// And here we apply the mixin to form views, allowing any files and // And here we apply the mixin to form views, allowing any files and
// adding them as attachment // adding them as attachment
FormController.include( FormController.include(
_.extend(DropTargetMixin, { _.extend({}, DropTargetMixin, {
// eslint-disable-next-line no-unused-vars // Using multi-selector to ensure that is displayed in forms without "sheet"
_handle_drop_items: function(drop_items, e) { // NOTE: Only the inner element would be selected
var self = this; _drop_zone_selector: ".o_form_sheet_bg,.o_form_view",
_.each(drop_items, function(item, e) { _handle_drop_items: function(drop_items) {
return self._handle_file_drop_attach( _.each(drop_items, this._handle_file_drop_attach, this);
item,
e,
self.renderer.state.model,
self.renderer.state.res_id
);
});
}, },
_get_record_id: function() { _get_record_id: function() {
return this.renderer.state.res_id; return this.renderer.state.res_id;

30
web_drop_target/static/src/scss/web_drop_target.scss
View File

@ -1,19 +1,17 @@
.o_content { .o_drag_over {
.o_drag_over { position: fixed;
position: fixed; top: 0;
top: 0; left: 0;
left: 0; width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
border: 2px dashed $o-brand-primary;
z-index: 2;
.o_drag_over_content {
position: relative;
top: 50%;
transform: translate(0%, -50%);
width: 100%; width: 100%;
height: 100%; text-align: center;
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;
}
} }
} }

2
web_drop_target/static/src/xml/widgets.xml
View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8" ?> <?xml version="1.0" encoding="UTF-8" ?>
<template> <template>
<t t-name="web_drop_target.drop_overlay"> <t t-name="web_drop_target.drop_overlay">
<div class="o_drag_over"> <div class="o_drag_over d-none">
<div class="o_drag_over_content"> <div class="o_drag_over_content">
<div> <div>
<i class="fa fa-file-o fa-5x" aria-hidden="true" /> <i class="fa fa-file-o fa-5x" aria-hidden="true" />