Skip to content

Commit e1f1f3e

Browse files
HendrixerHendrixer
committed
(refactor) create factory classes
1 parent 2b8d15c commit e1f1f3e

File tree

7 files changed

+239
-224
lines changed

7 files changed

+239
-224
lines changed

‎Gulpfile.js

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ var gulp = require('gulp'),
44

55
var paths = {
66
animations: [
7+
'./src/animationsAssist.js',
78
'./src/animationClass.js',
89
'./src/animations/fade.js',
910
'./src/animations/bounce.js',

‎dist/animations.js

+116-109
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,119 @@
1-
angular.module('animations.create', [])
1+
angular.module('animations.assist', [])
22

33

4+
.factory('Assist', function ($filter){
5+
return {
6+
7+
emit: function(element, name, trigger){
8+
var $scope = angular.element(element).scope();
9+
return function (){
10+
$scope.$emit(trigger + name);
11+
};
12+
},
13+
14+
parseClassList: function(element){
15+
var list = element[0].classList,
16+
results = {trigger: false, ease: 'Elastic'};
17+
angular.forEach(list, function (className){
18+
if(className.slice(0,9) === 'ef-easing'){
19+
results.ease = ($filter('cap')(className.slice(10)));
20+
}
21+
if(className === 'ef-trigger'){
22+
results.trigger = true;
23+
}
24+
});
25+
return results;
26+
}
27+
};
28+
})
29+
430
.filter('cap', function(){
531
return function (input){
632
return input.charAt(0).toUpperCase() + input.slice(1);
733
};
8-
})
34+
});
35+
angular.module('animations.create', ['animations.assist'])
936

