aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js116
1 files changed, 100 insertions, 16 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 9894e6f9..7120298c 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -33,16 +33,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
33 33
34 // Are the various collapsers collapsed or not 34 // Are the various collapsers collapsed or not
35 _isMainCollapsed:{ 35 _isMainCollapsed:{
36 value:"" 36 value: true
37 }, 37 },
38 isMainCollapsed:{ 38 isMainCollapsed:{
39 get:function () { 39 get:function () {
40 return this._isMainCollapsed; 40 return this._isMainCollapsed;
41 }, 41 },
42 set:function (newVal) { 42 set:function (newVal) {
43 this.log('TimelineTrack.js: isMainCollapsed: ', newVal);
43 if (newVal !== this._isMainCollapsed) { 44 if (newVal !== this._isMainCollapsed) {
44 this._isMainCollapsed = newVal; 45 this._isMainCollapsed = newVal;
45 this.needsDraw = true;
46 } 46 }
47 47
48 } 48 }
@@ -89,6 +89,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
89 } 89 }
90 } 90 }
91 }, 91 },
92 _animateCollapser : {
93 serializable: true,
94 value: false
95 },
96 animateCollapser : {
97 serializable: true,
98 get: function() {
99 return this._animateCollapser;
100 },
101 set: function(newVal) {
102 this._animateCollapser = newVal;
103 }
104 },
92 105
93 _arrStyleTracks : { 106 _arrStyleTracks : {
94 serializable:true, 107 serializable:true,
@@ -345,6 +358,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
345 draw:{ 358 draw:{
346 value:function () { 359 value:function () {
347 this.ninjaStylesContoller = this.application.ninja.stylesController; 360 this.ninjaStylesContoller = this.application.ninja.stylesController;
361 return;
348 if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { 362 if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) {
349 this._mainCollapser.toggle(false); 363 this._mainCollapser.toggle(false);
350 } 364 }
@@ -390,7 +404,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
390 this.handleNewTween(ev); 404 this.handleNewTween(ev);
391 } 405 }
392 } else { 406 } else {
393 alert("There must be exactly one element in an animated layer.") 407 console.log("There must be exactly one element in an animated layer.");
394 } 408 }
395 } 409 }
396 } 410 }
@@ -439,7 +453,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
439 this.tweens.push(newTween); 453 this.tweens.push(newTween);
440 454
441 // update the animation duration 455 // update the animation duration
442 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 456 var animationDuration = (this.trackDuration / 1000) + "s";
443 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 457 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
444 this.nextKeyframe += 1; 458 this.nextKeyframe += 1;
445 } 459 }
@@ -449,15 +463,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
449 463
450 splitTween:{ 464 splitTween:{
451 value:function (ev) { 465 value:function (ev) {
452 alert("Splitting an existing span with a new keyframe is not yet supported."); 466 console.log("Splitting an existing span with a new keyframe is not yet supported.");
453 //console.log("splitting tween at span offsetX: " + ev.offsetX);
454 } 467 }
455 }, 468 },
456 469
457 retrieveStoredTweens:{ 470 retrieveStoredTweens:{
458 value:function () { 471 value:function () {
459 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute 472 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute;
460 var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0; 473 var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0;
461 474
462 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 475 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
463 this.application.ninja.timeline.arrLayers[selectedIndex].created=true; 476 this.application.ninja.timeline.arrLayers[selectedIndex].created=true;
@@ -490,12 +503,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
490 newTween.tweenedProperties["top"] = tempTopOffset; 503 newTween.tweenedProperties["top"] = tempTopOffset;
491 newTween.tweenedProperties["left"] = tempLeftOffset; 504 newTween.tweenedProperties["left"] = tempLeftOffset;
492 this.tweens.push(newTween); 505 this.tweens.push(newTween);
493
494 } 506 }
495 else { 507 else {
496 tempTiming = trackTiming.split("s"); 508 tempTiming = trackTiming.split("s");
497 tempTimingInt = parseInt(tempTiming[0]); 509 tempTimingFloat = parseFloat(tempTiming[0]);
498 this.trackDuration = tempTimingInt *1000; 510 this.trackDuration = tempTimingFloat *1000;
499 percentValue = this.currentKeyframeRule[i].keyText; 511 percentValue = this.currentKeyframeRule[i].keyText;
500 splitValue = percentValue.split("%"); 512 splitValue = percentValue.split("%");
501 fraction = splitValue[0] / 100; 513 fraction = splitValue[0] / 100;
@@ -511,8 +523,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
511 newTween.tweenedProperties["top"] = tempTopOffset; 523 newTween.tweenedProperties["top"] = tempTopOffset;
512 newTween.tweenedProperties["left"] = tempLeftOffset; 524 newTween.tweenedProperties["left"] = tempLeftOffset;
513 this.tweens.push(newTween); 525 this.tweens.push(newTween);
514
515
516 } 526 }
517 this.nextKeyframe += 1; 527 this.nextKeyframe += 1;
518 } 528 }
@@ -554,8 +564,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
554 var trackDur = parseInt(this.trackDuration); 564 var trackDur = parseInt(this.trackDuration);
555 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; 565 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
556 var keyframePropertyString = " " + keyframePercent + " {"; 566 var keyframePropertyString = " " + keyframePercent + " {";
557 keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; 567 for(var prop in this.tweens[i].tweenedProperties){
558 keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; 568 keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;";
569 }
559 keyframePropertyString += "}"; 570 keyframePropertyString += "}";
560 keyframeString += keyframePropertyString; 571 keyframeString += keyframePropertyString;
561 } 572 }
@@ -591,9 +602,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
591 this._mainCollapser.element = this.myContent; 602 this._mainCollapser.element = this.myContent;
592 this._mainCollapser.isCollapsed = this.isMainCollapsed; 603 this._mainCollapser.isCollapsed = this.isMainCollapsed;
593 this._mainCollapser.isAnimated = true; 604 this._mainCollapser.isAnimated = true;
605 Object.defineBinding(this._mainCollapser, "isToggling", {
606 boundObject: this,
607 boundObjectPropertyPath: "isMainCollapsed",
608 oneway: false
609 });
610 Object.defineBinding(this._mainCollapser, "bypassAnimation", {
611 boundObject: this,
612 boundObjectPropertyPath: "animateCollapser",
613 oneway: false,
614 boundValueMutator: function(value) {
615 return !value;
616 }
617 });
618
619 /*
594 this._mainCollapser.labelClickEvent = function () { 620 this._mainCollapser.labelClickEvent = function () {
595 that.isMainCollapsed = that._mainCollapser.isCollapsed; 621 that.isMainCollapsed = that._mainCollapser.isCollapsed;
596 }; 622 };
623 */
597 //this._mainCollapser.needsDraw = true; 624 //this._mainCollapser.needsDraw = true;
598 625
599 this._positionCollapser = Collapser.create(); 626 this._positionCollapser = Collapser.create();
@@ -604,9 +631,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
604 this._positionCollapser.element = this.contentPosition; 631 this._positionCollapser.element = this.contentPosition;
605 this._positionCollapser.isCollapsed = this.isPositionCollapsed; 632 this._positionCollapser.isCollapsed = this.isPositionCollapsed;
606 this._positionCollapser.isAnimated = true; 633 this._positionCollapser.isAnimated = true;
634 Object.defineBinding(this._positionCollapser, "isToggling", {
635 boundObject: this,
636 boundObjectPropertyPath: "isPositionCollapsed",
637 oneway: false
638 });
639
640
641 /*
607 this._positionCollapser.labelClickEvent = function () { 642 this._positionCollapser.labelClickEvent = function () {
608 that.isPositionCollapsed = that._positionCollapser.isCollapsed; 643 that.isPositionCollapsed = that._positionCollapser.isCollapsed;
609 }; 644 };
645 */
610 //this._positionCollapser.needsDraw = true; 646 //this._positionCollapser.needsDraw = true;
611 647
612 this._transformCollapser = Collapser.create(); 648 this._transformCollapser = Collapser.create();
@@ -617,9 +653,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
617 this._transformCollapser.element = this.contentTransform;