|
4 | 4 | * https://github.com/bradmartin |
5 | 5 | * Pull requests are welcome. Enjoy! |
6 | 6 | *************************************************************************************/ |
7 | | -import * as definitions from "./index"; |
8 | | -import { View, Property } from "tns-core-modules/ui/core/view"; |
9 | | -import { Color } from "tns-core-modules/color"; |
10 | | -import { topmost } from "tns-core-modules/ui/frame"; |
11 | | -import { |
12 | | - PanGestureEventData, |
13 | | - GestureTypes |
14 | | -} from "tns-core-modules/ui/gestures"; |
| 7 | +import { Color } from 'tns-core-modules/color'; |
| 8 | +import { Property, View } from 'tns-core-modules/ui/core/view'; |
| 9 | +import { topmost } from 'tns-core-modules/ui/frame'; |
| 10 | +import { PanGestureEventData } from 'tns-core-modules/ui/gestures'; |
| 11 | +import * as definitions from './index'; |
15 | 12 |
|
16 | 13 | export class FloatingActionButtonBase extends View implements definitions.Fab { |
17 | | - private swipeEventAttached: boolean = false; |
18 | | - public hideOnSwipeOfView: string; |
19 | | - public swipeAnimation: |
20 | | - | "slideUp" |
21 | | - | "slideDown" |
22 | | - | "slideRight" |
23 | | - | "slideLeft" |
24 | | - | "scale"; |
25 | | - public hideAnimationDuration: number; |
26 | | - public rippleColor: Color; |
27 | | - public icon: string; |
| 14 | + private swipeEventAttached: boolean = false; |
| 15 | + public hideOnSwipeOfView: string; |
| 16 | + public swipeAnimation: |
| 17 | + | 'slideUp' |
| 18 | + | 'slideDown' |
| 19 | + | 'slideRight' |
| 20 | + | 'slideLeft' |
| 21 | + | 'scale'; |
| 22 | + public hideAnimationDuration: number; |
| 23 | + public rippleColor: Color; |
| 24 | + public icon: string; |
28 | 25 |
|
29 | | - onLa; |
30 | | - onLoaded() { |
31 | | - super.onLoaded(); |
32 | | - if (this.swipeEventAttached === false) { |
33 | | - const fab = this; |
34 | | - if (this.hideOnSwipeOfView) { |
35 | | - const swipeItem = topmost().getViewById(this.hideOnSwipeOfView); |
36 | | - const animationType = this.swipeAnimation |
37 | | - ? this.swipeAnimation |
38 | | - : "slideDown"; |
| 26 | + onLa; |
| 27 | + onLoaded() { |
| 28 | + super.onLoaded(); |
| 29 | + if (this.swipeEventAttached === false) { |
| 30 | + const fab = this; |
| 31 | + if (this.hideOnSwipeOfView) { |
| 32 | + const swipeItem = topmost().getViewById(this.hideOnSwipeOfView); |
| 33 | + const animationType = this.swipeAnimation |
| 34 | + ? this.swipeAnimation |
| 35 | + : 'slideDown'; |
39 | 36 |
|
40 | | - if (swipeItem !== undefined) { |
41 | | - const duration = this.hideAnimationDuration |
42 | | - ? this.hideAnimationDuration |
43 | | - : this._getDurationDefault(animationType); |
| 37 | + if (swipeItem !== undefined) { |
| 38 | + const duration = this.hideAnimationDuration |
| 39 | + ? this.hideAnimationDuration |
| 40 | + : this._getDurationDefault(animationType); |
44 | 41 |
|
45 | | - swipeItem.on("pan", (args: PanGestureEventData) => { |
46 | | - // Swipe up |
47 | | - if (args.deltaY < -10) { |
48 | | - switch (animationType) { |
49 | | - case "slideUp": |
50 | | - try { |
51 | | - fab.animate({ |
52 | | - target: fab, |
53 | | - translate: { |
54 | | - x: 0, |
55 | | - y: -200 |
56 | | - }, |
57 | | - opacity: 0, |
58 | | - duration: 400 |
59 | | - }); |
60 | | - } catch (error) { |
61 | | - console.log(error); |
62 | | - } |
63 | | - break; |
64 | | - case "slideDown": |
65 | | - fab.animate({ |
66 | | - target: fab, |
67 | | - translate: { |
68 | | - x: 0, |
69 | | - y: 200 |
70 | | - }, |
71 | | - opacity: 0, |
72 | | - duration: duration |
73 | | - }); |
74 | | - break; |
75 | | - case "slideRight": |
76 | | - fab.animate({ |
77 | | - target: fab, |
78 | | - translate: { |
79 | | - x: 200, |
80 | | - y: 0 |
81 | | - }, |
82 | | - opacity: 0, |
83 | | - duration: duration |
84 | | - }); |
85 | | - break; |
86 | | - case "slideLeft": |
87 | | - fab.animate({ |
88 | | - target: fab, |
89 | | - translate: { |
90 | | - x: -200, |
91 | | - y: 0 |
92 | | - }, |
93 | | - opacity: 0, |
94 | | - duration: duration |
95 | | - }); |
96 | | - break; |
97 | | - case "scale": |
98 | | - fab.animate({ |
99 | | - target: fab, |
100 | | - scale: { |
101 | | - x: 0, |
102 | | - y: 0 |
103 | | - }, |
104 | | - duration: duration |
105 | | - }); |
106 | | - break; |
107 | | - } |
108 | | - } else if (args.deltaY > 0) { |
109 | | - // Swipe Down |
110 | | - switch (animationType) { |
111 | | - case "slideUp": |
112 | | - fab.animate({ |
113 | | - target: fab, |
114 | | - translate: { |
115 | | - x: 0, |
116 | | - y: 0 |
117 | | - }, |
118 | | - opacity: 1, |
119 | | - duration: duration |
120 | | - }); |
121 | | - break; |
122 | | - case "slideDown": |
123 | | - fab.animate({ |
124 | | - target: fab, |
125 | | - translate: { |
126 | | - x: 0, |
127 | | - y: 0 |
128 | | - }, |
129 | | - opacity: 1, |
130 | | - duration: duration |
131 | | - }); |
132 | | - break; |
133 | | - case "slideRight": |
134 | | - fab.animate({ |
135 | | - target: fab, |
136 | | - translate: { |
137 | | - x: 0, |
138 | | - y: 0 |
139 | | - }, |
140 | | - opacity: 1, |
141 | | - duration: duration |
142 | | - }); |
143 | | - break; |
144 | | - case "slideLeft": |
145 | | - fab.animate({ |
146 | | - target: fab, |
147 | | - translate: { |
148 | | - x: 0, |
149 | | - y: 0 |
150 | | - }, |
151 | | - opacity: 1, |
152 | | - duration: duration |
153 | | - }); |
154 | | - break; |
155 | | - case "scale": |
156 | | - fab.animate({ |
157 | | - target: fab, |
158 | | - scale: { |
159 | | - x: 1, |
160 | | - y: 1 |
161 | | - }, |
162 | | - duration: duration |
163 | | - }); |
164 | | - break; |
165 | | - } |
166 | | - } |
167 | | - }); |
| 42 | + swipeItem.on('pan', (args: PanGestureEventData) => { |
| 43 | + // Swipe up |
| 44 | + if (args.deltaY < -10) { |
| 45 | + switch (animationType) { |
| 46 | + case 'slideUp': |
| 47 | + try { |
| 48 | + fab.animate({ |
| 49 | + target: fab, |
| 50 | + translate: { |
| 51 | + x: 0, |
| 52 | + y: -200 |
| 53 | + }, |
| 54 | + opacity: 0, |
| 55 | + duration: 400 |
| 56 | + }); |
| 57 | + } catch (error) { |
| 58 | + console.log(error); |
| 59 | + } |
| 60 | + break; |
| 61 | + case 'slideDown': |
| 62 | + fab.animate({ |
| 63 | + target: fab, |
| 64 | + translate: { |
| 65 | + x: 0, |
| 66 | + y: 200 |
| 67 | + }, |
| 68 | + opacity: 0, |
| 69 | + duration: duration |
| 70 | + }); |
| 71 | + break; |
| 72 | + case 'slideRight': |
| 73 | + fab.animate({ |
| 74 | + target: fab, |
| 75 | + translate: { |
| 76 | + x: 200, |
| 77 | + y: 0 |
| 78 | + }, |
| 79 | + opacity: 0, |
| 80 | + duration: duration |
| 81 | + }); |
| 82 | + break; |
| 83 | + case 'slideLeft': |
| 84 | + fab.animate({ |
| 85 | + target: fab, |
| 86 | + translate: { |
| 87 | + x: -200, |
| 88 | + y: 0 |
| 89 | + }, |
| 90 | + opacity: 0, |
| 91 | + duration: duration |
| 92 | + }); |
| 93 | + break; |
| 94 | + case 'scale': |
| 95 | + fab.animate({ |
| 96 | + target: fab, |
| 97 | + scale: { |
| 98 | + x: 0, |
| 99 | + y: 0 |
| 100 | + }, |
| 101 | + duration: duration |
| 102 | + }); |
| 103 | + break; |
| 104 | + } |
| 105 | + } else if (args.deltaY > 0) { |
| 106 | + // Swipe Down |
| 107 | + switch (animationType) { |
| 108 | + case 'slideUp': |
| 109 | + fab.animate({ |
| 110 | + target: fab, |
| 111 | + translate: { |
| 112 | + x: 0, |
| 113 | + y: 0 |
| 114 | + }, |
| 115 | + opacity: 1, |
| 116 | + duration: duration |
| 117 | + }); |
| 118 | + break; |
| 119 | + case 'slideDown': |
| 120 | + fab.animate({ |
| 121 | + target: fab, |
| 122 | + translate: { |
| 123 | + x: 0, |
| 124 | + y: 0 |
| 125 | + }, |
| 126 | + opacity: 1, |
| 127 | + duration: duration |
| 128 | + }); |
| 129 | + break; |
| 130 | + case 'slideRight': |
| 131 | + fab.animate({ |
| 132 | + target: fab, |
| 133 | + translate: { |
| 134 | + x: 0, |
| 135 | + y: 0 |
| 136 | + }, |
| 137 | + opacity: 1, |
| 138 | + duration: duration |
| 139 | + }); |
| 140 | + break; |
| 141 | + case 'slideLeft': |
| 142 | + fab.animate({ |
| 143 | + target: fab, |
| 144 | + translate: { |
| 145 | + x: 0, |
| 146 | + y: 0 |
| 147 | + }, |
| 148 | + opacity: 1, |
| 149 | + duration: duration |
| 150 | + }); |
| 151 | + break; |
| 152 | + case 'scale': |
| 153 | + fab.animate({ |
| 154 | + target: fab, |
| 155 | + scale: { |
| 156 | + x: 1, |
| 157 | + y: 1 |
| 158 | + }, |
| 159 | + duration: duration |
| 160 | + }); |
| 161 | + break; |
| 162 | + } |
| 163 | + } |
| 164 | + }); |
168 | 165 |
|
169 | | - this.swipeEventAttached = true; |
170 | | - } |
171 | | - } |
172 | | - } |
173 | | - } |
| 166 | + this.swipeEventAttached = true; |
| 167 | + } |
| 168 | + } |
| 169 | + } |
| 170 | + } |
174 | 171 |
|
175 | | - private _getDurationDefault(animationType: string) { |
176 | | - switch (animationType) { |
177 | | - case "scale": |
178 | | - return 200; |
179 | | - default: |
180 | | - return 400; |
181 | | - } |
182 | | - } |
| 172 | + private _getDurationDefault(animationType: string) { |
| 173 | + switch (animationType) { |
| 174 | + case 'scale': |
| 175 | + return 200; |
| 176 | + default: |
| 177 | + return 400; |
| 178 | + } |
| 179 | + } |
183 | 180 | } |
184 | 181 |
|
185 | 182 | export const iconProperty = new Property<FloatingActionButtonBase, string>({ |
186 | | - name: "icon", |
187 | | - affectsLayout: true |
| 183 | + name: 'icon', |
| 184 | + affectsLayout: true |
188 | 185 | }); |
189 | 186 | iconProperty.register(FloatingActionButtonBase); |
190 | 187 |
|
191 | 188 | export const rippleColorProperty = new Property< |
192 | | - FloatingActionButtonBase, |
193 | | - Color |
| 189 | + FloatingActionButtonBase, |
| 190 | + Color |
194 | 191 | >({ |
195 | | - name: "rippleColor", |
196 | | - equalityComparer: Color.equals, |
197 | | - valueConverter: v => new Color(v) |
| 192 | + name: 'rippleColor', |
| 193 | + equalityComparer: Color.equals, |
| 194 | + valueConverter: v => new Color(v) |
198 | 195 | }); |
199 | 196 | rippleColorProperty.register(FloatingActionButtonBase); |
0 commit comments