10-
.factory('Animation', ['$timeout', '$window', '$filter', function ($timeout, $window, $filter){
11-
var getScope = function(e){
12-
return angular.element(e).scope();
13-
};
14-
var emit = function(element, name){
15-
var $scope = getScope(element);
16-
return function (){
17-
$scope.$emit(name);
18-
};
19-
};
2037

21-
var parseClassList = function(element){
22-
var list = element[0].classList,
23-
results = {trigger: false, ease: 'Elastic'};
24-
angular.forEach(list, function (className){
25-
if(className.slice(0,9) === 'ef-easing'){
26-
results.ease = ($filter('cap')(className.slice(10)));
27-
}
28-
if(className === 'ef-trigger'){
29-
results.trigger = true;
30-
}
31-
});
32-
return results;
33-
};
3438

35-
return {
36-
fade: function(effect){
37-
var inEffect = effect.enter,
39+
40+
.factory('FadeAnimation', ['$timeout', '$window', 'Assist', function ($timeout, $window, Assist){
41+
return function (effect){
42+
var inEffect = effect.enter,
3843
outEffect = effect.leave,
3944
outEffectLeave = effect.inverse || effect.leave,
4045
duration = effect.duration,
4146
enter,
4247
leave,
4348
move;
4449

45-
this.enter = function(element, done){
46-
var options = parseClassList(element);
47-
48-
options.trigger ? inEffect.onComplete = emit(element, effect.animation) : inEffect.onComplete = done;
49-
inEffect.ease = $window[options.ease].easeOut;
50-
TweenMax.set(element, outEffect);
51-
enter = TweenMax.to(element, duration, inEffect);
52-
return function (canceled){
53-
if(canceled){
54-
$timeout(function(){
55-
angular.element(element).remove();
56-
}, 300);
57-
} else {
58-
enter.resume();
59-
}
60-
};
50+
this.enter = function(element, done){
51+
var options = Assist.parseClassList(element);
52+
53+
options.trigger ? inEffect.onComplete = Assist.emit(element, effect.animation, 'enter') : inEffect.onComplete = done;
54+
inEffect.ease = $window[options.ease].easeOut;
55+
TweenMax.set(element, outEffect);
56+
enter = TweenMax.to(element, duration, inEffect);
57+
return function (canceled){
58+
if(canceled){
59+
$timeout(function(){
60+
angular.element(element).remove();
61+
}, 300);
62+
} else {
63+
enter.resume();
64+
}
6165
};
66+
};
6267

63-
this.leave = function(element, done){
64-
var options = parseClassList(element);
65-
outEffect.onComplete = done;
66-
outEffect.ease = $window[options.ease].easeIn;
67-
TweenMax.set(element, inEffect);
68-
leave = TweenMax.to(element, duration, outEffectLeave);
69-
return function (canceled){
70-
if(canceled){
68+
this.leave = function(element, done){
69+
var options = Assist.parseClassList(element);
70+
outEffect.onComplete = done;
71+
outEffect.ease = $window[options.ease].easeIn;
72+
TweenMax.set(element, inEffect);
73+
leave = TweenMax.to(element, duration, outEffectLeave);
74+
return function (canceled){
75+
if(canceled){
7176

72-
}
73-
};
77+
}
7478
};
79+
};
7580

76-
this.move = function(element, done){
77-
console.log('move');
78-
inEffect.onComplete = done;
79-
TweenMax.set(element, outEffect);
80-
move = TweenMax.to(element. duration, inEffect);
81-
return function (canceled){
82-
if(canceled){
83-
84-
move.kill();
85-
}
86-
};
87-
};
81+
this.move = function(element, done){
82+
console.log('move');
83+
inEffect.onComplete = done;
84+
TweenMax.set(element, outEffect);
85+
move = TweenMax.to(element. duration, inEffect);
86+
return function (canceled){
87+
if(canceled){
8888

89-
this.beforeAddClass = function(element, className, done){
90-
outEffect.onComplete = done;
91-
if(className === 'ng-hide'){
92-
TweenMax.to(element, duration, outEffectLeave);
93-
} else {
94-
done();
89+
move.kill();
9590
}
9691
};
92+
};
9793

98-
this.removeClass = function(element, className, done){
99-
inEffect.onComplete = done;
100-
if(className === 'ng-hide'){
101-
TweenMax.set(element, outEffect);
102-
TweenMax.to(element, duration, inEffect);
103-
} else {
104-
done();
105-
}
106-
};
107-
},
94+
this.beforeAddClass = function(element, className, done){
95+
outEffect.onComplete = done;
96+
if(className === 'ng-hide'){
97+
TweenMax.to(element, duration, outEffectLeave);
98+
} else {
99+
done();
100+
}
101+
};
108102

109-
bounce: function(effect){
103+
this.removeClass = function(element, className, done){
104+
inEffect.onComplete = done;
105+
if(className === 'ng-hide'){
106+
TweenMax.set(element, outEffect);
107+
TweenMax.to(element, duration, inEffect);
108+
} else {
109+
done();
110+
}
111+
};
112+
};
113+
}])
114+
115+
.factory('BounceAnimation', ['$timeout', '$window', 'Assist', function ($timeout, $window, Assist){
116+
return function (effect){
110117
var start = effect.first,
111118
mid = effect.mid,
112119
third = effect.third,
@@ -164,26 +171,26 @@ angular.module('animations.create', [])
164171
this.removeClass = function(element, className, done){
165172

166173
};
167-
}
168-
};
174+
};
169175
}]);
170176

177+
171178
var fades = angular.module('animations.fades', ['animations.create']);
172179

173180

174-
fades.animation('.ef-fade-normal', function (Animation){
181+
fades.animation('.ef-fade-normal', function (FadeAnimation){
175182
var effect = {
176183
enter: {opacity: 1},
177184
leave: {opacity: 0},
178185
duration: 0.6,
179186
animation: 'fade-normal'
180187
};
181188

182-
return new Animation.fade(effect);
189+
return new FadeAnimation(effect);
183190
});
184191

185192

186-
fades.animation('.ef-fade-down', function (Animation){
193+
fades.animation('.ef-fade-down', function (FadeAnimation){
187194
var effect = {
188195
enter: {opacity: 1, transform: 'translateY(0)'},
189196
leave: {opacity: 0, transform: 'translateY(-20px)'},
@@ -192,10 +199,10 @@ fades.animation('.ef-fade-down', function (Animation){
192199
animation: 'fade-down'
193200
};
194201

195-
return new Animation.fade(effect);
202+
return new FadeAnimation(effect);
196203
});
197204

198-
fades.animation('.ef-fade-down-big', function (Animation){
205+
fades.animation('.ef-fade-down-big', function (FadeAnimation){
199206
var effect = {
200207
enter: {opacity: 1, transform: 'translateY(0)'},
201208
leave: {opacity: 0, transform: 'translateY(-2000px)'},
@@ -204,21 +211,21 @@ fades.animation('.ef-fade-down-big', function (Animation){
204211
animation: 'fade-down-big'
205212
};
206213

207-
return new Animation.fade(effect);
214+
return new FadeAnimation(effect);
208215
});
209216

210-
fades.animation('.ef-fade-left', function (Animation){
217+
fades.animation('.ef-fade-left', function (FadeAnimation){
211218
var effect = {
212219
enter: {opacity: 1, transform: 'translateX(0)'},
213220
leave: {opacity: 0, transform: 'translateX(-20px)'},
214221
inverse: {opacity: 0, transform: 'translateX(20px)'},
215222
duration: 0.8,
216223
animation: 'fade-left'
217224
};
218-
return new Animation.fade(effect);
225+
return new FadeAnimation(effect);
219226
});
220227

221-
fades.animation('.ef-fade-left-big', function (Animation){
228+
fades.animation('.ef-fade-left-big', function (FadeAnimation){
222229
var effect = {
223230
enter: {opacity: 1, transform: 'translateX(0)'},
224231
leave: {opacity: 0, transform: 'translateX(-2000px)'},
@@ -227,10 +234,10 @@ fades.animation('.ef-fade-left-big', function (Animation){
227234
animation: 'fade-left-big'
228235
};
229236

230-
return new Animation.fade(effect);
237+
return new FadeAnimation(effect);
231238
});
232239

233-
fades.animation('.ef-fade-right', function (Animation){
240+
fades.animation('.ef-fade-right', function (FadeAnimation){
234241
var effect = {
235242
enter: {opacity: 1, transform: 'translateX(0)'},
236243
leave: {opacity: 0, transform:'translateX(20px)'},
@@ -239,10 +246,10 @@ fades.animation('.ef-fade-right', function (Animation){
239246
animation: 'fade-right'
240247
};
241248

242-
return new Animation.fade(effect);
249+
return new FadeAnimation(effect);
243250
});
244251

245-
fades.animation('.ef-fade-right-big', function (Animation){
252+
fades.animation('.ef-fade-right-big', function (FadeAnimation){
246253
var effect = {
247254
enter: {opacity: 1, transform: 'translateX(0)'},
248255
leave: {opacity: 0, transform:'translateX(2000px)'},
@@ -251,10 +258,10 @@ fades.animation('.ef-fade-right-big', function (Animation){
251258
animation: 'fade-right-big'
252259
};
253260

254-
return new Animation.fade(effect);
261+
return new FadeAnimation(effect);
255262
});
256263

257-
fades.animation('.ef-fade-up', function (Animation){
264+
fades.animation('.ef-fade-up', function (FadeAnimation){
258265
var effect = {
259266
enter: {opacity: 1, transform: 'translateY(0)'},
260267
leave: {opacity: 0, transform:'translateY(20px)'},
@@ -263,10 +270,10 @@ fades.animation('.ef-fade-up', function (Animation){
263270
animation: 'fade-up'
264271
};
265272

266-
return new Animation.fade(effect);
273+
return new FadeAnimation(effect);
267274
});
268275

269-
fades.animation('.ef-fade-up-big', function (Animation){
276+
fades.animation('.ef-fade-up-big', function (FadeAnimation){
270277
var effect = {
271278
enter: {opacity: 1, transform: 'translateY(0)'},
272279
leave: {opacity: 0, transform:'translateY(2000px)'},
@@ -275,11 +282,11 @@ fades.animation('.ef-fade-up-big', function (Animation){
275282
animation: 'fade-up-big'
276283
};
277284

278-
return new Animation.fade(effect);
285+
return new FadeAnimation(effect);
279286
});
280287
var bounces = angular.module('animations.bounces', ['animations.create']);
281288

282-
bounces.animation('.bounce-normal', function (Animation){
289+
bounces.animation('.ef-bounce-normal', function (BounceAnimation){
283290
var effect = {
284291
first: {opacity: 0, transform: 'scale(.3)'},
285292
mid: {opacity: 1, transform: 'scale(1.05)'},
@@ -288,10 +295,10 @@ bounces.animation('.bounce-normal', function (Animation){
288295
duration: 0.2
289296
};
290297

291-
return new Animation.bounce(effect);
298+
return new BounceAnimation(effect);
292299
});
293300

294-
bounces.animation('.bounce-down', function (Animation){
301+
bounces.animation('.ef-bounce-down', function (BounceAnimation){
295302
var effect = {
296303
first: {opacity: 0, transform: 'translateY(-2000px)'},
297304
mid: {opacity: 1, transform: 'translateY(30px)'},
@@ -300,10 +307,10 @@ bounces.animation('.bounce-down', function (Animation){
300307
duration: 0.2
301308
};
302309

303-
return new Animation.bounce(effect);
310+
return new BounceAnimation(effect);
304311
});
305312

306-
bounces.animation('.bounce-left', function (Animation){
313+
bounces.animation('.ef-bounce-left', function (BounceAnimation){
307314
var effect = {
308315
first: {opacity: 0, transform: 'translateX(-2000px)'},
309316
mid: {opacity: 1, transform: 'translateX(30px)'},
@@ -312,7 +319,7 @@ bounces.animation('.bounce-left', function (Animation){
312319
duration: 0.2
313320
};
314321

315-
return new Animation.bounce(effect);
322+
return new BounceAnimation(effect);
316323
});
317324
var animate = angular.module('animations',
318325
[

0 commit comments

Comments
 (0)