@taiga-ui/cdk
Version:
Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance
78 lines (72 loc) • 3.7 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, Directive } from '@angular/core';
import { outputFromObservable } from '@angular/core/rxjs-interop';
import { DOCUMENT } from '@angular/common';
import { tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
import { Observable, merge, pairwise, filter, map } from 'rxjs';
const TUI_SWIPE_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_SWIPE_OPTIONS' : '', {
factory: () => ({
timeout: 500,
threshold: 30,
}),
});
class TuiSwipeService extends Observable {
constructor() {
const doc = inject(DOCUMENT);
const el = tuiInjectElement();
const { timeout, threshold } = inject(TUI_SWIPE_OPTIONS);
super((subscriber) => merge(tuiTypedFromEvent(el, 'touchstart', { passive: true }), tuiTypedFromEvent(doc, 'touchend'))
.pipe(pairwise(), filter(([first, second]) => !!first.touches.length &&
first.touches[0]?.identifier ===
second.changedTouches[0]?.identifier), map(([start, end]) => {
const startX = start.touches[0]?.clientX ?? 0;
const startY = start.touches[0]?.clientY ?? 0;
const endX = end.changedTouches[0]?.clientX ?? 0;
const endY = end.changedTouches[0]?.clientY ?? 0;
const distanceX = startX - endX;
const distanceY = startY - endY;
const duration = end.timeStamp - start.timeStamp;
return (Math.abs(distanceX) > threshold ||
Math.abs(distanceY) > threshold) &&
duration < timeout
? {
direction: tuiGetSwipeDirection(distanceX, distanceY),
events: [start, end],
}
: null;
}), filter(tuiIsPresent))
.subscribe(subscriber));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiSwipeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiSwipeService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiSwipeService, decorators: [{
type: Injectable
}], ctorParameters: () => [] });
function tuiGetSwipeDirection(deltaX, deltaY) {
if (Math.abs(deltaY) > Math.abs(deltaX)) {
return deltaY > 0 ? 'top' : 'bottom';
}
return deltaX > 0 ? 'left' : 'right';
}
class TuiSwipe {
constructor() {
this.tuiSwipe = outputFromObservable(inject(TuiSwipeService));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiSwipe, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiSwipe, isStandalone: true, selector: "[tuiSwipe]", outputs: { tuiSwipe: "tuiSwipe" }, providers: [TuiSwipeService], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiSwipe, decorators: [{
type: Directive,
args: [{
selector: '[tuiSwipe]',
providers: [TuiSwipeService],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_SWIPE_OPTIONS, TuiSwipe, TuiSwipeService };
//# sourceMappingURL=taiga-ui-cdk-directives-swipe.mjs.map