@taiga-ui/event-plugins
Version:
This is a library for optimizing performance sensitive events and declarative preventDefault and stopPropagation
78 lines • 12.4 kB
JavaScript
import { LongtapEvent } from '../types/longtap.event';
import { isIos } from '../utils/is-ios';
const TAP_DELAY = 700;
const SAFE_NAVIGATOR = typeof navigator === 'undefined' ? null : navigator;
const MOVE_THRESHOLD = 15;
export class LongtapEventPlugin {
constructor() {
this.isIOS = !!SAFE_NAVIGATOR && isIos(SAFE_NAVIGATOR);
}
addEventListener(element, _event, handler) {
const removeLongtapEventPolyfill = this.isIOS
? this.listenTouchEvents(element)
: this.listenContextmenuEvent(element);
element.addEventListener('longtap', handler);
return () => {
removeLongtapEventPolyfill();
element.removeEventListener('longtap', handler);
};
}
supports(event) {
return event === 'longtap';
}
listenContextmenuEvent(element) {
return this.manager.addEventListener(element, 'contextmenu.prevent.stop', ({ clientX, clientY }) => {
this.dispatchLongtapEvent(element, clientX, clientY);
});
}
listenTouchEvents(element) {
let longTapTimeout = null;
let touchStartCoords = null;
const reset = () => {
clearTimeout(longTapTimeout);
touchStartCoords = null;
longTapTimeout = null;
};
const removeTouchstartListener = this.manager.addEventListener(element, 'touchstart.zoneless.passive', ({ touches }) => {
const touch = touches[0];
if (!touch) {
return;
}
const { clientX, clientY } = touch;
touchStartCoords = { clientX, clientY };
longTapTimeout = setTimeout(() => {
this.dispatchLongtapEvent(element, clientX, clientY);
reset();
}, TAP_DELAY);
});
const removeTouchmoveListener = this.manager.addEventListener(element, 'touchmove.zoneless.passive', ({ touches }) => {
const touch = touches[0];
if (!touch || !touchStartCoords) {
return;
}
const { clientX, clientY } = touch;
if (Math.hypot(clientX - touchStartCoords.clientX, clientY - touchStartCoords.clientY) <= MOVE_THRESHOLD) {
return;
}
reset();
});
const removeTouchcancelListener = this.manager.addEventListener(element, 'touchcancel.zoneless.passive', reset);
const removeTouchendListener = this.manager.addEventListener(element, 'touchend.zoneless.passive', reset);
return () => {
removeTouchstartListener();
removeTouchmoveListener();
removeTouchcancelListener();
removeTouchendListener();
};
}
dispatchLongtapEvent(element, clientX, clientY) {
element.dispatchEvent(new LongtapEvent('longtap', {
clientX,
clientY,
bubbles: false,
cancelable: false,
composed: false,
}));
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9uZ3RhcC5ldmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWV2ZW50LXBsdWdpbnMvc3JjL2V2ZW50cy9sb25ndGFwLmV2ZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUNwRCxPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFFdEMsTUFBTSxTQUFTLEdBQUcsR0FBRyxDQUFDO0FBQ3RCLE1BQU0sY0FBYyxHQUFHLE9BQU8sU0FBUyxLQUFLLFdBQVcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7QUFDM0UsTUFBTSxjQUFjLEdBQUcsRUFBRSxDQUFDO0FBRTFCLE1BQU0sT0FBTyxrQkFBa0I7SUFBL0I7UUFDcUIsVUFBSyxHQUFHLENBQUMsQ0FBQyxjQUFjLElBQUksS0FBSyxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBa0l2RSxDQUFDO0lBOUhVLGdCQUFnQixDQUNuQixPQUFvQixFQUNwQixNQUFjLEVBQ2QsT0FBK0I7UUFFL0IsTUFBTSwwQkFBMEIsR0FBRyxJQUFJLENBQUMsS0FBSztZQUN6QyxDQUFDLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLE9BQU8sQ0FBQztZQUNqQyxDQUFDLENBQUMsSUFBSSxDQUFDLHNCQUFzQixDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBRTNDLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxTQUFTLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFFN0MsT0FBTyxHQUFHLEVBQUU7WUFDUiwwQkFBMEIsRUFBRSxDQUFDO1lBRTdCLE9BQU8sQ0FBQyxtQkFBbUIsQ0FBQyxTQUFTLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFDcEQsQ0FBQyxDQUFDO0lBQ04sQ0FBQztJQUVNLFFBQVEsQ0FBQyxLQUFhO1FBQ3pCLE9BQU8sS0FBSyxLQUFLLFNBQVMsQ0FBQztJQUMvQixDQUFDO0lBRU8sc0JBQXNCLENBQUMsT0FBb0I7UUFDL0MsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLGdCQUFnQixDQUNoQyxPQUFPLEVBQ1AsMEJBQTBCLEVBQzFCLENBQUMsRUFBQyxPQUFPLEVBQUUsT0FBTyxFQUFhLEVBQUUsRUFBRTtZQUMvQixJQUFJLENBQUMsb0JBQW9CLENBQUMsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLENBQUMsQ0FBQztRQUN6RCxDQUFDLENBQ0osQ0FBQztJQUNOLENBQUM7SUFFTyxpQkFBaUIsQ0FBQyxPQUFvQjtRQUMxQyxJQUFJLGNBQWMsR0FBUSxJQUFJLENBQUM7UUFDL0IsSUFBSSxnQkFBZ0IsR0FHVCxJQUFJLENBQUM7UUFFaEIsTUFBTSxLQUFLLEdBQUcsR0FBUyxFQUFFO1lBQ3JCLFlBQVksQ0FBQyxjQUFjLENBQUMsQ0FBQztZQUM3QixnQkFBZ0IsR0FBRyxJQUFJLENBQUM7WUFDeEIsY0FBYyxHQUFHLElBQUksQ0FBQztRQUMxQixDQUFDLENBQUM7UUFFRixNQUFNLHdCQUF3QixHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQzFELE9BQU8sRUFDUCw2QkFBNkIsRUFDN0IsQ0FBQyxFQUFDLE9BQU8sRUFBYSxFQUFFLEVBQUU7WUFDdEIsTUFBTSxLQUFLLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBRXpCLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQ1IsT0FBTzthQUNWO1lBRUQsTUFBTSxFQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUMsR0FBRyxLQUFLLENBQUM7WUFFakMsZ0JBQWdCLEdBQUcsRUFBQyxPQUFPLEVBQUUsT0FBTyxFQUFDLENBQUM7WUFFdEMsY0FBYyxHQUFHLFVBQVUsQ0FBQyxHQUFHLEVBQUU7Z0JBQzdCLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxPQUFPLEVBQUUsT0FBTyxFQUFFLE9BQU8sQ0FBQyxDQUFDO2dCQUNyRCxLQUFLLEVBQUUsQ0FBQztZQUNaLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQztRQUNsQixDQUFDLENBQ0osQ0FBQztRQUVGLE1BQU0sdUJBQXVCLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FDekQsT0FBTyxFQUNQLDRCQUE0QixFQUM1QixDQUFDLEVBQUMsT0FBTyxFQUFhLEVBQUUsRUFBRTtZQUN0QixNQUFNLEtBQUssR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFFekIsSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLGdCQUFnQixFQUFFO2dCQUM3QixPQUFPO2FBQ1Y7WUFFRCxNQUFNLEVBQUMsT0FBTyxFQUFFLE9BQU8sRUFBQyxHQUFHLEtBQUssQ0FBQztZQUVqQyxJQUNJLElBQUksQ0FBQyxLQUFLLENBQ04sT0FBTyxHQUFHLGdCQUFnQixDQUFDLE9BQU8sRUFDbEMsT0FBTyxHQUFHLGdCQUFnQixDQUFDLE9BQU8sQ0FDckMsSUFBSSxjQUFjLEVBQ3JCO2dCQUNFLE9BQU87YUFDVjtZQUVELEtBQUssRUFBRSxDQUFDO1FBQ1osQ0FBQyxDQUNKLENBQUM7UUFFRixNQUFNLHlCQUF5QixHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQzNELE9BQU8sRUFDUCw4QkFBOEIsRUFDOUIsS0FBSyxDQUNSLENBQUM7UUFFRixNQUFNLHNCQUFzQixHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQ3hELE9BQU8sRUFDUCwyQkFBMkIsRUFDM0IsS0FBSyxDQUNSLENBQUM7UUFFRixPQUFPLEdBQUcsRUFBRTtZQUNSLHdCQUF3QixFQUFFLENBQUM7WUFDM0IsdUJBQXVCLEVBQUUsQ0FBQztZQUMxQix5QkFBeUIsRUFBRSxDQUFDO1lBQzVCLHNCQUFzQixFQUFFLENBQUM7UUFDN0IsQ0FBQyxDQUFDO0lBQ04sQ0FBQztJQUVPLG9CQUFvQixDQUN4QixPQUFvQixFQUNwQixPQUFlLEVBQ2YsT0FBZTtRQUVmLE9BQU8sQ0FBQyxhQUFhLENBQ2pCLElBQUksWUFBWSxDQUFDLFNBQVMsRUFBRTtZQUN4QixPQUFPO1lBQ1AsT0FBTztZQUNQLE9BQU8sRUFBRSxLQUFLO1lBQ2QsVUFBVSxFQUFFLEtBQUs7WUFDakIsUUFBUSxFQUFFLEtBQUs7U0FDbEIsQ0FBQyxDQUNMLENBQUM7SUFDTixDQUFDO0NBQ0oiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7RXZlbnRNYW5hZ2VyfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcblxuaW1wb3J0IHR5cGUge0V2ZW50TWFuYWdlclBsdWdpbn0gZnJvbSAnLi4vdHlwZXMvZXZlbnQtbWFuYWdlci1wbHVnaW4nO1xuaW1wb3J0IHtMb25ndGFwRXZlbnR9IGZyb20gJy4uL3R5cGVzL2xvbmd0YXAuZXZlbnQnO1xuaW1wb3J0IHtpc0lvc30gZnJvbSAnLi4vdXRpbHMvaXMtaW9zJztcblxuY29uc3QgVEFQX0RFTEFZID0gNzAwO1xuY29uc3QgU0FGRV9OQVZJR0FUT1IgPSB0eXBlb2YgbmF2aWdhdG9yID09PSAndW5kZWZpbmVkJyA/IG51bGwgOiBuYXZpZ2F0b3I7XG5jb25zdCBNT1ZFX1RIUkVTSE9MRCA9IDE1O1xuXG5leHBvcnQgY2xhc3MgTG9uZ3RhcEV2ZW50UGx1Z2luIGltcGxlbWVudHMgRXZlbnRNYW5hZ2VyUGx1Z2luIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGlzSU9TID0gISFTQUZFX05BVklHQVRPUiAmJiBpc0lvcyhTQUZFX05BVklHQVRPUik7XG5cbiAgICBwdWJsaWMgcmVhZG9ubHkgbWFuYWdlciE6IEV2ZW50TWFuYWdlcjtcblxuICAgIHB1YmxpYyBhZGRFdmVudExpc3RlbmVyKFxuICAgICAgICBlbGVtZW50OiBIVE1MRWxlbWVudCxcbiAgICAgICAgX2V2ZW50OiBzdHJpbmcsXG4gICAgICAgIGhhbmRsZXI6IChldmVudDogRXZlbnQpID0+IHZvaWQsXG4gICAgKTogRnVuY3Rpb24ge1xuICAgICAgICBjb25zdCByZW1vdmVMb25ndGFwRXZlbnRQb2x5ZmlsbCA9IHRoaXMuaXNJT1NcbiAgICAgICAgICAgID8gdGhpcy5saXN0ZW5Ub3VjaEV2ZW50cyhlbGVtZW50KVxuICAgICAgICAgICAgOiB0aGlzLmxpc3RlbkNvbnRleHRtZW51RXZlbnQoZWxlbWVudCk7XG5cbiAgICAgICAgZWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCdsb25ndGFwJywgaGFuZGxlcik7XG5cbiAgICAgICAgcmV0dXJuICgpID0+IHtcbiAgICAgICAgICAgIHJlbW92ZUxvbmd0YXBFdmVudFBvbHlmaWxsKCk7XG5cbiAgICAgICAgICAgIGVsZW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbG9uZ3RhcCcsIGhhbmRsZXIpO1xuICAgICAgICB9O1xuICAgIH1cblxuICAgIHB1YmxpYyBzdXBwb3J0cyhldmVudDogc3RyaW5nKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiBldmVudCA9PT0gJ2xvbmd0YXAnO1xuICAgIH1cblxuICAgIHByaXZhdGUgbGlzdGVuQ29udGV4dG1lbnVFdmVudChlbGVtZW50OiBIVE1MRWxlbWVudCk6IEZ1bmN0aW9uIHtcbiAgICAgICAgcmV0dXJuIHRoaXMubWFuYWdlci5hZGRFdmVudExpc3RlbmVyKFxuICAgICAgICAgICAgZWxlbWVudCxcbiAgICAgICAgICAgICdjb250ZXh0bWVudS5wcmV2ZW50LnN0b3AnLFxuICAgICAgICAgICAgKHtjbGllbnRYLCBjbGllbnRZfTogTW91c2VFdmVudCkgPT4ge1xuICAgICAgICAgICAgICAgIHRoaXMuZGlzcGF0Y2hMb25ndGFwRXZlbnQoZWxlbWVudCwgY2xpZW50WCwgY2xpZW50WSk7XG4gICAgICAgICAgICB9LFxuICAgICAgICApO1xuICAgIH1cblxuICAgIHByaXZhdGUgbGlzdGVuVG91Y2hFdmVudHMoZWxlbWVudDogSFRNTEVsZW1lbnQpOiBGdW5jdGlvbiB7XG4gICAgICAgIGxldCBsb25nVGFwVGltZW91dDogYW55ID0gbnVsbDtcbiAgICAgICAgbGV0IHRvdWNoU3RhcnRDb29yZHM6IHtcbiAgICAgICAgICAgIGNsaWVudFg6IG51bWJlcjtcbiAgICAgICAgICAgIGNsaWVudFk6IG51bWJlcjtcbiAgICAgICAgfSB8IG51bGwgPSBudWxsO1xuXG4gICAgICAgIGNvbnN0IHJlc2V0ID0gKCk6IHZvaWQgPT4ge1xuICAgICAgICAgICAgY2xlYXJUaW1lb3V0KGxvbmdUYXBUaW1lb3V0KTtcbiAgICAgICAgICAgIHRvdWNoU3RhcnRDb29yZHMgPSBudWxsO1xuICAgICAgICAgICAgbG9uZ1RhcFRpbWVvdXQgPSBudWxsO1xuICAgICAgICB9O1xuXG4gICAgICAgIGNvbnN0IHJlbW92ZVRvdWNoc3RhcnRMaXN0ZW5lciA9IHRoaXMubWFuYWdlci5hZGRFdmVudExpc3RlbmVyKFxuICAgICAgICAgICAgZWxlbWVudCxcbiAgICAgICAgICAgICd0b3VjaHN0YXJ0LnpvbmVsZXNzLnBhc3NpdmUnLFxuICAgICAgICAgICAgKHt0b3VjaGVzfTogVG91Y2hFdmVudCkgPT4ge1xuICAgICAgICAgICAgICAgIGNvbnN0IHRvdWNoID0gdG91Y2hlc1swXTtcblxuICAgICAgICAgICAgICAgIGlmICghdG91Y2gpIHtcbiAgICAgICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgICAgIGNvbnN0IHtjbGllbnRYLCBjbGllbnRZfSA9IHRvdWNoO1xuXG4gICAgICAgICAgICAgICAgdG91Y2hTdGFydENvb3JkcyA9IHtjbGllbnRYLCBjbGllbnRZfTtcblxuICAgICAgICAgICAgICAgIGxvbmdUYXBUaW1lb3V0ID0gc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMuZGlzcGF0Y2hMb25ndGFwRXZlbnQoZWxlbWVudCwgY2xpZW50WCwgY2xpZW50WSk7XG4gICAgICAgICAgICAgICAgICAgIHJlc2V0KCk7XG4gICAgICAgICAgICAgICAgfSwgVEFQX0RFTEFZKTtcbiAgICAgICAgICAgIH0sXG4gICAgICAgICk7XG5cbiAgICAgICAgY29uc3QgcmVtb3ZlVG91Y2htb3ZlTGlzdGVuZXIgPSB0aGlzLm1hbmFnZXIuYWRkRXZlbnRMaXN0ZW5lcihcbiAgICAgICAgICAgIGVsZW1lbnQsXG4gICAgICAgICAgICAndG91Y2htb3ZlLnpvbmVsZXNzLnBhc3NpdmUnLFxuICAgICAgICAgICAgKHt0b3VjaGVzfTogVG91Y2hFdmVudCkgPT4ge1xuICAgICAgICAgICAgICAgIGNvbnN0IHRvdWNoID0gdG91Y2hlc1swXTtcblxuICAgICAgICAgICAgICAgIGlmICghdG91Y2ggfHwgIXRvdWNoU3RhcnRDb29yZHMpIHtcbiAgICAgICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgICAgIGNvbnN0IHtjbGllbnRYLCBjbGllbnRZfSA9IHRvdWNoO1xuXG4gICAgICAgICAgICAgICAgaWYgKFxuICAgICAgICAgICAgICAgICAgICBNYXRoLmh5cG90KFxuICAgICAgICAgICAgICAgICAgICAgICAgY2xpZW50WCAtIHRvdWNoU3RhcnRDb29yZHMuY2xpZW50WCxcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsaWVudFkgLSB0b3VjaFN0YXJ0Q29vcmRzLmNsaWVudFksXG4gICAgICAgICAgICAgICAgICAgICkgPD0gTU9WRV9USFJFU0hPTERcbiAgICAgICAgICAgICAgICApIHtcbiAgICAgICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgICAgIHJlc2V0KCk7XG4gICAgICAgICAgICB9LFxuICAgICAgICApO1xuXG4gICAgICAgIGNvbnN0IHJlbW92ZVRvdWNoY2FuY2VsTGlzdGVuZXIgPSB0aGlzLm1hbmFnZXIuYWRkRXZlbnRMaXN0ZW5lcihcbiAgICAgICAgICAgIGVsZW1lbnQsXG4gICAgICAgICAgICAndG91Y2hjYW5jZWwuem9uZWxlc3MucGFzc2l2ZScsXG4gICAgICAgICAgICByZXNldCxcbiAgICAgICAgKTtcblxuICAgICAgICBjb25zdCByZW1vdmVUb3VjaGVuZExpc3RlbmVyID0gdGhpcy5tYW5hZ2VyLmFkZEV2ZW50TGlzdGVuZXIoXG4gICAgICAgICAgICBlbGVtZW50LFxuICAgICAgICAgICAgJ3RvdWNoZW5kLnpvbmVsZXNzLnBhc3NpdmUnLFxuICAgICAgICAgICAgcmVzZXQsXG4gICAgICAgICk7XG5cbiAgICAgICAgcmV0dXJuICgpID0+IHtcbiAgICAgICAgICAgIHJlbW92ZVRvdWNoc3RhcnRMaXN0ZW5lcigpO1xuICAgICAgICAgICAgcmVtb3ZlVG91Y2htb3ZlTGlzdGVuZXIoKTtcbiAgICAgICAgICAgIHJlbW92ZVRvdWNoY2FuY2VsTGlzdGVuZXIoKTtcbiAgICAgICAgICAgIHJlbW92ZVRvdWNoZW5kTGlzdGVuZXIoKTtcbiAgICAgICAgfTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGRpc3BhdGNoTG9uZ3RhcEV2ZW50KFxuICAgICAgICBlbGVtZW50OiBIVE1MRWxlbWVudCxcbiAgICAgICAgY2xpZW50WDogbnVtYmVyLFxuICAgICAgICBjbGllbnRZOiBudW1iZXIsXG4gICAgKTogdm9pZCB7XG4gICAgICAgIGVsZW1lbnQuZGlzcGF0Y2hFdmVudChcbiAgICAgICAgICAgIG5ldyBMb25ndGFwRXZlbnQoJ2xvbmd0YXAnLCB7XG4gICAgICAgICAgICAgICAgY2xpZW50WCxcbiAgICAgICAgICAgICAgICBjbGllbnRZLFxuICAgICAgICAgICAgICAgIGJ1YmJsZXM6IGZhbHNlLFxuICAgICAgICAgICAgICAgIGNhbmNlbGFibGU6IGZhbHNlLFxuICAgICAgICAgICAgICAgIGNvbXBvc2VkOiBmYWxzZSxcbiAgICAgICAgICAgIH0pLFxuICAgICAgICApO1xuICAgIH1cbn1cbiJdfQ==