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 ++++++++++----------- js/panels/Timeline/Span.reel/Span.js | 45 ++-- .../Timeline/TrackSpacer.reel/TrackSpacer.html | 30 --- js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js | 21 -- .../Timeline/TrackSpacer.reel/css/TrackSpacer.css | 11 - 5 files changed, 124 insertions(+), 219 deletions(-) delete mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html delete mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js delete mode 100644 js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css (limited to 'js') 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); } diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 3c491a53..51b9a4ce 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -71,9 +71,10 @@ var Span = exports.Span = Montage.create(Component, { newVal = "none"; } this._easing = newVal; - this.parentComponent.easing = this.easing; - this.parentComponent.tweenData.easing = this.easing; - this.parentComponent.setKeyframeEase(newVal); + this.parentTween = this.parentComponent; + this.parentTween.easing = this.easing; + this.parentTween.tweenData.easing = this.easing; + this.parentTween.setKeyframeEase(newVal); this.needsDraw = true; } } @@ -88,11 +89,11 @@ var Span = exports.Span = Montage.create(Component, { draw:{ value: function(){ + var containerWidth , choiceWidth; this.element.style.width = this.spanWidth + "px"; if ((this.spanWidth <= 70) && (this.spanWidth >0)) { - var containerWidth = this.spanWidth -18, - choiceWidth; + containerWidth = this.spanWidth -18 if (containerWidth < 0) { containerWidth = 0; } @@ -109,23 +110,12 @@ var Span = exports.Span = Montage.create(Component, { this.easing_choice.setAttribute("style", ""); } - // Highlight the span? if (this.isHighlighted === true) { this.element.classList.add("spanHighlight"); } else { this.element.classList.remove("spanHighlight"); } - - /* - // Hide or show the choices menu? - if (this.areChoicesVisible === true) { - this.easing_choices.style.display = "block"; - } else { - this.easing_choices.style.display = "none"; - } - */ - - // Change easing? + if (this.easing_choice.innerText !== this.easing) { this.easing_choice.innerText = this.easing; } @@ -137,23 +127,19 @@ var Span = exports.Span = Montage.create(Component, { init: { value: function() { this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); - //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); - } }, highlightSpan:{ value: function(){ - // Class add/remove should only be done in draw cycle. - // this.element.classList.add("spanHighlight"); this.isHighlighted = true; } }, handleEasingChoiceClick: { value: function(event) { + var objPos; event.stopPropagation(); - //this.areChoicesVisible = true; this.application.ninja.timeline.easingMenu.anchor = this.easing_choice; this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText; @@ -172,7 +158,7 @@ var Span = exports.Span = Montage.create(Component, { } return objReturn; } - var objPos = findPos(event.target); + objPos = findPos(event.target); this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop); this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft); this.application.ninja.timeline.easingMenu.show(); @@ -182,29 +168,22 @@ var Span = exports.Span = Montage.create(Component, { handleEasingChoicesClick: { value: function(event) { event.stopPropagation(); - - // Remove the pointer to ourselves - //this.application.ninja.timeline.currentOpenSpanMenu = false; - // Un-highlight the old choice and highlight the new choice this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected"); event.target.classList.add("easing-selected"); // Set the easing this.easing = event.target.dataset.ninjaEase; - this.parentComponent.easing = this.easing; - this.parentComponent.tweenData.easing = this.easing; + this.parentTween.easing = this.easing; + this.parentTween.tweenData.easing = this.easing; // Unbind the event handler this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); - - // Hide the menu. - this.hideEasingMenu(); + this.hideEasingMenu(); } }, hideEasingMenu: { value: function() { - //this.areChoicesVisible = false; this.application.ninja.timeline.easingMenu.hide(); } } diff --git a/js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html b/js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html deleted file mode 100644 index 54944e5d..00000000 --- a/js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - -
-
-
- - - \ No newline at end of file diff --git a/js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js b/js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js deleted file mode 100644 index f1b5407a..00000000 --- a/js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js +++ /dev/null @@ -1,21 +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 TrackSpacer = exports.TrackSpacer = Montage.create(Component, { - - hasTemplate:{ - value: true - }, - - prepareForDraw:{ - value:function(){ - - } - } -}); diff --git a/js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css b/js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css deleted file mode 100644 index b98b555d..00000000 --- a/js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css +++ /dev/null @@ -1,11 +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. - */ - -.trackspacer{ - height:22px; - width: 100%; - background-color: #4d4d4d; -} \ No newline at end of file -- cgit v1.2.3 From 14f30bb927f2cb4a27c81fd6ee4e8d9af46b4404 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 3 Jul 2012 15:10:45 -0700 Subject: Refactor Code + Bug Fix for the Colorchip disappear between breadcrumb navigation Signed-off-by: Kruti Shah --- js/panels/Timeline/Span.reel/Span.js | 1 - js/panels/Timeline/Style.reel/Style.js | 7 - js/panels/Timeline/Track.reel/Track.html | 63 -------- js/panels/Timeline/Track.reel/Track.js | 187 ---------------------- js/panels/Timeline/Track.reel/css/Track.css | 32 ---- js/panels/Timeline/Track.reel/images/gridline.jpg | Bin 724 -> 0 bytes 6 files changed, 290 deletions(-) delete mode 100644 js/panels/Timeline/Track.reel/Track.html delete mode 100644 js/panels/Timeline/Track.reel/Track.js delete mode 100644 js/panels/Timeline/Track.reel/css/Track.css delete mode 100644 js/panels/Timeline/Track.reel/images/gridline.jpg (limited to 'js') diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 51b9a4ce..f588a0eb 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -177,7 +177,6 @@ var Span = exports.Span = Montage.create(Component, { this.parentTween.easing = this.easing; this.parentTween.tweenData.easing = this.easing; - // Unbind the event handler this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); this.hideEasingMenu(); } diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index c8d323a9..c44a29f6 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -349,12 +349,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { var tweenable = {}, i = 0; - if (this.ruleTweener === true) { - return; - } else { - this.ruleTweener = true; - } - tweenable.tweener = "input"; for (i = 0; i < this._myTweenables.length; i++) { @@ -391,7 +385,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { this._borderSide = tweenable.strokePosition } } - if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { // setup fill color this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; diff --git a/js/panels/Timeline/Track.reel/Track.html b/js/panels/Timeline/Track.reel/Track.html deleted file mode 100644 index 0f0c7c9c..00000000 --- a/js/panels/Timeline/Track.reel/Track.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - - - -
-
-
-
-
- - - \ No newline at end of file diff --git a/js/panels/Timeline/Track.reel/Track.js b/js/panels/Timeline/Track.reel/Track.js deleted file mode 100644 index 2ef760b7..00000000 --- a/js/panels/Timeline/Track.reel/Track.js +++ /dev/null @@ -1,187 +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 defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; - -var Track = exports.Track = Montage.create(Component, { - - track_lane: { - value: null, - serializable: true - }, - - _trackID:{ - value:null - }, - - trackID:{ - get:function(){ - return this._trackID; - }, - set:function(value){ - this._trackID = value; - } - }, - - _spans:{ - value:[] - }, - - spans:{ - serializable:true, - get:function () { - return this._spans; - }, - set:function (newVal) { - this._spans = newVal; - } - }, - - _spanRepetition:{ - value:null - }, - - spanRepetition:{ - get:function () { - return this._spanRepetition; - }, - set:function (newVal) { - this._spanRepetition = newVal; - } - }, - - trackDuration:{ - value:0 - }, - - currentKeyframe:{ - value:0 - }, - - currentMillisecClicked:{ - value: 0 - }, - - isAnimated:{ - value:false - }, - - animatedElement:{ - value:null - }, - - ninjaStylesContoller:{ - value: null - }, - - //TEMP - keyFrames:{ - serializable: true, - value:[] - }, - - prepareForDraw: { - value: function() { - this.keyFrames = new Array(); - this.spans = new Array(); - this.track_lane.addEventListener("click", this, false); - this.addNewEndPoint(0); - - this.ninjaStylesContoller = this.application.ninja.stylesController; - } - }, - - handleNewTween:{ - value: function(event){ - var newTween = Tween.create(); - } - }, - - handleClick:{ - value:function (ev) { - var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - this.currentMillisecClicked = currentMillisecPerPixel * (ev.offsetX + parseInt(ev.target.style.left)); - - // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span - // This needs to move to a keyboard shortcut that is TBD - if (ev.shiftKey) { - var prevFrame = this.keyFrames[this.keyFrames.length - 1][0]; - if (ev.offsetX > prevFrame) { - this.addNewEndPoint(ev.offsetX); - this.currentMillisecClicked = currentMillisecPerPixel * ev.offsetX; - } else { - this.currentMillisecClicked = currentMillisecPerPixel * (ev.offsetX + parseInt(ev.target.style.left)); - this.splitSpan(ev); - } - } - - console.log("currentMillisecClicked = " + this.currentMillisecClicked); - } - }, - - addNewEndPoint : { - value: function(xpos){ - var newKeyFrame = document.createElement("div"); - newKeyFrame.className = "keyframe"; - newKeyFrame.style.left = (xpos - 2) + "px"; - this.track_lane.appendChild(newKeyFrame); - - if(xpos > 0){ - var prevFrame = this.keyFrames[this.keyFrames.length - 1][0]; - - var newDefaultSpan = document.createElement("div"); - newDefaultSpan.className = "defaultSpan"; - newDefaultSpan.style.left = prevFrame + "px"; - newDefaultSpan.style.width = (xpos - prevFrame) + "px"; - this.track_lane.appendChild(newDefaultSpan); - - this.spans.push(newDefaultSpan); - } - - var keyframePercent = this.currentMillisecClicked / this.application.ninja.timeline.totalDuration; - var keyframeProperties; - - //console.log(keyframePercent); - - this.keyFrames.push([xpos, keyframePercent, keyframeProperties]); - //console.log(this.keyFrames) - } - }, - - splitSpan: { - value: function(ev){ - console.log("splitting span at span offsetX: " + ev.offsetX); - - //this.track_lane.removeChild(ev.target); - } - }, - - updateKeyframePercents:{ - value:function(){ - - } - }, - - addAnimationRuleToElement:{ - value: function(){ - - } - }, - - calculateKeyframePercent:{ - value:function() { - - } - }, - - buildKeyframesString:{ - value:function(){ - - } - } -}); \ No newline at end of file diff --git a/js/panels/Timeline/Track.reel/css/Track.css b/js/panels/Timeline/Track.reel/css/Track.css deleted file mode 100644 index b717acf1..00000000 --- a/js/panels/Timeline/Track.reel/css/Track.css +++ /dev/null @@ -1,32 +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. - */ - -.tracklane{ - height: 19px; - width: 100%; - color: white; - padding-top: 2px; - border-bottom: #444; - border-bottom-style: solid; - border-bottom-width: thin; - background-image: url("../images/gridline.jpg"); - overflow: hidden; -} - -.keyframe{ - position: absolute; - height: 16px; - width: 4px; - background-color: white; - -} - -.defaultSpan{ - position: absolute; - height: 16px; - opacity: 0.3; - background-color: white; -} \ No newline at end of file diff --git a/js/panels/Timeline/Track.reel/images/gridline.jpg b/js/panels/Timeline/Track.reel/images/gridline.jpg deleted file mode 100644 index 9f451b0a..00000000 Binary files a/js/panels/Timeline/Track.reel/images/gridline.jpg and /dev/null differ -- 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') 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 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 { - curr