@base-framework/base 2.6.1 → 2.6.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 +1 -0
- package/dist/base.js +1 -0
- package/package.json +30 -26
- package/.jshintrc +0 -3
- package/base.js +0 -41
- package/base.min.js +0 -1
- package/core.js +0 -1
- package/data-tracker.js +0 -351
- package/es5/base.js +0 -2968
- package/es5/modules/ajax.js +0 -663
- package/es5/modules/animation.js +0 -188
- package/es5/modules/animations.js +0 -1080
- package/es5/modules/atom.js +0 -65
- package/es5/modules/component.js +0 -1310
- package/es5/modules/data-binder.js +0 -1131
- package/es5/modules/data.js +0 -1808
- package/es5/modules/date.js +0 -525
- package/es5/modules/form-validator.js +0 -324
- package/es5/modules/history.js +0 -126
- package/es5/modules/html-builder.js +0 -461
- package/es5/modules/layout.js +0 -1679
- package/es5/modules/mouse.js +0 -124
- package/es5/modules/nav-link.js +0 -123
- package/es5/modules/olderversions/animations-ease.js +0 -1095
- package/es5/modules/olderversions/animations-update.js +0 -1048
- package/es5/modules/olderversions/base-animations.js +0 -636
- package/es5/modules/olderversions/base-component-class.js +0 -100
- package/es5/modules/olderversions/base-data-binder-1.js +0 -407
- package/es5/modules/olderversions/base-data-binder-class.js +0 -358
- package/es5/modules/olderversions/base-layout-parser-class.js +0 -172
- package/es5/modules/olderversions/base-mode-1.js +0 -777
- package/es5/modules/olderversions/base-model-class.js +0 -585
- package/es5/modules/olderversions/data-binder/element-binding/base-data-binder-class.js +0 -358
- package/es5/modules/olderversions/data-binder/element-binding/base-model-class.js +0 -585
- package/es5/modules/olderversions/data-binder/model-binding/base-data-binder-class.js +0 -353
- package/es5/modules/olderversions/data-binder/model-binding/base-model-class.js +0 -604
- package/es5/modules/olderversions/data-binder-update-watcher.js +0 -640
- package/es5/modules/olderversions/data-tracker.js +0 -187
- package/es5/modules/olderversions/event-update.js +0 -666
- package/es5/modules/olderversions/nav-link.js +0 -119
- package/es5/modules/olderversions/router-with-templates-1.js +0 -785
- package/es5/modules/olderversions/router-with-templates.js +0 -701
- package/es5/modules/prototypes/ajax.js +0 -657
- package/es5/modules/prototypes/atom.js +0 -65
- package/es5/modules/prototypes/component.js +0 -972
- package/es5/modules/prototypes/data-binder.js +0 -1089
- package/es5/modules/prototypes/data.js +0 -1290
- package/es5/modules/prototypes/html-builder.js +0 -414
- package/es5/modules/prototypes/layout.js +0 -879
- package/es5/modules/router.js +0 -1680
- package/es5/modules/state.js +0 -274
- package/es6/.jshintrc +0 -3
- package/es6/base.js +0 -41
- package/es6/core.js +0 -1
- package/es6/data-tracker.js +0 -351
- package/es6/events.js +0 -602
- package/es6/legacy/es5/base.js +0 -2968
- package/es6/legacy/es5/modules/ajax.js +0 -663
- package/es6/legacy/es5/modules/animation.js +0 -188
- package/es6/legacy/es5/modules/animations.js +0 -1080
- package/es6/legacy/es5/modules/atom.js +0 -65
- package/es6/legacy/es5/modules/component.js +0 -1310
- package/es6/legacy/es5/modules/data-binder.js +0 -1131
- package/es6/legacy/es5/modules/data.js +0 -1808
- package/es6/legacy/es5/modules/date.js +0 -525
- package/es6/legacy/es5/modules/form-validator.js +0 -324
- package/es6/legacy/es5/modules/history.js +0 -126
- package/es6/legacy/es5/modules/html-builder.js +0 -461
- package/es6/legacy/es5/modules/layout.js +0 -1679
- package/es6/legacy/es5/modules/mouse.js +0 -124
- package/es6/legacy/es5/modules/nav-link.js +0 -123
- package/es6/legacy/es5/modules/olderversions/animations-ease.js +0 -1095
- package/es6/legacy/es5/modules/olderversions/animations-update.js +0 -1048
- package/es6/legacy/es5/modules/olderversions/base-animations.js +0 -636
- package/es6/legacy/es5/modules/olderversions/base-component-class.js +0 -100
- package/es6/legacy/es5/modules/olderversions/base-data-binder-1.js +0 -407
- package/es6/legacy/es5/modules/olderversions/base-data-binder-class.js +0 -358
- package/es6/legacy/es5/modules/olderversions/base-layout-parser-class.js +0 -172
- package/es6/legacy/es5/modules/olderversions/base-mode-1.js +0 -777
- package/es6/legacy/es5/modules/olderversions/base-model-class.js +0 -585
- package/es6/legacy/es5/modules/olderversions/data-binder/element-binding/base-data-binder-class.js +0 -358
- package/es6/legacy/es5/modules/olderversions/data-binder/element-binding/base-model-class.js +0 -585
- package/es6/legacy/es5/modules/olderversions/data-binder/model-binding/base-data-binder-class.js +0 -353
- package/es6/legacy/es5/modules/olderversions/data-binder/model-binding/base-model-class.js +0 -604
- package/es6/legacy/es5/modules/olderversions/data-binder-update-watcher.js +0 -640
- package/es6/legacy/es5/modules/olderversions/data-tracker.js +0 -187
- package/es6/legacy/es5/modules/olderversions/event-update.js +0 -666
- package/es6/legacy/es5/modules/olderversions/nav-link.js +0 -119
- package/es6/legacy/es5/modules/olderversions/router-with-templates-1.js +0 -785
- package/es6/legacy/es5/modules/olderversions/router-with-templates.js +0 -701
- package/es6/legacy/es5/modules/prototypes/ajax.js +0 -657
- package/es6/legacy/es5/modules/prototypes/atom.js +0 -65
- package/es6/legacy/es5/modules/prototypes/component.js +0 -972
- package/es6/legacy/es5/modules/prototypes/data-binder.js +0 -1089
- package/es6/legacy/es5/modules/prototypes/data.js +0 -1290
- package/es6/legacy/es5/modules/prototypes/html-builder.js +0 -414
- package/es6/legacy/es5/modules/prototypes/layout.js +0 -879
- package/es6/legacy/es5/modules/router.js +0 -1680
- package/es6/legacy/es5/modules/state.js +0 -274
- package/es6/main.js +0 -1331
- package/es6/modules/ajax/ajax.js +0 -514
- package/es6/modules/animation/animation.js +0 -236
- package/es6/modules/animations/animation-controller.js +0 -231
- package/es6/modules/animations/animation.js +0 -64
- package/es6/modules/animations/attr-movement.js +0 -66
- package/es6/modules/animations/css-movement.js +0 -170
- package/es6/modules/animations/movement.js +0 -131
- package/es6/modules/animations/value.js +0 -187
- package/es6/modules/atom/atom.js +0 -54
- package/es6/modules/component/component.js +0 -230
- package/es6/modules/component/event-helper.js +0 -119
- package/es6/modules/component/jot.js +0 -144
- package/es6/modules/component/state-helper.js +0 -262
- package/es6/modules/component/unit.js +0 -551
- package/es6/modules/data/attrs.js +0 -40
- package/es6/modules/data/basic-data.js +0 -500
- package/es6/modules/data/data-utils.js +0 -29
- package/es6/modules/data/data.js +0 -3
- package/es6/modules/data/deep-data.js +0 -541
- package/es6/modules/data/model-service.js +0 -528
- package/es6/modules/data/model.js +0 -133
- package/es6/modules/data/simple-data.js +0 -33
- package/es6/modules/data-binder/connection-tracker.js +0 -113
- package/es6/modules/data-binder/connection.js +0 -16
- package/es6/modules/data-binder/data-binder.js +0 -352
- package/es6/modules/data-binder/data-pub-sub.js +0 -141
- package/es6/modules/data-binder/data-source.js +0 -56
- package/es6/modules/data-binder/element-source.js +0 -219
- package/es6/modules/data-binder/one-way-connection.js +0 -46
- package/es6/modules/data-binder/one-way-source.js +0 -43
- package/es6/modules/data-binder/source.js +0 -36
- package/es6/modules/data-binder/two-way-connection.js +0 -75
- package/es6/modules/data-binder/two-way-source.js +0 -41
- package/es6/modules/date/date.js +0 -544
- package/es6/modules/history/history.js +0 -89
- package/es6/modules/html-builder/html-builder.js +0 -434
- package/es6/modules/import/import.js +0 -390
- package/es6/modules/layout/layout-builder.js +0 -1269
- package/es6/modules/layout/layout-parser.js +0 -134
- package/es6/modules/layout/watcher-helper.js +0 -282
- package/es6/modules/mouse/mouse.js +0 -114
- package/es6/modules/router/component-helper.js +0 -163
- package/es6/modules/router/history-controller.js +0 -216
- package/es6/modules/router/nav-link.js +0 -124
- package/es6/modules/router/route.js +0 -401
- package/es6/modules/router/router.js +0 -789
- package/es6/modules/router/utils.js +0 -31
- package/es6/modules/state/state-target.js +0 -91
- package/es6/modules/state/state.js +0 -171
- package/es6/package-lock.json +0 -13
- package/es6/package.json +0 -28
- package/es6/shared/objects.js +0 -99
- package/events.js +0 -602
- package/legacy/es5/base.js +0 -2968
- package/legacy/es5/modules/ajax.js +0 -663
- package/legacy/es5/modules/animation.js +0 -188
- package/legacy/es5/modules/animations.js +0 -1080
- package/legacy/es5/modules/atom.js +0 -65
- package/legacy/es5/modules/component.js +0 -1310
- package/legacy/es5/modules/data-binder.js +0 -1131
- package/legacy/es5/modules/data.js +0 -1808
- package/legacy/es5/modules/date.js +0 -525
- package/legacy/es5/modules/form-validator.js +0 -324
- package/legacy/es5/modules/history.js +0 -126
- package/legacy/es5/modules/html-builder.js +0 -461
- package/legacy/es5/modules/layout.js +0 -1679
- package/legacy/es5/modules/mouse.js +0 -124
- package/legacy/es5/modules/nav-link.js +0 -123
- package/legacy/es5/modules/olderversions/animations-ease.js +0 -1095
- package/legacy/es5/modules/olderversions/animations-update.js +0 -1048
- package/legacy/es5/modules/olderversions/base-animations.js +0 -636
- package/legacy/es5/modules/olderversions/base-component-class.js +0 -100
- package/legacy/es5/modules/olderversions/base-data-binder-1.js +0 -407
- package/legacy/es5/modules/olderversions/base-data-binder-class.js +0 -358
- package/legacy/es5/modules/olderversions/base-layout-parser-class.js +0 -172
- package/legacy/es5/modules/olderversions/base-mode-1.js +0 -777
- package/legacy/es5/modules/olderversions/base-model-class.js +0 -585
- package/legacy/es5/modules/olderversions/data-binder/element-binding/base-data-binder-class.js +0 -358
- package/legacy/es5/modules/olderversions/data-binder/element-binding/base-model-class.js +0 -585
- package/legacy/es5/modules/olderversions/data-binder/model-binding/base-data-binder-class.js +0 -353
- package/legacy/es5/modules/olderversions/data-binder/model-binding/base-model-class.js +0 -604
- package/legacy/es5/modules/olderversions/data-binder-update-watcher.js +0 -640
- package/legacy/es5/modules/olderversions/data-tracker.js +0 -187
- package/legacy/es5/modules/olderversions/event-update.js +0 -666
- package/legacy/es5/modules/olderversions/nav-link.js +0 -119
- package/legacy/es5/modules/olderversions/router-with-templates-1.js +0 -785
- package/legacy/es5/modules/olderversions/router-with-templates.js +0 -701
- package/legacy/es5/modules/prototypes/ajax.js +0 -657
- package/legacy/es5/modules/prototypes/atom.js +0 -65
- package/legacy/es5/modules/prototypes/component.js +0 -972
- package/legacy/es5/modules/prototypes/data-binder.js +0 -1089
- package/legacy/es5/modules/prototypes/data.js +0 -1290
- package/legacy/es5/modules/prototypes/html-builder.js +0 -414
- package/legacy/es5/modules/prototypes/layout.js +0 -879
- package/legacy/es5/modules/router.js +0 -1680
- package/legacy/es5/modules/state.js +0 -274
- package/main.js +0 -1331
- package/modules/ajax/ajax.js +0 -514
- package/modules/animation/animation.js +0 -236
- package/modules/animations/animation-controller.js +0 -231
- package/modules/animations/animation.js +0 -64
- package/modules/animations/attr-movement.js +0 -66
- package/modules/animations/css-movement.js +0 -170
- package/modules/animations/movement.js +0 -131
- package/modules/animations/value.js +0 -187
- package/modules/atom/atom.js +0 -54
- package/modules/component/component.js +0 -230
- package/modules/component/event-helper.js +0 -119
- package/modules/component/jot.js +0 -144
- package/modules/component/state-helper.js +0 -262
- package/modules/component/unit.js +0 -551
- package/modules/data/attrs.js +0 -40
- package/modules/data/basic-data.js +0 -500
- package/modules/data/data-utils.js +0 -29
- package/modules/data/data.js +0 -3
- package/modules/data/deep-data.js +0 -541
- package/modules/data/model-service.js +0 -528
- package/modules/data/model.js +0 -133
- package/modules/data/simple-data.js +0 -33
- package/modules/data-binder/connection-tracker.js +0 -113
- package/modules/data-binder/connection.js +0 -16
- package/modules/data-binder/data-binder.js +0 -352
- package/modules/data-binder/data-pub-sub.js +0 -141
- package/modules/data-binder/data-source.js +0 -56
- package/modules/data-binder/element-source.js +0 -219
- package/modules/data-binder/one-way-connection.js +0 -46
- package/modules/data-binder/one-way-source.js +0 -43
- package/modules/data-binder/source.js +0 -36
- package/modules/data-binder/two-way-connection.js +0 -75
- package/modules/data-binder/two-way-source.js +0 -41
- package/modules/date/date.js +0 -544
- package/modules/history/history.js +0 -89
- package/modules/html-builder/html-builder.js +0 -434
- package/modules/import/import.js +0 -390
- package/modules/layout/layout-builder.js +0 -1269
- package/modules/layout/layout-parser.js +0 -134
- package/modules/layout/watcher-helper.js +0 -282
- package/modules/mouse/mouse.js +0 -114
- package/modules/router/component-helper.js +0 -163
- package/modules/router/history-controller.js +0 -216
- package/modules/router/nav-link.js +0 -124
- package/modules/router/route.js +0 -401
- package/modules/router/router.js +0 -789
- package/modules/router/utils.js +0 -31
- package/modules/state/state-target.js +0 -91
- package/modules/state/state.js +0 -171
- package/shared/objects.js +0 -99
- package/update +0 -16
|
@@ -1,1095 +0,0 @@
|
|
|
1
|
-
/* base framework module */
|
|
2
|
-
/*
|
|
3
|
-
javascript animation add and remove with full object
|
|
4
|
-
animation tracking
|
|
5
|
-
*/
|
|
6
|
-
(function()
|
|
7
|
-
{
|
|
8
|
-
"use strict";
|
|
9
|
-
|
|
10
|
-
var math =
|
|
11
|
-
{
|
|
12
|
-
round: function(number)
|
|
13
|
-
{
|
|
14
|
-
return ~~ (0.5 + number);
|
|
15
|
-
},
|
|
16
|
-
|
|
17
|
-
floor: function(number)
|
|
18
|
-
{
|
|
19
|
-
return ~~number;
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
/* this will add and remove animations */
|
|
24
|
-
base.extend.animations =
|
|
25
|
-
{
|
|
26
|
-
version: '1.0.1',
|
|
27
|
-
|
|
28
|
-
/* this class tracks all objects being animated and can
|
|
29
|
-
add and remove them when completed */
|
|
30
|
-
animating:
|
|
31
|
-
{
|
|
32
|
-
objects: [],
|
|
33
|
-
|
|
34
|
-
/* this will create a new animation obj form the params obj
|
|
35
|
-
and add it to the objects array to be tracked.
|
|
36
|
-
@param (object) obj = the animation params
|
|
37
|
-
@return (object) the animation object */
|
|
38
|
-
add: function(obj)
|
|
39
|
-
{
|
|
40
|
-
var animation = null,
|
|
41
|
-
self = this;
|
|
42
|
-
|
|
43
|
-
/* we want to setup the animation to remove itself when
|
|
44
|
-
finished */
|
|
45
|
-
var removeAnimation = function(status)
|
|
46
|
-
{
|
|
47
|
-
self.remove(animation);
|
|
48
|
-
/* this will check to return the animation call back
|
|
49
|
-
and return the status */
|
|
50
|
-
var callBack = obj.callBack;
|
|
51
|
-
if(typeof callBack === 'function')
|
|
52
|
-
{
|
|
53
|
-
callBack(status);
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
/* this will create a new animation object and we
|
|
58
|
-
want to add it to the objects array */
|
|
59
|
-
animation = new AnimationController(obj, removeAnimation);
|
|
60
|
-
this.objects.push(animation);
|
|
61
|
-
return animation;
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
/* this will stop and remove an animation obj form the
|
|
65
|
-
params obj and remove it from being tracked.
|
|
66
|
-
@param (object) obj = the animation obj
|
|
67
|
-
@return (object) an instance of the animating object */
|
|
68
|
-
remove: function(obj)
|
|
69
|
-
{
|
|
70
|
-
this.stopAnimation(obj);
|
|
71
|
-
|
|
72
|
-
var objects = this.objects;
|
|
73
|
-
var indexNumber = base.inArray(objects, obj);
|
|
74
|
-
if(indexNumber > -1)
|
|
75
|
-
{
|
|
76
|
-
objects.splice(indexNumber, 1);
|
|
77
|
-
}
|
|
78
|
-
return this;
|
|
79
|
-
},
|
|
80
|
-
|
|
81
|
-
/* this will remove and stop any animation still active
|
|
82
|
-
on an element.
|
|
83
|
-
@param (object) element
|
|
84
|
-
@return (object) an instance of the animating object */
|
|
85
|
-
removeByElement: function(element)
|
|
86
|
-
{
|
|
87
|
-
if(element)
|
|
88
|
-
{
|
|
89
|
-
var animating = this.checkAnimating(element);
|
|
90
|
-
if(animating !== false)
|
|
91
|
-
{
|
|
92
|
-
var animations = animating;
|
|
93
|
-
for(var i = 0, maxLength = animations.length; i < maxLength; i++)
|
|
94
|
-
{
|
|
95
|
-
/* we want to remove the animation fron the object array */
|
|
96
|
-
this.remove(animations[i]);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
return this;
|
|
101
|
-
},
|
|
102
|
-
|
|
103
|
-
/* this will stop an animation if its still active.
|
|
104
|
-
@param (object) animation = the animation object
|
|
105
|
-
@return (object) an instance of the animating object */
|
|
106
|
-
stopAnimation: function(animation)
|
|
107
|
-
{
|
|
108
|
-
if(animation && typeof animation === 'object')
|
|
109
|
-
{
|
|
110
|
-
if(animation.status !== 'stopped')
|
|
111
|
-
{
|
|
112
|
-
/* we want to stop the animation */
|
|
113
|
-
animation.stop();
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
return this;
|
|
117
|
-
},
|
|
118
|
-
|
|
119
|
-
/* this will get all active aniamtion objects for an element.
|
|
120
|
-
@param (object) element
|
|
121
|
-
@return (array) an array of animation objects */
|
|
122
|
-
checkAnimating: function(element)
|
|
123
|
-
{
|
|
124
|
-
var animationArray = [];
|
|
125
|
-
|
|
126
|
-
if(element && typeof element === 'object')
|
|
127
|
-
{
|
|
128
|
-
/* we want to get any timers set for our object */
|
|
129
|
-
var objects = this.objects;
|
|
130
|
-
for(var i = 0, maxLength = objects.length; i < maxLength; i++)
|
|
131
|
-
{
|
|
132
|
-
var animation = objects[i];
|
|
133
|
-
if(animation.element === element)
|
|
134
|
-
{
|
|
135
|
-
animationArray.push(animation);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
return (animationArray.length >= 1)? animationArray : false;
|
|
140
|
-
},
|
|
141
|
-
|
|
142
|
-
/* this will stop all previous aniamtions on an element.
|
|
143
|
-
@param (object) element = the element
|
|
144
|
-
@return (object) an instance of the animating object */
|
|
145
|
-
stopPreviousAnimations: function(element)
|
|
146
|
-
{
|
|
147
|
-
/* we want to remove the timers and class names
|
|
148
|
-
from the object */
|
|
149
|
-
this.removeByElement(element);
|
|
150
|
-
return this;
|
|
151
|
-
},
|
|
152
|
-
|
|
153
|
-
reset: function()
|
|
154
|
-
{
|
|
155
|
-
this.objects = [];
|
|
156
|
-
return this;
|
|
157
|
-
}
|
|
158
|
-
},
|
|
159
|
-
|
|
160
|
-
add: function(obj)
|
|
161
|
-
{
|
|
162
|
-
return this.animating.add(obj);
|
|
163
|
-
},
|
|
164
|
-
|
|
165
|
-
remove: function(obj)
|
|
166
|
-
{
|
|
167
|
-
this.animating.remove(obj);
|
|
168
|
-
},
|
|
169
|
-
|
|
170
|
-
/* this will setup the request animation frame to
|
|
171
|
-
allow backwards compat. */
|
|
172
|
-
setupAnimationFrame: function()
|
|
173
|
-
{
|
|
174
|
-
var w = window;
|
|
175
|
-
/* setup request for prefix or setTimeout if
|
|
176
|
-
not supported */
|
|
177
|
-
w.requestAnimationFrame = (
|
|
178
|
-
w.requestAnimationFrame ||
|
|
179
|
-
w.mozRequestAnimationFrame ||
|
|
180
|
-
w.webkitRequestAnimationFrame ||
|
|
181
|
-
w.msRequestAnimationFrame ||
|
|
182
|
-
function(callBack)
|
|
183
|
-
{
|
|
184
|
-
return w.setTimeout(callBack, 1000 / 60);
|
|
185
|
-
}
|
|
186
|
-
);
|
|
187
|
-
|
|
188
|
-
/* setup cancel for prefix or setTimeout if
|
|
189
|
-
not supported */
|
|
190
|
-
w.cancelAnimationFrame = (
|
|
191
|
-
w.cancelAnimationFrame ||
|
|
192
|
-
w.mozCancelAnimationFrame ||
|
|
193
|
-
function(requestID)
|
|
194
|
-
{
|
|
195
|
-
w.clearTimeout(requestID);
|
|
196
|
-
}
|
|
197
|
-
);
|
|
198
|
-
},
|
|
199
|
-
|
|
200
|
-
stop: function(element)
|
|
201
|
-
{
|
|
202
|
-
this.animating.stopPreviousAnimations(element);
|
|
203
|
-
}
|
|
204
|
-
};
|
|
205
|
-
|
|
206
|
-
/* we want to setup the animation frame to support
|
|
207
|
-
all browsers */
|
|
208
|
-
base.animations.setupAnimationFrame();
|
|
209
|
-
|
|
210
|
-
/*
|
|
211
|
-
Animation class
|
|
212
|
-
|
|
213
|
-
this will create a new animation object to animate
|
|
214
|
-
attr, css, or css method properties.
|
|
215
|
-
|
|
216
|
-
animations can update multiple properties in one
|
|
217
|
-
aniamtion.
|
|
218
|
-
@param (object) element
|
|
219
|
-
@param (object) settings
|
|
220
|
-
*/
|
|
221
|
-
var Animation = base.Class.extend(
|
|
222
|
-
{
|
|
223
|
-
constructor: function(element, settings)
|
|
224
|
-
{
|
|
225
|
-
this.element = element;
|
|
226
|
-
|
|
227
|
-
/* this will track the animation properties being
|
|
228
|
-
animated */
|
|
229
|
-
this.movements = [];
|
|
230
|
-
this.setupMovements(settings);
|
|
231
|
-
},
|
|
232
|
-
|
|
233
|
-
setup: function()
|
|
234
|
-
{
|
|
235
|
-
this.setupMovements(settings);
|
|
236
|
-
},
|
|
237
|
-
|
|
238
|
-
addMovement: function(property)
|
|
239
|
-
{
|
|
240
|
-
this.movements.push(property);
|
|
241
|
-
},
|
|
242
|
-
|
|
243
|
-
setupMovements: function(settings)
|
|
244
|
-
{
|
|
245
|
-
var movement,
|
|
246
|
-
element = this.element,
|
|
247
|
-
self = this;
|
|
248
|
-
|
|
249
|
-
var addMovement = function(movementSettings)
|
|
250
|
-
{
|
|
251
|
-
movement = Movement.create(element, movementSettings);
|
|
252
|
-
self.addMovement(movement);
|
|
253
|
-
};
|
|
254
|
-
|
|
255
|
-
/* this will check if we have multiple properties to
|
|
256
|
-
add or only one property */
|
|
257
|
-
var property = settings.property;
|
|
258
|
-
if(base.isArray(property))
|
|
259
|
-
{
|
|
260
|
-
for(var i = 0, length = property.length; i < length; i++)
|
|
261
|
-
{
|
|
262
|
-
addMovement(property[i]);
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
else
|
|
266
|
-
{
|
|
267
|
-
addMovement(settings);
|
|
268
|
-
}
|
|
269
|
-
},
|
|
270
|
-
|
|
271
|
-
/* this will step the animation movements by the
|
|
272
|
-
delta.
|
|
273
|
-
@param (number) delta */
|
|
274
|
-
step: function(delta)
|
|
275
|
-
{
|
|
276
|
-
var movements = this.movements,
|
|
277
|
-
length = movements.length;
|
|
278
|
-
for(var i = 0; i < length; i++)
|
|
279
|
-
{
|
|
280
|
-
movements[i].step(delta);
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
});
|
|
284
|
-
|
|
285
|
-
/*
|
|
286
|
-
Value class
|
|
287
|
-
|
|
288
|
-
this will create a movement property value that can
|
|
289
|
-
update the property value when animated.
|
|
290
|
-
|
|
291
|
-
this will automatically get the units of the value
|
|
292
|
-
and check for value combining to inherit the start
|
|
293
|
-
value and add or remove the end value from the
|
|
294
|
-
start.
|
|
295
|
-
|
|
296
|
-
@param (object) settings
|
|
297
|
-
*/
|
|
298
|
-
var Value = base.Class.extend(
|
|
299
|
-
{
|
|
300
|
-
constructor: function(settings)
|
|
301
|
-
{
|
|
302
|
-
this.value = null;
|
|
303
|
-
this.setup(settings);
|
|
304
|
-
},
|
|
305
|
-
|
|
306
|
-
setup: function(settings)
|
|
307
|
-
{
|
|
308
|
-
var value = this.value = this.createValue(settings);
|
|
309
|
-
/* we want to check if we are increasing or
|
|
310
|
-
decreasing the target */
|
|
311
|
-
value.increasing = this.isIncreasing(settings.end);
|
|
312
|
-
},
|
|
313
|
-
|
|
314
|
-
createValue: function(settings)
|
|
315
|
-
{
|
|
316
|
-
/* we need to get the end value with any extra data
|
|
317
|
-
to check for combining and to get the units */
|
|
318
|
-
var endValue = settings.end,
|
|
319
|
-
startValue = this.getValue(settings.start),
|
|
320
|
-
value = this.getValue(endValue);
|
|
321
|
-
|
|
322
|
-
return {
|
|
323
|
-
combining: this.checkCombind(endValue),
|
|
324
|
-
start: startValue,
|
|
325
|
-
end: value,
|
|
326
|
-
units: this.getUnits(endValue),
|
|
327
|
-
difference: (Math.abs(startValue - value))
|
|
328
|
-
};
|
|
329
|
-
},
|
|
330
|
-
|
|
331
|
-
/* this will get the units of the property being animated.
|
|
332
|
-
@param (string) text = the value being modified
|
|
333
|
-
@return (string) the type of units */
|
|
334
|
-
getUnits: function(text)
|
|
335
|
-
{
|
|
336
|
-
if(typeof text !== 'undefined')
|
|
337
|
-
{
|
|
338
|
-
text = this.getString(text);
|
|
339
|
-
|
|
340
|
-
/* we need to remove the numbers or plus or minus equals
|
|
341
|
-
to get the units */
|
|
342
|
-
var pattern = /([0-9.\-\+=])/g;
|
|
343
|
-
return text.replace(pattern, '');
|
|
344
|
-
}
|
|
345
|
-
return '';
|
|
346
|
-
},
|
|
347
|
-
|
|
348
|
-
checkCombind: function(end)
|
|
349
|
-
{
|
|
350
|
-
if(typeof end !== 'undefined')
|
|
351
|
-
{
|
|
352
|
-
end = this.getString(end);
|
|
353
|
-
/* we want to check if we have a plus or minus equals to
|
|
354
|
-
show that we are using the current position as the start */
|
|
355
|
-
var pattern = /(\+=|-=)/g,
|
|
356
|
-
matches = end.match(pattern);
|
|
357
|
-
if(matches)
|
|
358
|
-
{
|
|
359
|
-
return true;
|
|
360
|
-
}
|
|
361
|
-
}
|
|
362
|
-
return false;
|
|
363
|
-
},
|
|
364
|
-
|
|
365
|
-
/* this will convert any type to a string
|
|
366
|
-
@param (mixed) value = the value to convert
|
|
367
|
-
@return (string) the value string */
|
|
368
|
-
getString: function(value)
|
|
369
|
-
{
|
|
370
|
-
return (typeof value !== 'string')? value.toString() : value;
|
|
371
|
-
},
|
|
372
|
-
|
|
373
|
-
/* this will get the number from an value and remove
|
|
374
|
-
any other marks including chars.
|
|
375
|
-
@param (mixed) text = the text to get the value from
|
|
376
|
-
@return (number) the number value */
|
|
377
|
-
getValue: function(text)
|
|
378
|
-
{
|
|
379
|
-
if(typeof text !== 'undefined')
|
|
380
|
-
{
|
|
381
|
-
/* we need to remove any non numeric data from the value
|
|
382
|
-
and convert to number after */
|
|
383
|
-
var pattern = /(\+=|-=|[^0-9.-])/g;
|
|
384
|
-
text = this.getString(text);
|
|
385
|
-
return (text.replace(pattern, '') * 1);
|
|
386
|
-
}
|
|
387
|
-
return 0;
|
|
388
|
-
},
|
|
389
|
-
|
|
390
|
-
/* this will check if the element is increasing or decreasing the
|
|
391
|
-
target.
|
|
392
|
-
@return (bool) true or false */
|
|
393
|
-
isIncreasing: function(endValue)
|
|
394
|
-
{
|
|
395
|
-
/* we want to check if we are adding to the start or
|
|
396
|
-
just modifying the value */
|
|
397
|
-
var value = this.value;
|
|
398
|
-
var endTotal = value.end;
|
|
399
|
-
var startValue = value.start;
|
|
400
|
-
if(value.combining === true)
|
|
401
|
-
{
|
|
402
|
-
endTotal = (this.getString(endValue).indexOf("-") === -1)? (startValue + endTotal) : startValue - endTotal;
|
|
403
|
-
}
|
|
404
|
-
return (endTotal >= startValue)? true : false;
|
|
405
|
-
},
|
|
406
|
-
|
|
407
|
-
/* this will setup theproper method to step the
|
|
408
|
-
value by checking for combining and currying
|
|
409
|
-
theproper function to step the value.
|
|
410
|
-
@param (number) delta
|
|
411
|
-
@return (number) the value step */
|
|
412
|
-
step: function(delta)
|
|
413
|
-
{
|
|
414
|
-
var step;
|
|
415
|
-
var value = this.value;
|
|
416
|
-
if(value.combining === true)
|
|
417
|
-
{
|
|
418
|
-
step = function(delta)
|
|
419
|
-
{
|
|
420
|
-
return (value.end * delta);
|
|
421
|
-
};
|
|
422
|
-
}
|
|
423
|
-
else
|
|
424
|
-
{
|
|
425
|
-
step = function(delta)
|
|
426
|
-
{
|
|
427
|
-
return (value.difference * delta);
|
|
428
|
-
};
|
|
429
|
-
}
|
|
430
|
-
return (this.step = step).apply(this, base.listToArray(arguments));
|
|
431
|
-
},
|
|
432
|
-
|
|
433
|
-
update: function(delta)
|
|
434
|
-
{
|
|
435
|
-
var step = this.step(delta);
|
|
436
|
-
var value = this.value;
|
|
437
|
-
|
|
438
|
-
/* we want to check to add or subtract the step
|
|
439
|
-
by the increase prop */
|
|
440
|
-
return this.applyStep(value, step);
|
|
441
|
-
},
|
|
442
|
-
|
|
443
|
-
/* this will setup the proper method to apply the
|
|
444
|
-
step by checking for increasing and currying
|
|
445
|
-
the proper function to applyu the step value.
|
|
446
|
-
@param (object) value
|
|
447
|
-
@return (number) the value step */
|
|
448
|
-
applyStep: function(value, step)
|
|
449
|
-
{
|
|
450
|
-
var applyStep;
|
|
451
|
-
if(value.increasing === true)
|
|
452
|
-
{
|
|
453
|
-
/* this will add the step to the value */
|
|
454
|
-
applyStep = function(value, step)
|
|
455
|
-
{
|
|
456
|
-
var start = value.start;
|
|
457
|
-
return (start + step) + value.units;
|
|
458
|
-
};
|
|
459
|
-
}
|
|
460
|
-
else
|
|
461
|
-
{
|
|
462
|
-
applyStep = function(value, step)
|
|
463
|
-
{
|
|
464
|
-
var start = value.start;
|
|
465
|
-
return (start - step) + value.units;
|
|
466
|
-
};
|
|
467
|
-
}
|
|
468
|
-
return (this.applyStep = applyStep).apply(this, base.listToArray(arguments));
|
|
469
|
-
}
|
|
470
|
-
});
|
|
471
|
-
|
|
472
|
-
/*
|
|
473
|
-
Movement class
|
|
474
|
-
|
|
475
|
-
this will create a movement object that can
|
|
476
|
-
update the property when animated. this is an abstract
|
|
477
|
-
class and should be extended to use.
|
|
478
|
-
|
|
479
|
-
@param (object) element
|
|
480
|
-
@param (object) settings
|
|
481
|
-
*/
|
|
482
|
-
var Movement = base.Class.extend(
|
|
483
|
-
{
|
|
484
|
-
constructor: function(element, settings)
|
|
485
|
-
{
|
|
486
|
-
this.element = element;
|
|
487
|
-
this.property = null;
|
|
488
|
-
this.value = null;
|
|
489
|
-
|
|
490
|
-
this.setup(settings);
|
|
491
|
-
},
|
|
492
|
-
|
|
493
|
-
setup: function(settings)
|
|
494
|
-
{
|
|
495
|
-
this.setupProperty(settings);
|
|
496
|
-
},
|
|
497
|
-
|
|
498
|
-
/* this will return a new movement object by the
|
|
499
|
-
property type.
|
|
500
|
-
@param (object) element
|
|
501
|
-
@param (object) settings
|
|
502
|
-
@return (object) the new movement */
|
|
503
|
-
setupMovementType: function(element, settings)
|
|
504
|
-
{
|
|
505
|
-
var movement,
|
|
506
|
-
type = this.getType(element, settings);
|
|
507
|
-
switch(type)
|
|
508
|
-
{
|
|
509
|
-
case 'css':
|
|
510
|
-
movement = new CssMovement(element, settings);
|
|
511
|
-
break;
|
|
512
|
-
case 'attr':
|
|
513
|
-
movement = new AttrMovement(element, settings);
|
|
514
|
-
break;
|
|
515
|
-
}
|
|
516
|
-
return movement;
|
|
517
|
-
},
|
|
518
|
-
|
|
519
|
-
getType: function(element, settings)
|
|
520
|
-
{
|
|
521
|
-
return (element.style && settings.property in element.style)? 'css' : 'attr';
|
|
522
|
-
},
|
|
523
|
-
|
|
524
|
-
/* this will create a new value object for the
|
|
525
|
-
property value to be updated.
|
|
526
|
-
@param (object) settings
|
|
527
|
-
@return (object) the value object */
|
|
528
|
-
createValue: function(settings)
|
|
529
|
-
{
|
|
530
|
-
var values = this.getValue(settings);
|
|
531
|
-
return new Value(values);
|
|
532
|
-
},
|
|
533
|
-
|
|
534
|
-
/* this will get the start and end values of the
|
|
535
|
-
movement to be used to create a new value object.
|
|
536
|
-
@param (object) settings
|
|
537
|
-
@return (object) the start and end values */
|
|
538
|
-
getValue: function(settings)
|
|
539
|
-
{
|
|
540
|
-
var endValue = this.getEndValue(settings.endValue),
|
|
541
|
-
startValue = this.getStartValue(settings.startValue, endValue);
|
|
542
|
-
|
|
543
|
-
return {
|
|
544
|
-
start: startValue,
|
|
545
|
-
end: endValue
|
|
546
|
-
};
|
|
547
|
-
},
|
|
548
|
-
|
|
549
|
-
/* this will get start value of the property being animated.
|
|
550
|
-
@param (string) value = the value being modified
|
|
551
|
-
@return (string) the type of units */
|
|
552
|
-
getStartValue: function(value, end)
|
|
553
|
-
{
|
|
554
|
-
return value;
|
|
555
|
-
},
|
|
556
|
-
|
|
557
|
-
getEndValue: function(text)
|
|
558
|
-
{
|
|
559
|
-
return text;
|
|
560
|
-
},
|
|
561
|
-
|
|
562
|
-
setupProperty: function(settings)
|
|
563
|
-
{
|
|
564
|
-
this.property = settings.property;
|
|
565
|
-
this.value = this.createValue(settings);
|
|
566
|
-
},
|
|
567
|
-
|
|
568
|
-
/* this will update the value object
|
|
569
|
-
@param (number) delta
|
|
570
|
-
return (mixed) the proprety value */
|
|
571
|
-
updateValue: function(delta)
|
|
572
|
-
{
|
|
573
|
-
return this.value.update(delta);
|
|
574
|
-
},
|
|
575
|
-
|
|
576
|
-
step: function(delta)
|
|
577
|
-
{
|
|
578
|
-
var value = this.updateValue(delta);
|
|
579
|
-
this.update(value);
|
|
580
|
-
},
|
|
581
|
-
|
|
582
|
-
/* this should be overridden by the update
|
|
583
|
-
property type being animated.
|
|
584
|
-
@param (mixed) value */
|
|
585
|
-
update: function(value)
|
|
586
|
-
{
|
|
587
|
-
|
|
588
|
-
}
|
|
589
|
-
});
|
|
590
|
-
|
|
591
|
-
/* this is a static moethod that can create
|
|
592
|
-
anewinstance of amovement by thepreopty type.
|
|
593
|
-
@param (object) element
|
|
594
|
-
@param (object) settings
|
|
595
|
-
@return (object) the new movement */
|
|
596
|
-
Movement.create = function(element, settings)
|
|
597
|
-
{
|
|
598
|
-
return this.prototype.setupMovementType(element, settings);
|
|
599
|
-
};
|
|
600
|
-
|
|
601
|
-
/*
|
|
602
|
-
AttrMovement class
|
|
603
|
-
|
|
604
|
-
this will create an attr movement object that can
|
|
605
|
-
update the property when animated.
|
|
606
|
-
|
|
607
|
-
@param (object) element
|
|
608
|
-
@param (object) settings
|
|
609
|
-
*/
|
|
610
|
-
var AttrMovement = Movement.extend(
|
|
611
|
-
{
|
|
612
|
-
/* this will get start value of the property being animated.
|
|
613
|
-
@param (string) value = the value being modified
|
|
614
|
-
@return (string) the type of units */
|
|
615
|
-
getStartValue: function(value, end)
|
|
616
|
-
{
|
|
617
|
-
var start = 0;
|
|
618
|
-
if(typeof value === 'undefined')
|
|
619
|
-
{
|
|
620
|
-
start = this.element[this.property];
|
|
621
|
-
}
|
|
622
|
-
else
|
|
623
|
-
{
|
|
624
|
-
start = this.getValue(value);
|
|
625
|
-
}
|
|
626
|
-
return start;
|
|
627
|
-
},
|
|
628
|
-
|
|
629
|
-
update: function(value)
|
|
630
|
-
{
|
|
631
|
-
this.element[this.property] = value;
|
|
632
|
-
}
|
|
633
|
-
});
|
|
634
|
-
|
|
635
|
-
var CssMovement = Movement.extend(
|
|
636
|
-
{
|
|
637
|
-
constructor: function(element, settings)
|
|
638
|
-
{
|
|
639
|
-
this.style = element.style;
|
|
640
|
-
Movement.call(this, element, settings);
|
|
641
|
-
},
|
|
642
|
-
|
|
643
|
-
/* this will get start value of the property being animated.
|
|
644
|
-
@param (string) value = the value being modified
|
|
645
|
-
@return (string) the type of units */
|
|
646
|
-
getStartValue: function(value, end)
|
|
647
|
-
{
|
|
648
|
-
var start = 0;
|
|
649
|
-
if(typeof value === 'undefined')
|
|
650
|
-
{
|
|
651
|
-
var element = this.element,
|
|
652
|
-
property = this.property,
|
|
653
|
-
method = this.method;
|
|
654
|
-
if(method)
|
|
655
|
-
{
|
|
656
|
-
var values = base.css(element, property);
|
|
657
|
-
if(values !== 'none')
|
|
658
|
-
{
|
|
659
|
-
var cssPattern = new RegExp('(?:' + method + '\((.+)\))', 'g');
|
|
660
|
-
values.replace(cssPattern, function(fullMatch, params)
|
|
661
|
-
{
|
|
662
|
-
start = (typeof params === 'string')? params.split(',') : null;
|
|
663
|
-
});
|
|
664
|
-
}
|
|
665
|
-
else
|
|
666
|
-
{
|
|
667
|
-
var unit;
|
|
668
|
-
var pattern = /\d+/g;
|
|
669
|
-
var length = end.length;
|
|
670
|
-
start = [];
|
|
671
|
-
for(var i = 0; i < length; i++)
|
|
672
|
-
{
|
|
673
|
-
/* we want to ensure that we add the same units */
|
|
674
|
-
unit = end[i].replace(pattern, '');
|
|
675
|
-
start.push(0 + unit);
|
|
676
|
-
}
|
|
677
|
-
}
|
|
678
|
-
}
|
|
679
|
-
else
|
|
680
|
-
{
|
|
681
|
-
var params = base.css(element, property);
|
|
682
|
-
start = (typeof params === 'string')? params.split(' ') : null;
|
|
683
|
-
}
|
|
684
|
-
}
|
|
685
|
-
else
|
|
686
|
-
{
|
|
687
|
-
start = this.getCssValue(value);
|
|
688
|
-
}
|
|
689
|
-
return start;
|
|
690
|
-
},
|
|
691
|
-
|
|
692
|
-
getEndValue: function(text)
|
|
693
|
-
{
|
|
694
|
-
return this.getCssValue(text);
|
|
695
|
-
},
|
|
696
|
-
|
|
697
|
-
/* this will get the number from an value and remove
|
|
698
|
-
any other marks including chars.
|
|
699
|
-
@param (mixed) text = the text to get the value from
|
|
700
|
-
@return (number) the number value */
|
|
701
|
-
getCssValue: function(text)
|
|
702
|
-
{
|
|
703
|
-
var textType = typeof text;
|
|
704
|
-
if(textType !== 'undefined')
|
|
705
|
-
{
|
|
706
|
-
var value,
|
|
707
|
-
self = this;
|
|
708
|
-
|
|
709
|
-
if(textType === 'string')
|
|
710
|
-
{
|
|
711
|
-
/* this will check to setup the css value by
|
|
712
|
-
checking if we are using a css method
|
|
713
|
-
e.g. transform: translate3d() */
|
|
714
|
-
var cssPattern = /(?:(\w+\s*)\((.+)\))/g;
|
|
715
|
-
text.replace(cssPattern, function(fullMatch, method, params)
|
|
716
|
-
{
|
|
717
|
-
value = (typeof params === 'string')? params.split(',') : null;
|
|
718
|
-
self.setMethod(method);
|
|
719
|
-
});
|
|
720
|
-
|
|
721
|
-
if(value === undefined)
|
|
722
|
-
{
|
|
723
|
-
/* this will check to split by space to allow
|
|
724
|
-
short hand */
|
|
725
|
-
value = text.split(' ');
|
|
726
|
-
}
|
|
727
|
-
return value;
|
|
728
|
-
}
|
|
729
|
-
else
|
|
730
|
-
{
|
|
731
|
-
return text;
|
|
732
|
-
}
|
|
733
|
-
}
|
|
734
|
-
return 0;
|
|
735
|
-
},
|
|
736
|
-
|
|
737
|
-
/* this will create a new value object array for the
|
|
738
|
-
property values to be updated.
|
|
739
|
-
@param (object) settings
|
|
740
|
-
@return (array) the values array */
|
|
741
|
-
createValue: function(settings)
|
|
742
|
-
{
|
|
743
|
-
var valueArray = [];
|
|
744
|
-
var values = this.getValue(settings);
|
|
745
|
-
if(values)
|
|
746
|
-
{
|
|
747
|
-
if(base.isArray(values.end))
|
|
748
|
-
{
|
|
749
|
-
var start = values.start,
|
|
750
|
-
end = values.end;
|
|
751
|
-
for(var i = 0, length = end.length; i < length; i++)
|
|
752
|
-
{
|
|
753
|
-
valueArray.push(new Value({
|
|
754
|
-
start: start[i],
|
|
755
|
-
end: end[i]
|
|
756
|
-
}));
|
|
757
|
-
}
|
|
758
|
-
}
|
|
759
|
-
else
|
|
760
|
-
{
|
|
761
|
-
valueArray.push(new Value(values));
|
|
762
|
-
}
|
|
763
|
-
}
|
|
764
|
-
return valueArray;
|
|
765
|
-
},
|
|
766
|
-
|
|
767
|
-
setMethod: function(method)
|
|
768
|
-
{
|
|
769
|
-
if(typeof this.method !== 'string')
|
|
770
|
-
{
|
|
771
|
-
this.method = method;
|
|
772
|
-
}
|
|
773
|
-
},
|
|
774
|
-
|
|
775
|
-
updateValue: function(delta)
|
|
776
|
-
{
|
|
777
|
-
var valueArray = [];
|
|
778
|
-
var values = this.value;
|
|
779
|
-
if(values.length)
|
|
780
|
-
{
|
|
781
|
-
for(var i = 0, length = values.length; i < length; i++)
|
|
782
|
-
{
|
|
783
|
-
valueArray.push(values[i].update(delta));
|
|
784
|
-
}
|
|
785
|
-
}
|
|
786
|
-
return valueArray;
|
|
787
|
-
},
|
|
788
|
-
|
|
789
|
-
update: function(value)
|
|
790
|
-
{
|
|
791
|
-
var method = this.method;
|
|
792
|
-
if(method)
|
|
793
|
-
{
|
|
794
|
-
value = method + '(' + value.join(', ') + ')';
|
|
795
|
-
}
|
|
796
|
-
else
|
|
797
|
-
{
|
|
798
|
-
value = value.join(' ');
|
|
799
|
-
}
|
|
800
|
-
this.style[this.property] = value;
|
|
801
|
-
}
|
|
802
|
-
});
|
|
803
|
-
|
|
804
|
-
/*
|
|
805
|
-
AnimationController
|
|
806
|
-
|
|
807
|
-
this will create an animation controller object
|
|
808
|
-
that will animate a target property or properties
|
|
809
|
-
on an element over a duration.
|
|
810
|
-
|
|
811
|
-
@param (object) settings = the animation settings
|
|
812
|
-
@param [(function)] callBack = the function to call back
|
|
813
|
-
when the animation is done
|
|
814
|
-
*/
|
|
815
|
-
var AnimationController = base.Class.extend(
|
|
816
|
-
{
|
|
817
|
-
constructor: function(settings, callBack)
|
|
818
|
-
{
|
|
819
|
-
/* this is the delay of the animation in milliseconds */
|
|
820
|
-
this.delay = settings.delay || 0;
|
|
821
|
-
this.delayTimer = null;
|
|
822
|
-
this.startTime = null;
|
|
823
|
-
|
|
824
|
-
/* this is the animation duration in milliseconds */
|
|
825
|
-
this.duration = settings.duration || 0;
|
|
826
|
-
|
|
827
|
-
this.element = this.getElement(settings.element);
|
|
828
|
-
this.status = 'stopped';
|
|
829
|
-
this.animation = null;
|
|
830
|
-
|
|
831
|
-
/* this will be the call back function to return
|
|
832
|
-
when the animation is complete or errors */
|
|
833
|
-
this.callBack = callBack;
|
|
834
|
-
|
|
835
|
-
/* this will setup the fps */
|
|
836
|
-
this.fps = settings.fps || 60;
|
|
837
|
-
|
|
838
|
-
/* this will setup the new animation object and start
|
|
839
|
-
the animation if all is correct or stop and return an
|
|
840
|
-
error */
|
|
841
|
-
this.setup(settings);
|
|
842
|
-
},
|
|
843
|
-
|
|
844
|
-
setup: function(settings)
|
|
845
|
-
{
|
|
846
|
-
this.animationCallBack = this.animate.bind(this);
|
|
847
|
-
|
|
848
|
-
var element = this.element;
|
|
849
|
-
if(typeof element === 'object')
|
|
850
|
-
{
|
|
851
|
-
/* we want to start the animation by the animation
|
|
852
|
-
delay settings */
|
|
853
|
-
var callBack = base.createCallBack(this, this.setupAnimation, [element, settings]);
|
|
854
|
-
this.delayTimer = window.setTimeout(callBack, this.delay);
|
|
855
|
-
}
|
|
856
|
-
else
|
|
857
|
-
{
|
|
858
|
-
/* we do not have an element or property to
|
|
859
|
-
animate so we wantto return an error */
|
|
860
|
-
this.updateStatus('error');
|
|
861
|
-
}
|
|
862
|
-
return this;
|
|
863
|
-
},
|
|
864
|
-
|
|
865
|
-
setupAnimation: function(element, settings)
|
|
866
|
-
{
|
|
867
|
-
this.animation = new Animation(element, settings);
|
|
868
|
-
this.start(settings);
|
|
869
|
-
},
|
|
870
|
-
|
|
871
|
-
/* this will start the animation by getting the start time
|
|
872
|
-
and starting the animation timer */
|
|
873
|
-
start: function()
|
|
874
|
-
{
|
|
875
|
-
/* this will track the time passed and the progress
|
|
876
|
-
of the animation */
|
|
877
|
-
this.startTime = new Date();
|
|
878
|
-
this.timePassed = 0;
|
|
879
|
-
this.progress = 0;
|
|
880
|
-
this.timer = null;
|
|
881
|
-
|
|
882
|
-
this.startTimer();
|
|
883
|
-
return this;
|
|
884
|
-
},
|
|
885
|
-
|
|
886
|
-
stop: function()
|
|
887
|
-
{
|
|
888
|
-
this.stopTimer();
|
|
889
|
-
return this;
|
|
890
|
-
},
|
|
891
|
-
|
|
892
|
-
/* this will get the element that is being used.
|
|
893
|
-
@param (mixed) element = the element selector or object
|
|
894
|
-
@return (object) the element */
|
|
895
|
-
getElement: function(element)
|
|
896
|
-
{
|
|
897
|
-
return (typeof element === 'string')? document.querySelector(element) : element;
|
|
898
|
-
},
|
|
899
|
-
|
|
900
|
-
/* this will get the delta to be used with the animation.
|
|
901
|
-
@return (number) the current delta */
|
|
902
|
-
delta: function(t)
|
|
903
|
-
{
|
|
904
|
-
var delta = Ease.get(this.ease);
|
|
905
|
-
return (this.delta = delta).apply(this, base.listToArray(arguments));
|
|
906
|
-
},
|
|
907
|
-
|
|
908
|
-
/* this will perform the animation on the element by
|
|
909
|
-
incrementally updating the element object property
|
|
910
|
-
by the timed progress. */
|
|
911
|
-
animate: function()
|
|
912
|
-
{
|
|
913
|
-
this.timePassed = new Date() - this.startTime;
|
|
914
|
-
var percent = this.timePassed / this.duration;
|
|
915
|
-
var progress = this.progress = (percent > 1)? 1 : percent;
|
|
916
|
-
|
|
917
|
-
var delta = this.delta(progress);
|
|
918
|
-
this.animation.step(delta);
|
|
919
|
-
|
|
920
|
-
/* if the progress is 1 the animation is complete */
|
|
921
|
-
if(progress >= 1)
|
|
922
|
-
{
|
|
923
|
-
this.stopTimer();
|
|
924
|
-
this.updateStatus('completed');
|
|
925
|
-
}
|
|
926
|
-
else
|
|
927
|
-
{
|
|
928
|
-
this.timer = window.requestAnimationFrame(this.animationCallBack);
|
|
929
|
-
}
|
|
930
|
-
},
|
|
931
|
-
|
|
932
|
-
updateStatus: function(status)
|
|
933
|
-
{
|
|
934
|
-
var self = this;
|
|
935
|
-
var action = function()
|
|
936
|
-
{
|
|
937
|
-
switch(status)
|
|
938
|
-
{
|
|
939
|
-
case 'started':
|
|
940
|
-
break;
|
|
941
|
-
case 'stopped':
|
|
942
|
-
break;
|
|
943
|
-
case 'completed':
|
|
944
|
-
case 'error':
|
|
945
|
-
self.checkCallBack();
|
|
946
|
-
break;
|
|
947
|
-
}
|
|
948
|
-
};
|
|
949
|
-
|
|
950
|
-
/* we want to save the status and call the
|
|
951
|
-
action function */
|
|
952
|
-
this.status = status;
|
|
953
|
-
action();
|
|
954
|
-
},
|
|
955
|
-
|
|
956
|
-
checkCallBack: function()
|
|
957
|
-
{
|
|
958
|
-
var callBack = this.callBack;
|
|
959
|
-
if(typeof callBack === 'function')
|
|
960
|
-
{
|
|
961
|
-
callBack.call(null, this.status);
|
|
962
|
-
}
|
|
963
|
-
},
|
|
964
|
-
|
|
965
|
-
/* this will start the animation by setting up the
|
|
966
|
-
animation timer. */
|
|
967
|
-
startTimer: function()
|
|
968
|
-
{
|
|
969
|
-
/* this will check to stop any previous timer before
|
|
970
|
-
creating a new timer */
|
|
971
|
-
this.stopTimer();
|
|
972
|
-
|
|
973
|
-
/* we want to call the animation first to not show a
|
|
974
|
-
delay in the animation before the callback is called */
|
|
975
|
-
this.updateStatus('started');
|
|
976
|
-
this.animate();
|
|
977
|
-
return this;
|
|
978
|
-
},
|
|
979
|
-
|
|
980
|
-
/* this will stop the animation timer if still setup */
|
|
981
|
-
stopTimer: function()
|
|
982
|
-
{
|
|
983
|
-
var w = window;
|
|
984
|
-
if(this.timer)
|
|
985
|
-
{
|
|
986
|
-
|
|
987
|
-
w.cancelAnimationFrame(this.timer);
|
|
988
|
-
this.updateStatus('stopped');
|
|
989
|
-
}
|
|
990
|
-
|
|
991
|
-
if(this.delayTimer)
|
|
992
|
-
{
|
|
993
|
-
w.clearTimeout(this.delayTimer);
|
|
994
|
-
}
|
|
995
|
-
return this;
|
|
996
|
-
}
|
|
997
|
-
});
|
|
998
|
-
|
|
999
|
-
var Ease =
|
|
1000
|
-
{
|
|
1001
|
-
get: function(ease)
|
|
1002
|
-
{
|
|
1003
|
-
var method = this[ease];
|
|
1004
|
-
if(!method)
|
|
1005
|
-
{
|
|
1006
|
-
method = this.linear;
|
|
1007
|
-
}
|
|
1008
|
-
return method;
|
|
1009
|
-
},
|
|
1010
|
-
|
|
1011
|
-
easeInOut: function(t)
|
|
1012
|
-
{
|
|
1013
|
-
var delta = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
|
|
1014
|
-
return delta;
|
|
1015
|
-
},
|
|
1016
|
-
|
|
1017
|
-
easeInOutQuad: function(t)
|
|
1018
|
-
{
|
|
1019
|
-
return this.easeInOut(t);
|
|
1020
|
-
},
|
|
1021
|
-
|
|
1022
|
-
easeIn: function(t)
|
|
1023
|
-
{
|
|
1024
|
-
var delta = (t * t);
|
|
1025
|
-
return delta;
|
|
1026
|
-
},
|
|
1027
|
-
|
|
1028
|
-
easeInQuad: function(t)
|
|
1029
|
-
{
|
|
1030
|
-
return this.easeIn(t);
|
|
1031
|
-
},
|
|
1032
|
-
|
|
1033
|
-
easeInCubic: function(t)
|
|
1034
|
-
{
|
|
1035
|
-
var delta = (t * t * t);
|
|
1036
|
-
return delta;
|
|
1037
|
-
},
|
|
1038
|
-
|
|
1039
|
-
easeInQuart: function(t)
|
|
1040
|
-
{
|
|
1041
|
-
var delta = (t * t * t * t);
|
|
1042
|
-
return delta;
|
|
1043
|
-
},
|
|
1044
|
-
|
|
1045
|
-
easeInCirc: function(t)
|
|
1046
|
-
{
|
|
1047
|
-
var delta = (1 - Math.sin(Math.acos(t)));
|
|
1048
|
-
return delta;
|
|
1049
|
-
},
|
|
1050
|
-
|
|
1051
|
-
easeOut: function(t)
|
|
1052
|
-
{
|
|
1053
|
-
var delta = (t * (2 - t));
|
|
1054
|
-
return delta;
|
|
1055
|
-
},
|
|
1056
|
-
|
|
1057
|
-
easeOutQuad: function(t)
|
|
1058
|
-
{
|
|
1059
|
-
return this.easeOut(t);
|
|
1060
|
-
},
|
|
1061
|
-
|
|
1062
|
-
easeOutCubic: function(t)
|
|
1063
|
-
{
|
|
1064
|
-
var delta = ((--t) * t * t + 1);
|
|
1065
|
-
return delta;
|
|
1066
|
-
},
|
|
1067
|
-
|
|
1068
|
-
easeOutQuart: function(t)
|
|
1069
|
-
{
|
|
1070
|
-
var delta = (1 - (--t) * t * t * t);
|
|
1071
|
-
return delta;
|
|
1072
|
-
},
|
|
1073
|
-
|
|
1074
|
-
linear: function(t)
|
|
1075
|
-
{
|
|
1076
|
-
var delta = t;
|
|
1077
|
-
return delta;
|
|
1078
|
-
}
|
|
1079
|
-
};
|
|
1080
|
-
|
|
1081
|
-
/* this will add an animation to an element.
|
|
1082
|
-
@param (object) paramsObj = the animation params
|
|
1083
|
-
@return (object) the animation object */
|
|
1084
|
-
base.extend.addAnimation = function(paramsObj)
|
|
1085
|
-
{
|
|
1086
|
-
return base.animations.add(paramsObj);
|
|
1087
|
-
};
|
|
1088
|
-
|
|
1089
|
-
/* this will stop all animations on an element.
|
|
1090
|
-
@param (object) element = the element */
|
|
1091
|
-
base.extend.stopAnimations = function(element)
|
|
1092
|
-
{
|
|
1093
|
-
base.animations.stop(element);
|
|
1094
|
-
};
|
|
1095
|
-
})();
|