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.js190
1 files changed, 77 insertions, 113 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index e76b8cc0..81bd1867 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,20 @@ var Layer = exports.Layer = Montage.create(Component, {
364 } 372 }
365 } 373 }
366 }, 374 },
375 _bypassAnimation : {
376 serializable: true,
377 value: false
378 },
379 bypassAnimation : {
380 serializable: true,
381 get: function() {
382 return this._bypassAnimation;
383 },
384 set: function(newVal) {
385 //console.log("layer.js _bypassAnimation setter " + newVal)
386 this._bypassAnimation = newVal;
387 }
388 },
367 389
368 390
369 /* END: Models */ 391 /* END: Models */
@@ -376,11 +398,7 @@ var Layer = exports.Layer = Montage.create(Component, {
376 this.init(); 398 this.init();
377 399
378 var that = this; 400 var that = this;
379 401
380 this.positionCollapser = Collapser.create();
381 this.transformCollapser = Collapser.create();
382 this.styleCollapser = Collapser.create();
383
384 // Make it editable! 402 // Make it editable!
385 this._layerEditable = Hintable.create(); 403 this._layerEditable = Hintable.create();
386 this._layerEditable.element = this.titleSelector; 404 this._layerEditable.element = this.titleSelector;
@@ -396,85 +414,12 @@ var Layer = exports.Layer = Montage.create(Component, {
396 this._layerEditable.editingClass = "editable2"; 414 this._layerEditable.editingClass = "editable2";
397 this._layerEditable.value = this.layerName; 415 this._layerEditable.value = this.layerName;
398 this._layerEditable.needsDraw = true; 416 this._layerEditable.needsDraw = true;
399
400 // Change the markup into collapsible sections using the nifty Collapser component!
401 this.mainCollapser = Collapser.create();
402 this.mainCollapser.clicker = this.clicker;
403 this.mainCollapser.myContent = this.myContent;
404 this.mainCollapser.contentHeight = 60;
405 this.myContent.style.height = "0px";
406 this.mainCollapser.element = this.myContent;
407 //this.mainCollapser.isCollapsedAtStart = true;
408 this.mainCollapser.isCollapsed = this.isMainCollapsed;
409 this.mainCollapser.isAnimated = true;
410 this.element.setAttribute("data-layerid", this.layerID);
411 this.mainCollapser.labelClickEvent = function(boolBypass) {
412 var newEvent = document.createEvent("CustomEvent");
413 newEvent.initCustomEvent("layerEvent", false, true);
414 newEvent.layerEventLocale = "content-main";
415 newEvent.layerEventType = "labelClick";
416 newEvent.layerID = that.layerID;
417 newEvent.bypassAnimation = boolBypass;
418 defaultEventManager.dispatchEvent(newEvent);
419 that.isMainCollapsed = that.mainCollapser.isCollapsed;
420 }
421 //this.mainCollapser.needsDraw = true;
422 417
423 this.positionCollapser.clicker = this.clickerPosition; 418 this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
424 this.positionCollapser.myContent = this.contentPosition; 419 this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
425 this.positionCollapser.element = this.contentPosition; 420 this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false);
426 this.positionCollapser.contentHeight = 40; 421 this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false);
427 // this.positionCollapser.isCollapsedAtStart = true; 422
428 this.positionCollapser.isCollapsed = this.isPositionCollapsed;
429 this.positionCollapser.isAnimated = true;
430 this.positionCollapser.labelClickEvent = function(boolBypass) {
431 var newEvent = document.createEvent("CustomEvent");
432 newEvent.initCustomEvent("layerEvent", false, true);
433 newEvent.layerEventLocale = "content-position";
434 newEvent.layerEventType = "labelClick";
435 newEvent.layerID = that.layerID;
436 newEvent.bypassAnimation = boolBypass;
437 defaultEventManager.dispatchEvent(newEvent);
438 that.isPositionCollapsed = that.positionCollapser.isCollapsed;
439 }
440 //this.positionCollapser.needsDraw = true;
441
442 this.transformCollapser.clicker = this.clickerTransform;
443 this.transformCollapser.myContent = this.contentTransform;
444 this.transformCollapser.element = this.contentTransform;
445 this.transformCollapser.contentHeight = 100;
446 // this.transformCollapser.isCollapsedAtStart = true;
447 this.transformCollapser.isCollapsed = this.isTransformCollapsed;
448 this.transformCollapser.isAnimated = true;
449 this.transformCollapser.labelClickEvent = function(boolBypass) {
450 var newEvent = document.createEvent("CustomEvent");
451 newEvent.initCustomEvent("layerEvent", false, true);
452 newEvent.layerEventLocale = "content-transform";
453 newEvent.layerEventType = "labelClick";
454 newEvent.layerID = that.layerID;
455 newEvent.bypassAnimation = boolBypass;
456 defaultEventManager.dispatchEvent(newEvent);
457 that.isTransformCollapsed = that.transformCollapser.isCollapsed;
458 }
459 //this.transformCollapser.needsDraw = true;
460
461 this.styleCollapser.clicker = this.clickerStyle;
462 this.styleCollapser.myContent = this.contentStyle;
463 this.styleCollapser.element = this.contentStyle;
464 this.styleCollapser.isCollapsed = this.isStyleCollapsed;
465 this.styleCollapser.contentHeight = 0;
466 this.styleCollapser.isAnimated = true;
467 this.styleCollapser.labelClickEvent = function(boolBypass) {
468 var newEvent = document.createEvent("CustomEvent");
469 newEvent.initCustomEvent("layerEvent", false, true);
470 newEvent.layerEventLocale = "content-style";
471 newEvent.layerEventType = "labelClick";
472 newEvent.layerID = that.layerID;
473 newEvent.bypassAnimation = boolBypass;
474 defaultEventManager.dispatchEvent(newEvent);
475 that.isStyleCollapsed = that.styleCollapser.isCollapsed;
476 }
477 //this.styleCollapser.needsDraw = true;
478 423
479 // Add event listeners to add and delete style buttons 424 // Add event listeners to add and delete style buttons
480 this.buttonAddStyle.identifier = "addStyle"; 425 this.buttonAddStyle.identifier = "addStyle";
@@ -491,24 +436,6 @@ var Layer = exports.Layer = Montage.create(Component, {
491 }, 436 },
492 draw: { 437 draw: {
493 value: function() { 438 value: function() {
494
495 // Coordinate the collapsers
496 if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) {
497 this.mainCollapser.bypassAnimation = true;
498 this.mainCollapser.toggle();
499 }
500 if (this.positionCollapser.isCollapsed !== this.isPositionCollapsed) {
501 this.positionCollapser.bypassAnimation = true;
502 this.positionCollapser.toggle();
503 }
504 if (this.transformCollapser.isCollapsed !== this.isTransformCollapsed) {