aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js4
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css9
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js37
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js4
4 files changed, 36 insertions, 18 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 41eb6ef1..b91027b6 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -42,19 +42,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
42 42
43 draw:{ 43 draw:{
44 value:function(){ 44 value:function(){
45 this.element.style.left = (this.position - 6) + "px"; 45 this.element.style.left = (this.position - 5) + "px";
46 } 46 }
47 }, 47 },
48 48
49 deselectKeyframe:{ 49 deselectKeyframe:{
50 value:function(){ 50 value:function(){
51 this.element.classList.remove("keyframeSelected"); 51 this.element.classList.remove("keyframeSelected");
52 this.element.style.left = (this.position - 5) + "px";
52 } 53 }
53 }, 54 },
54 55
55 selectKeyframe:{ 56 selectKeyframe:{
56 value:function(){ 57 value:function(){
57 this.element.classList.add("keyframeSelected"); 58 this.element.classList.add("keyframeSelected");
59 this.element.style.left = (this.position - 6) + "px";
58 this.parentComponent.selectTween(); 60 this.parentComponent.selectTween();
59 } 61 }
60 }, 62 },
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index 36166c1c..5ea236e9 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -6,9 +6,9 @@
6 6
7.tween_keyframe{ 7.tween_keyframe{
8 position: absolute; 8 position: absolute;
9 height: 10px; 9 height: 8px;
10 width: 10px; 10 width: 8px;
11 top: 3px; 11 top: 4px;
12 background-color: white; 12 background-color: white;
13 z-index: 23; 13 z-index: 23;
14 border-radius: 2px; 14 border-radius: 2px;
@@ -16,6 +16,9 @@
16} 16}
17 17
18.tween_keyframe.keyframeSelected{ 18.tween_keyframe.keyframeSelected{
19 height: 10px;
20 width: 10px;
21 top: 3px;
19 background-color: #570e19; 22 background-color: #570e19;
20 border-style: solid; 23 border-style: solid;
21 border-width: thin; 24 border-width: thin;
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index fbc3edd0..d785ea3e 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -35,7 +35,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
35 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 35 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
36 if (selectedIndex !== false) { 36 if (selectedIndex !== false) {
37 if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { 37 if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) {
38 //this.retrieveStoredStyleTweens(); 38 this.retrieveStoredStyleTweens();
39 } 39 }
40 } 40 }
41 } 41 }
@@ -240,6 +240,14 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
240 240
241 var newTween = {}; 241 var newTween = {};
242 newTween.tweenData = {}; 242 newTween.tweenData = {};
243 newTween.tweenData.tweenedProperties = [];
244
245 // TODO - check for color values vs px values and set the correct default
246 var propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
247 if(propVal == null){
248 propVal = "1px";
249 }
250 newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal;
243 251
244 if (clickPos == 0) { 252 if (clickPos == 0) {
245 newTween.tweenData.spanWidth = 0; 253 newTween.tweenData.spanWidth = 0;
@@ -247,8 +255,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
247 newTween.tweenData.keyFrameMillisec = 0; 255 newTween.tweenData.keyFrameMillisec = 0;
248 newTween.tweenData.tweenID = 0; 256 newTween.tweenData.tweenID = 0;
249 newTween.tweenData.spanPosition = 0; 257 newTween.tweenData.spanPosition = 0;
250 newTween.tweenData.tweenedProperties = [];
251 newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
252 258
253 this.propTweens.push(newTween); 259 this.propTweens.push(newTween);
254 260
@@ -258,8 +264,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
258 newTween.tweenData.keyFrameMillisec = currentMillisec; 264 newTween.tweenData.keyFrameMillisec = currentMillisec;
259 newTween.tweenData.tweenID = this.nextKeyframe; 265 newTween.tweenData.tweenID = this.nextKeyframe;
260 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; 266 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
261 newTween.tweenData.tweenedProperties = []; 267
262 newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
263 this.propTweens.push(newTween); 268 this.propTweens.push(newTween);
264 269
265 this.nextKeyframe += 1; 270 this.nextKeyframe += 1;
@@ -344,27 +349,31 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
344 addPropAnimationRuleToElement:{ 349 addPropAnimationRuleToElement:{
345 value:function(tweenEvent){ 350 value:function(tweenEvent){
346 var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); 351 var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
352 if (currentStyleValue == null) {
353 currentStyleValue = "1px";
354 }
355 console.log(currentStyleValue);
356
347 this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; 357 this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue;
348 358
359
349 this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; 360 this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty;
350 var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; 361 var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString;
351 var newAnimationNames = currentAnimationNameString + "," + this.animationName; 362 var newAnimationNames = currentAnimationNameString + "," + this.animationName;
352 //var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); 363 var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration");
353 //var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; 364 var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration;
354 //var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); 365 var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count");
355 //var newIterationCount = currentIterationCount + ",1"; 366 var newIterationCount = currentIterationCount + ",1";
356 367
357 this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; 368 this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames;
358 369
359 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); 370 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames);
360 371
361 //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); 372 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration);
362 //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); 373 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
363 //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both");
364 //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear");
365 374
366 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; 375 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
367 //console.log(initRule); 376 console.log(initRule);
368 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 377 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
369 378
370 this.insertPropTween(tweenEvent.offsetX); 379 this.insertPropTween(tweenEvent.offsetX);
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 835fc785..075290c7 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -820,12 +820,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
820 820
821 getAllAnimationRules:{ 821 getAllAnimationRules:{
822 value:function(ruleNames){ 822 value:function(ruleNames){
823 ruleNames.splice(0,1); // temp remove first animation already retrieved for main track
823 824
824 for(var i in ruleNames){ 825 for(var i in ruleNames){
825 var currentName = ruleNames[i].replace(/^\s+|\s+$/g,""); // trim whitespace 826 var currentName = ruleNames[i].replace(/^\s+|\s+$/g,""); // trim whitespace
826 var currentRule = this.application.ninja.stylesController.getAnimationRuleWithName(currentName, this.application.ninja.currentDocument._document); 827 var currentRule = this.application.ninja.stylesController.getAnimationRuleWithName(currentName, this.application.ninja.currentDocument._document);
827 this.ruleList[currentName] = currentRule; 828 this.ruleList[currentName] = currentRule;
828 } 829 }
830
829 this.recreatePropertyTracks(this.ruleList); 831 this.recreatePropertyTracks(this.ruleList);
830 } 832 }
831 }, 833 },
@@ -833,8 +835,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
833 recreatePropertyTracks:{ 835 recreatePropertyTracks:{
834 value:function(ruleSet){ 836 value:function(ruleSet){
835 837
838
836 for(var i in ruleSet){ 839 for(var i in ruleSet){
837 var styleProp = ruleSet[i][0].style[0]; 840 var styleProp = ruleSet[i][0].style[0];
841 console.log(styleProp);
838 this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp);