aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
blob: 29bf6eb33d2f534910c5c6243b8884397d545ed3 (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
<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<link rel="stylesheet" type="text/css" href="css/TimelinePanel.css">
   		

        <script type="text/montage-serialization">
            {
                "owner": {
                    "module": "js/panels/Timeline/TimelinePanel.reel",
                    "name": "TimelinePanel",
                    "properties": {
                        "element": {"#": "timeline_panel"},
                        "user_layers": {"#": "user_layers"},
                        "track_container": {"#": "right_inside"},
                        "timeline_leftpane" : {"#" : "timeline_leftpane"},
                        "layer_tracks": {"#": "layer_tracks"},
                        "master_track": {"#": "master_track"},
                        "newlayer_button": {"#": "newlayer_button"},
                        "deletelayer_button": {"#": "deletelayer_button"},
                        "time_markers" : {"#": "timeline_markers"},
                        "layerRepetition" : {"@": "repetition1"},
                        "trackRepetition" : {"@" : "repetition2"},
                        "playhead": {"#": "playhead"},
                        "playheadmarker": {"#": "playhead_marker"},
                        "timetext" : {"#": "time_text"}
                    }
                },

                "timelineResize" : {
                    "module": "js/panels/Resizer",
                    "name": "Resizer",
                    "properties": {
                        "element": {"#": "layer_resizer"},
                        "panel" : {"#" : "timeline_leftpane"},
                        "isVertical" : false,
                        "isInversed" : false,
                        "isPanel"    : false
                    }
                },

                
	            "repetition1": {
	                "module": "montage/ui/repetition.reel",
	                "name": "Repetition",
	                "properties": {
	                    "element": {"#": "container-layers"},
	                    "isSelectionEnabled" : true
	                },
	                "bindings": {
	                    "objects": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "arrLayers",
	                        "oneway": false
	                    }
	                }
	            },
	            "layer" : {
	            	"module" : "js/panels/Timeline/Layer.reel",
	            	"name" : "Layer",
	            	"properties" : {
	            		"element": {"#": "container-layer"}
	            	},
	            	"bindings" : {
	            		"layerName" : {
	            			"boundObject" : {"@" : "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.layerName",
	            			"oneway" : false
	            		},
	            		"layerID" : {
	            			"boundObject" : {"@" : "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.layerID",
	            			"oneway" : false
	            		},
	            		"arrLayerStyles" : {
	            			"boundObject" : {"@" : "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.arrLayerStyles",
	            			"oneway" : false
	            		},
	            		"isMainCollapsed" : {
	            			"boundObject" : {"@" : "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed",
	            			"oneway" : false
	            		},
	            		"isPositionCollapsed" : {
	            			"boundObject" : {"@" : "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isPositionCollapsed",
	            			"oneway" : false
	            		},
	            		"isTransformCollapsed" : {
	            			"boundObject" : {"@" : "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed",
	            			"oneway" : false
	            		},
	            		"isSelected" : {
	            			"boundObject" : {"@" : "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected",
	            			"oneway" : false
	            		},
	            		"isActive" : {
	            			"boundObject" : {"@" : "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isActive",
	            			"oneway" : false
	            		},
	            		"isStyleCollapsed" : {
	            			"boundObject" : {"@" : "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed",
	            			"oneway" : false
	            		}
	            	}
	            },
	            
	            "repetition2" : {
	                "module": "montage/ui/repetition.reel",
	                "name": "Repetition",
	                "properties": {
	                    "element": {"#": "container-tracks"},
	                    "isSelectionEnabled" : false
	                },
	                "bindings": {
	                    "objects": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "arrTracks",
	                        "oneway": false
	                    }
	                }
	            },
	            "track" : {
	            	"module" : "js/panels/Timeline/TimelineTrack.reel",
	            	"name" : "TimelineTrack",
	            	"properties" : {
	            		"element": {"#": "container-track"}
	            	},
	            	"bindings" : {
	            		"trackID" : {
	            			"boundObject" : {"@" : "repetition2"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.trackID",
	            			"oneway" : false
	            		},
	            		"tweens" : {
	            			"boundObject" : {"@" : "repetition2"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.tweens",
	            			"oneway" : false
	            		},
	            		"isMainCollapsed" : {
	            			"boundObject" : {"@" : "repetition2"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed",
	            			"oneway" : false
	            		},
	            		"isPositionCollapsed" : {
	            			"boundObject" : {"@" : "repetition2"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isPositionCollapsed",
	            			"oneway" : false
	            		},
	            		"isTransformCollapsed" : {
	            			"boundObject" : {"@" : "repetition2"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed",
	            			"oneway" : false
	            		},
	            		"isStyleCollapsed" : {
	            			"boundObject" : {"@" : "repetition2"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed",
	            			"oneway" : false
	            		}
	            	}
	            }
            }
        </script>

	</head>
	<body>
    
    	<div id="timeline_panel" class="tl_container">

            <div id="bread_crumb"></div>

            <div id="main_timeline" class="maintimeline">


                <div id="timeline_leftpane" class="tl_leftpane">
                    <div id="leftpane_inside" class="leftinside">
                        <div id="timeline_controller" class="timelinecontroller">
                            <div id="timeline_controls" class="timelinecontrols">
                                <div id="rewind_button" class="rewindbutton"></div>
                                <div id="play_button" class="playbutton"></div>
                                <div id="pause_button" class="pausebutton"></div>
                                <div id="forward_button" class="forwardbutton"></div>
                                <div id="time_text" class="timetext">00:00:00</div>
                            </div>
                        </div>


                        
                        <div id="user_layers" class="userlayers">
                            <div id="master_layer" class="masterlayer">Master Layer</div>
                            <div id="container-layers">
                            	<div id="container-layer"></div>
                            </div>
                        </div>

                        <div id="timeline_gutter" class="timelinegutter">
                            <div id="newlayer_button" class="newlayerbutton"></div>
                            <div id="deletelayer_button" class="deletelayerbutton"></div>
                        </div>
                    </div>
                </div>

                <div id="layer_resizer" class="layerresizer"></div>

                <div id="timeline_rightpane" class="tl_rightpane">
                    <div id="right_inside" class="rightinside">
                    	<div class="layout_markers">
	                        <div id="timeline_markers" class="timelinemarkers">
	                            <div id="playhead" class="playhead"></div>
	                        </div>
                    	</div>


                        <div id="layer_tracks" class="tl_layertracks">
                        	<div class="layout-tracks">
	                            <div id="playhead_marker" class="playheadmarker"></div>
	                            <div id="master_track" class="mastertrack"></div>
	                            <div id="container-tracks" class="container-tracks">
	                            	<div id="container-track"></div>
	                            </div>
                        	</div>

                        </div>
                    </div>
                </div>
                
            </div>
    	</div>

    </body>
</html>