diff options
author | Eric Guzman | 2012-06-27 15:29:41 -0700 |
---|---|---|
committer | Eric Guzman | 2012-06-27 15:29:41 -0700 |
commit | 61a41e74154715b0b42a429158fa1f2a44d2eb9a (patch) | |
tree | 2084e8df8c40708c9cc15d53d921a20718c8f006 /js/panels/Timeline | |
parent | 230a1a2f2848c27edf7d01f8d3a5585c8d0d4ac9 (diff) | |
parent | 07e7e2f28b863b0a4d139cc7e649a630b162e0da (diff) | |
download | ninja-61a41e74154715b0b42a429158fa1f2a44d2eb9a.tar.gz |
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into Bindables_GIO
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 13 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 20 | ||||
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 25 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 6 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.html | 4 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 6 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/css/Style.css | 52 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/scss/Style.scss | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 6 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 218 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 36 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | 3 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 21 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 88 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 12 |
15 files changed, 367 insertions, 148 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index ba6952aa..f7c936f7 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js | |||
@@ -76,9 +76,20 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
76 | 76 | ||
77 | selectKeyframe:{ | 77 | selectKeyframe:{ |
78 | value:function(){ | 78 | value:function(){ |
79 | if(this.isSelected){ | ||
80 | return; | ||
81 | } | ||
82 | |||
83 | if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){ | ||
84 | var tweenID = this.parentComponent.tweenID; | ||
85 | var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent; | ||
86 | mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe(); | ||
87 | return; | ||
88 | } | ||
89 | |||
79 | this.isSelected=true; | 90 | this.isSelected=true; |
80 | this.element.style.left = (this.position - 6) + "px"; | 91 | this.element.style.left = (this.position - 6) + "px"; |
81 | this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty | 92 | this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty; |
82 | this.parentComponent.selectTween(); | 93 | this.parentComponent.selectTween(); |
83 | } | 94 | } |
84 | }, | 95 | }, |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 776d5ec8..b4833fa2 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -325,6 +325,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
325 | value: false | 325 | value: false |
326 | }, | 326 | }, |
327 | isActive: { | 327 | isActive: { |
328 | serializable:true, | ||
328 | get: function() { | 329 | get: function() { |
329 | return this._isActive; | 330 | return this._isActive; |
330 | }, | 331 | }, |
@@ -752,12 +753,20 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
752 | //defaultEventManager.dispatchEvent(newEvent); | 753 | //defaultEventManager.dispatchEvent(newEvent); |
753 | 754 | ||
754 | // Dispatch the event to the TimelineTrack component associated with this Layer. | 755 | // Dispatch the event to the TimelineTrack component associated with this Layer. |
755 | var myIndex = this.application.ninja.timeline.getActiveLayerIndex(), | 756 | var myIndex = false, |
757 | i = 0, | ||
758 | arrLayersLength = this.parentComponent.parentComponent.arrLayers.length, | ||
756 | arrTracks = document.querySelectorAll('[data-montage-id="track"]'); | 759 | arrTracks = document.querySelectorAll('[data-montage-id="track"]'); |
757 | 760 | ||
761 | for (i = 0; i < arrLayersLength; i++) { | ||
762 | if (this.stageElement == this.parentComponent.parentComponent.arrLayers[i].layerData.stageElement) { | ||
763 | myIndex = i; | ||
764 | } | ||
765 | } | ||
766 | |||
758 | if (myIndex !== false) { | 767 | if (myIndex !== false) { |
759 | arrTracks[myIndex].dispatchEvent(newEvent); | 768 | arrTracks[myIndex].dispatchEvent(newEvent); |
760 | } | 769 | } |
761 | } | 770 | } |
762 | }, | 771 | }, |
763 | 772 | ||
@@ -945,12 +954,14 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
945 | this.isMainCollapsed = false; | 954 | this.isMainCollapsed = false; |
946 | } else { | 955 | } else { |
947 | this.isMainCollapsed = true; | 956 | this.isMainCollapsed = true; |
957 | this.application.ninja.timeline.synchScrollbars(43); | ||
948 | } | 958 | } |
949 | this.triggerOutgoingBinding(); | 959 | this.triggerOutgoingBinding(); |
950 | } | 960 | } |
951 | }, | 961 | }, |
952 | handlePositionCollapserClick : { | 962 | handlePositionCollapserClick : { |
953 | value: function(event) { | 963 | value: function(event) { |
964 | var myHeight = this.positionCollapser.element.offsetHeight; | ||
954 | this.positionCollapser.bypassAnimation = false; | 965 | this.positionCollapser.bypassAnimation = false; |
955 | this.bypassAnimation = false; | 966 | this.bypassAnimation = false; |
956 | this.layerData.bypassAnimation = false; | 967 | this.layerData.bypassAnimation = false; |
@@ -958,12 +969,14 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
958 | this.isPositionCollapsed = false; | 969 | this.isPositionCollapsed = false; |
959 | } else { | 970 | } else { |
960 | this.isPositionCollapsed = true; | 971 | this.isPositionCollapsed = true; |
972 | this.application.ninja.timeline.synchScrollbars(myHeight); | ||
961 | } | 973 | } |
962 | this.triggerOutgoingBinding(); | 974 | this.triggerOutgoingBinding(); |
963 | } | 975 | } |
964 | }, | 976 | }, |
965 | handleStyleCollapserClick : { | 977 | handleStyleCollapserClick : { |
966 | value: function(event) { | 978 | value: function(event) { |
979 | var myHeight = this.styleCollapser.element.offsetHeight; | ||
967 | this.styleCollapser.bypassAnimation = false; | 980 | this.styleCollapser.bypassAnimation = false; |
968 | this.bypassAnimation = false; | 981 | this.bypassAnimation = false; |
969 | this.layerData.bypassAnimation = false; | 982 | this.layerData.bypassAnimation = false; |
@@ -971,6 +984,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
971 | this.isStyleCollapsed = false; | 984 | this.isStyleCollapsed = false; |
972 | } else { | 985 | } else { |
973 | this.isStyleCollapsed = true; | 986 | this.isStyleCollapsed = true; |
987 | this.application.ninja.timeline.synchScrollbars(myHeight); | ||
974 | } | 988 | } |
975 | this.triggerOutgoingBinding(); | 989 | this.triggerOutgoingBinding(); |
976 | } | 990 | } |
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 66f39b5a..72d26e78 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -16,8 +16,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
16 | prepareForDraw:{ | 16 | prepareForDraw:{ |
17 | value:function(){ | 17 | value:function(){ |
18 | this.element.addEventListener("click", this, false); | 18 | this.element.addEventListener("click", this, false); |
19 | this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; | 19 | this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; |
20 | this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; | 20 | this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; |
21 | this.ninjaStylesContoller = this.application.ninja.stylesController; | 21 | this.ninjaStylesContoller = this.application.ninja.stylesController; |
22 | } | 22 | } |
23 | }, | 23 | }, |
@@ -442,12 +442,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
442 | 442 | ||
443 | for (var i = 0; i < this.propTweens.length; i++) { | 443 | for (var i = 0; i < this.propTweens.length; i++) { |
444 | var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); | 444 | var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); |
445 | // TODO - trackDur should be parseFloat rounded to significant digits | 445 | // trackDur should be parseFloat rounded to significant digits |
446 | var trackDur = parseInt(this.trackDuration); | 446 | var trackDur = parseInt(this.trackDuration); |
447 | var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; | 447 | var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; |
448 | var keyframePropertyString = " " + keyframePercent + " {"; | 448 | var keyframePropertyString = " " + keyframePercent + " {"; |
449 | for(var prop in this.propTweens[i].tweenData.tweenedProperties){ | 449 | for(var prop in this.propTweens[i].tweenData.tweenedProperties){ |
450 | keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop]; | 450 | keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop] + ";"; |
451 | } | 451 | } |
452 | keyframePropertyString += "}"; | 452 | keyframePropertyString += "}"; |
453 | keyframeString += keyframePropertyString; | 453 | keyframeString += keyframePropertyString; |
@@ -465,30 +465,31 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
465 | if (currentStyleValue == null) { | 465 | if (currentStyleValue == null) { |
466 | currentStyleValue = "1px"; | 466 | currentStyleValue = "1px"; |
467 | } | 467 | } |
468 | console.log(currentStyleValue); | ||
469 | 468 | ||
470 | this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; | 469 | this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; |
471 | 470 | ||
472 | |||
473 | this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; | 471 | this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; |
474 | var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; | 472 | var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString; |
475 | var newAnimationNames = currentAnimationNameString + "," + this.animationName; | 473 | var newAnimationNames = ""; |
474 | if(currentAnimationNameString.length == 0){ | ||
475 | newAnimationNames = this.animationName; | ||
476 | } else { | ||
477 | newAnimationNames = currentAnimationNameString + "," + this.animationName; | ||
478 | } | ||
476 | var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | 479 | var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); |
477 | var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; | 480 | var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; |
478 | var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit- |