blob: dcbb701994c52d6bd74b8a7bbed5693281d04246 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
odoo.define('mail/static/src/components/drop_zone/drop_zone.js', function (require) {
'use strict';
const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
const { Component, useState } = owl;
class DropZone extends Component {
/**
* @override
*/
constructor(...args) {
super(...args);
useShouldUpdateBasedOnProps();
this.state = useState({
/**
* Determine whether the user is dragging files over the dropzone.
* Useful to provide visual feedback in that case.
*/
isDraggingInside: false,
});
/**
* Counts how many drag enter/leave happened on self and children. This
* ensures the drop effect stays active when dragging over a child.
*/
this._dragCount = 0;
}
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
/**
* Returns whether the given node is self or a children of self.
*
* @param {Node} node
* @returns {boolean}
*/
contains(node) {
return this.el.contains(node);
}
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* Making sure that dragging content is external files.
* Ignoring other content dragging like text.
*
* @private
* @param {DataTransfer} dataTransfer
* @returns {boolean}
*/
_isDragSourceExternalFile(dataTransfer) {
const dragDataType = dataTransfer.types;
if (dragDataType.constructor === window.DOMStringList) {
return dragDataType.contains('Files');
}
if (dragDataType.constructor === Array) {
return dragDataType.includes('Files');
}
return false;
}
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* Shows a visual drop effect when dragging inside the dropzone.
*
* @private
* @param {DragEvent} ev
*/
_onDragenter(ev) {
ev.preventDefault();
if (this._dragCount === 0) {
this.state.isDraggingInside = true;
}
this._dragCount++;
}
/**
* Hides the visual drop effect when dragging outside the dropzone.
*
* @private
* @param {DragEvent} ev
*/
_onDragleave(ev) {
this._dragCount--;
if (this._dragCount === 0) {
this.state.isDraggingInside = false;
}
}
/**
* Prevents default (from the template) in order to receive the drop event.
* The drop effect cursor works only when set on dragover.
*
* @private
* @param {DragEvent} ev
*/
_onDragover(ev) {
ev.preventDefault();
ev.dataTransfer.dropEffect = 'copy';
}
/**
* Triggers the `o-dropzone-files-dropped` event when new files are dropped
* on the dropzone, and then removes the visual drop effect.
*
* The parents should handle this event to process the files as they wish,
* such as uploading them.
*
* @private
* @param {DragEvent} ev
*/
_onDrop(ev) {
ev.preventDefault();
if (this._isDragSourceExternalFile(ev.dataTransfer)) {
this.trigger('o-dropzone-files-dropped', {
files: ev.dataTransfer.files,
});
}
this.state.isDraggingInside = false;
}
}
Object.assign(DropZone, {
props: {},
template: 'mail.DropZone',
});
return DropZone;
});
|
