/
Clickable.ts
130 lines (122 loc) · 4.54 KB
/
Clickable.ts
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
import {
MoveableManagerInterface, MoveableGroupInterface,
ClickableProps, OnClick, OnClickGroup,
} from "../types";
import { triggerEvent, fillParams } from "../utils";
import { addEvent, findIndex, removeEvent } from "@daybrush/utils";
import { makeAble } from "./AbleManager";
export default makeAble("clickable", {
props: {},
events: {
onClick: "click",
onClickGroup: "clickGroup",
} as const,
always: true,
dragStart(moveable: MoveableManagerInterface, e: any) {
if (!e.isRequest) {
addEvent(window, "click", moveable.onPreventClick, true);
}
},
dragControlStart(moveable: MoveableManagerInterface, e: any) {
this.dragStart(moveable, e);
},
dragGroupStart(moveable: MoveableManagerInterface<ClickableProps>, e: any) {
this.dragStart(moveable, e);
e.datas.inputTarget = e.inputEvent && e.inputEvent.target;
},
dragEnd(moveable: MoveableManagerInterface<ClickableProps>, e: any) {
this.endEvent(moveable);
const target = moveable.state.target!;
const inputEvent = e.inputEvent;
const inputTarget = e.inputTarget;
if (
!inputEvent || !inputTarget || e.isDrag
|| moveable.isMoveableElement(inputTarget)
// External event duplicate target or dragAreaElement
) {
return;
}
const containsTarget = target.contains(inputTarget);
triggerEvent<ClickableProps>(moveable, "onClick", fillParams<OnClick>(moveable, e, {
isDouble: e.isDouble,
inputTarget,
isTarget: target === inputTarget,
containsTarget,
}));
},
dragGroupEnd(moveable: MoveableGroupInterface<ClickableProps>, e: any) {
this.endEvent(moveable);
const inputEvent = e.inputEvent;
const inputTarget = e.inputTarget;
if (
!inputEvent || !inputTarget || e.isDrag
|| moveable.isMoveableElement(inputTarget)
// External event duplicate target or dragAreaElement
|| e.datas.inputTarget === inputTarget
) {
return;
}
const targets = moveable.props.targets!;
let targetIndex = targets.indexOf(inputTarget);
const isTarget = targetIndex > -1;
let containsTarget = false;
if (targetIndex === -1) {
targetIndex = findIndex(targets, parentTarget => parentTarget.contains(inputTarget));
containsTarget = targetIndex > -1;
}
triggerEvent<ClickableProps>(moveable, "onClickGroup", fillParams<OnClickGroup>(moveable, e, {
isDouble: e.isDouble,
targets,
inputTarget,
targetIndex,
isTarget,
containsTarget,
}));
},
dragControlEnd(moveable: MoveableManagerInterface<ClickableProps>) {
this.endEvent(moveable);
},
dragGroupControlEnd(moveable: MoveableManagerInterface<ClickableProps>) {
this.endEvent(moveable);
},
endEvent(moveable: MoveableManagerInterface<ClickableProps>) {
requestAnimationFrame(() => {
this.unset(moveable);
});
},
unset(moveable: MoveableManagerInterface<ClickableProps>) {
removeEvent(window, "click", moveable.onPreventClick, true);
},
});
/**
* When you click on the element, the `click` event is called.
* @memberof Moveable
* @event click
* @param {Moveable.OnClick} - Parameters for the `click` event
* @example
* import Moveable from "moveable";
*
* const moveable = new Moveable(document.body, {
* target: document.querySelector(".target"),
* });
* moveable.on("click", ({ hasTarget, containsTarget, targetIndex }) => {
* // If you click on an element other than the target and not included in the target, index is -1.
* console.log("onClickGroup", target, hasTarget, containsTarget, targetIndex);
* });
*/
/**
* When you click on the element inside the group, the `clickGroup` event is called.
* @memberof Moveable
* @event clickGroup
* @param {Moveable.OnClickGroup} - Parameters for the `clickGroup` event
* @example
* import Moveable from "moveable";
*
* const moveable = new Moveable(document.body, {
* target: [].slice.call(document.querySelectorAll(".target")),
* });
* moveable.on("clickGroup", ({ inputTarget, isTarget, containsTarget, targetIndex }) => {
* // If you click on an element other than the target and not included in the target, index is -1.
* console.log("onClickGroup", inputTarget, isTarget, containsTarget, targetIndex);
* });
*/