mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
342 lines
12 KiB
JavaScript
342 lines
12 KiB
JavaScript
/* global Uint8Array, base64js */
|
|
// Copyright 2018 Therp BV <https://therp.nl>
|
|
// Copyright 2021 Tecnativa - Alexandre D. Díaz
|
|
// License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl.html).
|
|
|
|
odoo.define("web_drop_target", function (require) {
|
|
"use strict";
|
|
const AbstractAction = require("web.AbstractAction");
|
|
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
|
|
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, if not defined, we use the element
|
|
_drop_zone_selector: undefined,
|
|
|
|
/**
|
|
* @override
|
|
*/
|
|
start: function () {
|
|
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;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @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();
|
|
},
|
|
/**
|
|
* @override
|
|
Necessary for creation of attachment
|
|
*/
|
|
_updateAndDisable: function () {
|
|
return this._super.apply(this, arguments).then((result) => {
|
|
this._update_overlay();
|
|
return result;
|
|
});
|
|
},
|
|
/**
|
|
* @override
|
|
Necessary for change of views and Next and Previous buttons
|
|
*/
|
|
_update: function () {
|
|
return this._super.apply(this, arguments).then((result) => {
|
|
this._update_overlay();
|
|
return result;
|
|
});
|
|
},
|
|
_update_overlay: function () {
|
|
this._remove_overlay();
|
|
_.defer(this._add_overlay.bind(this));
|
|
},
|
|
/**
|
|
* 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;
|
|
},
|
|
|
|
/**
|
|
* TODO: Change the name to follow the standard in new versions
|
|
*
|
|
* @private
|
|
*/
|
|
_add_overlay: function () {
|
|
if (!this._drop_overlay || this._drop_overlay.length === 0) {
|
|
if (this._drop_zone_selector)
|
|
this.$drop_zone = this.$(this._drop_zone_selector).last();
|
|
else this.$drop_zone = this.$el;
|
|
// 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));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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();
|
|
const abstractAction = this.findAncestor(function (ancestor) {
|
|
return ancestor instanceof AbstractAction;
|
|
});
|
|
const controller = abstractAction.currentDialogController;
|
|
if (
|
|
_.isEmpty(this._get_drop_items(ev)) &&
|
|
this._checkDragOver() &&
|
|
(controller == undefined || controller.jsID === this.controllerID)
|
|
) {
|
|
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");
|
|
}
|
|
},
|
|
|
|
_checkDragOver: function () {
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* @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;
|
|
drop_items = _.filter(
|
|
dataTransfer.files,
|
|
(item) =>
|
|
_.isEmpty(this._drop_allowed_types) ||
|
|
_.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, 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
|
|
},
|
|
|
|
/**
|
|
* 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",
|
|
args: [
|
|
_.extend(
|
|
{
|
|
name: file.name,
|
|
datas: base64js.fromByteArray(
|
|
new Uint8Array(reader.result)
|
|
),
|
|
res_model: res_model,
|
|
res_id: res_id,
|
|
},
|
|
extra_data
|
|
),
|
|
],
|
|
}).then(() => {
|
|
// Find the chatter among the children, there should be only
|
|
// one
|
|
self.trigger_up("reload", {
|
|
keepChanges: true,
|
|
onSuccess: this._update_overlay.bind(this),
|
|
});
|
|
});
|
|
},
|
|
|
|
/**
|
|
* TODO: Change the name to follow the standard in new versions
|
|
*
|
|
* @private
|
|
* @param {ErrorEvent} ev
|
|
*/
|
|
_file_reader_error_handler: function (ev) {
|
|
console.error(ev);
|
|
},
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
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,
|
|
res_model,
|
|
res_id,
|
|
undefined
|
|
);
|
|
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, {
|
|
// 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;
|
|
},
|
|
_checkDragOver: function () {
|
|
return this.renderer._chatterContainerComponent;
|
|
},
|
|
})
|
|
);
|
|
|
|
return {
|
|
DropTargetMixin: DropTargetMixin,
|
|
};
|
|
});
|