UNPKG

@taiga-ui/addon-mobile

Version:

Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.

1 lines 6.13 kB
{"version":3,"file":"taiga-ui-addon-mobile-directives-touchable.mjs","sources":["../../../projects/addon-mobile/directives/touchable/touchable.directive.ts","../../../projects/addon-mobile/directives/touchable/taiga-ui-addon-mobile-directives-touchable.ts"],"sourcesContent":["import {Directive, inject, Input} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {tuiTypedFromEvent} from '@taiga-ui/cdk/observables';\nimport {TUI_IS_IOS} from '@taiga-ui/cdk/tokens';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {filter, map, race, switchMap, take, tap} from 'rxjs';\n\nconst STYLE = {\n transform: 'scale(0.95)',\n opacity: '0.6',\n background: 'rgba(146, 153, 162, 0.12)',\n} as const;\n\nexport function tuiFindTouchIndex(touches: TouchList, id: number): number {\n for (let i = 0; i < touches.length; i++) {\n if (touches[i]?.identifier === id) {\n return i;\n }\n }\n\n return -1;\n}\n\n@Directive({\n standalone: true,\n selector: '[tuiTouchable]',\n})\nexport class TuiTouchable {\n private readonly isIOS = inject(TUI_IS_IOS);\n private readonly el = tuiInjectElement();\n\n @Input()\n public tuiTouchable: '' | 'background' | 'opacity' | 'transform' = '';\n\n constructor() {\n if (!this.isIOS) {\n return;\n }\n\n tuiTypedFromEvent(this.el, 'touchstart', {passive: true})\n .pipe(\n tap(() => this.onTouchStart()),\n map(({touches}) => touches[touches.length - 1]?.identifier),\n switchMap((identifier) =>\n race(\n tuiTypedFromEvent(this.el, 'touchmove', {passive: true}).pipe(\n filter(({touches}) =>\n this.hasTouchLeft(this.el, touches, identifier ?? 0),\n ),\n ),\n tuiTypedFromEvent(this.el, 'touchend'),\n ).pipe(take(1)),\n ),\n takeUntilDestroyed(),\n )\n .subscribe(() => {\n this.el.style.removeProperty('transform');\n this.el.style.removeProperty('opacity');\n this.el.style.removeProperty('background');\n });\n }\n\n protected get style(): 'background' | 'opacity' | 'transform' {\n return this.tuiTouchable || 'transform';\n }\n\n private hasTouchLeft(\n element: HTMLElement,\n touches: TouchList,\n identifier: number,\n ): boolean {\n const {ownerDocument} = element;\n const id = tuiFindTouchIndex(touches, identifier);\n\n if (!ownerDocument || id === -1) {\n return true;\n }\n\n const {clientX = 0, clientY = 0} = touches[id] ?? {};\n\n return !element.contains(ownerDocument.elementFromPoint(clientX, clientY));\n }\n\n private onTouchStart(): void {\n if (this.style !== 'transform') {\n this.el.style.removeProperty('transition');\n } else {\n this.el.style.setProperty('transition', 'transform 0.2s');\n }\n\n this.el.style.setProperty(this.style, STYLE[this.style]);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}