aboutsummaryrefslogtreecommitdiff
path: root/node_modules/ninja-components/flow-controller.reel/flow-controller.html
blob: da2fae62fe0c2baeb0bb121b3400e4f065012965 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE html>
<!-- <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> -->
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/montage-serialization">
        {
            "image1": {
                "module": "montage/ui/image3d.reel",
                "name": "Image3D",
                "properties": {
                    "element": {"#": "image"}
                },
                "bindings": {
                    "data": {
                        "boundObject": {"@": "flow1"},
                        "boundObjectPropertyPath": "objectAtCurrentIteration",
                        "oneway": true
                    }
                }
            },
            "scroll1": {
                "module": "montage/ui/scroll",
                "name": "Scroll",
                "properties": {
                    "pointerSpeedMultiplier": 1,
                    "component": {"@": "offset"}
                },
                "bindings": {
                    "element": {
                        "boundObject": {"@": "flow1"},
                        "boundObjectPropertyPath": "_element",
                        "oneway": true
                    },
                    "maxScrollX": {
                        "boundObject": {"@": "offset"},
                        "boundObjectPropertyPath": "length",
                        "oneway": true
                    },
                    "scrollX": {
                        "boundObject": {"@": "offset"},
                        "boundObjectPropertyPath": "origin",
                        "oneway": false
                    }
                }
            },
            "offset": {
                "module": "montage/ui/flow-offset",
                "name": "FlowOffset",
                "properties": {
                    "scale": 350,
                    "component": {"@": "flow1"}
                },
                "bindings": {
                    "numberOfNodes": {
                        "boundObject": {"@": "flow1"},
                        "boundObjectPropertyPath": "numberOfNodes",
                        "oneway": true                    
                    },
                    "selectedComponent": {
                        "boundObject": {"@": "nearest"},
                        "boundObjectPropertyPath": "nearestNeighborComponent",
                        "oneway": true  
                    }
                }
            },
            "nearest": {
                "module": "montage/ui/nearest-neighbor-component-search",
                "name": "NearestNeighborComponentSearch",
                "bindings": {
                    "componentList": {
                        "boundObject": {"@": "flow1"},
                        "boundObjectPropertyPath": "_repetitionComponents",
                        "oneway": true
                    },
                    "pointerPosition": {
                        "boundObject": {"@": "scroll1"},
                        "boundObjectPropertyPath": "pointerStartEventPosition",
                        "oneway": true                    
                    }
                }
            },
            "flow1": {
                "module": "montage/ui/flow.reel",
                "name": "Flow",
                "properties": {
                    "element": {"#": "flow"}
                },
                "bindings": {
                    "nodeOffset": {
                        "boundObject": {"@": "offset"},
                        "boundObjectPropertyPath": "offset",
                        "oneway": true
                    },
                    "objects": {
                        "boundObject": {"@": "owner"},
                        "boundObjectPropertyPath": "images",
                        "oneway": true
                    }
                }
            },
            "path1": {
                "module": "montage/ui/flow-path",
                "name": "FlowPath",
                "properties": {
                    "evalPath": [                        
                        "path.translateX = slide.time-slide.index*155+50",
                        "path.translateY = (slide.index%3)*240+50",
                        "path.translateZ = -slide.time/3",
                        "path.rotateX = slide.speed/200",
                        "path.rotateY = 1",
                        "path.rotateZ = slide.time/500",
                        "path.style.opacity = 1.2 - slide.time/4000"
                    ]
                }
            },
            "path2": {
                "module": "montage/ui/flow-path",
                "name": "FlowPath",
                "properties": {
                    "evalPath": [
                        "path.translateX = slide.time",
                        "path.translateZ = ((slide.time-400)*(slide.time-400))/-1500",
                        "path.rotateX = 0",
                        "path.rotateY = (slide.time-400)/1200",
                        "path.rotateZ = slide.speed/1500",
                        "path.style.opacity = 1"
                    ]
                }
            },
            "pathLerp1": {
                "module": "montage/ui/flow-path-lerp",
                "name": "FlowPathLerp",
                "bindings": {
                    "path1": {
                        "boundObject": {"@": "path1"},
                        "boundObjectPropertyPath": "path",
                        "oneway": true
                    },
                    "path2": {
                        "boundObject": {"@": "path2"},
                        "boundObjectPropertyPath": "path",
                        "oneway": true
                    },
                    "interpolant": {
                        "boundObject": {"@": "owner"},
                        "boundObjectPropertyPath": "interpValue"
                    }
                }
            },
            "path3": {
                "module": "montage/ui/flow-path",
                "name": "FlowPath",
                "properties": {
                    
                },
                "bindings": {
                    "translateX": {
                        "boundObject": {"@": "translateX"},
                        "boundObjectPropertyPath": "path",
                        "oneway": true
                    },
                    "rotateY": {
                        "boundObject": {"@": "rotateY"},
                        "boundObjectPropertyPath": "path",
                        "oneway": true
                    },
                    "translateZ": {
                        "boundObject": {"@": "translateZ"},
                        "boundObjectPropertyPath": "path",
                        "oneway": true
                    }
                }
            },
            "translateX": {
                "module": "montage/ui/flow-path-sigmoid",
                "name": "FlowPathSigmoid",
                "properties": {
                    "smoothness": 300,
                    "scale": 0.05,
                    "width": 10000,
                    "origin": -8000,
                    "sigmoidCenter": 8000
                }
            },
            "rotateY": {
                "module": "montage/ui/flow-path-sigmoid",
                "name": "FlowPathSigmoid",
                "properties": {
                    "smoothness": 300,
                    "scale": -0.00024,
                    "width": 10000,
                    "origin": -8000,
                    "sigmoidCenter": 8000,
                    "slope": 0
                }
            },
            "path4": {
                "module": "montage/ui/flow-path",
                "name": "FlowPath",
                "bindings": {
                    "translateX": {
                        "boundObject": {"@": "path1TranslateX"},
                        "boundObjectPropertyPath": "path",
                        "oneway": true
                    },
                    "translateY": {
                        "boundObject": {"@": "path1TranslateY"},
                        "boundObjectPropertyPath": "path",
                        "oneway": true
                    }
                }
            },
            "path1TranslateX": {
                "module": "montage/ui/flow-path-linear",
                "name": "FlowPathLinear",
                "properties": {
                    "origin": 0,
                    "multiplier": 0.5
                }
            },
            "path1TranslateY": {
                "module": "montage/ui/flow-path-cubic",
                "name": "FlowPathCubic",
                "properties": {
                    "a": 0,
                    "b": -0.0001,
                    "c": 0,
                    "d": 300
                }
            },
            "owner": {
                "module": "montage/ui/flow-controller.reel",
                "name": "FlowController",
                "properties": {
                    "element": {"#": "flowc"},
                    "scrollController": {"@": "scroll1"},
                    "offsetController": {"@": "offset"},
                    "flowComponent": {"@": "flow1"},
                    "spacing": 350,
                    "momentumDuration": 650,
                    "bouncingDuration": 750,
                    "animation": {"@": "path2"},
                    "path1": {"@": "path1"},
                    "path2": {"@": "path2"},
                    "path3": {"@": "path3"},
                    "path4": {"@": "path4"}
                }
            }
        }
    </script>
    <style>
        .flow {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-perspective: 800px;
            /*background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#bbb));            */
        }
    </style>
</head>
<body>
    <div id="flowc">
        <div id="flow" class="flow">
            <div id="image"></div>
        </div>
    </div>
</body>
</html>