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
140
141
142
|
odoo.define('point_of_sale.Draggable', function(require) {
'use strict';
const { useExternalListener } = owl.hooks;
const { useListener } = require('web.custom_hooks');
const PosComponent = require('point_of_sale.PosComponent');
const Registries = require('point_of_sale.Registries');
/**
* Wrap an element or a component with { position: absolute } to make it
* draggable around the limitArea or the nearest positioned ancestor.
*
* e.g.
* ```
* <div class="limit-area">
* <Draggable limitArea="'.limit-area'">
* <div class="popup">
* <header class="drag-handle"></header>
* </div>
* <div class="popup body"></div>
* </Draggable>
* </div>
* ```
*
* In the above snippet, if the popup div is { position: absolute },
* then it becomes draggable around the .limit-area element if it is dragged
* thru its Header -- because of the .drag-handle element.
*
* @trigger 'drag-end' when dragging ended with payload `{ loc: { top, left } }`
*/
class Draggable extends PosComponent {
constructor() {
super(...arguments);
this.isDragging = false;
this.dx = 0;
this.dy = 0;
// drag with mouse
useExternalListener(document, 'mousemove', this.move);
useExternalListener(document, 'mouseup', this.endDrag);
// drag with touch
useExternalListener(document, 'touchmove', this.move);
useExternalListener(document, 'touchend', this.endDrag);
useListener('mousedown', '.drag-handle', this.startDrag);
useListener('touchstart', '.drag-handle', this.startDrag);
}
mounted() {
this.limitArea = this.props.limitArea
? document.querySelector(this.props.limitArea)
: this.el.offsetParent;
this.limitAreaBoundingRect = this.limitArea.getBoundingClientRect();
if (this.limitArea === this.el.offsetParent) {
this.limitLeft = 0;
this.limitTop = 0;
this.limitRight = this.limitAreaBoundingRect.width;
this.limitBottom = this.limitAreaBoundingRect.height;
} else {
this.limitLeft = -this.el.offsetParent.offsetLeft;
this.limitTop = -this.el.offsetParent.offsetTop;
this.limitRight =
this.limitAreaBoundingRect.width - this.el.offsetParent.offsetLeft;
this.limitBottom =
this.limitAreaBoundingRect.height - this.el.offsetParent.offsetTop;
}
this.limitAreaWidth = this.limitAreaBoundingRect.width;
this.limitAreaHeight = this.limitAreaBoundingRect.height;
// absolutely position the element then remove the transform.
const elBoundingRect = this.el.getBoundingClientRect();
this.el.style.top = `${elBoundingRect.top}px`;
this.el.style.left = `${elBoundingRect.left}px`;
this.el.style.transform = 'none';
}
startDrag(event) {
let realEvent;
if (event instanceof CustomEvent) {
realEvent = event.detail;
} else {
realEvent = event;
}
const { x, y } = this._getEventLoc(realEvent);
this.isDragging = true;
this.dx = this.el.offsetLeft - x;
this.dy = this.el.offsetTop - y;
event.stopPropagation();
}
move(event) {
if (this.isDragging) {
const { x: pointerX, y: pointerY } = this._getEventLoc(event);
const posLeft = this._getPosLeft(pointerX, this.dx);
const posTop = this._getPosTop(pointerY, this.dy);
this.el.style.left = `${posLeft}px`;
this.el.style.top = `${posTop}px`;
}
}
endDrag() {
if (this.isDragging) {
this.isDragging = false;
this.trigger('drag-end', {
loc: { top: this.el.offsetTop, left: this.el.offsetLeft },
});
}
}
_getEventLoc(event) {
let coordX, coordY;
if (event.touches && event.touches[0]) {
coordX = event.touches[0].clientX;
coordY = event.touches[0].clientY;
} else {
coordX = event.clientX;
coordY = event.clientY;
}
return {
x: coordX,
y: coordY,
};
}
_getPosLeft(pointerX, dx) {
const posLeft = pointerX + dx;
if (posLeft < this.limitLeft) {
return this.limitLeft;
} else if (posLeft > this.limitRight - this.el.offsetWidth) {
return this.limitRight - this.el.offsetWidth;
}
return posLeft;
}
_getPosTop(pointerY, dy) {
const posTop = pointerY + dy;
if (posTop < this.limitTop) {
return this.limitTop;
} else if (posTop > this.limitBottom - this.el.offsetHeight) {
return this.limitBottom - this.el.offsetHeight;
}
return posTop;
}
}
Draggable.template = 'Draggable';
Registries.Component.add(Draggable);
return Draggable;
});
|
