diff options
author | hwc487 | 2012-03-06 11:41:28 -0800 |
---|---|---|
committer | hwc487 | 2012-03-06 11:41:28 -0800 |
commit | 5e640e24c3b4658b8060cde837ae98dabd3ba5bf (patch) | |
tree | 527f183b5e485282ce1efe15d96b6b8ddc26801e /js/panels/Timeline | |
parent | 182f05f2f7a8f43f1589c9b8c15bf00d6e983676 (diff) | |
parent | 2815adfd7c19b3dff89dc3e1bda9af8d30dca8d6 (diff) | |
download | ninja-5e640e24c3b4658b8060cde837ae98dabd3ba5bf.tar.gz |
Merge branch 'TimelineUber' of github.com:imix23ways/ninja-internal into integration
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 31 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 14 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 163 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/css/Layer.css | 73 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/scss/Layer.scss | 2 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 19 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 389 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 199 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 24 |
10 files changed, 665 insertions, 254 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 5de884a9..d161cdd7 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js | |||
@@ -68,7 +68,7 @@ var Montage = require("montage/core/core").Montage, | |||
68 | }, | 68 | }, |
69 | 69 | ||
70 | _bypassAnimation : { | 70 | _bypassAnimation : { |
71 | value: false | 71 | value: true |
72 | }, | 72 | }, |
73 | bypassAnimation: { | 73 | bypassAnimation: { |
74 | get: function() { | 74 | get: function() { |
@@ -169,6 +169,28 @@ var Montage = require("montage/core/core").Montage, | |||
169 | } | 169 | } |
170 | }, | 170 | }, |
171 | 171 | ||
172 | _isToggling: { | ||
173 | serializable: true, | ||
174 | value: true | ||
175 | }, | ||
176 | isToggling: { | ||
177 | serializable: true, | ||
178 | get: function() { | ||
179 | return this._isToggling; | ||
180 | }, | ||
181 | set: function(newVal) { | ||
182 | if (newVal !== this._isToggling) { | ||
183 | this._isToggling = newVal; | ||
184 | |||
185 | if (this.bypassAnimation) { | ||
186 | this.isAnimated = false; | ||
187 | } | ||
188 | this.myContent.classList.remove(this.transitionClass); | ||
189 | this.handleCollapserLabelClick(); | ||
190 | } | ||
191 | } | ||
192 | }, | ||
193 | |||
172 | /* === END: Models === */ | 194 | /* === END: Models === */ |
173 | 195 | ||
174 | /* === BEGIN: Draw cycle === */ | 196 | /* === BEGIN: Draw cycle === */ |
@@ -184,6 +206,10 @@ var Montage = require("montage/core/core").Montage, | |||
184 | // Get the original value of the overflow property: | 206 | // Get the original value of the overflow property: |
185 | this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); | 207 | this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); |
186 | 208 | ||
209 | /* | ||
210 | * Removed because of expense. This disables the feature of having the | ||
211 | * component dynamically expand/collapse the content on init based on properties; | ||
212 | * Now default state of component must be set in CSS. | ||
187 | // If the content area is supposed to start out collapsed: | 213 | // If the content area is supposed to start out collapsed: |
188 | if (this.isCollapsed) { | 214 | if (this.isCollapsed) { |
189 | this.myContent.style.height = "0px"; | 215 | this.myContent.style.height = "0px"; |
@@ -198,6 +224,7 @@ var Montage = require("montage/core/core").Montage, | |||
198 | this.myContent.classList.remove(this.collapsedClass); | 224 | this.myContent.classList.remove(this.collapsedClass); |
199 | this.clicker.classList.remove(this.collapsedClass); | 225 | this.clicker.classList.remove(this.collapsedClass); |
200 | } | 226 | } |
227 | */ | ||
201 | } | 228 | } |
202 | }, | 229 | }, |
203 | draw: { | 230 | draw: { |
@@ -316,7 +343,7 @@ var Montage = require("montage/core/core").Montage, | |||
316 | } | 343 | } |
317 | 344 | ||
318 | if (this.bypassAnimation) { | 345 | if (this.bypassAnimation) { |
319 | this.bypassAnimation = false; | 346 | this.bypassAnimation = true; |
320 | this.isAnimated = true; | 347 | this.isAnimated = true; |
321 | } | 348 | } |
322 | } | 349 | } |
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 0bd448f7..14315f8d 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -226,6 +226,8 @@ | |||
226 | } | 226 | } |
227 | } | 227 | } |
228 | } | 228 | } |
229 | |||
230 | |||
229 | } | 231 | } |
230 | </script> | 232 | </script> |
231 | </head> | 233 | </head> |
@@ -241,9 +243,9 @@ | |||
241 | <div class="collapsible-content content-layer collapsible-collapsed"> | 243 | <div class="collapsible-content content-layer collapsible-collapsed"> |
242 | <div class="label-position"> | 244 | <div class="label-position"> |
243 | <span class="collapsible-label">Position</span> | 245 | <span class="collapsible-label">Position</span> |
244 | <span class="collapsible-clicker clicker-position"></span> | 246 | <span class="collapsible-clicker clicker-position collapsible-collapsed"></span> |
245 | </div> | 247 | </div> |
246 | <div class="content-position collapsible-content"> | 248 | <div class="content-position collapsible-content collapsible-collapsed"> |
247 | <div class="layout-table"> | 249 | <div class="layout-table"> |
248 | <div class="layout-row"> | 250 | <div class="layout-row"> |
249 | <div class="layout-cell">X</div> | 251 | <div class="layout-cell">X</div> |
@@ -257,9 +259,9 @@ | |||
257 | </div> | 259 | </div> |
258 | <div class="label-transform"> | 260 | <div class="label-transform"> |
259 | <span class="collapsible-label">Transform</span> | 261 | <span class="collapsible-label">Transform</span> |
260 | <span class="clicker-transform collapsible-clicker"></span> | 262 | <span class="clicker-transform collapsible-clicker collapsible-collapsed"></span> |
261 | </div> | 263 | </div> |
262 | <div class="content-transform collapsible-content"> | 264 | <div class="content-transform collapsible-content collapsible-collapsed"> |
263 | <div class="layout-table"> | 265 | <div class="layout-table"> |
264 | <div class="layout-row"> | 266 | <div class="layout-row"> |
265 | <div class="layout-cell">Scale X</div> | 267 | <div class="layout-cell">Scale X</div> |
@@ -286,11 +288,11 @@ | |||
286 | </div> | 288 | </div> |
287 | <div class="label-style"> | 289 | <div class="label-style"> |
288 | <span class="collapsible-label">Style</span> | 290 | <span class="collapsible-label">Style</span> |
289 | <span class="clicker-style collapsible-clicker"></span> | 291 | <span class="clicker-style collapsible-clicker collapsible-collapsed"></span> |
290 | <div class="cssbutton button-delete disabled"></div> | 292 | <div class="cssbutton button-delete disabled"></div> |
291 | <div class="cssbutton button-add"></div> | 293 | <div class="cssbutton button-add"></div> |
292 | </div> | 294 | </div> |
293 | <div class="content-style collapsible-content"> | 295 | <div class="content-style collapsible-content collapsible-collapsed"> |
294 | <div class="" id="style-container"> | 296 | <div class="" id="style-container"> |
295 | <div class="style-row" id="layer-style"> | 297 | <div class="style-row" id="layer-style"> |
296 | </div> | 298 | </div> |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index e75b4d0f..2980842f 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -306,24 +306,28 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
306 | 306 | ||
307 | // Are the various collapsers collapsed or not | 307 | // Are the various collapsers collapsed or not |
308 | _isMainCollapsed : { | 308 | _isMainCollapsed : { |
309 | value: "" | 309 | serializable: true, |
310 | value: true | ||
310 | }, | 311 | }, |
311 | isMainCollapsed : { | 312 | isMainCollapsed : { |
313 | serializable: true, | ||
312 | get: function() { | 314 | get: function() { |
313 | return this._isMainCollapsed; | 315 | return this._isMainCollapsed; |
314 | }, | 316 | }, |
315 | set: function(newVal) { | 317 | set: function(newVal) { |
318 | this.log('layer.js: isMainCollapsed: ' + newVal); | ||
316 | if (newVal !== this._isMainCollapsed) { | 319 | if (newVal !== this._isMainCollapsed) { |
317 | this._isMainCollapsed = newVal; | 320 | this._isMainCollapsed = newVal; |
318 | this.needsDraw = true; | ||
319 | } | 321 | } |
320 | } | 322 | } |
321 | }, | 323 | }, |
322 | 324 | ||
323 | _isTransformCollapsed : { | 325 | _isTransformCollapsed : { |
326 | serializable: true, | ||
324 | value: true | 327 | value: true |
325 | }, | 328 | }, |
326 | isTransformCollapsed : { | 329 | isTransformCollapsed : { |
330 | serializable: true, | ||
327 | get: function() { | 331 | get: function() { |
328 | return this._isTransformCollapsed; | 332 | return this._isTransformCollapsed; |
329 | }, | 333 | }, |
@@ -336,9 +340,11 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
336 | }, | 340 | }, |
337 | 341 | ||
338 | _isPositionCollapsed : { | 342 | _isPositionCollapsed : { |
343 | serializable: true, | ||
339 | value: true | 344 | value: true |
340 | }, | 345 | }, |
341 | isPositionCollapsed : { | 346 | isPositionCollapsed : { |
347 | serializable: true, | ||
342 | get: function() { | 348 | get: function() { |
343 | return this._isPositionCollapsed; | 349 | return this._isPositionCollapsed; |