diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 163 |
1 files changed, 136 insertions, 27 deletions
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; |
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 */ |
@@ -403,11 +424,20 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
403 | this.mainCollapser.myContent = this.myContent; | 424 | this.mainCollapser.myContent = this.myContent; |
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.element; | 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 | } |
421 | this.mainCollapser.needsDraw = true; | 451 | */ |
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.element; | 456 | this.positionCollapser.element = this.contentPosition; |
426 | this.positionCollapser.contentHeight = 60; | 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 | } |
440 | this.positionCollapser.needsDraw = true; | 480 | */ |
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.element; | 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,14 +507,26 @@ 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 | } |
459 | this.transformCollapser.needsDraw = true; | 510 | */ |
511 | //this.transformCollapser.needsDraw = true; | ||
460 | 512 | ||
461 | this.styleCollapser.clicker = this.clickerStyle; | 513 | this.styleCollapser.clicker = this.clickerStyle; |
462 | this.styleCollapser.myContent = this.contentStyle; | 514 | this.styleCollapser.myContent = this.contentStyle; |
463 | this.styleCollapser.element = this.element; | 515 | this.styleCollapser.element = this.contentStyle; |
464 | this.styleCollapser.isCollapsed = this.isStyleCollapsed; | 516 | this.styleCollapser.isCollapsed = this.isStyleCollapsed; |
465 | this.styleCollapser.contentHeight = 20; | 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 |