diff options
Diffstat (limited to 'node_modules/montage/ui/flow.reel')
-rw-r--r-- | node_modules/montage/ui/flow.reel/flow.html | 38 | ||||
-rw-r--r-- | node_modules/montage/ui/flow.reel/flow.js | 482 |
2 files changed, 76 insertions, 444 deletions
diff --git a/node_modules/montage/ui/flow.reel/flow.html b/node_modules/montage/ui/flow.reel/flow.html index 8a9603bf..52edb7e5 100644 --- a/node_modules/montage/ui/flow.reel/flow.html +++ b/node_modules/montage/ui/flow.reel/flow.html | |||
@@ -9,7 +9,7 @@ | |||
9 | <title></title> | 9 | <title></title> |
10 | <script type="text/montage-serialization"> | 10 | <script type="text/montage-serialization"> |
11 | { | 11 | { |
12 | "repetition": { | 12 | "repetition1": { |
13 | "prototype": "montage/ui/repetition.reel", | 13 | "prototype": "montage/ui/repetition.reel", |
14 | "properties": { | 14 | "properties": { |
15 | "element": { | 15 | "element": { |
@@ -17,17 +17,6 @@ | |||
17 | } | 17 | } |
18 | } | 18 | } |
19 | }, | 19 | }, |
20 | "translateComposer": { | ||
21 | "prototype": "montage/ui/composer/translate-composer", | ||
22 | "properties": { | ||
23 | "component": {"@": "owner"}, | ||
24 | "maxTranslateX": 250000, | ||
25 | "invertAxis": true | ||
26 | }, | ||
27 | "bindings": { | ||
28 | "element": {"<-": "@owner._element"} | ||
29 | } | ||
30 | }, | ||
31 | "owner": { | 20 | "owner": { |
32 | "prototype": "montage/ui/flow.reel", | 21 | "prototype": "montage/ui/flow.reel", |
33 | "properties": { | 22 | "properties": { |
@@ -35,17 +24,7 @@ | |||
35 | "#": "montage-flow" | 24 | "#": "montage-flow" |
36 | }, | 25 | }, |
37 | "_repetition": { | 26 | "_repetition": { |
38 | "@": "repetition" | 27 | "@": "repetition1" |
39 | }, | ||
40 | "_translateComposer": { | ||
41 | "@": "translateComposer" | ||
42 | } | ||
43 | }, | ||
44 | "bindings": { | ||
45 | "translateX": {"<-": "@translateComposer.translateX"}, | ||
46 | "isSelectionEnabled": { | ||
47 | "boundObject": {"@": "repetition"}, | ||
48 | "boundObjectPropertyPath": "isSelectionEnabled" | ||
49 | } | 28 | } |
50 | } | 29 | } |
51 | } | 30 | } |
@@ -66,17 +45,8 @@ | |||
66 | -webkit-transform-style: preserve-3d; | 45 | -webkit-transform-style: preserve-3d; |
67 | -webkit-transform: translateZ(0); | 46 | -webkit-transform: translateZ(0); |
68 | } | 47 | } |
69 | .montage-flow-repetition > div { | 48 | .montage-flow-repetition > * { |
70 | position: absolute; | 49 | position: absolute !important; |
71 | top: 50%; | ||
72 | left: 50%; | ||
73 | width: 0; | ||
74 | height: 0; | ||
75 | -webkit-transform: translateZ(0); | ||
76 | -webkit-transform-style: preserve-3d; | ||
77 | } | ||
78 | .montage-flow-pointer-events-none { | ||
79 | pointer-events: none; | ||
80 | } | 50 | } |
81 | </style> | 51 | </style> |
82 | </head> | 52 | </head> |
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 |