aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel/Layer.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js138
1 files changed, 124 insertions, 14 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index e76b8cc0..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;
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 }
480 */
440 //this.positionCollapser.needsDraw = true; 481 //this.positionCollapser.needsDraw = true;
441 482
442 this.transformCollapser.clicker = this.clickerTransform; 483 this.transformCollapser.clicker = this.clickerTransform;
443 this.transformCollapser.myContent = this.contentTransform; 484 this.transformCollapser.myContent = this.contentTransform;
444 this.transformCollapser.element = this.contentTransform; 485 this.transformCollapser.element = this.contentTransform;
445 this.transformCollapser.contentHeight = 100; 486 this.transformCollapser.contentHeight = 100;
446 // this.transformCollapser.isCollapsedAtStart = true;
447 this.transformCollapser.isCollapsed = this.isTransformCollapsed; 487 this.transformCollapser.isCollapsed = this.isTransformCollapsed;
448 this.transformCollapser.isAnimated = true; 488 this.transformCollapser.isAnimated = false;
489 // Bind the collapser's isToggling property to the isTransformCollapsed property,
490 // so a change in one will affect the other.
491 Object.defineBinding(this.transformCollapser, "isToggling", {
492 boundObject: this,
493 boundObjectPropertyPath: "isTransformCollapsed",
494 oneway: false
495 });
496 this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false);
497
498
499 /*
449 this.transformCollapser.labelClickEvent = function(boolBypass) { 500 this.transformCollapser.labelClickEvent = function(boolBypass) {
450 var newEvent = document.createEvent("CustomEvent"); 501 var newEvent = document.createEvent("CustomEvent");
451 newEvent.initCustomEvent("layerEvent", false, true); 502 newEvent.initCustomEvent("layerEvent", false, true);
@@ -456,6 +507,7 @@ var Layer = exports.Layer = Montage.create(Component, {
456 defaultEventManager.dispatchEvent(newEvent); 507 defaultEventManager.dispatchEvent(newEvent);
457 that.isTransformCollapsed = that.transformCollapser.isCollapsed; 508 that.isTransformCollapsed = that.transformCollapser.isCollapsed;
458 } 509 }
510 */
459 //this.transformCollapser.needsDraw = true; 511 //this.transformCollapser.needsDraw = true;
460 512
461 this.styleCollapser.clicker = this.clickerStyle; 513 this.styleCollapser.clicker = this.clickerStyle;
@@ -463,7 +515,18 @@ var Layer = exports.Layer = Montage.create(Component, {
463 this.styleCollapser.element = this.contentStyle; 515 this.styleCollapser.element = this.contentStyle;
464 this.styleCollapser.isCollapsed = this.isStyleCollapsed; 516 this.styleCollapser.isCollapsed = this.isStyleCollapsed;
465 this.styleCollapser.contentHeight = 0; 517 this.styleCollapser.contentHeight = 0;
466 this.styleCollapser.isAnimated = true; 518 this.styleCollapser.isAnimated = false;
519 // Bind the collapser's isToggling property to the isStyleCollapsed property,
520 // so a change in one will affect the other.
521 Object.defineBinding(this.styleCollapser, "isToggling", {
522 boundObject: this,
523 boundObjectPropertyPath: "isStyleCollapsed",
524 oneway: false
525 });
526 this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false);