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, 410 insertions, 72 deletions
diff --git a/node_modules/montage/ui/flow.reel/flow.js b/node_modules/montage/ui/flow.reel/flow.js index fa676a67..2137f782 100644 --- a/node_modules/montage/ui/flow.reel/flow.js +++ b/node_modules/montage/ui/flow.reel/flow.js | |||
@@ -10,6 +10,74 @@ 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 | |||
13 | _cameraPosition: { | 81 | _cameraPosition: { |
14 | enumerable: false, | 82 | enumerable: false, |
15 | value: [0, 0, 800] | 83 | value: [0, 0, 800] |
@@ -76,17 +144,171 @@ var Flow = exports.Flow = Montage.create(Component, { | |||
76 | } | 144 | } |
77 | }, | 145 | }, |
78 | 146 | ||
79 | _splinePath: { | 147 | _scrollingTransitionDurationMiliseconds: { |
80 | enumerable: false, | 148 | enumerable: false, |
81 | value: null | 149 | value: 500 |
150 | }, | ||
151 | |||
152 | _scrollingTransitionDuration: { | ||
153 | enumerable: false, | ||
154 | value: "500ms" | ||
82 | }, | 155 | }, |
83 | 156 | ||
84 | splinePath: { | 157 | scrollingTransitionDuration: { // TODO: think about using the Date Converter |
85 | get: function () { | 158 | get: function () { |
86 | return this._splinePath; | 159 | return this._scrollingTransitionDuration; |
87 | }, | 160 | }, |
88 | set: function (value) { | 161 | set: function (duration) { |
89 | this._splinePath = value; | 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, | ||
195 | value: false | ||
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 | }, | ||
222 | |||
223 | scrollingTransitionTimingFunction: { | ||
224 | get: function () { | ||
225 | return this._scrollingTransitionTimingFunction; | ||
226 | }, | ||
227 | set: function (timingFunction) { | ||
228 | var string = timingFunction + ""; | ||
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) { | ||