diff options
Diffstat (limited to 'node_modules/montage/ui/flow.reel/flow.js')
-rw-r--r-- | node_modules/montage/ui/flow.reel/flow.js | 482 |
1 files changed, 72 insertions, 410 deletions
diff --git a/node_modules/montage/ui/flow.reel/flow.js b/node_modules/montage/ui/flow.reel/flow.js index 2137f782..fa676a67 100644 --- a/node_modules/montage/ui/flow.reel/flow.js +++ b/node_modules/montage/ui/flow.reel/flow.js | |||
@@ -10,74 +10,6 @@ var Montage = require("montage").Montage, | |||
10 | 10 | ||
11 | var Flow = exports.Flow = Montage.create(Component, { | 11 | var Flow = exports.Flow = Montage.create(Component, { |
12 | 12 | ||
13 | _splinePaths: { | ||
14 | enumerable: false, | ||
15 | value: null | ||
16 | }, | ||
17 | |||
18 | splinePaths: { | ||
19 | enumerable: false, | ||
20 | get: function () { | ||
21 | if (!this._splinePaths) { | ||
22 | this._splinePaths = []; | ||
23 | } | ||
24 | return this._splinePaths; | ||
25 | }, | ||
26 | set: function (value) { | ||
27 | this._splinePaths = value; | ||
28 | } | ||
29 | }, | ||
30 | |||
31 | appendPath: { | ||
32 | value: function (path) { | ||
33 | var splinePath = Object.create(FlowBezierSpline), | ||
34 | pathKnots = path.knots, | ||
35 | length = path.knots.length, | ||
36 | knots = [], | ||
37 | nextHandlers = [], | ||
38 | previousHandlers = [], | ||
39 | densities = [], | ||
40 | i; | ||
41 | |||
42 | for (i = 0; i < length; i++) { | ||
43 | knots[i] = pathKnots[i].knotPosition; | ||
44 | previousHandlers[i] = pathKnots[i].previousHandlerPosition; | ||
45 | nextHandlers[i] = pathKnots[i].nextHandlerPosition; | ||
46 | densities[i] = pathKnots[i].previousDensity; // TODO: implement previous/next density | ||
47 | // TODO: add rotations, arbitrary CSS and units | ||
48 | } | ||
49 | splinePath.knots = knots; | ||
50 | splinePath.previousHandlers = previousHandlers; | ||
51 | splinePath.nextHandlers = nextHandlers; | ||
52 | splinePath.densities = densities; | ||
53 | splinePath._computeDensitySummation(); | ||
54 | this.splinePaths.push(splinePath); | ||
55 | this._paths.push(path); | ||
56 | } | ||
57 | }, | ||
58 | |||
59 | _paths: { | ||
60 | enumerable: false, | ||
61 | value: null | ||
62 | }, | ||
63 | |||
64 | paths: { // TODO: listen for changes? | ||
65 | get: function () { | ||
66 | return this._paths; | ||
67 | }, | ||
68 | set: function (value) { | ||
69 | var length = value.length, | ||
70 | i; | ||
71 | |||
72 | if (length) { | ||
73 | this._paths = []; | ||
74 | for (i = 0; i < length; i++) { | ||
75 | this.appendPath(value[i]); | ||
76 | } | ||
77 | } | ||
78 | } | ||
79 | }, | ||
80 | |||
81 | _cameraPosition: { | 13 | _cameraPosition: { |
82 | enumerable: false, | 14 | enumerable: false, |
83 | value: [0, 0, 800] | 15 | value: [0, 0, 800] |
@@ -144,171 +76,17 @@ var Flow = exports.Flow = Montage.create(Component, { | |||
144 | } | 76 | } |
145 | }, | 77 | }, |
146 | 78 | ||
147 | _scrollingTransitionDurationMiliseconds: { | 79 | _splinePath: { |
148 | enumerable: false, | ||
149 | value: 500 | ||
150 | }, | ||
151 | |||
152 | _scrollingTransitionDuration: { | ||
153 | enumerable: false, | ||
154 | value: "500ms" | ||
155 | }, | ||
156 | |||
157 | scrollingTransitionDuration: { // TODO: think about using the Date Converter | ||
158 | get: function () { | ||
159 | return this._scrollingTransitionDuration; | ||
160 | }, | ||
161 | set: function (duration) { | ||
162 | var durationString = duration + "", | ||
163 | length = durationString.length, | ||
164 | value; | ||
165 | |||
166 | if ((length >= 2) && (durationString[length - 1] === "s")) { | ||
167 | if ((length >= 3) && (durationString[length - 2] === "m")) { | ||
168 | value = durationString.substr(0, length - 2) - 0; | ||
169 | } else { | ||
170 | value = durationString.substr(0, length - 1) * 1000; | ||
171 | } | ||
172 | } else { | ||
173 | value = durationString - 0; | ||
174 | durationString += "ms"; | ||
175 | } | ||
176 | if (!isNaN(value) && (this._scrollingTransitionDurationMiliseconds !== value)) { | ||
177 | this._scrollingTransitionDurationMiliseconds = value; | ||
178 | this._scrollingTransitionDuration = durationString; | ||
179 | } | ||
180 | } | ||
181 | }, | ||
182 | |||
183 | _scrollingTransitionTimingFunctionBezier: { | ||
184 | enumerable: false, | ||
185 | value: [.25, .1, .25, 1] | ||
186 | }, | ||
187 | |||
188 | _scrollingTransitionTimingFunction: { | ||
189 | enumerable: false, | ||
190 | value: "ease" | ||
191 | }, | ||
192 | |||
193 | hasSelectedIndexScrolling: { | ||
194 | enumerable: false, | 80 | enumerable: false, |
195 | value: false | 81 | value: null |
196 | }, | ||
197 | |||
198 | selectedIndexScrollingOffset: { | ||
199 | enumerable: false, | ||
200 | value: 0 | ||
201 | }, | ||
202 | |||
203 | _handleSelectedIndexesChange: { | ||
204 | enumerable: false, | ||
205 | value: function (event) { | ||
206 | if (this.hasSelectedIndexScrolling && event._plus) { | ||
207 | this.startScrollingIndexToOffset(event._plus[0], this.selectedIndexScrollingOffset); | ||
208 | } | ||
209 | } | ||
210 | }, | ||
211 | |||
212 | _timingFunctions: { | ||
213 | enumerable: false, | ||
214 | value: { | ||
215 | "ease": [.25, .1, .25, 1], | ||
216 | "linear": [0, 0, 1, 1], | ||
217 | "ease-in": [.42, 0, 1, 1], | ||
218 | "ease-out": [0, 0, .58, 1], | ||
219 | "ease-in-out": [.42, 0, .58, 1] | ||
220 | } | ||
221 | }, | 82 | }, |
222 | 83 | ||
223 | scrollingTransitionTimingFunction: { | 84 | splinePath: { |
224 | get: function () { | 85 | get: function () { |
225 | return this._scrollingTransitionTimingFunction; | 86 | return this._splinePath; |
226 | }, | 87 | }, |
227 | set: function (timingFunction) { | 88 | set: function (value) { |
228 | var string = timingFunction + ""; | 89 | this._splinePath = value; |
229 | |||
230 | if (this._timingFunctions.hasOwnProperty(string)) { | ||
231 | this._scrollingTransitionTimingFunction = string; | ||
232 | this._scrollingTransitionTimingFunctionBezier = this._timingFunctions[string]; | ||
233 | } else { | ||
234 | if ((string.substr(0, 13) === "cubic-bezier(") && (string.substr(string.length - 1, 1) === ")")) { | ||
235 | var bezier = string.substr(13, string.length - 14).split(","), | ||
236 | i; | ||
237 | |||
238 | if (bezier.length === 4) { | ||
239 | for (i = 0; i < 4; i++) { | ||
240 | bezier[i] -= 0; | ||
241 | if (isNaN(bezier[i])) { | ||
242 | return; | ||
243 | } | ||
244 | } | ||
245 | if (bezier[0] < 0) { | ||
246 | bezier[0] = 0; | ||
247 | } else { | ||
248 | if (bezier[0] > 1) { | ||
249 | bezier[0] = 1; | ||
250 | } | ||
251 | } | ||
252 | if (bezier[2] < 0) { | ||
253 | bezier[2] = 0; | ||
254 | } else { | ||
255 | if (bezier[2] > 1) { | ||
256 | bezier[2] = 1; | ||
257 | } | ||
258 | } | ||
259 | // TODO: check it is not the same bezier | ||
260 | this._scrollingTransitionTimingFunction = "cubic-bezier(" + bezier + ")"; | ||
261 | this._scrollingTransitionTimingFunctionBezier = bezier; | ||
262 | } | ||
263 | } | ||
264 | } | ||
265 | } | ||
266 | }, | ||
267 | |||
268 | _computeCssCubicBezierValue: { | ||
269 | enumerable: false, | ||
270 | value: function (x, bezier) { | ||
271 | var t = .5, | ||
272 | step = .25, | ||
273 | t2, | ||
274 | k, | ||
275 | i; | ||
276 | |||
277 | for (i = 0; i < 20; i++) { // TODO: optimize with Newton's method or similar | ||
278 | t2 = t * t; | ||
279 | k = 1 - t; | ||
280 | if ((3 * (k * k * t * bezier[0] + k * t2 * bezier[2]) + t2 * t) > x) { | ||
281 | t -= step; | ||
282 | } else { | ||
283 | t += step; | ||
284 | } |