@ionic/core
Version:
Base components for Ionic
95 lines (91 loc) • 2.89 kB
JavaScript
import { h } from '../ionic.core.js';
import { b as now } from './chunk-6d7d2f8c.js';
import { GESTURE_CONTROLLER } from './chunk-f56eaea8.js';
class Backdrop {
constructor() {
this.lastClick = -10000;
this.blocker = GESTURE_CONTROLLER.createBlocker({
disableScroll: true
});
this.visible = true;
this.tappable = true;
this.stopPropagation = true;
}
componentDidLoad() {
if (this.stopPropagation) {
this.blocker.block();
}
}
componentDidUnload() {
this.blocker.destroy();
}
onTouchStart(ev) {
this.lastClick = now(ev);
this.emitTap(ev);
}
onMouseDown(ev) {
if (this.lastClick < now(ev) - 2500) {
this.emitTap(ev);
}
}
emitTap(ev) {
if (this.stopPropagation) {
ev.preventDefault();
ev.stopPropagation();
}
if (this.tappable) {
this.ionBackdropTap.emit();
}
}
hostData() {
return {
tabindex: '-1',
class: {
'backdrop-hide': !this.visible,
'backdrop-no-tappable': !this.tappable,
}
};
}
static get is() { return "ion-backdrop"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"doc": {
"context": "document"
},
"stopPropagation": {
"type": Boolean,
"attr": "stop-propagation"
},
"tappable": {
"type": Boolean,
"attr": "tappable"
},
"visible": {
"type": Boolean,
"attr": "visible"
}
}; }
static get events() { return [{
"name": "ionBackdropTap",
"method": "ionBackdropTap",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get listeners() { return [{
"name": "touchstart",
"method": "onTouchStart",
"capture": true
}, {
"name": "click",
"method": "onMouseDown",
"capture": true
}, {
"name": "mousedown",
"method": "onMouseDown",
"capture": true
}]; }
static get style() { return ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color,#000)}"; }
static get styleMode() { return "md"; }
}
export { Backdrop as IonBackdrop };