aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/PropertyTrack.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/PropertyTrack.reel')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js51
1 files changed, 44 insertions, 7 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 690c912b..f44afcec 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -18,7 +18,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
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.trackID;
20 this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; 20 this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement;
21 21 this.ninjaStylesContoller = this.application.ninja.stylesController;
22 } 22 }
23 }, 23 },
24 24
@@ -89,6 +89,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
89 value:1 89 value:1
90 }, 90 },
91 91
92 ninjaStylesContoller:{
93 value:null
94 },
95
96 animationName:{
97 value:null
98 },
99
100 currentKeyframeRule:{
101 value:null
102 },
103
92 _trackID:{ 104 _trackID:{
93 value:null 105 value:null
94 }, 106 },
@@ -167,11 +179,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
167 return; 179 return;
168 } else { 180 } else {
169 this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; 181 this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty;
170 console.log("Property track editorProperty set to: " + this.trackEditorProperty); 182 //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
171 } 183 }
172 } else if (this.trackType === "position") { 184 } else if (this.trackType === "position") {
173 //console.log("clicking on position track"); 185 console.log("Property track editorProperty set to: " + this.trackEditorProperty);
174 //console.log(this.trackEditorProperty);
175 } 186 }
176 187
177 this.insertPropTween(0); 188 this.insertPropTween(0);
@@ -219,7 +230,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
219 newTween.tweenData.tweenID = this.nextKeyframe; 230 newTween.tweenData.tweenID = this.nextKeyframe;
220 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; 231 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
221 newTween.tweenData.tweenedProperties = []; 232 newTween.tweenData.tweenedProperties = [];
222 233 newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
223 this.propTweens.push(newTween); 234 this.propTweens.push(newTween);
224 235
225 this.nextKeyframe += 1; 236 this.nextKeyframe += 1;
@@ -237,9 +248,35 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
237 248
238 addPropAnimationRuleToElement:{ 249 addPropAnimationRuleToElement:{
239 value:function(tweenEvent){ 250 value:function(tweenEvent){
251 var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
252 this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue;
253
254
255 this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty;
256 var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString;
257 var newAnimationNames = currentAnimationNameString + "," + this.animationName;
258 var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration");
259 var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration;
260 var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count");
261 var newIterationCount = currentIterationCount + ",1";
262
263 this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames;
264
265 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames);
266
267 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration);
268 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
269 //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both");
270 //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear");
271
272
273 console.log(currentStyleValue);
274
275 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
276 console.log(initRule);
277 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
278
240 this.insertPropTween(tweenEvent.offsetX); 279 this.insertPropTween(tweenEvent.offsetX);
241 this.animationName = this.parentComponent.parentComponent.parentComponent.animationName;
242 //console.log(this.animationName);
243 } 280 }
244 } 281 }
245}); 282});