diff options
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 192 |
1 files changed, 78 insertions, 114 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index d50360e6..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.element; | ||
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.element; | 420 | this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); |
426 | this.positionCollapser.contentHeight = 60; | 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.element; | ||
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.element; | ||
464 | this.styleCollapser.isCollapsed = this.isStyleCollapsed; | ||
465 | this.styleCollapser.contentHeight = 20; | ||
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"; |
@@ -485,30 +430,12 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
485 | 430 | ||
486 | // Add mousedown listener to set isActive | 431 | // Add mousedown listener to set isActive |
487 | this.element.addEventListener("mousedown", this, false); | 432 | this.element.addEventListener("mousedown", this, false); |
488 | //this.element.addEventListener("click", this, false); | 433 | this.element.addEventListener("click", this, false); |
489 | 434 | ||
490 | } | 435 | } |
491 | }, | 436 | }, |
492 | draw: { | 437 | draw: { |
493 | value: function() { | 438 | value: function() { |