Skip to content

Commit 7d1d081

Browse files
authored
Merge pull request #1462 from adumesny/h5
h5: event handler as methods
2 parents c45f9a8 + 5d264ce commit 7d1d081

File tree

3 files changed

+30
-12
lines changed

3 files changed

+30
-12
lines changed

src/dragdrop/dd-draggable.ts

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,13 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
5454
super();
5555
this.el = el;
5656
this.option = option;
57+
// create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
58+
this.mouseDown = this.mouseDown.bind(this);
59+
this.dragStart = this.dragStart.bind(this);
60+
this.drag = this.drag.bind(this);
61+
this.dragEnd = this.dragEnd.bind(this);
62+
this.dragFollow = this.dragFollow.bind(this);
63+
5764
this.init();
5865
}
5966

@@ -106,11 +113,11 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
106113
return this;
107114
}
108115

109-
private mouseDown = (event: MouseEvent): void => {
116+
private mouseDown(event: MouseEvent): void {
110117
this.mouseDownElement = event.target as HTMLElement;
111118
}
112119

113-
private dragStart = (event: DragEvent): void => {
120+
private dragStart(event: DragEvent): void {
114121
if (this.option.handle && !(
115122
this.mouseDownElement
116123
&& this.mouseDownElement.matches(
@@ -149,7 +156,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
149156
return this;
150157
}
151158

152-
private drag = (event: DragEvent): void => {
159+
private drag(event: DragEvent): void {
153160
this.dragFollow(event);
154161
const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'drag' });
155162
if (this.option.drag) {
@@ -158,7 +165,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
158165
this.triggerEvent('drag', ev);
159166
}
160167

161-
private dragEnd = (event: DragEvent): void => {
168+
private dragEnd(event: DragEvent): void {
162169
if (this.dragFollowTimer) {
163170
clearTimeout(this.dragFollowTimer);
164171
delete this.dragFollowTimer;
@@ -229,7 +236,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
229236
return this;
230237
}
231238

232-
private dragFollow = (event: DragEvent): void => {
239+
private dragFollow(event: DragEvent): void {
233240
if (this.paintTimer) {
234241
cancelAnimationFrame(this.paintTimer);
235242
}

src/dragdrop/dd-droppable.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
2929
super();
3030
this.el = el;
3131
this.option = opts;
32+
// create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
33+
this.dragEnter = this.dragEnter.bind(this);
34+
this.dragOver = this.dragOver.bind(this);
35+
this.dragLeave = this.dragLeave.bind(this);
36+
this.drop = this.drop.bind(this);
37+
3238
this.init();
3339
}
3440

@@ -80,7 +86,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
8086
return this;
8187
}
8288

83-
protected dragEnter = (event: DragEvent): void => {
89+
protected dragEnter(event: DragEvent): void {
8490
this.el.removeEventListener('dragenter', this.dragEnter);
8591
this.acceptable = this.canDrop();
8692
if (this.acceptable) {
@@ -97,12 +103,12 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
97103
this.el.addEventListener('dragleave', this.dragLeave);
98104
}
99105

100-
private dragOver = (event: DragEvent): void => {
106+
private dragOver(event: DragEvent): void {
101107
event.preventDefault();
102108
event.stopPropagation();
103109
}
104110

105-
private dragLeave = (event: DragEvent): void => {
111+
private dragLeave(event: DragEvent): void {
106112
if (this.el.contains(event.relatedTarget as HTMLElement)) { return; }
107113
this.el.removeEventListener('dragleave', this.dragLeave);
108114
this.el.classList.remove('ui-droppable-over');
@@ -119,7 +125,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
119125
this.el.addEventListener('dragenter', this.dragEnter);
120126
}
121127

122-
private drop = (event: DragEvent): void => {
128+
private drop(event: DragEvent): void {
123129
if (this.acceptable) {
124130
event.preventDefault();
125131
const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'drop' });

src/dragdrop/dd-resizable-handle.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ export class DDResizableHandle {
2525
this.host = host;
2626
this.dir = direction;
2727
this.option = option;
28+
// create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
29+
this.mouseDown = this.mouseDown.bind(this);
30+
this.mouseMove = this.mouseMove.bind(this);
31+
this.mouseUp = this.mouseUp.bind(this);
32+
2833
this.init();
2934
}
3035

@@ -40,7 +45,7 @@ export class DDResizableHandle {
4045
return this;
4146
}
4247

43-
private mouseDown = (event: MouseEvent): void => {
48+
private mouseDown(event: MouseEvent): void {
4449
this.mouseDownEvent = event;
4550
setTimeout(() => {
4651
document.addEventListener('mousemove', this.mouseMove, true);
@@ -55,7 +60,7 @@ export class DDResizableHandle {
5560
}, 100);
5661
}
5762

58-
private mouseMove = (event: MouseEvent): void => {
63+
private mouseMove(event: MouseEvent): void {
5964
if (!this.started && !this.mouseMoving) {
6065
if (this.hasMoved(event, this.mouseDownEvent)) {
6166
this.mouseMoving = true;
@@ -68,7 +73,7 @@ export class DDResizableHandle {
6873
}
6974
}
7075

71-
private mouseUp = (event: MouseEvent): void => {
76+
private mouseUp(event: MouseEvent): void {
7277
if (this.mouseMoving) {
7378
this.triggerEvent('stop', event);
7479
}

0 commit comments

Comments
 (0)