diff options
author | Pushkar Joshi | 2012-03-12 15:26:10 -0700 |
---|---|---|
committer | Pushkar Joshi | 2012-03-12 15:26:10 -0700 |
commit | 46b2e561fa6ca054cad58e4c372a598bbb7ee2c9 (patch) | |
tree | 38d1c8666098a10078834c1eaac3d455135bee12 /js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |
parent | 7b4b068cadc0af8ec7e930e1c2b429e945f96984 (diff) | |
parent | 69d90467865a1384725b2301901be2180c5a841f (diff) | |
download | ninja-46b2e561fa6ca054cad58e4c372a598bbb7ee2c9.tar.gz |
Merge branch 'master' into brushtool
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 138 |
1 files changed, 58 insertions, 80 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 9894e6f9..669dabef 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 | } |
@@ -57,7 +57,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
57 | set:function (newVal) { | 57 | set:function (newVal) { |
58 | if (newVal !== this._isTransformCollapsed) { | 58 | if (newVal !== this._isTransformCollapsed) { |
59 | this._isTransformCollapsed = newVal; | 59 | this._isTransformCollapsed = newVal; |
60 | this.needsDraw = true; | ||
61 | } | 60 | } |
62 | } | 61 | } |
63 | }, | 62 | }, |
@@ -71,7 +70,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
71 | set:function (newVal) { | 70 | set:function (newVal) { |
72 | if (newVal !== this._isPositionCollapsed) { | 71 | if (newVal !== this._isPositionCollapsed) { |
73 | this._isPositionCollapsed = newVal; | 72 | this._isPositionCollapsed = newVal; |
74 | this.needsDraw = true; | ||
75 | } | 73 | } |
76 | } | 74 | } |
77 | }, | 75 | }, |
@@ -85,10 +83,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
85 | set:function (newVal) { | 83 | set:function (newVal) { |
86 | if (newVal !== this._isStyleCollapsed) { | 84 | if (newVal !== this._isStyleCollapsed) { |
87 | this._isStyleCollapsed = newVal; | 85 | this._isStyleCollapsed = newVal; |
88 | this.needsDraw = true; | ||
89 | } | 86 | } |
90 | } | 87 | } |
91 | }, | 88 | }, |
89 | _bypassAnimation : { | ||
90 | serializable: true, | ||
91 | value: false | ||
92 | }, | ||
93 | bypassAnimation : { | ||
94 | serializable: true, | ||
95 | get: function() { | ||
96 | return this._bypassAnimation; | ||
97 | }, | ||
98 | set: function(newVal) { | ||
99 | //console.log("timelinetrack bypassAnimation setter " + newVal) | ||
100 | this._bypassAnimation = newVal; | ||
101 | } | ||
102 | }, | ||
92 | 103 | ||
93 | _arrStyleTracks : { | 104 | _arrStyleTracks : { |
94 | serializable:true, | 105 | serializable:true, |
@@ -345,6 +356,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
345 | draw:{ | 356 | draw:{ |
346 | value:function () { | 357 | value:function () { |
347 | this.ninjaStylesContoller = this.application.ninja.stylesController; | 358 | this.ninjaStylesContoller = this.application.ninja.stylesController; |
359 | return; | ||
348 | if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { | 360 | if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { |
349 | this._mainCollapser.toggle(false); | 361 | this._mainCollapser.toggle(false); |
350 | } | 362 | } |
@@ -390,7 +402,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
390 | this.handleNewTween(ev); | 402 | this.handleNewTween(ev); |
391 | } | 403 | } |
392 | } else { | 404 | } else { |
393 | alert("There must be exactly one element in an animated layer.") | 405 | console.log("There must be exactly one element in an animated layer."); |
394 | } | 406 | } |
395 | } | 407 | } |
396 | } | 408 | } |
@@ -439,7 +451,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
439 | this.tweens.push(newTween); | 451 | this.tweens.push(newTween); |
440 | 452 | ||
441 | // update the animation duration | 453 | // update the animation duration |
442 | var animationDuration = Math.round(this.trackDuration / 1000) + "s"; | 454 | var animationDuration = (this.trackDuration / 1000) + "s"; |
443 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); | 455 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); |
444 | this.nextKeyframe += 1; | 456 | this.nextKeyframe += 1; |
445 | } | 457 | } |
@@ -449,15 +461,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
449 | 461 | ||
450 | splitTween:{ | 462 | splitTween:{ |
451 | value:function (ev) { | 463 | value:function (ev) { |
452 | alert("Splitting an existing span with a new keyframe is not yet supported."); | 464 | 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 | } | 465 | } |
455 | }, | 466 | }, |
456 | 467 | ||
457 | retrieveStoredTweens:{ | 468 | retrieveStoredTweens:{ |
458 | value:function () { | 469 | value:function () { |
459 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute | 470 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute; |
460 | var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0; | 471 | var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0; |
461 | 472 | ||
462 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 473 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
463 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; | 474 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; |
@@ -490,12 +501,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
490 | newTween.tweenedProperties["top"] = tempTopOffset; | 501 | newTween.tweenedProperties["top"] = tempTopOffset; |
491 | newTween.tweenedProperties["left"] = tempLeftOffset; | 502 | newTween.tweenedProperties["left"] = tempLeftOffset; |
492 | this.tweens.push(newTween); | 503 | this.tweens.push(newTween); |
493 | |||
494 | } | 504 | } |
495 | else { | 505 | else { |
496 | tempTiming = trackTiming.split("s"); | 506 | tempTiming = trackTiming.split("s"); |
497 | tempTimingInt = parseInt(tempTiming[0]); | 507 | tempTimingFloat = parseFloat(tempTiming[0]); |
498 | this.trackDuration = tempTimingInt *1000; | 508 | this.trackDuration = tempTimingFloat *1000; |
499 | percentValue = this.currentKeyframeRule[i].keyText; | 509 | percentValue = this.currentKeyframeRule[i].keyText; |
500 | splitValue = percentValue.split("%"); | 510 | splitValue = percentValue.split("%"); |
501 | fraction = splitValue[0] / 100; | 511 | fraction = splitValue[0] / 100; |
@@ -511,8 +521,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
511 | newTween.tweenedProperties["top"] = tempTopOffset; | 521 | newTween.tweenedProperties["top"] = tempTopOffset; |
512 | newTween.tweenedProperties["left"] = tempLeftOffset; | 522 | newTween.tweenedProperties["left"] = tempLeftOffset; |
513 | this.tweens.push(newTween); | 523 | this.tweens.push(newTween); |
514 | |||
515 | |||
516 | } | 524 | } |
517 | this.nextKeyframe += 1; | 525 | this.nextKeyframe += 1; |
518 | } | 526 | } |
@@ -554,8 +562,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
554 | var trackDur = parseInt(this.trackDuration); | 562 | var trackDur = parseInt(this.trackDuration); |
555 | var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; | 563 | var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; |
556 | var keyframePropertyString = " " + keyframePercent + " {"; | 564 | var keyframePropertyString = " " + keyframePercent + " {"; |
557 | keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; | 565 | for(var prop in this.tweens[i].tweenedProperties){ |
558 | keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; | 566 | keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;"; |
567 | } | ||
559 | keyframePropertyString += "}"; | 568 | keyframePropertyString += "}"; |
560 | keyframeString += keyframePropertyString; | 569 | keyframeString += keyframePropertyString; |
561 | } | 570 | } |
@@ -573,70 +582,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
573 | 582 | ||
574 | this.arrPositionTracks = [0, 1]; | 583 | this.arrPositionTracks = [0, 1]; |
575 | this.arrTransformTracks = [0, 1, 2, 3, 4]; | 584 | this.arrTransformTracks = [0, 1, 2, 3, 4]; |
576 | |||
577 | this.label = this.element.querySelector(".label-main"); | ||
578 | this.myContent = this.element.querySelector(".content-main"); | ||
579 | this.labelPosition = this.element.querySelector(".label-position"); | ||
580 | this.contentPosition = this.element.querySelector(".content-position"); | ||
581 | this.labelTransform = this.element.querySelector(".label-transform"); | ||
582 | this.contentTransform = this.element.querySelector(".content-transform"); | ||
583 | this.labelStyles = this.element.querySelector(".label-styles"); | ||
584 | this.contentStyles = this.element.querySelector(".content-styles"); | ||
585 | |||
586 | this._mainCollapser = Collapser.create(); | ||
587 | this._mainCollapser.clicker = this.label; | ||
588 | this._mainCollapser.myContent = this.myContent; | ||
589 | this._mainCollapser.contentHeight = 60; | ||
590 | this._mainCollapser.isLabelClickable = false; | ||
591 | this._mainCollapser.element = this.myContent; | ||