diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 51 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 25 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 50 |
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); | 794 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); |
@@ -900,8 +897,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
900 | newStyleTrack.propTrackData.trackEditorProperty = ""; | 897 | newStyleTrack.propTrackData.trackEditorProperty = ""; |
901 | newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; | 898 | newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; |
902 | 899 | ||