From 9cd3ae740b67e192f06ee000eba759ca68bdea52 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 3 Jul 2012 11:54:05 -0700 Subject: Cleanup PropertyTrack.js Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 120 ++++++++------------- 1 file changed, 42 insertions(+), 78 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 72d26e78..c4571e9d 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -9,33 +9,11 @@ var Component = require("montage/ui/component").Component; var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { + /* ===- Begin Models ==== */ hasTemplate:{ value: true }, - prepareForDraw:{ - value:function(){ - this.element.addEventListener("click", this, false); - this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; - this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; - this.ninjaStylesContoller = this.application.ninja.stylesController; - } - }, - - draw:{ - value:function(){ - - } - }, - - didDraw:{ - value:function () { - if(this.currentKeyframeRule){ - this.retrieveStoredStyleTweens(); - } - } - }, - trackEditorProperty:{ value:"" }, @@ -51,7 +29,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _propTweenRepetition:{ value:null }, - propTweenRepetition:{ get:function () { return this._propTweenRepetition; @@ -64,7 +41,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _propTweens:{ value:[] }, - propTweens:{ serializable:true, get:function () { @@ -78,7 +54,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _propTrackData:{ value:false }, - propTrackData:{ serializable:true, get:function () { @@ -115,7 +90,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _trackID:{ value:null }, - trackID:{ serializable:true, get:function () { @@ -131,7 +105,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _trackType:{ value:null }, - trackType:{ serializable:true, get:function () { @@ -147,7 +120,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _styleIndex:{ value:null }, - styleIndex:{ serializable:true, get:function () { @@ -174,36 +146,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.needsDraw = true; } }, + /* ===- End Models ==== */ + + /* ===- Begin Draw Cycle ==== */ + prepareForDraw:{ + value:function () { + this.element.addEventListener("click", this, false); + this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; + this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; + this.ninjaStylesContoller = this.application.ninja.stylesController; + } + }, + + didDraw:{ + value:function () { + if (this.currentKeyframeRule) { + this.retrieveStoredStyleTweens(); + } + } + }, + /* ===- End Draw Cycle ==== */ + /* ===- Begin Event Handlers ==== */ handleClick:{ value:function (ev) { if (ev.shiftKey) { - if (this.trackType == "position") { this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); } - if (this.propTweens.length < 1) { - - // check if there is an editor property assigned yet - // get this property track's editor prop name from layer data arrays var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); if (this.trackType == "style") { - //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex) - if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { + if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { console.log("Please enter a style property for this track before adding keyframes."); return; } else { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; - //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } this.insertPropTween(0); this.addPropAnimationRuleToElement(ev); this.updatePropKeyframeRule(); } else if (this.trackType == "position") { - //console.log("Property track editorProperty set to: " + this.trackEditorProperty); + } } else { this.handleNewPropTween(ev); @@ -214,31 +200,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, - - getCurrentSelectedStyleIndex: { - value: function(layerIndex) { - var returnVal = false, - i = 0, - arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; - for (i = 0; i < arrLayerStylesLength; i++) { - var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; - if (currItem.isSelected === true) { - returnVal = i; - } - } - return returnVal; - } - }, handleNewPropTween:{ value:function (ev) { if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { - // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. - // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. - - // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element var findXOffset = function (obj) { var curleft = 0; if (obj.offsetParent) { @@ -256,6 +223,23 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, + /* ===- End Event Handlers ==== */ + + /* ===- Begin Controllers ==== */ + getCurrentSelectedStyleIndex: { + value: function(layerIndex) { + var returnVal = false, + i = 0, + arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; + for (i = 0; i < arrLayerStylesLength; i++) { + var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; + if (currItem.isSelected === true) { + returnVal = i; + } + } + return returnVal; + } + }, insertPropTween:{ value:function(clickPos){ @@ -310,24 +294,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { nextTween, splitTweenIndex; - // Search through the tweens and find the pair whose keyframes bracket position. for (i = 0; i < tweensLength; i++) { prevTween = this.propTweens[i].tweenData.keyFramePosition; nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; if (position > prevTween && position < nextTween) { - // We will insert a new tween at this index splitTweenIndex = i + 1; - // Update the next tween to have new span position and width. this.propTweens[i + 1].tweenData.spanPosition = position; this.propTweens[i + 1].spanPosition = position; this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; this.propTweens[i + 1].spanWidth = this.propTweens[i + 1].keyFramePosition - position; - // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you? - // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes. - // So we have to get the index of the actual componentin the repetition, which may not match our iteration index. for (j = 0; j < tweensLength + 1; j++) { if (this.propTweenRepetition.childComponents[j].keyFramePosition === nextTween) { nextComponentIndex = j; @@ -335,7 +313,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } this.propTweenRepetition.childComponents[nextComponentIndex].setData(); - // Create the new tween and splice it into the model var newTweenToInsert = {}; newTweenToInsert.tweenData = {}; newTweenToInsert.tweenData.spanWidth = position - prevTween; @@ -347,15 +324,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); - // We are done, so end the loop. i = tweensLength; } } - - // We've made a change, so set the needsSave flag this.application.ninja.currentDocument.model.needsSave = true; - - // Our tween IDs are now all messed up. Fix them. for (i = 0; i <= tweensLength + 1; i++) { this.propTweens[i].tweenID = i; this.propTweens[i].tweenData.tweenID = i; @@ -382,7 +354,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; for (j = 0; j < styleLength; j++) { - // check for vendor prefixes and skip them for now var firstChar = this.currentKeyframeRule[i].style[j].charAt(0); if (firstChar === "-") { @@ -394,7 +365,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } - // recreate tween properties array for timeline tween newTween.tweenData.tweenedProperties = []; for (var k in keyframeStyles) { newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1]; @@ -434,12 +404,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { updatePropKeyframeRule:{ value:function(){ - // delete the current rule this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); - - // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for (var i = 0; i < this.propTweens.length; i++) { var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); // trackDur should be parseFloat rounded to significant digits @@ -453,7 +419,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { keyframeString += keyframePropertyString; } keyframeString += " }"; - // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); this.application.ninja.currentDocument.model.needsSave = true; } @@ -465,9 +430,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { if (currentStyleValue == null) { currentStyleValue = "1px"; } - this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; - this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString; var newAnimationNames = ""; @@ -493,4 +456,5 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.insertPropTween(tweenEvent.offsetX); } } + /* ===- End Controllers ==== */ }); -- cgit v1.2.3 From f9c592ac8284cace4daed6f2ac87fe15dfad873c Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 3 Jul 2012 12:47:26 -0700 Subject: Refactoring PropertyTrack.js & Span.js Signed-off-by: Kruti Shah --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 236 ++++++++++----------- 1 file changed, 112 insertions(+), 124 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 72d26e78..752340bb 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -13,41 +13,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value: true }, - prepareForDraw:{ - value:function(){ - this.element.addEventListener("click", this, false); - this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; - this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; - this.ninjaStylesContoller = this.application.ninja.stylesController; - } - }, - - draw:{ - value:function(){ - - } - }, - - didDraw:{ - value:function () { - if(this.currentKeyframeRule){ - this.retrieveStoredStyleTweens(); - } - } - }, - - trackEditorProperty:{ - value:"" - }, - - animatedElement:{ - value:null - }, - - isSubproperty:{ - value:true - }, - _propTweenRepetition:{ value:null }, @@ -91,27 +56,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, - - nextKeyframe:{ - value:1 - }, - - ninjaStylesContoller:{ - value:null - }, - - animationName:{ - value:null - }, - - currentKeyframeRule:{ - value:null - }, - - trackDuration:{ - value:0 - }, - _trackID:{ value:null }, @@ -160,6 +104,42 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + trackEditorProperty:{ + value:"" + }, + + animatedElement:{ + value:null + }, + + isSubproperty:{ + value:true + }, + + nextKeyframe:{ + value:1 + }, + + ninjaStylesContoller:{ + value:null + }, + + animationName:{ + value:null + }, + + currentKeyframeRule:{ + value:null + }, + + trackDuration:{ + value:0 + }, + + timelineTrack:{ + value:null + }, + setData:{ value:function () { if (typeof(this.propTrackData) === "undefined") { @@ -175,35 +155,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + prepareForDraw:{ + value:function(){ + this.element.addEventListener("click", this, false); + this.timelineTrack = this.parentComponent.parentComponent.parentComponent.parentComponent; + this.trackID = this.timelineTrack.trackID; + this.animatedElement = this.timelineTrack.animatedElement; + this.ninjaStylesContoller = this.application.ninja.stylesController; + } + }, + + didDraw:{ + value:function () { + if(this.currentKeyframeRule){ + this.retrieveStoredStyleTweens(); + } + } + }, + handleClick:{ value:function (ev) { + + var selectIndex , currentSelectedStyleIndex; if (ev.shiftKey) { if (this.trackType == "position") { - this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); + this.timelineTrack.handleNewTween(ev); } if (this.propTweens.length < 1) { - // check if there is an editor property assigned yet - // get this property track's editor prop name from layer data arrays - var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), - currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); + selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), + currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); if (this.trackType == "style") { - //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex) if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { console.log("Please enter a style property for this track before adding keyframes."); return; } else { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; - //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } this.insertPropTween(0); this.addPropAnimationRuleToElement(ev); this.updatePropKeyframeRule(); } else if (this.trackType == "position") { - //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } } else { this.handleNewPropTween(ev); @@ -214,32 +209,15 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, - - getCurrentSelectedStyleIndex: { - value: function(layerIndex) { - var returnVal = false, - i = 0, - arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; - for (i = 0; i < arrLayerStylesLength; i++) { - var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; - if (currItem.isSelected === true) { - returnVal = i; - } - } - return returnVal; - } - }, handleNewPropTween:{ value:function (ev) { + var findXOffset, targetElementOffset, position; if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { - // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. - // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. - - // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element - var findXOffset = function (obj) { + // An easy function that adds up offsets and scrolls and returns the page x value of an element + findXOffset = function (obj) { var curleft = 0; if (obj.offsetParent) { do { @@ -249,29 +227,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } return curleft; } - var targetElementOffset = findXOffset(ev.currentTarget), - position = event.pageX - targetElementOffset; + targetElementOffset = findXOffset(ev.currentTarget), + position = event.pageX - targetElementOffset; this.splitPropTweenAt(position - 18); } } }, + getCurrentSelectedStyleIndex: { + value: function(layerIndex) { + var returnVal = false, + i = 0, + arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length, + currItem; + for (i = 0; i < arrLayerStylesLength; i++) { + currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; + if (currItem.isSelected === true) { + returnVal = i; + } + } + return returnVal; + } + }, + insertPropTween:{ value:function(clickPos){ - var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + var selectedIndex, currentMillisecPerPixel, currentMillisec, propVal + selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.selectLayer(selectedIndex, true); - var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - var currentMillisec = currentMillisecPerPixel * clickPos; + currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + currentMillisec = currentMillisecPerPixel * clickPos; this.trackDuration = currentMillisec; var newTween = {}; newTween.tweenData = {}; newTween.tweenData.tweenedProperties = []; - // TODO - check for color values vs px values and set the correct default - var propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); if(propVal == null){ propVal = "1px"; } @@ -310,13 +304,11 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { nextTween, splitTweenIndex; - // Search through the tweens and find the pair whose keyframes bracket position. for (i = 0; i < tweensLength; i++) { prevTween = this.propTweens[i].tweenData.keyFramePosition; nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; if (position > prevTween && position < nextTween) { - // We will insert a new tween at this index splitTweenIndex = i + 1; // Update the next tween to have new span position and width. @@ -325,9 +317,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; this.propTweens[i + 1].spanWidth = this.propTweens[i + 1].keyFramePosition - position; - // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you? - // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes. - // So we have to get the index of the actual componentin the repetition, which may not match our iteration index. for (j = 0; j < tweensLength + 1; j++) { if (this.propTweenRepetition.childComponents[j].keyFramePosition === nextTween) { nextComponentIndex = j; @@ -347,15 +336,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); - // We are done, so end the loop. i = tweensLength; } } - // We've made a change, so set the needsSave flag this.application.ninja.currentDocument.model.needsSave = true; - // Our tween IDs are now all messed up. Fix them. for (i = 0; i <= tweensLength + 1; i++) { this.propTweens[i].tweenID = i; this.propTweens[i].tweenData.tweenID = i; @@ -365,8 +351,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { retrieveStoredStyleTweens:{ value:function(){ - var percentValue, fraction, splitValue; - var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, i = 0; + var percentValue, fraction, splitValue, styleLength, firstChar, currProp, propVal ; + var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, j, k, i = 0; if (this.animatedElement !== undefined) { this.animationName = this.currentKeyframeRule.name; @@ -379,24 +365,22 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var newTween = {}; newTween.tweenData = {}; - var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; + styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; for (j = 0; j < styleLength; j++) { - // check for vendor prefixes and skip them for now - var firstChar = this.currentKeyframeRule[i].style[j].charAt(0); + firstChar = this.currentKeyframeRule[i].style[j].charAt(0); if (firstChar === "-") { break; } else { - var currProp = this.currentKeyframeRule[i].style[j]; - var propVal = this.currentKeyframeRule[i].style[currProp]; + currProp = this.currentKeyframeRule[i].style[j]; + propVal = this.currentKeyframeRule[i].style[currProp]; keyframeStyles.push([currProp, propVal]); } } - // recreate tween properties array for timeline tween newTween.tweenData.tweenedProperties = []; - for (var k in keyframeStyles) { + for (k in keyframeStyles) { newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1]; } @@ -434,19 +418,20 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { updatePropKeyframeRule:{ value:function(){ + var keyframeString, keyMill, trackDur, keyframePercent, keyframePropertyString, prop, i; // delete the current rule this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); // build the new keyframe string - var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; + keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for (var i = 0; i < this.propTweens.length; i++) { - var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); + for (i = 0; i < this.propTweens.length; i++) { + keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); // trackDur should be parseFloat rounded to significant digits - var trackDur = parseInt(this.trackDuration); - var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; - var keyframePropertyString = " " + keyframePercent + " {"; - for(var prop in this.propTweens[i].tweenData.tweenedProperties){ + trackDur = parseInt(this.trackDuration); + keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; + keyframePropertyString = " " + keyframePercent + " {"; + for(prop in this.propTweens[i].tweenData.tweenedProperties){ keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop] + ";"; } keyframePropertyString += "}"; @@ -461,7 +446,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ - var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + var currentStyleValue, currentAnimationNameString, newAnimationNames, currentAnimationDuration, newAnimationDuration, currentIterationCount; + var newIterationCount, initRule; + + currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); if (currentStyleValue == null) { currentStyleValue = "1px"; } @@ -469,26 +457,26 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; - var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString; - var newAnimationNames = ""; + currentAnimationNameString = this.timelineTrack.animationNamesString; + newAnimationNames = ""; if(currentAnimationNameString.length == 0){ newAnimationNames = this.animationName; } else { newAnimationNames = currentAnimationNameString + "," + this.animationName; } - var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; - var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); - var newIterationCount = currentIterationCount + ",1"; + currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; + currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); + newIterationCount = currentIterationCount + ",1"; - this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; + this.timelineTrack.animationNamesString = newAnimationNames; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards"); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); - var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; + initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertPropTween(tweenEvent.offsetX); } -- cgit v1.2.3 From 028e0a2ccde5458303d90a9dd6c4fde09b1b6565 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 3 Jul 2012 15:16:51 -0700 Subject: Remove Comment Signed-off-by: Kruti Shah --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index de2e5bb5..6463e396 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -421,7 +421,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { for (i = 0; i < this.propTweens.length; i++) { keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); - // trackDur should be parseFloat rounded to significant digits trackDur = parseInt(this.trackDuration); keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; keyframePropertyString = " " + keyframePercent + " {"; -- cgit v1.2.3 From 8c087f7c13a2bd72e1640e99e339a74fc2250901 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 15:47:50 -0700 Subject: Timeline: First pass at cleaning up TimelineTrack code. Changes propagated to PropertyTrack, TimelineTrack, and Tween classes. --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index c4571e9d..5c674c27 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -244,7 +244,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { insertPropTween:{ value:function(clickPos){ var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayer(selectedIndex, true); + // this.application.ninja.timeline.selectLayer(selectedIndex, true); // Deprecated. + this.application.ninja.timeline.selectLayers([selectedIndex]); + this.application.ninja.timeline.updateStageSelection(); var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; -- cgit v1.2.3 From 8a2a9cf8d43a1ba7e40c41619e7db9675f4cb195 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 9 Jul 2012 10:53:35 -0700 Subject: Refactoring Code Signed-off-by: Kruti Shah --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 73 ++- .../PropertyTrack.reel/PropertyTrack.js.orig | 561 --------------------- 2 files changed, 61 insertions(+), 573 deletions(-) delete mode 100644 js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js.orig (limited to 'js/panels/Timeline/PropertyTrack.reel') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 6463e396..b46a6242 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -9,6 +9,7 @@ var Component = require("montage/ui/component").Component; var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { + /* Begin: Models */ hasTemplate:{ value: true }, @@ -155,6 +156,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + /* End: Models */ + + /* Begin: Draw Cycle */ prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); @@ -173,10 +177,16 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + /* End: Draw Cycle */ + + /* Begin: Event Handlers */ + handleClick:{ value:function (ev) { - var selectIndex , currentSelectedStyleIndex; + var selectIndex , + currentSelectedStyleIndex; + if (ev.shiftKey) { if (this.trackType == "position") { @@ -212,7 +222,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { handleNewPropTween:{ value:function (ev) { - var findXOffset, targetElementOffset, position; + var findXOffset, + targetElementOffset, + position; + if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { @@ -235,6 +248,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + /* End: Event Handlers */ + + /* Begin: Controllers */ + getCurrentSelectedStyleIndex: { value: function(layerIndex) { var returnVal = false, @@ -253,7 +270,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { insertPropTween:{ value:function(clickPos){ - var selectedIndex, currentMillisecPerPixel, currentMillisec, propVal + var selectedIndex, + currentMillisecPerPixel, + currentMillisec, + propVal, + newTween; + selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.selectLayer(selectedIndex, true); @@ -261,7 +283,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { currentMillisec = currentMillisecPerPixel * clickPos; this.trackDuration = currentMillisec; - var newTween = {}; + newTween = {}; newTween.tweenData = {}; newTween.tweenData.tweenedProperties = []; @@ -302,7 +324,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { tweensLength = this.propTweens.length - 1, prevTween, nextTween, - splitTweenIndex; + splitTweenIndex, + newTweenToInsert; for (i = 0; i < tweensLength; i++) { prevTween = this.propTweens[i].tweenData.keyFramePosition; @@ -323,7 +346,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } this.propTweenRepetition.childComponents[nextComponentIndex].setData(); - var newTweenToInsert = {}; + newTweenToInsert = {}; newTweenToInsert.tweenData = {}; newTweenToInsert.tweenData.spanWidth = position - prevTween; newTweenToInsert.tweenData.keyFramePosition = position; @@ -347,8 +370,21 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { retrieveStoredStyleTweens:{ value:function(){ - var percentValue, fraction, splitValue, styleLength, firstChar, currProp, propVal ; - var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, j, k, i = 0; + var j,k,i,percentValue, + fraction, + splitValue, + styleLength, + firstChar, + currProp, + propVal , + currentMilliSec, + currentMilliSecPerPixel, + clickPosition, + tempTiming, + tempTimingFloat, + trackTiming, + keyframeStyles, + newTween; if (this.animatedElement !== undefined) { this.animationName = this.currentKeyframeRule.name; @@ -358,7 +394,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.nextKeyframe = 0; for (i = 0; this.currentKeyframeRule[i]; i++) { - var newTween = {}; + newTween = {}; newTween.tweenData = {}; styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; @@ -414,6 +450,13 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { updatePropKeyframeRule:{ value:function(){ + var keyframeString, + keyMill, + trackDur, + keyframePercent, + keyframePropertyString, + prop; + this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); // build the new keyframe string @@ -438,8 +481,14 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ - var currentStyleValue, currentAnimationNameString, newAnimationNames, currentAnimationDuration, newAnimationDuration, currentIterationCount; - var newIterationCount, initRule; + var currentStyleValue, + currentAnimationNameString, + newAnimationNames, + currentAnimationDuration, + newAnimationDuration, + currentIterationCount, + newIterationCount, + initRule; currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); if (currentStyleValue == null) { @@ -471,5 +520,5 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.insertPropTween(tweenEvent.offsetX); } } - /* ===- End Controllers ==== */ + /* End: Controllers */ }); diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js.orig b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js.orig deleted file mode 100644 index e2e52a3b..00000000 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js.orig +++ /dev/null @@ -1,561 +0,0 @@ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; - -var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { - - /* ===- Begin Models ==== */ - hasTemplate:{ - value: true - }, - -<<<<<<< HEAD -======= - trackEditorProperty:{ - value:"" - }, - - animatedElement:{ - value:null - }, - - isSubproperty:{ - value:true - }, - ->>>>>>> refs/heads/TimelineUberJD - _propTweenRepetition:{ - value:null - }, - propTweenRepetition:{ - get:function () { - return this._propTweenRepetition; - }, - set:function (newVal) { - this._propTweenRepetition = newVal; - } - }, - - _propTweens:{ - value:[] - }, - propTweens:{ - serializable:true, - get:function () { - return this._propTweens; - }, - set:function (newVal) { - this._propTweens = newVal; - } - }, - - _propTrackData:{ - value:false - }, - propTrackData:{ - serializable:true, - get:function () { - return this._propTrackData; - }, - set:function (val) { - this._propTrackData = val; - if (this._propTrackData) { - this.setData(); - } - } - }, - _trackID:{ - value:null - }, - trackID:{ - serializable:true, - get:function () { - return this._trackID; - }, - set:function (value) { - if (value !== this._trackID) { - this._trackID = value; - } - } - }, - - _trackType:{ - value:null - }, - trackType:{ - serializable:true, - get:function () { - return this._trackType; - }, - set:function (value) { - if (value !== this._trackType) { - this._trackType = value; - } - } - }, - - _styleIndex:{ - value:null - }, - styleIndex:{ - serializable:true, - get:function () { - return this._styleIndex; - }, - set:function (value) { - if (value !== this._styleIndex) { - this._styleIndex = value; - } - } - }, - - trackEditorProperty:{ - value:"" - }, - - animatedElement:{ - value:null - }, - - isSubproperty:{ - value:true - }, - - nextKeyframe:{ - value:1 - }, - - ninjaStylesContoller:{ - value:null - }, - - animationName:{ - value:null - }, - - currentKeyframeRule:{ - value:null - }, - - trackDuration:{ - value:0 - }, - - timelineTrack:{ - value:null - }, - - setData:{ - value:function () { - if (typeof(this.propTrackData) === "undefined") { - return; - } - - this.styleIndex = this.propTrackData.styleIndex; - this.propTweens = this.propTrackData.propTweens; - this.trackType = this.propTrackData.trackType; - this.trackEditorProperty = this.propTrackData.trackEditorProperty; - this.currentKeyframeRule = this.propTrackData.existingRule; - this.needsDraw = true; - } - }, - /* ===- End Models ==== */ - - /* ===- Begin Draw Cycle ==== */ - prepareForDraw:{ - value:function () { - this.element.addEventListener("click", this, false); - this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; - this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; - this.ninjaStylesContoller = this.application.ninja.stylesController; - } - }, - - didDraw:{ - value:function () { - if (this.currentKeyframeRule) { - this.retrieveStoredStyleTweens(); - } - } - }, - /* ===- End Draw Cycle ==== */ - -<<<<<<< HEAD - prepareForDraw:{ - value:function(){ - this.element.addEventListener("click", this, false); - this.timelineTrack = this.parentComponent.parentComponent.parentComponent.parentComponent; - this.trackID = this.timelineTrack.trackID; - this.animatedElement = this.timelineTrack.animatedElement; - this.ninjaStylesContoller = this.application.ninja.stylesController; - } - }, - - didDraw:{ - value:function () { - if(this.currentKeyframeRule){ - this.retrieveStoredStyleTweens(); - } - } - }, - -======= - /* ===- Begin Event Handlers ==== */ ->>>>>>> refs/heads/TimelineUberJD - handleClick:{ - value:function (ev) { - - var selectIndex , currentSelectedStyleIndex; - if (ev.shiftKey) { - if (this.trackType == "position") { - this.timelineTrack.handleNewTween(ev); - } - if (this.propTweens.length < 1) { -<<<<<<< HEAD - - selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), - currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); - - if (this.trackType == "style") { - if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { -======= - var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), - currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); - - if (this.trackType == "style") { - if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { ->>>>>>> refs/heads/TimelineUberJD - console.log("Please enter a style property for this track before adding keyframes."); - return; - } else { - this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; - } - this.insertPropTween(0); - this.addPropAnimationRuleToElement(ev); - this.updatePropKeyframeRule(); - } else if (this.trackType == "position") { -<<<<<<< HEAD -======= - ->>>>>>> refs/heads/TimelineUberJD - } - } else { - this.handleNewPropTween(ev); - if (this.trackType == "style") { - this.updatePropKeyframeRule(); - } - } - } - } - }, - - handleNewPropTween:{ - value:function (ev) { - var findXOffset, targetElementOffset, position; - if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { - this.insertPropTween(ev.offsetX); - } else { -<<<<<<< HEAD - // An easy function that adds up offsets and scrolls and returns the page x value of an element - findXOffset = function (obj) { -======= - var findXOffset = function (obj) { ->>>>>>> refs/heads/TimelineUberJD - var curleft = 0; - if (obj.offsetParent) { - do { - curleft += (obj.offsetLeft - obj.scrollLeft); - - } while (obj = obj.offsetParent); - } - return curleft; - } - targetElementOffset = findXOffset(ev.currentTarget), - position = event.pageX - targetElementOffset; - - this.splitPropTweenAt(position - 18); - } - } - }, - /* ===- End Event Handlers ==== */ - - /* ===- Begin Controllers ==== */ - getCurrentSelectedStyleIndex: { - value: function(layerIndex) { - var returnVal = false, - i = 0, - arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; - for (i = 0; i < arrLayerStylesLength; i++) { - var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; - if (currItem.isSelected === true) { - returnVal = i; - } - } - return returnVal; - } - }, - - getCurrentSelectedStyleIndex: { - value: function(layerIndex) { - var returnVal = false, - i = 0, - arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length, - currItem; - for (i = 0; i < arrLayerStylesLength; i++) { - currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; - if (currItem.isSelected === true) { - returnVal = i; - } - } - return returnVal; - } - }, - - insertPropTween:{ - value:function(clickPos){ - var selectedIndex, currentMillisecPerPixel, currentMillisec, propVal - selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayer(selectedIndex, true); - - currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - currentMillisec = currentMillisecPerPixel * clickPos; - this.trackDuration = currentMillisec; - - var newTween = {}; - newTween.tweenData = {}; - newTween.tweenData.tweenedProperties = []; - - propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); - if(propVal == null){ - propVal = "1px"; - } - newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal; - - if (clickPos == 0) { - newTween.tweenData.spanWidth = 0; - newTween.tweenData.keyFramePosition = 0; - newTween.tweenData.keyFrameMillisec = 0; - newTween.tweenData.tweenID = 0; - newTween.tweenData.spanPosition = 0; - - this.propTweens.push(newTween); - - } else { - newTween.tweenData.spanWidth = clickPos - this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition; - newTween.tweenData.keyFramePosition = clickPos; - newTween.tweenData.keyFrameMillisec = currentMillisec; - newTween.tweenData.tweenID = this.nextKeyframe; - newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; - - this.propTweens.push(newTween); - - this.nextKeyframe += 1; - } - - this.application.ninja.currentDocument.model.needsSave = true; - } - }, - - splitPropTweenAt:{ - value:function (position) { - var i, j, nextComponentIndex, - tweensLength = this.propTweens.length - 1, - prevTween, - nextTween, - splitTweenIndex; - - for (i = 0; i < tweensLength; i++) { - prevTween = this.propTweens[i].tweenData.keyFramePosition; - nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; - if (position > prevTween && position < nextTween) { - - splitTweenIndex = i + 1; - - this.propTweens[i + 1].tweenData.spanPosition = position; - this.propTweens[i + 1].spanPosition = position; - this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; - this.propTweens[i + 1].spanWidth = this.propTweens[i + 1].keyFramePosition - position; - - for (j = 0; j < tweensLength + 1; j++) { - if (this.propTweenRepetition.childComponents[j].keyFramePosition === nextTween) { - nextComponentIndex = j; - } - } - this.propTweenRepetition.childComponents[nextComponentIndex].setData(); - - var newTweenToInsert = {}; - newTweenToInsert.tweenData = {}; - newTweenToInsert.tweenData.spanWidth = position - prevTween; - newTweenToInsert.tweenData.keyFramePosition = position; - newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * position; - newTweenToInsert.tweenData.tweenID = this.propTweens.length; - newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth; - newTweenToInsert.tweenData.tweenedProperties = []; - newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); - this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); - - i = tweensLength; - } - } -<<<<<<< HEAD - - this.application.ninja.currentDocument.model.needsSave = true; - -======= - this.application.ninja.currentDocument.model.needsSave = true; ->>>>>>> refs/heads/TimelineUberJD - for (i = 0; i <= tweensLength + 1; i++) { - this.propTweens[i].tweenID = i; - this.propTweens[i].tweenData.tweenID = i; - } - } - }, - - retrieveStoredStyleTweens:{ - value:function(){ - var percentValue, fraction, splitValue, styleLength, firstChar, currProp, propVal ; - var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, j, k, i = 0; - - if (this.animatedElement !== undefined) { - this.animationName = this.currentKeyframeRule.name; - if (this.animationName) { - - trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - this.nextKeyframe = 0; - - for (i = 0; this.currentKeyframeRule[i]; i++) { - var newTween = {}; - newTween.tweenData = {}; - - styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; - - for (j = 0; j < styleLength; j++) { -<<<<<<< HEAD - - firstChar = this.currentKeyframeRule[i].style[j].charAt(0); -======= - // check for vendor prefixes and skip them for now - var firstChar = this.currentKeyframeRule[i].style[j].charAt(0); ->>>>>>> refs/heads/TimelineUberJD - if (firstChar === "-") { - break; - } else { - currProp = this.currentKeyframeRule[i].style[j]; - propVal = this.currentKeyframeRule[i].style[currProp]; - keyframeStyles.push([currProp, propVal]); - } - } - - newTween.tweenData.tweenedProperties = []; - for (k in keyframeStyles) { - newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1]; - } - - if (this.currentKeyframeRule[i].keyText === "0%") { - newTween.tweenData.spanWidth = 0; - newTween.tweenData.keyFramePosition = 0; - newTween.tweenData.keyFrameMillisec = 0; - newTween.tweenData.tweenID = 0; - newTween.tweenData.spanPosition = 0; - this.propTweens.push(newTween); - } - else { - tempTiming = trackTiming.split("s"); - tempTimingFloat = parseFloat(tempTiming[0]); - this.trackDuration = tempTimingFloat * 1000; - percentValue = this.currentKeyframeRule[i].keyText; - splitValue = percentValue.split("%"); - fraction = splitValue[0] / 100; - currentMilliSec = fraction * this.trackDuration; - currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - clickPosition = currentMilliSec / currentMilliSecPerPixel; - newTween.tweenData.spanWidth = clickPosition - this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition; - newTween.tweenData.keyFramePosition = clickPosition; - newTween.tweenData.keyFrameMillisec = currentMilliSec; - newTween.tweenData.tweenID = this.nextKeyframe; - newTween.tweenData.spanPosition = clickPosition - newTween.tweenData.spanWidth; - this.propTweens.push(newTween); - } - this.nextKeyframe += 1; - } - } - } - } - }, - - updatePropKeyframeRule:{ - value:function(){ -<<<<<<< HEAD - var keyframeString, keyMill, trackDur, keyframePercent, keyframePropertyString, prop, i; - // delete the current rule - this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); - - // build the new keyframe string - keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - - for (i = 0; i < this.propTweens.length; i++) { - keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); -======= - this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); - var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for (var i = 0; i < this.propTweens.length; i++) { - var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); ->>>>>>> refs/heads/TimelineUberJD - // trackDur should be parseFloat rounded to significant digits - trackDur = parseInt(this.trackDuration); - keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; - keyframePropertyString = " " + keyframePercent + " {"; - for(prop in this.propTweens[i].tweenData.tweenedProperties){ - keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop] + ";"; - } - keyframePropertyString += "}"; - keyframeString += keyframePropertyString; - } - keyframeString += " }"; - this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); - this.application.ninja.currentDocument.model.needsSave = true; - } - }, - - addPropAnimationRuleToElement:{ - value:function(tweenEven