aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js52
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css2
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js22
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css16
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js34
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</