diff options
Diffstat (limited to 'node_modules/montage-user/ui/flow.reel/flow.js')
-rw-r--r-- | node_modules/montage-user/ui/flow.reel/flow.js | 762 |
1 files changed, 762 insertions, 0 deletions
diff --git a/node_modules/montage-user/ui/flow.reel/flow.js b/node_modules/montage-user/ui/flow.reel/flow.js new file mode 100644 index 00000000..21556e41 --- /dev/null +++ b/node_modules/montage-user/ui/flow.reel/flow.js | |||
@@ -0,0 +1,762 @@ | |||
1 | var Montage = require("montage").Montage, | ||
2 | Component = require("ui/component").Component; | ||
3 | |||
4 | var Flow = exports.Flow = Montage.create(Component, { | ||
5 | |||
6 | // TODO: Review _externalUpdate | ||
7 | |||
8 | _externalUpdate: { | ||
9 | enumerable: false, | ||
10 | value: true | ||
11 | }, | ||
12 | |||
13 | _isCameraUpdated: { | ||
14 | enumerable: false, | ||
15 | value: false | ||
16 | }, | ||
17 | |||
18 | // Camera rotation based in CSS3 rotate3D axis/angle system | ||
19 | |||
20 | _cameraRotationAxisX: { | ||
21 | enumerable: false, | ||
22 | value: 0 | ||
23 | }, | ||
24 | |||
25 | _cameraRotationAxisY: { | ||
26 | enumerable: false, | ||
27 | value: 0 | ||
28 | }, | ||
29 | |||
30 | _cameraRotationAxisZ: { | ||
31 | enumerable: false, | ||
32 | value: 1 | ||
33 | }, | ||
34 | |||
35 | _cameraRotationAngle: { | ||
36 | enumerable: false, | ||
37 | value: 0 | ||
38 | }, | ||
39 | |||
40 | cameraRotationAxisX: { | ||
41 | get: function () { | ||
42 | return this._cameraRotationAxisX; | ||
43 | }, | ||
44 | set: function (value) { | ||
45 | this._cameraRotationAxisX = value; | ||
46 | this._isCameraUpdated = true; | ||
47 | this.needsDraw = true; | ||
48 | } | ||
49 | }, | ||
50 | |||
51 | cameraRotationAxisY: { | ||
52 | get: function () { | ||
53 | return this._cameraRotationAxisY; | ||
54 | }, | ||
55 | set: function (value) { | ||
56 | this._cameraRotationAxisY = value; | ||
57 | this._isCameraUpdated = true; | ||
58 | this.needsDraw = true; | ||
59 | } | ||
60 | }, | ||
61 | |||
62 | cameraRotationAxisZ: { | ||
63 | get: function () { | ||
64 | return this._cameraRotationAxisZ; | ||
65 | }, | ||
66 | set: function (value) { | ||
67 | this._cameraRotationAxisZ = value; | ||
68 | this._isCameraUpdated = true; | ||
69 | this.needsDraw = true; | ||
70 | } | ||
71 | }, | ||
72 | |||
73 | cameraRotationAngle: { | ||
74 | get: function () { | ||
75 | return this._cameraRotationAngle; | ||
76 | }, | ||
77 | set: function (value) { | ||
78 | this._cameraRotationAngle = value; | ||
79 | this._isCameraUpdated = true; | ||
80 | this.needsDraw = true; | ||
81 | } | ||
82 | }, | ||
83 | |||
84 | _path: { | ||
85 | enumerable: false, | ||
86 | value: { | ||
87 | value: function (slide) { | ||
88 | return { | ||
89 | translateX: slide.time, | ||
90 | translateY: 0, | ||
91 | translateZ: 0, | ||
92 | scale: 1, | ||
93 | rotateX: 0, | ||
94 | rotateY: 0, | ||
95 | rotateZ: 0, | ||
96 | transformOriginX: 0, | ||
97 | transformOriginY: 0, | ||
98 | transformOriginZ: 0, | ||
99 | style: {} | ||
100 | }; | ||
101 | } | ||
102 | } | ||
103 | }, | ||
104 | |||
105 | path: { | ||
106 | get: function () { | ||
107 | return this._path; | ||
108 | }, | ||
109 | set: function (value) { | ||
110 | this._path = value; | ||
111 | this.needsDraw = true; | ||
112 | } | ||
113 | }, | ||
114 | |||
115 | _rotationOrder: { | ||
116 | enumerable: false, | ||
117 | value: "xyz" | ||
118 | }, | ||
119 | |||
120 | rotationOrder: { | ||
121 | get: function () { | ||
122 | return this._rotationOrder; | ||
123 | }, | ||
124 | set: function (value) { | ||
125 | switch (value) { | ||
126 | case "xzy": | ||
127 | case "yxz": | ||
128 | case "yzx": | ||
129 | case "zxy": | ||
130 | case "zyx": | ||
131 | this._rotationOrder=value; | ||
132 | break; | ||
133 | default: | ||
134 | this._rotationOrder="xyz"; | ||
135 | break; | ||
136 | } | ||
137 | this.needsDraw = true; | ||
138 | } | ||
139 | }, | ||
140 | |||
141 | _width: { | ||
142 | enumerable: false, | ||
143 | value: null | ||
144 | }, | ||
145 | |||
146 | _height: { | ||
147 | enumerable: false, | ||
148 | value: null | ||
149 | }, | ||
150 | |||
151 | _repetitionComponents: { | ||
152 | enumerable: false, | ||
153 | value: null | ||
154 | }, | ||
155 | |||
156 | prepareForDraw: { | ||
157 | enumerable: false, | ||
158 | value: function () { | ||
159 | this._repetitionComponents = this._repetition._childComponents; | ||
160 | } | ||
161 | }, | ||
162 | |||
163 | draw: { | ||
164 | enumerable: false, | ||
165 | value: function () { | ||
166 | var i, | ||
167 | length = this.numberOfNodes, | ||
168 | slide={ | ||
169 | index: null, | ||
170 | time: null, | ||
171 | speed: null | ||
172 | }, | ||
173 | transform, | ||
174 | origin, | ||
175 | iPath, | ||
176 | j, | ||
177 | jPath, | ||
178 | iOffset, | ||
179 | iStyle; | ||
180 | |||
181 | if (this.isAnimating) { | ||
182 | this._animationInterval(); | ||
183 | } | ||
184 | if (this._isCameraUpdated) { | ||
185 | this._repetition._element.style.webkitTransform = "rotate3d("+this._cameraRotationAxisX+","+this._cameraRotationAxisY+","+this._cameraRotationAxisZ+","+this._cameraRotationAngle+"rad)"; | ||
186 | this._isCameraUpdated = false; | ||
187 | } | ||
188 | //if (this._externalUpdate) { | ||
189 | for (i=0; i<length; i++) { | ||
190 | iStyle=this._repetitionComponents[i].element.style; | ||
191 | iOffset=this._offset.value(i); | ||
192 | slide.index=i; | ||
193 | slide.time=iOffset.time; | ||
194 | slide.speed=iOffset.speed; | ||
195 | iPath=this._path.value(slide); | ||
196 | if (typeof iPath.translateX==="undefined") { | ||
197 | iPath.translateX=0; | ||
198 | } | ||
199 | if (typeof iPath.translateY==="undefined") { | ||
200 | iPath.translateY=0; | ||
201 | } | ||
202 | if (typeof iPath.translateZ==="undefined") { | ||
203 | iPath.translateZ=0; | ||
204 | } | ||
205 | transform="translate3d("; | ||
206 | transform+=(typeof iPath.translateX==="number")?iPath.translateX+"px,":iPath.translateX+","; | ||
207 | transform+=(typeof iPath.translateY==="number")?iPath.translateY+"px,":iPath.translateY+","; | ||
208 | transform+=(typeof iPath.translateZ==="number")?iPath.translateZ+"px) ":iPath.translateZ+") "; | ||
209 | transform+=(typeof iPath.scale!=="undefined")?"scale("+iPath.scale+") ":""; | ||
210 | switch (this._rotationOrder) { | ||
211 | case "xyz": | ||
212 | transform+=(typeof iPath.rotateZ!=="undefined")?"rotateZ("+iPath.rotateZ+"rad) ":""; | ||
213 | transform+=(typeof iPath.rotateY!=="undefined")?"rotateY("+iPath.rotateY+"rad) ":""; | ||
214 | transform+=(typeof iPath.rotateX!=="undefined")?"rotateX("+iPath.rotateX+"rad) ":""; | ||
215 | break; | ||
216 | case "xzy": | ||
217 | transform+=(typeof iPath.rotateY!=="undefined")?"rotateY("+iPath.rotateY+"rad) ":""; | ||
218 | transform+=(typeof iPath.rotateZ!=="undefined")?"rotateZ("+iPath.rotateZ+"rad) ":""; | ||
219 | transform+=(typeof iPath.rotateX!=="undefined")?"rotateX("+iPath.rotateX+"rad) ":""; | ||
220 | break; | ||
221 | case "yxz": | ||
222 | transform+=(typeof iPath.rotateZ!=="undefined")?"rotateZ("+iPath.rotateZ+"rad) ":""; | ||
223 | transform+=(typeof iPath.rotateX!=="undefined")?"rotateX("+iPath.rotateX+"rad) ":""; | ||
224 | transform+=(typeof iPath.rotateY!=="undefined")?"rotateY("+iPath.rotateY+"rad) ":""; | ||
225 | break; | ||
226 | case "yzx": | ||
227 | transform+=(typeof iPath.rotateX!=="undefined")?"rotateX("+iPath.rotateX+"rad) ":""; | ||