diff options
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 10 | ||||
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 16 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 6 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.html | 2 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 6 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/css/Style.css | 52 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/scss/Style.scss | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 122 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 36 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | 3 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 21 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 50 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 5 |
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 */ | ||
15 | .row-editor { | 12 | .row-editor { |
16 | position: rel |