Skip to content

Commit 58baa49

Browse files
bradmartinbradmartin
committed
add prettier
1 parent 9a56414 commit 58baa49

5 files changed

Lines changed: 333 additions & 269 deletions

File tree

‎fab-common.ts‎

Lines changed: 160 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
/**************************************************************************************
22
* Made for the {N} community by Brad Martin @BradWayneMartin
3-
* Thanks to Lazaro Danillo for his contributions - https://github.com/lazaromenezes
4-
* Thanks to Steve McNiven-Scott for his contributions - https://github.com/sitefinitysteve
5-
* Thanks to Gabriel Marinho for his contributions - https://github.com/gabrielbiga
63
* https://twitter.com/BradWayneMartin
74
* https://github.com/bradmartin
85
* Pull requests are welcome. Enjoy!
@@ -13,173 +10,184 @@ import { Color } from "color";
1310
import { PanGestureEventData } from "ui/gestures";
1411

1512
export class FloatingActionButtonBase extends View implements definitions.Fab {
13+
private swipeEventAttached: boolean = false;
14+
public hideOnSwipeOfView: string;
15+
public swipeAnimation:
16+
| "slideUp"
17+
| "slideDown"
18+
| "slideRight"
19+
| "slideLeft"
20+
| "scale";
21+
public hideAnimationDuration: number;
1622

17-
private swipeEventAttached: boolean = false;
18-
public hideOnSwipeOfView: string;
19-
public swipeAnimation: "slideUp" | "slideDown" | "slideRight" | "slideLeft" | "scale";
20-
public hideAnimationDuration: number;
23+
public rippleColor: Color;
24+
public icon: string;
25+
public backColor: Color;
2126

22-
public rippleColor: Color;
23-
public icon: string;
24-
public backColor: Color;
25-
26-
getDurationDefault(animationType: string) {
27-
switch (animationType) {
28-
case "scale":
29-
return 100;
30-
default:
31-
return 300;
32-
}
27+
getDurationDefault(animationType: string) {
28+
switch (animationType) {
29+
case "scale":
30+
return 100;
31+
default:
32+
return 300;
3333
}
34+
}
3435

35-
onLoaded() {
36-
super.onLoaded()
37-
38-
if (this.swipeEventAttached === false) {
39-
var fab = this;
40-
if (this.hideOnSwipeOfView !== undefined) {
41-
var swipeItem = this.page.getViewById(this.hideOnSwipeOfView);
42-
var animationType = (this.swipeAnimation) ? this.swipeAnimation : "slideDown"
43-
44-
if (swipeItem !== undefined) {
45-
var duration = (this.hideAnimationDuration) ? this.hideAnimationDuration : this.getDurationDefault(animationType);
36+
onLoaded() {
37+
super.onLoaded();
4638

47-
swipeItem.on("pan", (args: PanGestureEventData) => {
48-
//Swipe up
49-
if (args.deltaY < -10) {
50-
switch (animationType) {
51-
case "slideUp":
52-
fab.animate({
53-
translate: {
54-
x: 0,
55-
y: -200
56-
},
57-
opacity: 0,
58-
duration: duration
59-
});
60-
break;
61-
case "slideDown":
62-
fab.animate({
63-
translate: {
64-
x: 0,
65-
y: 200
66-
},
67-
opacity: 0,
68-
duration: duration
69-
});
70-
break;
71-
case "slideRight":
72-
fab.animate({
73-
translate: {
74-
x: 200,
75-
y: 0
76-
},
77-
opacity: 0,
78-
duration: duration
79-
});
80-
break;
81-
case "slideLeft":
82-
fab.animate({
83-
translate: {
84-
x: -200,
85-
y: 0
86-
},
87-
opacity: 0,
88-
duration: duration
89-
});
90-
break;
91-
case "scale":
92-
fab.animate({
93-
scale: {
94-
x: 0,
95-
y: 0
96-
},
97-
duration: duration
98-
});
99-
break;
100-
}
39+
if (this.swipeEventAttached === false) {
40+
var fab = this;
41+
if (this.hideOnSwipeOfView !== undefined) {
42+
var swipeItem = this.page.getViewById(this.hideOnSwipeOfView);
43+
var animationType = this.swipeAnimation
44+
? this.swipeAnimation
45+
: "slideDown";
10146

102-
}
103-
//Swipe Down
104-
else if (args.deltaY > 0) {
105-
switch (animationType) {
106-
case "slideUp":
107-
fab.animate({
108-
translate: {
109-
x: 0,
110-
y: 0
111-
},
112-
opacity: 1,
113-
duration: duration
114-
});
115-
break;
116-
case "slideDown":
117-
fab.animate({
118-
translate: {
119-
x: 0,
120-
y: 0
121-
},
122-
opacity: 1,
123-
duration: duration
124-
});
125-
break;
126-
case "slideRight":
127-
fab.animate({
128-
translate: {
129-
x: 0,
130-
y: 0
131-
},
132-
opacity: 1,
133-
duration: duration
134-
});
135-
break;
136-
case "slideLeft":
137-
fab.animate({
138-
translate: {
139-
x: 0,
140-
y: 0
141-
},
142-
opacity: 1,
143-
duration: duration
144-
});
145-
break;
146-
case "scale":
147-
fab.animate({
148-
scale: {
149-
x: 1,
150-
y: 1
151-
},
152-
duration: duration
153-
});
154-
break;
155-
}
156-
};
157-
});
47+
if (swipeItem !== undefined) {
48+
var duration = this.hideAnimationDuration
49+
? this.hideAnimationDuration
50+
: this.getDurationDefault(animationType);
15851

159-
this.swipeEventAttached = true;
160-
}
52+
swipeItem.on("pan", (args: PanGestureEventData) => {
53+
//Swipe up
54+
if (args.deltaY < -10) {
55+
switch (animationType) {
56+
case "slideUp":
57+
fab.animate({
58+
translate: {
59+
x: 0,
60+
y: -200
61+
},
62+
opacity: 0,
63+
duration: duration
64+
});
65+
break;
66+
case "slideDown":
67+
fab.animate({
68+
translate: {
69+
x: 0,
70+
y: 200
71+
},
72+
opacity: 0,
73+
duration: duration
74+
});
75+
break;
76+
case "slideRight":
77+
fab.animate({
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+
translate: {
89+
x: -200,
90+
y: 0
91+
},
92+
opacity: 0,
93+
duration: duration
94+
});
95+
break;
96+
case "scale":
97+
fab.animate({
98+
scale: {
99+
x: 0,
100+
y: 0
101+
},
102+
duration: duration
103+
});
104+
break;
105+
}
106+
} else if (args.deltaY > 0) {
107+
//Swipe Down
108+
switch (animationType) {
109+
case "slideUp":
110+
fab.animate({
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+
translate: {
122+
x: 0,
123+
y: 0
124+
},
125+
opacity: 1,
126+
duration: duration
127+
});
128+
break;
129+
case "slideRight":
130+
fab.animate({
131+
translate: {
132+
x: 0,
133+
y: 0
134+
},
135+
opacity: 1,
136+
duration: duration
137+
});
138+
break;
139+
case "slideLeft":
140+
fab.animate({
141+
translate: {
142+
x: 0,
143+
y: 0
144+
},
145+
opacity: 1,
146+
duration: duration
147+
});
148+
break;
149+
case "scale":
150+
fab.animate({
151+
scale: {
152+
x: 1,
153+
y: 1
154+
},
155+
duration: duration
156+
});
157+
break;
158+
}
161159
}
160+
});
161+
162+
this.swipeEventAttached = true;
162163
}
163-
};
164+
}
165+
}
166+
}
164167
}
165168

166-
167169
export const backColorProperty = new Property<FloatingActionButtonBase, Color>({
168-
name: "backColor",
169-
equalityComparer: Color.equals,
170-
valueConverter: (v) => new Color(v),
171-
valueChanged: (fab, oldValue, newValue) => {
172-
fab.style.backgroundColor = newValue
173-
}
170+
name: "backColor",
171+
equalityComparer: Color.equals,
172+
valueConverter: v => new Color(v),
173+
valueChanged: (fab, oldValue, newValue) => {
174+
fab.style.backgroundColor = newValue;
175+
}
174176
});
175177
backColorProperty.register(FloatingActionButtonBase);
176178

177179
export const iconProperty = new Property<FloatingActionButtonBase, string>({
178-
name: "icon", affectsLayout: true
180+
name: "icon",
181+
affectsLayout: true
179182
});
180183
iconProperty.register(FloatingActionButtonBase);
181184

182-
export const rippleColorProperty = new Property<FloatingActionButtonBase, Color>({
183-
name: "rippleColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v)
185+
export const rippleColorProperty = new Property<
186+
FloatingActionButtonBase,
187+
Color
188+
>({
189+
name: "rippleColor",
190+
equalityComparer: Color.equals,
191+
valueConverter: v => new Color(v)
184192
});
185193
rippleColorProperty.register(FloatingActionButtonBase);

0 commit comments

Comments
 (0)