Skip to content

Commit 9bc2d13

Browse files
wenlngwenlng
committed
chroe: darg event
1 parent b2ed7ea commit 9bc2d13

File tree

8 files changed

+149
-31
lines changed

8 files changed

+149
-31
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "go-captcha-angular",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "This is the angular package for go-captcha",
55
"private": false,
66
"email": "[email protected]",

‎projects/example/src/app/app.component.ts

+7
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,13 @@ export class AppComponent {
108108
refresh(): void {
109109
console.log("refresh >>>>>>>")
110110
},
111+
confirm(point: any, clear: Function): void {
112+
console.log("point >>>>>>>", point)
113+
114+
setTimeout(() => {
115+
clear()
116+
}, 100)
117+
},
111118
close(): void {
112119
console.log("close >>>>>>>")
113120
}

‎projects/go-captcha-angular/src/lib/modules/rotate/rotate.component.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,12 @@
3535
</div>
3636
</div>
3737
<div class="gc-footer">
38-
<div class="gc-drag-slide-bar" #dragBarRef (mousedown)="dragEvent($event)">
38+
<div class="gc-drag-slide-bar" #dragBarRef>
3939
<div class="gc-drag-line"></div>
40-
<div class="gc-drag-block" #dragBlockRef (touchstart)="dragEvent($event)" [style]="{left: dragLeft + 'px'}">
41-
<arrows-icon></arrows-icon>
40+
<div class="gc-drag-block" #dragBlockRef (mousedown)="dragEvent($event)" [style]="{left: dragLeft + 'px'}">
41+
<div class="drag-block-inline" (touchstart)="dragEvent($event)">
42+
<arrows-icon></arrows-icon>
43+
</div>
4244
</div>
4345
</div>
4446
</div>

‎projects/go-captcha-angular/src/lib/modules/rotate/rotate.component.ts

+39-8
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export class RotateComponent {
4545

4646
let angle = 0
4747
let isMoving = false
48+
let tmpLeaveDragEvent: Event|any = null
4849
let startX = 0;
4950
if (touch) {
5051
startX = touch.pageX - offsetLeft
@@ -92,14 +93,8 @@ export class RotateComponent {
9293
return
9394
}
9495

95-
this.dragBarRef.nativeElement.removeEventListener("mousemove", moveEvent, false)
96-
this.dragBarRef.nativeElement.removeEventListener("touchmove", moveEvent, { passive: false })
97-
98-
this.dragBarRef.nativeElement.removeEventListener( "mouseup", upEvent, false)
99-
this.dragBarRef.nativeElement.removeEventListener( "mouseout", upEvent, false)
100-
this.dragBarRef.nativeElement.removeEventListener("touchend", upEvent, false)
101-
10296
isMoving = false
97+
clearEvent()
10398
this.events.confirm && this.events.confirm(parseInt(angle.toString()), () => {
10499
this.clear()
105100
})
@@ -108,11 +103,47 @@ export class RotateComponent {
108103
e.preventDefault()
109104
}
110105

106+
const leaveDragBlockEvent = (e: Event|any) => {
107+
tmpLeaveDragEvent = e
108+
}
109+
110+
const enterDragBlockEvent = () => {
111+
tmpLeaveDragEvent = null
112+
}
113+
114+
const leaveUpEvent = (_: Event|any) => {
115+
if(!tmpLeaveDragEvent) {
116+
return
117+
}
118+
119+
upEvent(tmpLeaveDragEvent)
120+
clearEvent()
121+
}
122+
123+
const clearEvent = () => {
124+
this.dragBarRef.nativeElement.removeEventListener("mousemove", moveEvent, false)
125+
this.dragBarRef.nativeElement.removeEventListener("touchmove", moveEvent, { passive: false })
126+
127+
this.dragBarRef.nativeElement.removeEventListener( "mouseup", upEvent, false)
128+
// this.dragBarRef.nativeElement.removeEventListener( "mouseout", upEvent, false)
129+
this.dragBarRef.nativeElement.removeEventListener( "mouseenter", enterDragBlockEvent, false)
130+
this.dragBarRef.nativeElement.removeEventListener( "mouseleave", leaveDragBlockEvent, false)
131+
this.dragBarRef.nativeElement.removeEventListener("touchend", upEvent, false)
132+
133+
document.body.removeEventListener("mouseleave", upEvent, false)
134+
document.body.removeEventListener("mouseup", leaveUpEvent, false)
135+
}
136+
111137
this.dragBarRef.nativeElement.addEventListener("mousemove", moveEvent, false)
112138
this.dragBarRef.nativeElement.addEventListener("touchmove", moveEvent, { passive: false })
113139
this.dragBarRef.nativeElement.addEventListener( "mouseup", upEvent, false)
114-
this.dragBarRef.nativeElement.addEventListener( "mouseout", upEvent, false)
140+
// this.dragBarRef.nativeElement.addEventListener( "mouseout", upEvent, false)
141+
this.dragBarRef.nativeElement.addEventListener( "mouseenter", enterDragBlockEvent, false)
142+
this.dragBarRef.nativeElement.addEventListener( "mouseleave", leaveDragBlockEvent, false)
115143
this.dragBarRef.nativeElement.addEventListener("touchend", upEvent, false)
144+
145+
document.body.addEventListener("mouseleave", upEvent, false)
146+
document.body.addEventListener("mouseup", leaveUpEvent, false)
116147
}
117148

118149
closeEvent = (e: Event|any) => {

‎projects/go-captcha-angular/src/lib/modules/slide-region/slide-region.component.ts

+39-8
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export class SlideRegionComponent {
5858
const maxHeight = height - tileHeight
5959

6060
let isMoving = false
61+
let tmpLeaveDragEvent: Event|any = null
6162
let startX = 0
6263
let startY = 0
6364
let tileLeft = 0
@@ -119,13 +120,7 @@ export class SlideRegionComponent {
119120
return
120121
}
121122
isMoving = false
122-
123-
this.containerRef.nativeElement.removeEventListener("mousemove", moveEvent, false)
124-
this.containerRef.nativeElement.removeEventListener("touchmove", moveEvent, { passive: false })
125-
126-
this.containerRef.nativeElement.removeEventListener( "mouseup", upEvent, false)
127-
this.containerRef.nativeElement.removeEventListener( "mouseout", upEvent, false)
128-
this.containerRef.nativeElement.removeEventListener("touchend", upEvent, false)
123+
clearEvent()
129124

130125
this.events.confirm && this.events.confirm({x: tileLeft, y: tileTop}, () => {
131126
this.clear()
@@ -135,11 +130,47 @@ export class SlideRegionComponent {
135130
e.preventDefault()
136131
}
137132

133+
const leaveDragBlockEvent = (e: Event|any) => {
134+
tmpLeaveDragEvent = e
135+
}
136+
137+
const enterDragBlockEvent = () => {
138+
tmpLeaveDragEvent = null
139+
}
140+
141+
const leaveUpEvent = (_: Event|any) => {
142+
if(!tmpLeaveDragEvent) {
143+
return
144+
}
145+
146+
upEvent(tmpLeaveDragEvent)
147+
clearEvent()
148+
}
149+
150+
const clearEvent = () => {
151+
this.containerRef.nativeElement.removeEventListener("mousemove", moveEvent, false)
152+
this.containerRef.nativeElement.removeEventListener("touchmove", moveEvent, { passive: false })
153+
154+
this.containerRef.nativeElement.removeEventListener( "mouseup", upEvent, false)
155+
// this.containerRef.nativeElement.removeEventListener( "mouseout", upEvent, false)
156+
this.containerRef.nativeElement.removeEventListener( "mouseenter", enterDragBlockEvent, false)
157+
this.containerRef.nativeElement.removeEventListener( "mouseleave", leaveDragBlockEvent, false)
158+
this.containerRef.nativeElement.removeEventListener("touchend", upEvent, false)
159+
160+
document.body.removeEventListener("mouseleave", upEvent, false)
161+
document.body.removeEventListener("mouseup", leaveUpEvent, false)
162+
}
163+
138164
this.containerRef.nativeElement.addEventListener("mousemove", moveEvent, false)
139165
this.containerRef.nativeElement.addEventListener("touchmove", moveEvent, { passive: false })
140166
this.containerRef.nativeElement.addEventListener( "mouseup", upEvent, false)
141-
this.containerRef.nativeElement.addEventListener( "mouseout", upEvent, false)
167+
// this.containerRef.nativeElement.addEventListener( "mouseout", upEvent, false)
168+
this.containerRef.nativeElement.addEventListener( "mouseenter", enterDragBlockEvent, false)
169+
this.containerRef.nativeElement.addEventListener( "mouseleave", leaveDragBlockEvent, false)
142170
this.containerRef.nativeElement.addEventListener("touchend", upEvent, false)
171+
172+
document.body.addEventListener("mouseleave", upEvent, false)
173+
document.body.addEventListener("mouseup", leaveUpEvent, false)
143174
}
144175

145176
closeEvent(e: Event|any){

‎projects/go-captcha-angular/src/lib/modules/slide/slide.component.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,12 @@
3939
</div>
4040
</div>
4141
<div class="gc-footer">
42-
<div class="gc-drag-slide-bar" #dragBarRef (mousedown)="dragEvent($event)">
42+
<div class="gc-drag-slide-bar" #dragBarRef>
4343
<div class="gc-drag-line"></div>
44-
<div class="gc-drag-block" #dragBlockRef (touchstart)="dragEvent($event)" [style]="{left: state.dragLeft + 'px'}">
45-
<arrows-icon></arrows-icon>
44+
<div class="gc-drag-block" #dragBlockRef (mousedown)="dragEvent($event)" [style]="{left: state.dragLeft + 'px'}">
45+
<div class="drag-block-inline" (touchstart)="dragEvent($event)">
46+
<arrows-icon></arrows-icon>
47+
</div>
4648
</div>
4749
</div>
4850
</div>

‎projects/go-captcha-angular/src/lib/modules/slide/slide.component.ts

+39-8
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export class SlideComponent {
5959
const ratio = ((maxWidth - thumbX) + ad) / maxWidth
6060

6161
let isMoving = false
62+
let tmpLeaveDragEvent: Event|any = null
6263
let startX = 0
6364
let currentThumbX = 0
6465
if (touch) {
@@ -107,14 +108,8 @@ export class SlideComponent {
107108
return
108109
}
109110

110-
this.dragBarRef.nativeElement.removeEventListener("mousemove", moveEvent, false)
111-
this.dragBarRef.nativeElement.removeEventListener("touchmove", moveEvent, { passive: false })
112-
113-
this.dragBarRef.nativeElement.removeEventListener( "mouseup", upEvent, false)
114-
this.dragBarRef.nativeElement.removeEventListener( "mouseout", upEvent, false)
115-
this.dragBarRef.nativeElement.removeEventListener("touchend", upEvent, false)
116-
117111
isMoving = false
112+
clearEvent()
118113
this.events.confirm && this.events.confirm({x: parseInt(currentThumbX.toString()), y: this.data.thumbY || 0}, () => {
119114
this.clear()
120115
})
@@ -123,11 +118,47 @@ export class SlideComponent {
123118
e.preventDefault()
124119
}
125120

121+
const leaveDragBlockEvent = (e: Event|any) => {
122+
tmpLeaveDragEvent = e
123+
}
124+
125+
const enterDragBlockEvent = () => {
126+
tmpLeaveDragEvent = null
127+
}
128+
129+
const leaveUpEvent = (_: Event|any) => {
130+
if(!tmpLeaveDragEvent) {
131+
return
132+
}
133+
134+
upEvent(tmpLeaveDragEvent)
135+
clearEvent()
136+
}
137+
138+
const clearEvent = () => {
139+
this.dragBarRef.nativeElement.removeEventListener("mousemove", moveEvent, false)
140+
this.dragBarRef.nativeElement.removeEventListener("touchmove", moveEvent, { passive: false })
141+
142+
this.dragBarRef.nativeElement.removeEventListener( "mouseup", upEvent, false)
143+
// this.dragBarRef.nativeElement.removeEventListener( "mouseout", upEvent, false)
144+
this.dragBarRef.nativeElement.removeEventListener( "mouseenter", enterDragBlockEvent, false)
145+
this.dragBarRef.nativeElement.removeEventListener( "mouseleave", leaveDragBlockEvent, false)
146+
this.dragBarRef.nativeElement.removeEventListener("touchend", upEvent, false)
147+
148+
document.body.removeEventListener("mouseleave", upEvent, false)
149+
document.body.removeEventListener("mouseup", leaveUpEvent, false)
150+
}
151+
126152
this.dragBarRef.nativeElement.addEventListener("mousemove", moveEvent, false)
127153
this.dragBarRef.nativeElement.addEventListener("touchmove", moveEvent, { passive: false })
128154
this.dragBarRef.nativeElement.addEventListener( "mouseup", upEvent, false)
129-
this.dragBarRef.nativeElement.addEventListener( "mouseout", upEvent, false)
155+
// this.dragBarRef.nativeElement.addEventListener( "mouseout", upEvent, false)
156+
this.dragBarRef.nativeElement.addEventListener( "mouseenter", enterDragBlockEvent, false)
157+
this.dragBarRef.nativeElement.addEventListener( "mouseleave", leaveDragBlockEvent, false)
130158
this.dragBarRef.nativeElement.addEventListener("touchend", upEvent, false)
159+
160+
document.body.addEventListener("mouseleave", upEvent, false)
161+
document.body.addEventListener("mouseup", leaveUpEvent, false)
131162
}
132163

133164
closeEvent(e: Event|any) {

‎projects/go-captcha-angular/src/scss/go-captcha.scss

+14
Original file line numberDiff line numberDiff line change
@@ -276,4 +276,18 @@
276276
color: var(--go-captcha-theme-drag-icon-color);
277277
fill: var(--go-captcha-theme-drag-icon-color);
278278
}
279+
280+
.drag-block-inline {
281+
width: 100%;
282+
height: 100%;
283+
display: flex;
284+
align-items: center;
285+
justify-content: center;
286+
287+
& > *{
288+
display: flex;
289+
align-items: center;
290+
justify-content: center;
291+
}
292+
}
279293
}

0 commit comments

Comments
 (0)