aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorJonathan Duran2012-05-14 22:09:35 -0700
committerJonathan Duran2012-05-14 22:09:35 -0700
commiteb7c3c8db304bdfb01f747a50e932665d9ec03fa (patch)
tree7afd9d06716f15075fcd845acfe779de4daf39ab /js/panels
parent8c464561e0c55dc5bf67e1e815678e0d07dc4727 (diff)
downloadninja-eb7c3c8db304bdfb01f747a50e932665d9ec03fa.tar.gz
style keyframe rule addition
Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js51
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js25
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js50
3 files changed, 97 insertions, 29 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});
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 8b3938f4..0e40e222 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -321,6 +321,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
321 } 321 }
322 }, 322 },
323 323
324 animationNamesString:{
325 value:""
326 },
327
324 ninjaStylesContoller:{ 328 ninjaStylesContoller:{
325 value:null 329 value:null
326 }, 330 },
@@ -468,14 +472,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
468 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; 472 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
469 } 473 }
470 } 474 }
471 475
472
473
474
475
476
477
478
479 // Drag and Drop: 476 // Drag and Drop:
480 // Do we have a helper to append? 477 // Do we have a helper to append?
481 if (this._appendHelper === true) { 478 if (this._appendHelper === true) {
@@ -527,7 +524,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
527 } 524 }
528 } 525 }
529 526
530
531 if (this._isFirstDraw === true) { 527 if (this._isFirstDraw === true) {
532 528
533 if (this.isMainCollapsed === false) { 529 if (this.isMainCollapsed === false) {
@@ -591,11 +587,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
591 587
592 this.tweens[i].tweenData = myObj; 588 this.tweens[i].tweenData = myObj;
593 } 589 }
594
595
596 } 590 }
597 } 591 }
598 }, 592 },
593
599 handleClick:{ 594 handleClick:{
600 value:function (ev) { 595 value:function (ev) {
601 // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span 596 // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span
@@ -609,7 +604,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
609 this.updateKeyframeRule(); 604 this.updateKeyframeRule();
610 } else { 605 } else {
611 this.handleNewTween(ev); 606 this.handleNewTween(ev);
612 this.updateKeyframeRule(); 607 if (ev.target.className === "tracklane") {
608 this.updateKeyframeRule();
609 }
613 } 610 }
614 } else { 611 } else {
615 // TEMP error check 612 // TEMP error check
@@ -626,7 +623,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
626 this.application.ninja.timeline.selectLayer(selectedIndex, false); 623 this.application.ninja.timeline.selectLayer(selectedIndex, false);
627 this.insertTween(ev.offsetX); 624 this.insertTween(ev.offsetX);
628 } else { 625 } else {
629 console.log(ev.target);
630 this.splitTween(ev); 626 this.splitTween(ev);
631 } 627 }
632 } 628 }
@@ -792,6 +788,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
792 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; 788 this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
793 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 789 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
794 this.animationName = this.animatedElement.classList[0] + "_PositionSize"; 790 this.animationName = this.animatedElement.classList[0] + "_PositionSize";
791 this.animationNamesString = this.animationName;
795 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); 792 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
796 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 793 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
797 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1);