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/panels') 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