mirror of https://github.com/OCA/web.git
OCA-git-bot
commit
734495f684
|
|
@ -89,6 +89,9 @@ Contributors
|
|||
* Akim Juillerat <akim.juillerat@camptocamp.com>
|
||||
* Enric Tobella <etobella@creublanca.es>
|
||||
* Lois Rilo <lois.rilo@forgeflow.com>
|
||||
* `Tecnativa <https://www.tecnativa.com>`__:
|
||||
|
||||
* Alexandre D. Díaz
|
||||
|
||||
Maintainers
|
||||
~~~~~~~~~~~
|
||||
|
|
|
|||
|
|
@ -3,3 +3,6 @@
|
|||
* Akim Juillerat <akim.juillerat@camptocamp.com>
|
||||
* Enric Tobella <etobella@creublanca.es>
|
||||
* Lois Rilo <lois.rilo@forgeflow.com>
|
||||
* `Tecnativa <https://www.tecnativa.com>`__:
|
||||
|
||||
* Alexandre D. Díaz
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<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>
|
||||
<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 <<a class="reference external" href="mailto:akim.juillerat@camptocamp.com">akim.juillerat@camptocamp.com</a>></li>
|
||||
<li>Enric Tobella <<a class="reference external" href="mailto:etobella@creublanca.es">etobella@creublanca.es</a>></li>
|
||||
<li>Lois Rilo <<a class="reference external" href="mailto:lois.rilo@forgeflow.com">lois.rilo@forgeflow.com</a>></li>
|
||||
<li><a class="reference external" href="https://www.tecnativa.com">Tecnativa</a>:<ul>
|
||||
<li>Alexandre D. Díaz</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="maintainers">
|
||||
|
|
|
|||
|
|
@ -1,84 +1,233 @@
|
|||
/* global Uint8Array, base64js */
|
||||
// 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).
|
||||
/* global Uint8Array base64js*/
|
||||
|
||||
odoo.define("web_drop_target", function(require) {
|
||||
"use strict";
|
||||
|
||||
var FormController = require("web.FormController");
|
||||
var core = require("web.core");
|
||||
var qweb = core.qweb;
|
||||
const FormController = require("web.FormController");
|
||||
const core = require("web.core");
|
||||
const 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 = {
|
||||
const DropTargetMixin = {
|
||||
// Add the mime types you want to support here, leave empty for
|
||||
// All types. For more control, override _get_drop_items in your class
|
||||
_drop_allowed_types: [],
|
||||
// Determine the zone where can drop files
|
||||
_drop_zone_selector: ".o_content",
|
||||
|
||||
_drop_overlay: null,
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function() {
|
||||
var result = this._super.apply(this, arguments);
|
||||
this.$el.on("drop.widget_events", this.proxy("_on_drop"));
|
||||
this.$el.on("dragenter.widget_events", this.proxy("_on_dragenter"));
|
||||
this.$el.on("dragover.widget_events", this.proxy("_on_dragenter"));
|
||||
this.$el.on("dragleave.widget_events", this.proxy("_on_dragleave"));
|
||||
const $body = $("body");
|
||||
this._dropZoneNS = _.uniqueId("o_dz_"); // For event namespace used when multiple chat window is open
|
||||
$body.on(
|
||||
"dragleave." + this._dropZoneNS,
|
||||
this._onBodyFileDragLeave.bind(this)
|
||||
);
|
||||
$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) {
|
||||
return;
|
||||
}
|
||||
var drop_items = this._get_drop_items(e);
|
||||
e.preventDefault();
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
destroy: function() {
|
||||
this._super.apply(this, arguments);
|
||||
const $body = $("body");
|
||||
$body.off("dragleave." + this._dropZoneNS);
|
||||
$body.off("dragover." + this._dropZoneNS);
|
||||
$body.off("drop." + this._dropZoneNS);
|
||||
this._remove_overlay();
|
||||
if (!drop_items) {
|
||||
return;
|
||||
}
|
||||
this._handle_drop_items(drop_items, e);
|
||||
},
|
||||
|
||||
_on_dragenter: function(e) {
|
||||
e.preventDefault();
|
||||
this._add_overlay();
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_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;
|
||||
},
|
||||
|
||||
_on_dragleave: function(e) {
|
||||
this._remove_overlay();
|
||||
e.preventDefault();
|
||||
/**
|
||||
* TODO: Change the name to follow the standard in new versions
|
||||
*
|
||||
* @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);
|
||||
|
||||
this._drop_overlay.on("drop", this._on_drop.bind(this));
|
||||
}
|
||||
},
|
||||
|
||||
_get_drop_items: function(e) {
|
||||
if (this._get_record_id()) {
|
||||
var self = this,
|
||||
dataTransfer = e.originalEvent.dataTransfer,
|
||||
drop_items = [];
|
||||
_.each(dataTransfer.files, function(item) {
|
||||
/**
|
||||
* 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 (
|
||||
_.contains(self._drop_allowed_types, item.type) ||
|
||||
_.isEmpty(self._drop_allowed_types)
|
||||
ev.originalEvent.clientX <= 0 ||
|
||||
ev.originalEvent.clientY <= 0 ||
|
||||
ev.originalEvent.clientX >= window.innerWidth ||
|
||||
ev.originalEvent.clientY >= window.innerHeight
|
||||
) {
|
||||
drop_items.push(item);
|
||||
this._drop_overlay.addClass("d-none");
|
||||
}
|
||||
});
|
||||
return drop_items;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* @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
|
||||
_handle_drop_items: function(drop_items, e) {
|
||||
_handle_drop_items: function(drop_items, ev) {
|
||||
// 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
|
||||
},
|
||||
|
||||
_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
|
||||
var self = this;
|
||||
return this._rpc({
|
||||
model: "ir.attachment",
|
||||
method: "create",
|
||||
|
|
@ -92,100 +241,69 @@ odoo.define("web_drop_target", function(require) {
|
|||
res_model: res_model,
|
||||
res_id: res_id,
|
||||
},
|
||||
extra_data || {}
|
||||
extra_data
|
||||
),
|
||||
],
|
||||
}).then(function() {
|
||||
}).then(() => {
|
||||
// Find the chatter among the children, there should be only
|
||||
// one
|
||||
var res = _.filter(self.getChildren(), "chatter");
|
||||
if (res.length) {
|
||||
res[0].chatter._reloadAttachmentBox();
|
||||
res[0].chatter.trigger_up("reload");
|
||||
res[0].chatter.$(".o_chatter_button_attachment").click();
|
||||
const res = _.chain(this.getChildren())
|
||||
.filter("chatter")
|
||||
.first()
|
||||
.value();
|
||||
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;
|
||||
var file = item;
|
||||
if (!file || !(file instanceof Blob)) {
|
||||
/**
|
||||
* TODO: Change the name to follow the standard in new versions
|
||||
*
|
||||
* @private
|
||||
* @param {Object} item
|
||||
*/
|
||||
_handle_file_drop_attach: function(item) {
|
||||
if (!item || !(item instanceof Blob)) {
|
||||
return;
|
||||
}
|
||||
var reader = new FileReader();
|
||||
reader.onloadend = self.proxy(
|
||||
_.partial(
|
||||
self._create_attachment,
|
||||
file,
|
||||
const res_model = this.renderer.state.model;
|
||||
const res_id = this.renderer.state.res_id;
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = this._create_attachment.bind(
|
||||
this,
|
||||
item,
|
||||
reader,
|
||||
e,
|
||||
res_model,
|
||||
res_id,
|
||||
extra_data
|
||||
)
|
||||
undefined
|
||||
);
|
||||
reader.onerror = self.proxy("_file_reader_error_handler");
|
||||
reader.readAsArrayBuffer(file);
|
||||
},
|
||||
|
||||
_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;
|
||||
}
|
||||
reader.onerror = this._file_reader_error_handler.bind(this);
|
||||
reader.readAsArrayBuffer(item);
|
||||
},
|
||||
};
|
||||
|
||||
// And here we apply the mixin to form views, allowing any files and
|
||||
// adding them as attachment
|
||||
FormController.include(
|
||||
_.extend(DropTargetMixin, {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
_handle_drop_items: function(drop_items, e) {
|
||||
var self = this;
|
||||
_.each(drop_items, function(item, e) {
|
||||
return self._handle_file_drop_attach(
|
||||
item,
|
||||
e,
|
||||
self.renderer.state.model,
|
||||
self.renderer.state.res_id
|
||||
);
|
||||
});
|
||||
_.extend({}, DropTargetMixin, {
|
||||
// Using multi-selector to ensure that is displayed in forms without "sheet"
|
||||
// NOTE: Only the inner element would be selected
|
||||
_drop_zone_selector: ".o_form_sheet_bg,.o_form_view",
|
||||
_handle_drop_items: function(drop_items) {
|
||||
_.each(drop_items, this._handle_file_drop_attach, this);
|
||||
},
|
||||
_get_record_id: function() {
|
||||
return this.renderer.state.res_id;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
.o_content {
|
||||
.o_drag_over {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -6,8 +5,8 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border: 1px dashed #4c4c4c;
|
||||
pointer-events: none;
|
||||
border: 2px dashed $o-brand-primary;
|
||||
z-index: 2;
|
||||
.o_drag_over_content {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
|
|
@ -16,4 +15,3 @@
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<?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 d-none">
|
||||
<div class="o_drag_over_content">
|
||||
<div>
|
||||
<i class="fa fa-file-o fa-5x" aria-hidden="true" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue