@starley/ion-directives 1.2.1 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +104 -0
- package/dist/input-mask/input-mask.directive.d.ts +3 -1
- package/dist/input-mask/input-mask.directive.js +26 -21
- package/dist/input-mask/input-mask.directive.js.map +1 -1
- package/dist/press-hold/press-hold.directive.d.ts +2 -2
- package/dist/press-hold/press-hold.directive.js +9 -5
- package/dist/press-hold/press-hold.directive.js.map +1 -1
- package/dist/tap/tap.directive.d.ts +2 -2
- package/dist/tap/tap.directive.js +10 -5
- package/dist/tap/tap.directive.js.map +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
|
|
2
|
+
# Ion-directives
|
|
3
|
+
|
|
4
|
+
São directivas para uso em ionic, para mascramento de inputs, pressHold, tap e doubleTap!
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Authors
|
|
11
|
+
|
|
12
|
+
- [@starleydev](https://www.github.com/starleyDev)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm i @starley/ion-directives
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage/Examples
|
|
23
|
+
|
|
24
|
+
Importe dentro do modulo que ira utilizar
|
|
25
|
+
|
|
26
|
+
my-component.module.ts
|
|
27
|
+
```typescript
|
|
28
|
+
import { DirectivesModule } from '@starley/ion-directives';
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
@NgModule({
|
|
32
|
+
...
|
|
33
|
+
imports: [
|
|
34
|
+
...,
|
|
35
|
+
DirectivesModule
|
|
36
|
+
],
|
|
37
|
+
...
|
|
38
|
+
})
|
|
39
|
+
export class MyComponent {}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Para usar a mascara 'appMask'
|
|
43
|
+
|
|
44
|
+
Adicione dentro do input a chamada passando após o simbolo de '=' a formatação desejada!
|
|
45
|
+
|
|
46
|
+
my-component.html
|
|
47
|
+
```html
|
|
48
|
+
<ion-content>
|
|
49
|
+
...
|
|
50
|
+
<ion-item>
|
|
51
|
+
<ion-label>CPF</ion-label>
|
|
52
|
+
<ion-input class="ion-text-right" [(ngModel)]="cpf" maxlength="14" type="number" placeholder="000.000.000-00" appMask="***.***.***-**"></ion-input>
|
|
53
|
+
</ion-item>
|
|
54
|
+
...
|
|
55
|
+
</ion-content>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Resultado --> 123.456.789-00
|
|
59
|
+
|
|
60
|
+
### Para usar a pressHold 'appPressHold'
|
|
61
|
+
|
|
62
|
+
O tempo minimo e de 450 milisegundos! **( Adicionarei no futuro a possibilidade de customizar esse tempo! )**
|
|
63
|
+
|
|
64
|
+
Adicione a chamada de 'appPressHold' juntamente com o '(press)' pois ele será o responsavel pela ação!
|
|
65
|
+
|
|
66
|
+
my-component.html
|
|
67
|
+
```html
|
|
68
|
+
<ion-content>
|
|
69
|
+
...
|
|
70
|
+
<ion-item appPressHold (press)="doSomething()>
|
|
71
|
+
<ion-label>PressHold</ion-label>
|
|
72
|
+
</ion-item>
|
|
73
|
+
...
|
|
74
|
+
</ion-content>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Para usar 'appTap'
|
|
78
|
+
|
|
79
|
+
Adicione dentro de um elemento qualquer! Ao adicionar você tera duas opções!
|
|
80
|
+
|
|
81
|
+
*O (tap) tera ação de intervalo de 250 milisegundos*
|
|
82
|
+
|
|
83
|
+
*O (doubleTap) terá ação de intervalo de 300 milisegundos*
|
|
84
|
+
|
|
85
|
+
my-component.html
|
|
86
|
+
```html
|
|
87
|
+
<ion-content>
|
|
88
|
+
...
|
|
89
|
+
<ion-content>
|
|
90
|
+
...
|
|
91
|
+
<ion-item appTap (tap)="doSomething()" (doubleTap)="doSomething()">
|
|
92
|
+
<ion-label>tap</ion-label>
|
|
93
|
+
</ion-item>
|
|
94
|
+
...
|
|
95
|
+
</ion-content>
|
|
96
|
+
...
|
|
97
|
+
</ion-content>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## License
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
[](https://choosealicense.com/licenses/mit/)
|
|
104
|
+
|
|
@@ -2,6 +2,8 @@ import { NgModel } from "@angular/forms";
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
/**
|
|
4
4
|
* Responsavel pelo mascaramento de inputs
|
|
5
|
+
* @author Thiago Przyczynski
|
|
6
|
+
* przyczynski@gmail.com
|
|
5
7
|
*/
|
|
6
8
|
export declare class IonInputMaskDirective {
|
|
7
9
|
model: NgModel;
|
|
@@ -11,7 +13,7 @@ export declare class IonInputMaskDirective {
|
|
|
11
13
|
* @param {NgModel} model
|
|
12
14
|
* @param {string} pattern
|
|
13
15
|
*/
|
|
14
|
-
constructor(model: NgModel, pattern
|
|
16
|
+
constructor(model: NgModel, pattern?: string);
|
|
15
17
|
/**
|
|
16
18
|
* Listener para mudança de valor do input
|
|
17
19
|
* @param event
|
|
@@ -4,6 +4,8 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
import * as i1 from "@angular/forms";
|
|
5
5
|
/**
|
|
6
6
|
* Responsavel pelo mascaramento de inputs
|
|
7
|
+
* @author Thiago Przyczynski
|
|
8
|
+
* przyczynski@gmail.com
|
|
7
9
|
*/
|
|
8
10
|
var IonInputMaskDirective = /** @class */ (function () {
|
|
9
11
|
/**
|
|
@@ -12,9 +14,9 @@ var IonInputMaskDirective = /** @class */ (function () {
|
|
|
12
14
|
* @param {string} pattern
|
|
13
15
|
*/
|
|
14
16
|
function IonInputMaskDirective(model, pattern) {
|
|
17
|
+
if (pattern === void 0) { pattern = null; }
|
|
15
18
|
this.model = model;
|
|
16
19
|
this.pattern = pattern;
|
|
17
|
-
console.log('Inicou inputMask');
|
|
18
20
|
}
|
|
19
21
|
/**
|
|
20
22
|
* Listener para mudança de valor do input
|
|
@@ -22,30 +24,33 @@ var IonInputMaskDirective = /** @class */ (function () {
|
|
|
22
24
|
*/
|
|
23
25
|
IonInputMaskDirective.prototype.onKeyDown = function (event) {
|
|
24
26
|
var value = event.target.value, pattern = this.pattern;
|
|
25
|
-
if (
|
|
26
|
-
if (
|
|
27
|
-
//
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
if (pattern !== null) {
|
|
28
|
+
if (event.keyIdentifier === 'U+0008' || event.keyCode === 8 || event.key === 'Backspace') {
|
|
29
|
+
if (value.length) { //prevent fatal exception when backspacing empty value in progressive web app
|
|
30
|
+
//remove all trailing formatting then delete character
|
|
31
|
+
while (pattern[value.length] && pattern[value.length] !== '*') {
|
|
32
|
+
value = value.substring(0, value.length - 1);
|
|
33
|
+
}
|
|
34
|
+
//remove all leading formatting to restore placeholder
|
|
35
|
+
if (pattern.substring(0, value.length).indexOf('*') < 0) {
|
|
36
|
+
value = value.substring(0, value.length - 1);
|
|
37
|
+
}
|
|
34
38
|
}
|
|
39
|
+
// Caso o padrao esteja definido como null ira retornar o valor digitado!
|
|
35
40
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
else {
|
|
42
|
+
var maskIndex = value.length;
|
|
43
|
+
var formatted = '';
|
|
44
|
+
formatted += value;
|
|
45
|
+
if (maskIndex < pattern.length) {
|
|
46
|
+
//apply trailing formatting
|
|
47
|
+
while (pattern[maskIndex] !== '*') {
|
|
48
|
+
formatted += pattern[maskIndex];
|
|
49
|
+
maskIndex++;
|
|
50
|
+
}
|
|
46
51
|
}
|
|
52
|
+
value = formatted;
|
|
47
53
|
}
|
|
48
|
-
value = formatted;
|
|
49
54
|
}
|
|
50
55
|
event.target.value = value;
|
|
51
56
|
if (this.model) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-mask.directive.js","sourceRoot":"","sources":["../../src/input-mask/input-mask.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;;;AAEzC
|
|
1
|
+
{"version":3,"file":"input-mask.directive.js","sourceRoot":"","sources":["../../src/input-mask/input-mask.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;;;AAEzC;;;;GAIG;AAEH;IAWI;;;;OAIG;IACH,+BAAmB,KAAc,EACP,OAAsB;QAA5C,wBAAA,EAAA,cAA4C;QAD7B,UAAK,GAAL,KAAK,CAAS;QAE7B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IAC3B,CAAC;IAED;;;OAGG;IACH,yCAAS,GAAT,UAAU,KAAU;QAChB,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC1B,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,OAAO,KAAK,IAAI,EAAE;YAClB,IAAI,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;gBACtF,IAAI,KAAK,CAAC,MAAM,EAAE,EAAE,6EAA6E;oBAC7F,sDAAsD;oBACtD,OAAO,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE;wBAC3D,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;qBAChD;oBACD,sDAAsD;oBACtD,IAAI,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBACrD,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;qBAChD;iBACJ;gBAED,yEAAyE;aAC5E;iBAAM;gBACH,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;gBAC7B,IAAI,SAAS,GAAG,EAAE,CAAC;gBACnB,SAAS,IAAI,KAAK,CAAC;gBACnB,IAAI,SAAS,GAAG,OAAO,CAAC,MAAM,EAAE;oBAC5B,2BAA2B;oBAC3B,OAAO,OAAO,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE;wBAC/B,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC,CAAC;wBAChC,SAAS,EAAE,CAAC;qBACf;iBACJ;gBACD,KAAK,GAAG,SAAS,CAAC;aACrB;SACJ;QACD,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;QAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;YACZ,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;8FAtDQ,qBAAqB,yDAUf,SAAS;4EAVf,qBAAqB;gHAArB,qBAAiB;8CAFf,CAAC,OAAO,CAAC;gCAdxB;CAwEC,AA/DD,IA+DC;SAxDY,qBAAqB;uFAArB,qBAAqB;cAPjC,SAAS;eAAC;gBACP,QAAQ,EAAE,WAAW;gBACrB,IAAI,EAAE;oBACF,WAAW,EAAE,mBAAmB;iBACnC;gBACD,SAAS,EAAE,CAAC,OAAO,CAAC;aACvB;;sBAWQ,SAAS;uBAAC,SAAS","sourcesContent":["import { Attribute, Directive } from '@angular/core';\nimport { NgModel } from \"@angular/forms\";\n\n/**\n * Responsavel pelo mascaramento de inputs\n * @author Thiago Przyczynski\n * przyczynski@gmail.com\n */\n\n@Directive({\n selector: '[appMask]',\n host: {\n '(keydown)': 'onKeyDown($event)'\n },\n providers: [NgModel]\n})\nexport class IonInputMaskDirective {\n\n pattern: string;\n\n /**\n * Construtor\n * @param {NgModel} model\n * @param {string} pattern\n */\n constructor(public model: NgModel,\n @Attribute('appMask') pattern: string = null) {\n this.pattern = pattern;\n }\n\n /**\n * Listener para mudança de valor do input\n * @param event\n */\n onKeyDown(event: any) {\n let value = event.target.value,\n pattern = this.pattern;\n if (pattern !== null) {\n if (event.keyIdentifier === 'U+0008' || event.keyCode === 8 || event.key === 'Backspace') {\n if (value.length) { //prevent fatal exception when backspacing empty value in progressive web app\n //remove all trailing formatting then delete character\n while (pattern[value.length] && pattern[value.length] !== '*') {\n value = value.substring(0, value.length - 1);\n }\n //remove all leading formatting to restore placeholder\n if (pattern.substring(0, value.length).indexOf('*') < 0) {\n value = value.substring(0, value.length - 1);\n }\n }\n\n // Caso o padrao esteja definido como null ira retornar o valor digitado!\n } else {\n let maskIndex = value.length;\n let formatted = '';\n formatted += value;\n if (maskIndex < pattern.length) {\n //apply trailing formatting\n while (pattern[maskIndex] !== '*') {\n formatted += pattern[maskIndex];\n maskIndex++;\n }\n }\n value = formatted;\n }\n }\n event.target.value = value;\n if (this.model) {\n this.model.update.emit(value);\n }\n return true;\n }\n\n}"]}
|
|
@@ -16,13 +16,13 @@ export declare class PressHoldDirective implements OnInit {
|
|
|
16
16
|
lastTap: number;
|
|
17
17
|
tapCount: number;
|
|
18
18
|
tapTimeout: any;
|
|
19
|
-
constructor();
|
|
19
|
+
constructor(pattern?: number);
|
|
20
20
|
ngOnInit(): void;
|
|
21
21
|
onPress(event: {
|
|
22
22
|
type: any;
|
|
23
23
|
}): void;
|
|
24
24
|
private handlePressing;
|
|
25
25
|
private resetTaps;
|
|
26
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<PressHoldDirective,
|
|
26
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PressHoldDirective, [{ attribute: "appPressHold"; }]>;
|
|
27
27
|
static ɵdir: i0.ɵɵDirectiveDeclaration<PressHoldDirective, "[appPressHold]", never, {}, { "press": "press"; }, never, never, false, never>;
|
|
28
28
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
|
|
1
|
+
import { Attribute, Directive, EventEmitter, HostListener, Output } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
/**
|
|
4
4
|
* Gerencia pressHold
|
|
5
5
|
* @author Starley Cazorla
|
|
6
6
|
*/
|
|
7
7
|
var PressHoldDirective = /** @class */ (function () {
|
|
8
|
-
function PressHoldDirective() {
|
|
8
|
+
function PressHoldDirective(pattern) {
|
|
9
|
+
if (pattern === void 0) { pattern = 350; }
|
|
9
10
|
this.press = new EventEmitter();
|
|
10
11
|
this.pressGesture = {
|
|
11
12
|
name: 'press',
|
|
@@ -17,7 +18,7 @@ var PressHoldDirective = /** @class */ (function () {
|
|
|
17
18
|
this.lastTap = 0;
|
|
18
19
|
this.tapCount = 0;
|
|
19
20
|
this.tapTimeout = null;
|
|
20
|
-
|
|
21
|
+
this.pressGesture.interval = pattern;
|
|
21
22
|
}
|
|
22
23
|
PressHoldDirective.prototype.ngOnInit = function () {
|
|
23
24
|
this.pressGesture.enabled = true;
|
|
@@ -52,7 +53,7 @@ var PressHoldDirective = /** @class */ (function () {
|
|
|
52
53
|
this.tapTimeout = null;
|
|
53
54
|
this.lastTap = 0;
|
|
54
55
|
};
|
|
55
|
-
PressHoldDirective.ɵfac = function PressHoldDirective_Factory(t) { return new (t || PressHoldDirective)(); };
|
|
56
|
+
PressHoldDirective.ɵfac = function PressHoldDirective_Factory(t) { return new (t || PressHoldDirective)(i0.ɵɵinjectAttribute('appPressHold')); };
|
|
56
57
|
PressHoldDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PressHoldDirective, selectors: [["", "appPressHold", ""]], hostBindings: function PressHoldDirective_HostBindings(rf, ctx) { if (rf & 1) {
|
|
57
58
|
i0.ɵɵlistener("touchstart", function PressHoldDirective_touchstart_HostBindingHandler($event) { return ctx.onPress($event); })("touchend", function PressHoldDirective_touchend_HostBindingHandler($event) { return ctx.onPress($event); });
|
|
58
59
|
} }, outputs: { press: "press" } });
|
|
@@ -64,7 +65,10 @@ export { PressHoldDirective };
|
|
|
64
65
|
args: [{
|
|
65
66
|
selector: '[appPressHold]'
|
|
66
67
|
}]
|
|
67
|
-
}], function () { return [
|
|
68
|
+
}], function () { return [{ type: undefined, decorators: [{
|
|
69
|
+
type: Attribute,
|
|
70
|
+
args: ['appPressHold']
|
|
71
|
+
}] }]; }, { press: [{
|
|
68
72
|
type: Output
|
|
69
73
|
}], onPress: [{
|
|
70
74
|
type: HostListener,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"press-hold.directive.js","sourceRoot":"","sources":["../../src/press-hold/press-hold.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAU,MAAM,EAAE,MAAM,eAAe,CAAC;;
|
|
1
|
+
{"version":3,"file":"press-hold.directive.js","sourceRoot":"","sources":["../../src/press-hold/press-hold.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAU,MAAM,EAAE,MAAM,eAAe,CAAC;;AAEjG;;;GAGG;AAEH;IAiBI,4BAAuC,OAAqB;QAAhD,wBAAA,EAAA,aAAgD;QAZlD,UAAK,GAAG,IAAI,YAAY,EAAE,CAAC;QACrC,iBAAY,GAAG;YACX,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,GAAG;SAChB,CAAC;QACF,iBAAY,GAAQ,IAAI,CAAC;QACzB,eAAU,GAAY,KAAK,CAAC;QAC5B,YAAO,GAAG,CAAC,CAAC;QACZ,aAAQ,GAAG,CAAC,CAAC;QACb,eAAU,GAAQ,IAAI,CAAC;QAGnB,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,OAAO,CAAC;IACzC,CAAC;IAED,qCAAQ,GAAR;QACI,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;IACrC,CAAC;IAID,oCAAO,GAFP,UAEQ,KAAqB;QACzB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAC5B,OAAO;SACV,CAAC,2CAA2C;QAC7C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAEO,2CAAc,GAAtB,UAAuB,IAAY;QAAnC,iBAeC;QAdG,IAAI,IAAI,IAAI,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;gBAC3B,KAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YAC3B,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,kEAAkE;SACrG;aAAM,IAAI,IAAI,IAAI,UAAU,EAAE;YAC3B,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAChC,IAAI,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACvB,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,mDAAmD;aACxE;YACD,qGAAqG;YACrG,oCAAoC;YACpC,UAAU,CAAC,cAAM,OAAA,KAAI,CAAC,UAAU,GAAG,KAAK,EAAvB,CAAuB,EAAE,EAAE,CAAC,CAAC;SACjD;IACL,CAAC;IAEO,sCAAS,GAAjB;QACI,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,wBAAwB;QACvD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACrB,CAAC;wFArDQ,kBAAkB,uBAcJ,cAAc;yEAd5B,kBAAkB;mHAAlB,mBAAe,0FAAf,mBAAe;;6BAV5B;CAiEC,AA1DD,IA0DC;SAvDY,kBAAkB;uFAAlB,kBAAkB;cAH9B,SAAS;eAAC;gBACP,QAAQ,EAAE,gBAAgB;aAC7B;;sBAegB,SAAS;uBAAC,cAAc;wBAZ3B,KAAK;kBAAd,MAAM;YAsBP,OAAO;kBAFN,YAAY;mBAAC,YAAY,EAAE,CAAC,QAAQ,CAAC;;kBACrC,YAAY;mBAAC,UAAU,EAAE,CAAC,QAAQ,CAAC","sourcesContent":["import { Attribute, Directive, EventEmitter, HostListener, OnInit, Output } from '@angular/core';\n\n/**\n * Gerencia pressHold\n * @author Starley Cazorla\n */\n\n@Directive({\n selector: '[appPressHold]'\n})\nexport class PressHoldDirective implements OnInit {\n\n @Output() press = new EventEmitter();\n pressGesture = {\n name: 'press',\n enabled: false,\n interval: 350\n };\n pressTimeout: any = null;\n isPressing: boolean = false;\n lastTap = 0;\n tapCount = 0;\n tapTimeout: any = null;\n\n constructor(@Attribute('appPressHold') pattern: number = 350) {\n this.pressGesture.interval = pattern;\n }\n\n ngOnInit(): void {\n this.pressGesture.enabled = true;\n }\n\n @HostListener('touchstart', ['$event'])\n @HostListener('touchend', ['$event'])\n onPress(event: { type: any; }) {\n if (!this.pressGesture.enabled) {\n return;\n } // Press is not enabled, don't do anything.\n this.handlePressing(event.type);\n }\n\n private handlePressing(type: string) { // touchend or touchstart\n if (type == 'touchstart') {\n this.pressTimeout = setTimeout(() => {\n this.isPressing = true;\n }, this.pressGesture.interval); // Considered a press if it's longer than interval (default: 251).\n } else if (type == 'touchend') {\n clearTimeout(this.pressTimeout);\n if (this.isPressing) {\n this.press.emit('end');\n this.resetTaps(); // Just incase this gets passed as a tap event too.\n }\n // Clicks have a natural delay of 300ms, so we have to account for that, before resetting isPressing.\n // Otherwise a tap event is emitted.\n setTimeout(() => this.isPressing = false, 50);\n }\n }\n\n private resetTaps() {\n clearTimeout(this.tapTimeout); // clear the old timeout\n this.tapCount = 0;\n this.tapTimeout = null;\n this.lastTap = 0;\n }\n\n}"]}
|
|
@@ -20,13 +20,13 @@ export declare class TapDirective implements OnInit {
|
|
|
20
20
|
enabled: boolean;
|
|
21
21
|
interval: number;
|
|
22
22
|
};
|
|
23
|
-
constructor();
|
|
23
|
+
constructor(pattern?: number);
|
|
24
24
|
ngOnInit(): void;
|
|
25
25
|
handleTaps(e: {
|
|
26
26
|
timeStamp: number;
|
|
27
27
|
}): void;
|
|
28
28
|
private emitTaps;
|
|
29
29
|
private resetTaps;
|
|
30
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<TapDirective,
|
|
30
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TapDirective, [{ attribute: "appTap"; }]>;
|
|
31
31
|
static ɵdir: i0.ɵɵDirectiveDeclaration<TapDirective, "[appTap]", never, {}, { "tap": "tap"; "doubleTap": "doubleTap"; }, never, never, false, never>;
|
|
32
32
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
|
|
1
|
+
import { Attribute, Directive, EventEmitter, HostListener, Output } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
/**
|
|
4
4
|
* Gerencia tap e doubleTap
|
|
5
5
|
* @author Starley Cazorla
|
|
6
6
|
*/
|
|
7
7
|
var TapDirective = /** @class */ (function () {
|
|
8
|
-
function TapDirective() {
|
|
8
|
+
function TapDirective(pattern) {
|
|
9
|
+
if (pattern === void 0) { pattern = 350; }
|
|
9
10
|
this.tap = new EventEmitter();
|
|
10
11
|
this.doubleTap = new EventEmitter();
|
|
11
12
|
this.lastTap = 0;
|
|
@@ -21,7 +22,8 @@ var TapDirective = /** @class */ (function () {
|
|
|
21
22
|
enabled: false,
|
|
22
23
|
interval: 300,
|
|
23
24
|
};
|
|
24
|
-
|
|
25
|
+
this.tapGesture.interval = pattern;
|
|
26
|
+
this.doubleTapGesture.interval = pattern;
|
|
25
27
|
}
|
|
26
28
|
TapDirective.prototype.ngOnInit = function () {
|
|
27
29
|
this.tapGesture.enabled = true;
|
|
@@ -58,7 +60,7 @@ var TapDirective = /** @class */ (function () {
|
|
|
58
60
|
this.tapTimeout = null;
|
|
59
61
|
this.lastTap = 0;
|
|
60
62
|
};
|
|
61
|
-
TapDirective.ɵfac = function TapDirective_Factory(t) { return new (t || TapDirective)(); };
|
|
63
|
+
TapDirective.ɵfac = function TapDirective_Factory(t) { return new (t || TapDirective)(i0.ɵɵinjectAttribute('appTap')); };
|
|
62
64
|
TapDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TapDirective, selectors: [["", "appTap", ""]], hostBindings: function TapDirective_HostBindings(rf, ctx) { if (rf & 1) {
|
|
63
65
|
i0.ɵɵlistener("click", function TapDirective_click_HostBindingHandler($event) { return ctx.handleTaps($event); });
|
|
64
66
|
} }, outputs: { tap: "tap", doubleTap: "doubleTap" } });
|
|
@@ -70,7 +72,10 @@ export { TapDirective };
|
|
|
70
72
|
args: [{
|
|
71
73
|
selector: '[appTap]'
|
|
72
74
|
}]
|
|
73
|
-
}], function () { return [
|
|
75
|
+
}], function () { return [{ type: undefined, decorators: [{
|
|
76
|
+
type: Attribute,
|
|
77
|
+
args: ['appTap']
|
|
78
|
+
}] }]; }, { tap: [{
|
|
74
79
|
type: Output
|
|
75
80
|
}], doubleTap: [{
|
|
76
81
|
type: Output
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tap.directive.js","sourceRoot":"","sources":["../../src/tap/tap.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAU,MAAM,EAAE,MAAM,eAAe,CAAC;;
|
|
1
|
+
{"version":3,"file":"tap.directive.js","sourceRoot":"","sources":["../../src/tap/tap.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAU,MAAM,EAAE,MAAM,eAAe,CAAC;;AAEjG;;;GAGG;AAEH;IAqBI,sBAAiC,OAAqB;QAA1C,wBAAA,EAAA,aAA0C;QAhB5C,QAAG,GAAG,IAAI,YAAY,EAAE,CAAC;QACzB,cAAS,GAAG,IAAI,YAAY,EAAE,CAAC;QACzC,YAAO,GAAG,CAAC,CAAC;QACZ,aAAQ,GAAG,CAAC,CAAC;QACb,eAAU,GAAQ,IAAI,CAAC;QACvB,eAAU,GAAG;YACT,IAAI,EAAE,KAAK;YACX,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,GAAG;SAChB,CAAC;QACF,qBAAgB,GAAG;YACf,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,GAAG;SAChB,CAAC;QAGE,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,OAAO,CAAC;QACnC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC7C,CAAC;IAED,+BAAQ,GAAR;QACI,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;IACzC,CAAC;IAGD,iCAAU,GADV,UACW,CAAyB;QADpC,iBAcC;QAZG,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC7C,IAAM,WAAW,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;QAC3E,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;YAC5D,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;SAC3B;QACD,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,WAAW,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;YAC9C,IAAI,CAAC,QAAQ,EAAE,CAAC;SACnB;aAAM,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,cAAM,OAAA,KAAI,CAAC,QAAQ,EAAE,EAAf,CAAe,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;SACjF;QACD,IAAI,CAAC,OAAO,GAAG,YAAY,CAAC;IAChC,CAAC;IAEO,+BAAQ,GAAhB;QACI,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YAChD,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;SACnB;aAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;YAC7D,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACzB;QACD,IAAI,CAAC,SAAS,EAAE,CAAC;IACrB,CAAC;IAEO,gCAAS,GAAjB;QACI,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,wBAAwB;QACvD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACrB,CAAC;4EA1DQ,YAAY,uBAkBE,QAAQ;mEAlBtB,YAAY;mGAAZ,sBAAkB;;uBAV/B;CAsEC,AA/DD,IA+DC;SA5DY,YAAY;uFAAZ,YAAY;cAHxB,SAAS;eAAC;gBACP,QAAQ,EAAE,UAAU;aACvB;;sBAmBgB,SAAS;uBAAC,QAAQ;wBAhBrB,GAAG;kBAAZ,MAAM;YACG,SAAS;kBAAlB,MAAM;YA0BP,UAAU;kBADT,YAAY;mBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC","sourcesContent":["import { Attribute, Directive, EventEmitter, HostListener, OnInit, Output } from '@angular/core';\n\n/**\n * Gerencia tap e doubleTap\n * @author Starley Cazorla\n */\n\n@Directive({\n selector: '[appTap]'\n})\nexport class TapDirective implements OnInit {\n\n @Output() tap = new EventEmitter();\n @Output() doubleTap = new EventEmitter();\n lastTap = 0;\n tapCount = 0;\n tapTimeout: any = null;\n tapGesture = {\n name: 'tap',\n enabled: false,\n interval: 250,\n };\n doubleTapGesture = {\n name: 'doubleTap',\n enabled: false,\n interval: 300,\n };\n\n constructor(@Attribute('appTap') pattern: number = 350) {\n this.tapGesture.interval = pattern;\n this.doubleTapGesture.interval = pattern;\n }\n\n ngOnInit(): void {\n this.tapGesture.enabled = true;\n this.doubleTapGesture.enabled = true;\n }\n\n @HostListener('click', ['$event'])\n handleTaps(e: { timeStamp: number; }) {\n const tapTimestamp = Math.floor(e.timeStamp);\n const isDoubleTap = this.lastTap + this.tapGesture.interval > tapTimestamp;\n if (!this.tapGesture.enabled && !this.doubleTapGesture.enabled) {\n return this.resetTaps();\n }\n this.tapCount++;\n if (isDoubleTap && this.doubleTapGesture.enabled) {\n this.emitTaps();\n } else if (!isDoubleTap) {\n this.tapTimeout = setTimeout(() => this.emitTaps(), this.tapGesture.interval);\n }\n this.lastTap = tapTimestamp;\n }\n\n private emitTaps() {\n if (this.tapCount === 1 && this.tapGesture.enabled) {\n this.tap.emit();\n } else if (this.tapCount === 2 && this.doubleTapGesture.enabled) {\n this.doubleTap.emit();\n }\n this.resetTaps();\n }\n\n private resetTaps() {\n clearTimeout(this.tapTimeout); // clear the old timeout\n this.tapCount = 0;\n this.tapTimeout = null;\n this.lastTap = 0;\n }\n\n}\n"]}
|