/
backdrop.tsx
89 lines (75 loc) · 1.93 KB
/
backdrop.tsx
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
import { Component, ComponentInterface, Event, EventEmitter, Listen, Prop } from '@stencil/core';
import { Mode } from '../../interface';
import { GESTURE_CONTROLLER } from '../../utils/gesture';
import { now } from '../../utils/helpers';
@Component({
tag: 'ion-backdrop',
styleUrls: {
ios: 'backdrop.ios.scss',
md: 'backdrop.md.scss'
},
shadow: true
})
export class Backdrop implements ComponentInterface {
mode!: Mode;
private lastClick = -10000;
private blocker = GESTURE_CONTROLLER.createBlocker({
disableScroll: true
});
@Prop({ context: 'document' }) doc!: Document;
/**
* If `true`, the backdrop will be visible.
*/
@Prop() visible = true;
/**
* If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
*/
@Prop() tappable = true;
/**
* If `true`, the backdrop will stop propagation on tap.
*/
@Prop() stopPropagation = true;
/**
* Emitted when the backdrop is tapped.
*/
@Event() ionBackdropTap!: EventEmitter<void>;
componentDidLoad() {
if (this.stopPropagation) {
this.blocker.block();
}
}
componentDidUnload() {
this.blocker.destroy();
}
@Listen('touchstart', { passive: false, capture: true })
protected onTouchStart(ev: TouchEvent) {
this.lastClick = now(ev);
this.emitTap(ev);
}
@Listen('click', { passive: false, capture: true })
@Listen('mousedown', { passive: false, capture: true })
protected onMouseDown(ev: TouchEvent) {
if (this.lastClick < now(ev) - 2500) {
this.emitTap(ev);
}
}
private emitTap(ev: Event) {
if (this.stopPropagation) {
ev.preventDefault();
ev.stopPropagation();
}
if (this.tappable) {
this.ionBackdropTap.emit();
}
}
hostData() {
return {
tabindex: '-1',
class: {
[`${this.mode}`]: true,
'backdrop-hide': !this.visible,
'backdrop-no-tappable': !this.tappable,
}
};
}
}