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 --------------------- js/panels/Timeline/Span.reel/Span.js | 43 +- 3 files changed, 89 insertions(+), 588 deletions(-) delete mode 100644 js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js.orig (limited to 'js') 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(tweenEvent){ - var currentStyleValue, currentAnimationNameString, newAnimationNames, currentAnimationDuration, newAnimationDuration, currentIterationCount; - var newIterationCount, initRule; - - currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); - if (currentStyleValue == null) { - currentStyleValue = "1px"; - } - this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; - this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; - currentAnimationNameString = this.timelineTrack.animationNamesString; - newAnimationNames = ""; - if(currentAnimationNameString.length == 0){ - newAnimationNames = this.animationName; - } else { - newAnimationNames = currentAnimationNameString + "," + this.animationName; - } - 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.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); - - initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; - this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); - this.insertPropTween(tweenEvent.offsetX); - } - } - /* ===- End Controllers ==== */ -}); diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index f588a0eb..ffe7f4a4 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -13,7 +13,7 @@ var Span = exports.Span = Montage.create(Component, { value: true }, - // BEGIN: Models + /* Begin: Models */ _spanWidth:{ value:0 }, @@ -79,8 +79,10 @@ var Span = exports.Span = Montage.create(Component, { } } }, + + /* End: Models */ - // BEGIN: draw cycle + /* Begin: Draw Cycle */ prepareForDraw: { value: function() { this.init(); @@ -89,7 +91,9 @@ var Span = exports.Span = Montage.create(Component, { draw:{ value: function(){ - var containerWidth , choiceWidth; + var containerWidth , + choiceWidth; + this.element.style.width = this.spanWidth + "px"; if ((this.spanWidth <= 70) && (this.spanWidth >0)) { @@ -123,18 +127,9 @@ var Span = exports.Span = Montage.create(Component, { } }, - // BEGIN: Controllers - init: { - value: function() { - this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); - } - }, - - highlightSpan:{ - value: function(){ - this.isHighlighted = true; - } - }, + /* End: Draw Cycle */ + + /* Begin : Event Handlers */ handleEasingChoiceClick: { value: function(event) { @@ -181,9 +176,27 @@ var Span = exports.Span = Montage.create(Component, { this.hideEasingMenu(); } }, + + /* End : Event Handlers */ + + /* Begin: Controllers */ + init: { + value: function() { + this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); + } + }, + + highlightSpan:{ + value: function(){ + this.isHighlighted = true; + } + }, + hideEasingMenu: { value: function() { this.application.ninja.timeline.easingMenu.hide(); } } + + /* End : Controllers */ }); -- cgit v1.2.3