diff options
6 files changed, 89 insertions, 39 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index f2004b94..fbc3edd0 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -183,16 +183,20 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
183 | }, | 183 | }, |
184 | 184 | ||
185 | handleClick:{ | 185 | handleClick:{ |
186 | value:function(ev){ | 186 | value:function (ev) { |
187 | if (ev.shiftKey) { | 187 | if (ev.shiftKey) { |
188 | 188 | ||
189 | if (this.trackType == "position") { | ||
190 | this.parentComponent.parentComponent.parentComponent.handleNewTween(ev); | ||
191 | } | ||
192 | |||
189 | if (this.propTweens.length < 1) { | 193 | if (this.propTweens.length < 1) { |
190 | 194 | ||
191 | // check if there is an editor property assigned yet | 195 | // check if there is an editor property assigned yet |
192 | // get this property track's editor prop name from layer data arrays | 196 | // get this property track's editor prop name from layer data arrays |
193 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 197 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
194 | 198 | ||
195 | if (this.trackType === "style") { | 199 | if (this.trackType == "style") { |
196 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { | 200 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { |
197 | console.log("Please enter a style property for this track before adding keyframes."); | 201 | console.log("Please enter a style property for this track before adding keyframes."); |
198 | return; | 202 | return; |
@@ -200,7 +204,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
200 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; | 204 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; |
201 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | 205 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); |
202 | } | 206 | } |
203 | } else if (this.trackType === "position") { | 207 | } else if (this.trackType == "position") { |
204 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | 208 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); |
205 | } | 209 | } |
206 | 210 | ||
@@ -220,9 +224,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
220 | if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { | 224 | if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { |
221 | this.insertPropTween(ev.offsetX); | 225 | this.insertPropTween(ev.offsetX); |
222 | } else { | 226 | } else { |
223 | console.log("spitting sub keyframes not yet supported"); | 227 | console.log("Splitting style tweens not yet supported."); |
224 | } | 228 | } |
225 | |||
226 | } | 229 | } |
227 | }, | 230 | }, |
228 | 231 | ||
@@ -266,6 +269,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
266 | } | 269 | } |
267 | }, | 270 | }, |
268 | 271 | ||
272 | splitPropTween:{ | ||
273 | value:function (ev) { | ||
274 | console.log("splitting sub prop tween with new keyframe"); | ||
275 | var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; | ||
276 | var i; | ||
277 | var tweensLength = this.propTweens.length - 1; | ||
278 | var prevTween, nextTween, splitTweenIndex; | ||
279 | for (i = 0; i < tweensLength; i++) { | ||
280 | prevTween = this.propTweens[i].tweenData.keyFramePosition; | ||
281 | nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; | ||
282 | if (clickPos > prevTween && clickPos < nextTween) { | ||
283 | //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID); | ||
284 | splitTweenIndex = this.propTweens[i + 1].tweenData.tweenID; | ||
285 | this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - clickPos; | ||
286 | this.propTweens[i + 1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX; | ||
287 | if (ev.target.className != "tween-span") { | ||
288 | // don't set styles on timeline track if event is coming from the track | ||
289 | } else { | ||
290 | ev.target.style.width = this.propTweens[i + 1].tweenData.spanWidth + "px"; | ||
291 | ev.target.parentElement.style.left = clickPos + "px"; | ||
292 | ev.target.parentElement.children[1].style.left = (this.propTweens[i + 1].tweenData.spanWidth - 3) + "px"; | ||
293 | } | ||
294 | var newTweenToInsert = {}; | ||
295 | newTweenToInsert.tweenData = {}; | ||
296 | newTweenToInsert.tweenData.spanWidth = clickPos - prevTween; | ||
297 | newTweenToInsert.tweenData.keyFramePosition = clickPos; | ||
298 | newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos; | ||
299 | newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1; | ||
300 | newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth; | ||
301 | newTweenToInsert.tweenData.tweenedProperties = []; | ||
302 | newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
303 | this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); | ||
304 | break; | ||
305 | } | ||
306 | } | ||
307 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
308 | } | ||
309 | }, | ||
310 | |||
269 | retrieveStoredStyleTweens:{ | 311 | retrieveStoredStyleTweens:{ |
270 | value:function(){ | 312 | value:function(){ |
271 | console.log("retrieve style tweens"); | 313 | console.log("retrieve style tweens"); |
diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css index ddcc536e..5d71e2e7 100644 --- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css +++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css | |||
@@ -8,7 +8,7 @@ | |||
8 | */ | 8 | */ |
9 | /* line 19, ../scss/PropertyTrack.scss */ | 9 | /* line 19, ../scss/PropertyTrack.scss */ |
10 | .content-main .collapsible-content .timeline-track { | 10 | .content-main .collapsible-content .timeline-track { |
11 | height: 20px; | 11 | height: 18px; |
12 | padding-top: 2px; | 12 | padding-top: 2px; |
13 | border-bottom: 1px solid #505050; | 13 | border-bottom: 1px solid #505050; |
14 | background-image: url("../images/gridline.jpg"); | 14 | background-image: url("../images/gridline.jpg"); |
diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss index 31aed851..a560ff3c 100644 --- a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss +++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss | |||
@@ -17,7 +17,7 @@ | |||
17 | 17 | ||
18 | 18 | ||
19 | .content-main .collapsible-content .timeline-track { | 19 | .content-main .collapsible-content .timeline-track { |
20 | height: 20px; | 20 | height: 18px; |
21 | padding-top: 2px; | 21 | padding-top: 2px; |
22 | border-bottom: 1px solid $color-menu-divider; | 22 | border-bottom: 1px solid $color-menu-divider; |
23 | background-image: url("../images/gridline.jpg"); | 23 | background-image: url("../images/gridline.jpg"); |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index a38ecb30..6066066a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -730,7 +730,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
730 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; | 730 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; |
731 | if(this.animatedElement!==undefined){ | 731 | if(this.animatedElement!==undefined){ |
732 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); | 732 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); |
733 | |||
734 | // check for multiple animation names | ||
735 | var animationNameList = this.animationName.split(","); | ||
736 | if(animationNameList.length > 1){ | ||
737 | this.animationName = animationNameList[0]; | ||
738 | this.extractKeyframesFromRules(animationNameList); | ||
739 | } | ||
740 | |||
733 | this.animationNamesString = this.animationName; | 741 | this.animationNamesString = this.animationName; |
742 | |||
743 | // build tweens for this tracks's keyframe rule | ||
734 | if(this.animationName){ | 744 | if(this.animationName){ |
735 | trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | 745 | trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); |
736 | this.nextKeyframe = 0; | 746 | this.nextKeyframe = 0; |
@@ -796,6 +806,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
796 | } | 806 | } |
797 | }, | 807 | }, |
798 | 808 | ||
809 | extractKeyframesFromRules:{ | ||
810 | value:function(ruleNames){ | ||
811 | //console.log(ruleNames); | ||
812 | for(var i in ruleNames){ | ||
813 | console.log(ruleNames[i].replace(/^\s+|\s+$/g,"")); | ||
814 | var currName = ruleNames[i].replace(/^\s+|\s+$/g,""); | ||
815 | var test = this.application.ninja.stylesController.getAnimationRuleWithName(currName, this.application.ninja.currentDocument._document); | ||
816 | console.log(test); | ||
817 | } | ||
818 | } | ||
819 | }, | ||
820 | |||
799 | addAnimationRuleToElement:{ | 821 | addAnimationRuleToElement:{ |
800 | value:function (tweenEvent) { | 822 | value:function (tweenEvent) { |
801 | this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; | 823 | this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; |
diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css index 57e4dce6..03d1cf8d 100644 --- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css +++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css | |||
@@ -1,15 +1,13 @@ | |||
1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; |
2 | |||
3 | /* <copyright> | 2 | /* <copyright> |
4 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> |
5 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
6 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
7 | </copyright> */ | 6 | </copyright> */ |
8 | |||
9 | /* TimelineTrack.scss | 7 | /* TimelineTrack.scss |
10 | * Main SCSS file for TimelineTrack component, compiled by SASS into the file css/TimelineTrack.css. | 8 | * Main SCSS file for TimelineTrack component, compiled by SASS into the file css/TimelineTrack.css. |
11 | */ | 9 |