aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js10
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js16
-rw-r--r--js/panels/Timeline/Span.reel/Span.js6
-rw-r--r--js/panels/Timeline/Style.reel/Style.html2
-rw-r--r--js/panels/Timeline/Style.reel/Style.js6
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css52
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss5
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js122
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css36
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss3
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html21
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js50
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js5
13 files changed, 208 insertions, 126 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index ba6952aa..95a94b36 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -76,9 +76,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
76 76
77 selectKeyframe:{ 77 selectKeyframe:{
78 value:function(){ 78 value:function(){
79
80 if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
81 var tweenID = this.parentComponent.tweenID;
82 var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
83 mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
84 return;
85 }
86
79 this.isSelected=true; 87 this.isSelected=true;
80 this.element.style.left = (this.position - 6) + "px"; 88 this.element.style.left = (this.position - 6) + "px";
81 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty 89 this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
82 this.parentComponent.selectTween(); 90 this.parentComponent.selectTween();
83 } 91 }
84 }, 92 },
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 66f39b5a..31ba8253 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -16,8 +16,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
16 prepareForDraw:{ 16 prepareForDraw:{
17 value:function(){ 17 value:function(){
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.parentComponent.trackID;
20 this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; 20 this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
21 this.ninjaStylesContoller = this.application.ninja.stylesController; 21 this.ninjaStylesContoller = this.application.ninja.stylesController;
22 } 22 }
23 }, 23 },
@@ -442,12 +442,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
442 442
443 for (var i = 0; i < this.propTweens.length; i++) { 443 for (var i = 0; i < this.propTweens.length; i++) {
444 var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); 444 var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec);
445 // TODO - trackDur should be parseFloat rounded to significant digits 445 // trackDur should be parseFloat rounded to significant digits
446 var trackDur = parseInt(this.trackDuration); 446 var trackDur = parseInt(this.trackDuration);
447 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; 447 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
448 var keyframePropertyString = " " + keyframePercent + " {"; 448 var keyframePropertyString = " " + keyframePercent + " {";
449 for(var prop in this.propTweens[i].tweenData.tweenedProperties){ 449 for(var prop in this.propTweens[i].tweenData.tweenedProperties){
450 keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop]; 450 keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop] + ";";
451 } 451 }
452 keyframePropertyString += "}"; 452 keyframePropertyString += "}";
453 keyframeString += keyframePropertyString; 453 keyframeString += keyframePropertyString;
@@ -465,13 +465,11 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
465 if (currentStyleValue == null) { 465 if (currentStyleValue == null) {
466 currentStyleValue = "1px"; 466 currentStyleValue = "1px";
467 } 467 }
468 console.log(currentStyleValue);
469 468
470 this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; 469 this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue;
471 470
472
473 this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; 471 this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty;
474 var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; 472 var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString;
475 var newAnimationNames = currentAnimationNameString + "," + this.animationName; 473 var newAnimationNames = currentAnimationNameString + "," + this.animationName;
476 var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); 474 var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration");
477 var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; 475 var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration;
@@ -481,14 +479,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
481 this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; 479 this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames;
482 480
483 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); 481 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames);
484
485 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); 482 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration);
483 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards");
486 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); 484 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
487 485
488 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; 486 var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
489 console.log(initRule);
490 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); 487 this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
491
492 this.insertPropTween(tweenEvent.offsetX); 488 this.insertPropTween(tweenEvent.offsetX);
493 } 489 }
494 } 490 }
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 91ce1cfb..3c491a53 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -71,6 +71,8 @@ var Span = exports.Span = Montage.create(Component, {
71 newVal = "none"; 71 newVal = "none";
72 } 72 }
73 this._easing = newVal; 73 this._easing = newVal;
74 this.parentComponent.easing = this.easing;
75 this.parentComponent.tweenData.easing = this.easing;
74 this.parentComponent.setKeyframeEase(newVal); 76 this.parentComponent.setKeyframeEase(newVal);
75 this.needsDraw = true; 77 this.needsDraw = true;
76 } 78 }
@@ -180,7 +182,7 @@ var Span = exports.Span = Montage.create(Component, {
180 handleEasingChoicesClick: { 182 handleEasingChoicesClick: {
181 value: function(event) { 183 value: function(event) {
182 event.stopPropagation(); 184 event.stopPropagation();
183 185
184 // Remove the pointer to ourselves 186 // Remove the pointer to ourselves
185 //this.application.ninja.timeline.currentOpenSpanMenu = false; 187 //this.application.ninja.timeline.currentOpenSpanMenu = false;
186 188
@@ -190,6 +192,8 @@ var Span = exports.Span = Montage.create(Component, {
190 192
191 // Set the easing 193 // Set the easing
192 this.easing = event.target.dataset.ninjaEase; 194 this.easing = event.target.dataset.ninjaEase;
195 this.parentComponent.easing = this.easing;
196 this.parentComponent.tweenData.easing = this.easing;
193 197
194 // Unbind the event handler 198 // Unbind the event handler
195 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); 199 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click");
diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html
index cdc355e7..f141fc1c 100644
--- a/js/panels/Timeline/Style.reel/Style.html
+++ b/js/panels/Timeline/Style.reel/Style.html
@@ -80,7 +80,7 @@
80 </div> 80 </div>
81 <div class="cell-value value-editor editor-color hidden"> 81 <div class="cell-value value-editor editor-color hidden">
82 <div data-montage-id="value-editor-color"> 82 <div data-montage-id="value-editor-color">
83 <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div> 83 <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl color-chip-position"></div>
84 </div> 84 </div>
85 </div> 85 </div>
86 <div class="cell-value value-editor editor-input hidden"> 86 <div class="cell-value value-editor editor-input hidden">
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index fe8d04e9..c8d323a9 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -400,8 +400,10 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
400 var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide) 400 var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide)
401 this.application.ninja.timeline.selectedStyle = this.editorProperty; 401 this.application.ninja.timeline.selectedStyle = this.editorProperty;
402 this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); 402 this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
403 this._fillColorCtrl.color(currentValue.colorMode, currentValue.color); 403 if(currentValue){
404 this.addedColorChips = true; 404 this._fillColorCtrl.color(currentValue.colorMode, currentValue.color);
405 this.addedColorChips = true;
406 }
405 } 407 }
406 // TODO: set up color chip here. 408 // TODO: set up color chip here.
407 } else if (tweenable.tweener === "input"){ 409 } else if (tweenable.tweener === "input"){
diff --git a/js/panels/Timeline/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css
index bb65b0c7..77035873 100644
--- a/js/panels/Timeline/Style.reel/css/Style.css
+++ b/js/panels/Timeline/Style.reel/css/Style.css
@@ -6,31 +6,22 @@
6/* Layer.scss 6/* Layer.scss
7 * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. 7 * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
8 */ 8 */
9/* line 18, ../scss/Style.scss */
10.hidden { 9.hidden {
11 display: none; 10 display: none; }
12}
13 11
14/* line 21, ../scss/Style.scss */ </