diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 136 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 138 |
2 files changed, 180 insertions, 94 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 26d045d6..1cc05f4e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | |||
@@ -17,7 +17,11 @@ | |||
17 | "element": {"#": "track"}, | 17 | "element": {"#": "track"}, |
18 | "tweenRepetition" : {"@" : "tweenRepetition"}, | 18 | "tweenRepetition" : {"@" : "tweenRepetition"}, |
19 | "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, | 19 | "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, |
20 | "tween": {"@" : "tween"} | 20 | "tween": {"@" : "tween"}, |
21 | "_mainCollapser" : {"@" : "mainCollapser"}, | ||
22 | "_positionCollapser" : {"@" : "positionCollapser"}, | ||
23 | "_transformCollapser" : {"@" : "transformCollapser"}, | ||
24 | "_styleCollapser" : {"@" : "styleCollapser"} | ||
21 | } | 25 | } |
22 | }, | 26 | }, |
23 | 27 | ||
@@ -145,6 +149,110 @@ | |||
145 | "properties" : { | 149 | "properties" : { |
146 | "element":{"#": "transform-track-base"} | 150 | "element":{"#": "transform-track-base"} |
147 | } | 151 | } |
152 | }, | ||
153 | |||
154 | "mainCollapser" : { | ||
155 | "module" : "js/panels/timeline/Collapser.js", | ||
156 | "name" : "Collapser", | ||
157 | "properties" : { | ||
158 | "element" : {"#" : "content-main"}, | ||
159 | "myContent" : {"#":"content-main"}, | ||
160 | "contentHeight" : 60, | ||
161 | "isLabelClickable" : false, | ||
162 | "clicker" : {"#" : "label-main"}, | ||
163 | "isCollapsed" : true, | ||
164 | "isAnimated" : true | ||
165 | }, | ||
166 | "bindings" : { | ||
167 | "isToggling" : { | ||
168 | "boundObject" : {"@" : "owner" }, | ||
169 | "boundObjectPropertyPath" : "isMainCollapsed", | ||
170 | "oneway" : false | ||
171 | }, | ||
172 | "bypassAnimation" : { | ||
173 | "boundObject" : {"@": "owner"}, | ||
174 | "boundObjectPropertyPath" : "bypassAnimation", | ||
175 | "oneway" : false | ||
176 | } | ||
177 | } | ||
178 | }, | ||
179 | |||
180 | "positionCollapser" : { | ||
181 | "module" : "js/panels/timeline/Collapser.js", | ||
182 | "name" : "Collapser", | ||
183 | "properties" : { | ||
184 | "element" : {"#" : "content-position-tracks"}, | ||
185 | "myContent" : {"#":"content-position-tracks"}, | ||
186 | "contentHeight" : 40, | ||
187 | "isLabelClickable" : false, | ||
188 | "clicker" : {"#" : "label-position"}, | ||
189 | "isCollapsed" : true, | ||
190 | "isAnimated" : true | ||
191 | }, | ||
192 | "bindings" : { | ||
193 | "isToggling" : { | ||
194 | "boundObject" : {"@" : "owner" }, | ||
195 | "boundObjectPropertyPath" : "isPositionCollapsed", | ||
196 | "oneway" : false | ||
197 | }, | ||
198 | "bypassAnimation" : { | ||
199 | "boundObject" : {"@": "owner"}, | ||
200 | "boundObjectPropertyPath" : "bypassAnimation", | ||
201 | "oneway" : false | ||
202 | } | ||
203 | } | ||
204 | }, | ||
205 | |||
206 | "transformCollapser" : { | ||
207 | "module" : "js/panels/timeline/Collapser.js", | ||
208 | "name" : "Collapser", | ||
209 | "properties" : { | ||
210 | "element" : {"#" : "content-transform-tracks"}, | ||
211 | "myContent" : {"#":"content-transform-tracks"}, | ||
212 | "contentHeight" : 40, | ||
213 | "isLabelClickable" : false, | ||
214 | "clicker" : {"#" : "label-transform"}, | ||
215 | "isCollapsed" : true, | ||
216 | "isAnimated" : true | ||
217 | }, | ||
218 | "bindings" : { | ||
219 | "isToggling" : { | ||
220 | "boundObject" : {"@" : "owner" }, | ||
221 | "boundObjectPropertyPath" : "isTransformCollapsed", | ||
222 | "oneway" : false | ||
223 | }, | ||
224 | "bypassAnimation" : { | ||
225 | "boundObject" : {"@": "owner"}, | ||
226 | "boundObjectPropertyPath" : "bypassAnimation", | ||
227 | "oneway" : false | ||
228 | } | ||
229 | } | ||
230 | }, | ||
231 | |||
232 | "styleCollapser" : { | ||
233 | "module" : "js/panels/timeline/Collapser.js", | ||
234 | "name" : "Collapser", | ||
235 | "properties" : { | ||
236 | "element" : {"#" : "content-styles"}, | ||
237 | "myContent" : {"#":"content-styles"}, | ||
238 | "contentHeight" : 40, | ||
239 | "isLabelClickable" : false, | ||
240 | "clicker" : {"#" : "label-styles"}, | ||
241 | "isCollapsed" : true, | ||
242 | "isAnimated" : true | ||
243 | }, | ||
244 | "bindings" : { | ||
245 | "isToggling" : { | ||
246 | "boundObject" : {"@" : "owner" }, | ||
247 | "boundObjectPropertyPath" : "isStyleCollapsed", | ||
248 | "oneway" : false | ||
249 | }, | ||
250 | "bypassAnimation" : { | ||
251 | "boundObject" : {"@": "owner"}, | ||
252 | "boundObjectPropertyPath" : "bypassAnimation", | ||
253 | "oneway" : false | ||
254 | } | ||
255 | } | ||
148 | } | 256 | } |
149 | 257 | ||
150 | 258 | ||
@@ -153,28 +261,28 @@ | |||
153 | </head> | 261 | </head> |
154 | <body> | 262 | <body> |
155 | 263 | ||
156 | <div id="track" class="timeline-track"> | 264 | <div data-montage-id="track" class="timeline-track"> |
157 | <div id="track_lanes" class="tracklane"> | 265 | <div data-montage-id="track_lanes" class="tracklane"> |
158 | <div id="track_lane"></div> | 266 | <div data-montage-id="track_lane"></div> |
159 | </div> | 267 | </div> |
160 | <div class="label-main collapsible-label collapsible-collapsed"></div> | 268 | <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div> |
161 | <div class="collapsible-content collapsible-collapsed content-main"> | 269 | <div class="collapsible-content collapsible-collapsed content-main" data-montage-id="content-main"> |
162 | <div class="label-position collapsible-label collapsible-collapsed"> | 270 | <div class="label-position collapsible-label collapsible-collapsed" data-montage-id="label-position"> |
163 | 271 | ||
164 | </div> | 272 | </div> |
165 | <div class="content-position collapsible-content collapsible-collapsed" id="content-position-tracks"> | 273 | <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position-tracks"> |
166 | <div id="position-track-base"></div> | 274 | <div data-montage-id="position-track-base"></div> |
167 | </div> | 275 | </div> |
168 | <div class="label-transform collapsible-label collapsible-collapsed"> | 276 | <div class="label-transform collapsible-label collapsible-collapsed" data-montage-id="label-transform"> |
169 | 277 | ||
170 | </div> | 278 | </div> |
171 | <div class="content-transform collapsible-content collapsible-collapsed" id="content-transform-tracks"> | 279 | <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform-tracks"> |
172 | <div id="transform-track-base"></div> | 280 | <div data-montage-id="transform-track-base"></div> |
173 | </div> | 281 | </div> |
174 | <div class="label-styles collapsible-label collapsible-collapsed"> | 282 | <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles"> |
175 | 283 | ||
176 | </div> | 284 | </div> |
177 | <div id="content-styles" class="content-styles collapsible-content collapsible-collapsed"> | 285 | <div data-montage-id="content-styles" class="content-styles collapsible-content collapsible-collapsed"> |
178 | <div class="timeline-track"></div> | 286 | <div class="timeline-track"></div> |
179 | </div> | 287 | </div> |
180 | </div> | 288 | </div> |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 9894e6f9..669dabef 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -33,16 +33,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
33 | 33 | ||
34 | // Are the various collapsers collapsed or not | 34 | // Are the various collapsers collapsed or not |
35 | _isMainCollapsed:{ | 35 | _isMainCollapsed:{ |
36 | value:"" | 36 | value: true |
37 | }, | 37 | }, |
38 | isMainCollapsed:{ | 38 | isMainCollapsed:{ |
39 | get:function () { | 39 | get:function () { |
40 | return this._isMainCollapsed; | 40 | return this._isMainCollapsed; |
41 | }, |