aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Tween.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.html16
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js114
2 files changed, 105 insertions, 25 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html
index 307dcd02..b5353b1b 100644
--- a/js/panels/Timeline/Tween.reel/Tween.html
+++ b/js/panels/Timeline/Tween.reel/Tween.html
@@ -11,8 +11,7 @@
11 "properties": { 11 "properties": {
12 "element": {"#": "tweenspace"}, 12 "element": {"#": "tweenspace"},
13 "keyframe": {"@": "keyframe"}, 13 "keyframe": {"@": "keyframe"},
14 "span": {"@": "span"}, 14 "tweenspan": {"@": "span"}
15 "tweencontainer": {"#": "tweencontainer"}
16 } 15 }
17 }, 16 },
18 17
@@ -28,8 +27,7 @@
28 "module": "js/panels/Timeline/Keyframe.reel", 27 "module": "js/panels/Timeline/Keyframe.reel",
29 "name": "Keyframe", 28 "name": "Keyframe",
30 "properties": { 29 "properties": {
31 "element": {"#": "keyframe_container"}, 30 "element": {"#": "keyframe_container"}
32 "containingSpan": {"@": "span"}
33 } 31 }
34 } 32 }
35 } 33 }
@@ -37,12 +35,10 @@
37 </head> 35 </head>
38 <body> 36 <body>
39 37
40 <div id="tweenspace"> 38 <div id="tweenspace" class="tween_container">
41 <div id="tweencontainer" class="tween_container"> 39 <div id="span_container"></div>
42 <div id="span_container"></div> 40 <div id="keyframe_container"></div>
43 <div id="keyframe_container"></div> 41 </div>
44 </div>
45 </div>
46 42
47 </body> 43 </body>
48</html> \ No newline at end of file 44</html> \ No newline at end of file
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index eddf1b17..af01deb2 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -1,5 +1,6 @@
1var Montage = require("montage/core/core").Montage; 1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component; 2var Component = require("montage/ui/component").Component;
3var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
3 4
4var Tween = exports.Tween = Montage.create(Component, { 5var Tween = exports.Tween = Montage.create(Component, {
5 6
@@ -8,6 +9,7 @@ var Tween = exports.Tween = Montage.create(Component, {
8 }, 9 },
9 10
10 _spanWidth: { 11 _spanWidth: {
12 serializable: true,
11 value: 0 13 value: 0
12 }, 14 },
13 15
@@ -18,6 +20,7 @@ var Tween = exports.Tween = Montage.create(Component, {
18 }, 20 },
19 set: function(value){ 21 set: function(value){
20 this._spanWidth = value; 22 this._spanWidth = value;
23 this.needsDraw = true;
21 } 24 }
22 }, 25 },
23 26
@@ -32,6 +35,7 @@ var Tween = exports.Tween = Montage.create(Component, {
32 }, 35 },
33 set:function (value) { 36 set:function (value) {
34 this._spanPosition = value; 37 this._spanPosition = value;
38 this.needsDraw = true;
35 } 39 }
36 }, 40 },
37 41
@@ -46,6 +50,7 @@ var Tween = exports.Tween = Montage.create(Component, {
46 }, 50 },
47 set:function (value) { 51 set:function (value) {
48 this._keyFramePosition = value; 52 this._keyFramePosition = value;
53 this.needsDraw = true;
49 } 54 }
50 }, 55 },
51 56
@@ -63,47 +68,126 @@ var Tween = exports.Tween = Montage.create(Component, {
63 } 68 }
64 }, 69 },
65 70
66 _keyframeID:{ 71 _tweenID:{
67 value:0 72 value:0
68 }, 73 },
69 74
70 keyframeID:{ 75 tweenID:{
71 serializable:true, 76 serializable:true,
72 get:function () { 77 get:function () {
73 return this._keyframeID; 78 return this._tweenID;
74 }, 79 },
75 set:function (value) { 80 set:function (value) {
76 this._keyframeID = value; 81 this._tweenID = value;
77 } 82 }
78 }, 83 },
79 84
80 _timelineTrack:{ 85 _tweenedProperties:{
81 value:0 86 serializable: true,
87 value:[]
88 },
89
90 tweenedProperties:{
91 serializable:true,
92 get:function(){
93 return this._tweenedProperties;
94 },
95 set:function(val){
96 this._tweenedProperties = val;
97 }
98 },
99
100 _isTweenAnimated:{
101 serializable:true,
102 value:false
82 }, 103 },
83 104
84 timelineTrack:{ 105 isTweenAnimated:{
85 serializable:true, 106 serializable:true,
86 get:function () { 107 get:function () {
87 return this._timelineTrack; 108 return this._isTweenAnimated;
88 }, 109 },
89 set:function (value) { 110 set:function (value) {
90 this._timelineTrack = value; 111 this._isTweenAnimated = value;
112 this.needsDraw = true;
91 } 113 }
92 }, 114 },
93 115
94 prepareForDraw:{ 116 prepareForDraw:{
95 value:function () { 117 value:function () {
96 this.keyframe.containingTrack = this.timelineTrack; 118
97 this.keyframe.position = this.spanWidth;
98 this.keyframe.timelinePosition = this.keyFramePosition;
99 this.keyframe.id = this.keyframeID;
100 } 119 }
101 }, 120 },
102 121
103 draw:{ 122 draw:{
104 value:function () { 123 value:function () {
105 this.span.spanWidth = this.spanWidth; 124 this.element.style.left = this.spanPosition + "px";
106 this.tweencontainer.style.left = this.spanPosition + "px"; 125 this.keyframe.position = this.spanWidth;
126 this.tweenspan.spanWidth = this.spanWidth;
127 if(this.isTweenAnimated){
128 this.tweenspan.highlightSpan();
129 }
130 }
131 },
132
133 handleElementChange:{
134 value:function (event) {
135 if (event.detail.source && event.detail.source !== "tween") {
136 // check for correct element selection
137 if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) {
138 alert("Wrong element selected for this keyframe track");
139 } else {
140 // update tweenedProperties and tell containing track to update CSS rule
141 // temp read only top and left. need to change to loop over event details for prop changes generically
142 if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) {
143 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
144 this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
145 this.parentComponent.parentComponent.updateKeyframeRule();
146 }
147 // highlight the tween's span
148 this.tweenspan.highlightSpan();
149 this.isTweenAnimated = true;
150 }
151 }
152 }
153 },
154
155 selectTween:{
156 value: function(){
157 // turn on event listener for element change
158 this.eventManager.addEventListener("elementChange", this, false);
159
160 // select the containing layer
161 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
162 this.application.ninja.timeline.selectLayer(selectIndex);
163
164 // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline
165 this.application.ninja.timeline.deselectTweens();
166 this.application.ninja.timeline.selectedTweens.push(this);
167
168 // update playhead position and time text
169 this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px";
170 this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px";