aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJon Reid2012-03-01 18:01:08 -0800
committerJon Reid2012-03-01 18:01:08 -0800
commit205d869d94005cb214fd838879d4f5e81d763311 (patch)
tree2501c3a37f8ec2a19d179c24ca34e4f9df640677 /js/panels/Timeline
parent28befbc159399f70f00034f52e56a60dae0a3ba1 (diff)
downloadninja-205d869d94005cb214fd838879d4f5e81d763311.tar.gz
Timeline: Merge arrlayers and arrtracks into one object.
Redefine collapser to use property binding instead of events.
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js26
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js138
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html19
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js43
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js95
5 files changed, 288 insertions, 33 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index ad490c2e..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 === */
@@ -321,7 +343,7 @@ var Montage = require("montage/core/core").Montage,
321 } 343 }
322 344
323 if (this.bypassAnimation) { 345 if (this.bypassAnimation) {
324 this.bypassAnimation = false; 346 this.bypassAnimation = true;
325 this.isAnimated = true; 347 this.isAnimated = true;
326 } 348 }
327 } 349 }
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 94d1f7e9..f9bba499 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;
344 }, 350 },
@@ -351,9 +357,11 @@ var Layer = exports.Layer = Montage.create(Component, {
351 }, 357 },
352 358
353 _isStyleCollapsed : { 359 _isStyleCollapsed : {
360 serializable: true,
354 value: true 361 value: true
355 }, 362 },
356 isStyleCollapsed : { 363 isStyleCollapsed : {
364 serializable: true,
357 get: function() { 365 get: function() {
358 return this._isStyleCollapsed; 366 return this._isStyleCollapsed;
359 }, 367 },
@@ -364,6 +372,19 @@ var Layer = exports.Layer = Montage.create(Component, {
364 } 372 }
365 } 373 }
366 }, 374 },
375 _animateCollapser : {
376 serializable: true,
377 value: false
378 },
379 animateCollapser : {
380 serializable: true,
381 get: function() {
382 return this._animateCollapser;
383 },
384 set: function(newVal) {
385 this._animateCollapser = newVal;
386 }
387 },
367 388
368 389
369 /* END: Models */ 390 /* END: Models */
@@ -404,10 +425,19 @@ var Layer = exports.Layer = Montage.create(Component, {
404 this.mainCollapser.contentHeight = 60; 425 this.mainCollapser.contentHeight = 60;
405 this.myContent.style.height = "0px"; 426 this.myContent.style.height = "0px";
406 this.mainCollapser.element = this.myContent; 427 this.mainCollapser.element = this.myContent;
407 //this.mainCollapser.isCollapsedAtStart = true;
408 this.mainCollapser.isCollapsed = this.isMainCollapsed; 428 this.mainCollapser.isCollapsed = this.isMainCollapsed;
409 this.mainCollapser.isAnimated = true; 429 this.mainCollapser.isAnimated = true;
410 this.element.setAttribute("data-layerid", this.layerID); 430 this.element.setAttribute("data-layerid", this.layerID);
431 // Bind the collapser's isToggling property to the isMainCollapsed property,
432 // so a change in one will affect the other.
433 Object.defineBinding(this.mainCollapser, "isToggling", {
434 boundObject: this,
435 boundObjectPropertyPath: "isMainCollapsed",
436 oneway: false
437 });
438 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
439
440 /*
411 this.mainCollapser.labelClickEvent = function(boolBypass) { 441 this.mainCollapser.labelClickEvent = function(boolBypass) {
412 var newEvent = document.createEvent("CustomEvent"); 442 var newEvent = document.createEvent("CustomEvent");
413 newEvent.initCustomEvent("layerEvent", false, true); 443 newEvent.initCustomEvent("layerEvent", false, true);
@@ -418,15 +448,25 @@ var Layer = exports.Layer = Montage.create(Component, {
418 defaultEventManager.dispatchEvent(newEvent); 448 defaultEventManager.dispatchEvent(newEvent);
419 that.isMainCollapsed = that.mainCollapser.isCollapsed; 449 that.isMainCollapsed = that.mainCollapser.isCollapsed;
420 } 450 }
451 */
421 //this.mainCollapser.needsDraw = true; 452 //this.mainCollapser.needsDraw = true;
422 453
423 this.positionCollapser.clicker = this.clickerPosition; 454 this.positionCollapser.clicker = this.clickerPosition;
424 this.positionCollapser.myContent = this.contentPosition; 455 this.positionCollapser.myContent = this.contentPosition;
425 this.positionCollapser.element = this.contentPosition; 456 this.positionCollapser.element = this.contentPosition;
426 this.positionCollapser.contentHeight = 40; 457 this.positionCollapser.contentHeight = 40;
427 // this.positionCollapser.isCollapsedAtStart = true;
428 this.positionCollapser.isCollapsed = this.isPositionCollapsed; 458 this.positionCollapser.isCollapsed = this.isPositionCollapsed;
429 this.positionCollapser.isAnimated = true; 459 this.positionCollapser.isAnimated = false;
460 // Bind the collapser's isToggling property to the isPositionCollapsed property,
461 // so a change in one will affect the other.
462 Object.defineBinding(this.positionCollapser, "isToggling", {
463 boundObject: this,
464 boundObjectPropertyPath: "isPositionCollapsed",
465 oneway: false
466 });
467 this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
468
469 /*
430 this.positionCollapser.labelClickEvent = function(boolBypass) { 470 this.positionCollapser.labelClickEvent = function(boolBypass) {
431 var newEvent = document.createEvent("CustomEvent"); 471 var newEvent = document.createEvent("CustomEvent");
432 newEvent.initCustomEvent("layerEvent", false, true); 472 newEvent.initCustomEvent("layerEvent", false, true);
@@ -437,15 +477,26 @@ var Layer = exports.Layer = Montage.create(Component, {
437 defaultEventManager.dispatchEvent(newEvent); 477 defaultEventManager.dispatchEvent(newEvent);
438 that.isPositionCollapsed = that.positionCollapser.isCollapsed; 478 that.isPositionCollapsed = that.positionCollapser.isCollapsed;
439 } 479 }