aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--node_modules/montage/ui/flow.reel/flow.html38
-rw-r--r--node_modules/montage/ui/flow.reel/flow.js482
2 files changed, 444 insertions, 76 deletions
<
diff --git a/node_modules/montage/ui/flow.reel/flow.html b/node_modules/montage/ui/flow.reel/flow.html
index 52edb7e5..8a9603bf 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 "repetition1": { 12 "repetition": {
13 "prototype": "montage/ui/repetition.reel", 13 "prototype": "montage/ui/repetition.reel",
14 "properties": { 14 "properties": {
15 "element": { 15 "element": {
@@ -17,6 +17,17 @@
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 },
20 "owner": { 31 "owner": {
21 "prototype": "montage/ui/flow.reel", 32 "prototype": "montage/ui/flow.reel",
22 "properties": { 33 "properties": {
@@ -24,7 +35,17 @@
24 "#": "montage-flow" 35 "#": "montage-flow"
25 }, 36 },
26 "_repetition": { 37 "_repetition": {
27 "@": "repetition1" 38 "@": "repetition"
39 },
40 "_translateComposer": {
41 "@": "translateComposer"
42 }
43 },
44 "bindings": {
45 "translateX": {"<-": "@translateComposer.translateX"},
46 "isSelectionEnabled": {
47 "boundObject": {"@": "repetition"},
48 "boundObjectPropertyPath": "isSelectionEnabled"
28 } 49 }
29 } 50 }
30 } 51 }
@@ -45,8 +66,17 @@
45 -webkit-transform-style: preserve-3d; 66 -webkit-transform-style: preserve-3d;
46 -webkit-transform: translateZ(0); 67 -webkit-transform: translateZ(0);
47 } 68 }
48 .montage-flow-repetition > * { 69 .montage-flow-repetition > div {
49 position: absolute !important; 70 position: absolute;
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;
50 } 80 }
51 </style> 81 </style>
52</head> 82</head>
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
11var Flow = exports.Flow = Montage.create(Component, { 11var 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 }