From b7402018659cf8058d5646c08b2a916492269e33 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 07:37:17 -0800 Subject: Timeline Reset to clean Master branch. Code scrub. Fresh copy of ninja-internal/master with Timeline folder copied in to resolved merge issues. Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 42 ++++- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 192 +++++++++++++++------ .../TimelineTrack.reel/css/TimelineTrack.css | 65 +------ .../TimelineTrack.reel/scss/TimelineTrack.scss | 18 +- 4 files changed, 188 insertions(+), 129 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index b0d191c2..4808e4d8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -11,7 +11,8 @@ "properties": { "element": {"#": "track"}, "tweenRepetition" : {"@" : "tweenRepetition"}, - "track_lane": {"#": "track_lanes"} + "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, + "tween": {"@" : "tween"} } }, @@ -37,19 +38,24 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition", "oneway" : false }, - "timelineTrack" : { + "keyFrameMillisec" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.timelineTrack", + "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", "oneway" : false }, - "keyFrameMillisec" : { + "tweenID" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID", "oneway" : false }, - "keyframeID" : { + "tweenedProperties" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.keyframeID", + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties", + "oneway" : false + }, + "isTweenAnimated" : { + "boundObject" : {"@": "tweenRepetition"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", "oneway" : false } } @@ -69,7 +75,25 @@ "oneway": false } } + }, + + "styleTrackRepetition": { + "module": "montage/ui/repetition.reel", + "name": "Repetition", + "properties": { + "element": {"#": "content-styles"}, + "isSelectionEnabled" : false + }, + "bindings": { + "objects": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "arrStyleTracks", + "oneway": false + } + } } + + } @@ -102,8 +126,8 @@
-
- +
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 62688825..1c33a040 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -10,10 +10,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackID:{ - value:null, - writable:true, serializable:true, - enumerable:true + value:null }, trackID:{ @@ -85,21 +83,50 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, - - _tweens:{ + + _arrStyleTracks : { serializable:true, enumerable:true, + value: [] + }, + arrStyleTracks: { + serializable:true, + enumerable:true, + get: function() { + return this._arrStyleTracks; + }, + set: function(newVal) { + this._arrStyleTracks = newVal; + this.needsDraw = true; + } + }, + _styleTracksRepetition: { + serializable: true, + value: null + }, + styleTracksRepetition : { + serializable: true, + get: function() { + return this._styleTracksRepetition; + }, + set: function(newVal) { + this._styleTracksRepetition = newVal; + this.needsDraw = true; + } + }, + + _tweens:{ + enumerable: false, value:[] }, tweens:{ serializable:true, - enumerable:true, get:function () { - return this._spans; + return this._tweens; }, set:function (newVal) { - this._spans = newVal; + this._tweens = newVal; } }, @@ -118,14 +145,51 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + _trackDuration:{ + serializable: true, + value:0 + }, + trackDuration:{ + serializable:true, + get:function () { + return this._trackDuration; + }, + set:function (val) { + this._trackDuration = val; + } + }, + + _trackPosition:{ + serializable:true, value:0 }, - currentKeyframeRule:{ + trackPosition:{ + serializable:true, + get:function () { + return this._trackPosition; + }, + set:function (val) { + this._trackPosition = val; + } + }, + + _currentKeyframeRule:{ + serializable: true, value:null }, + currentKeyframeRule:{ + serializable: true, + get:function(){ + return this._currentKeyframeRule; + }, + set:function(val){ + this._currentKeyframeRule = val; + } + }, + nextKeyframe:{ value:1 }, @@ -134,14 +198,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:0 }, - isAnimated:{ - value:false + _isTrackAnimated:{ + serializable: true, + value:null + }, + + isTrackAnimated:{ + serializable: true, + get:function(){ + return this._isTrackAnimated; + }, + set:function(val){ + this._isTrackAnimated = val; + } }, _animatedElement:{ serializable:true, - enumerable:true, - writable:true, value:null }, @@ -155,12 +228,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - animationName:{ + _animationName:{ + serializable:true, value:null }, - keyFramePropertyData:{ - value:[] + animationName:{ + serializable:true, + get:function () { + return this._animationName; + }, + set:function (val) { + this._animationName = val; + } }, ninjaStylesContoller:{ @@ -184,8 +264,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function () { this.init(); this.ninjaStylesContoller = this.application.ninja.stylesController; - this.track_lane.addEventListener("click", this, false); - this.keyFramePropertyData = new Array(); + this.element.addEventListener("click", this, false); } }, @@ -210,8 +289,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function (ev) { // 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 + + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + //this.application.ninja.timeline.selectLayer(selectIndex); + if (ev.shiftKey) { - if (this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1) { + if (this.application.ninja.timeline.arrLayers[selectedIndex].element.length == 1) { if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -238,36 +321,41 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { insertTween:{ value:function (clickPos) { - // calculate new tween's keyframe percent by clickPos + // calculate new tween's keyframe milliseconds by clickPos var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; // need to check timeline master duration if greater than this track duration this.trackDuration = currentMillisec; + if(this.trackDuration > this.application.ninja.timeline.masterDuration){ + this.application.ninja.timeline.masterDuration = this.trackDuration; + } + var newTween = {}; + if (clickPos == 0) { + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; newTween.spanWidth = 0; newTween.keyFramePosition = 0; newTween.keyFrameMillisec = 0; - newTween.keyframeID = 0; + newTween.tweenID = 0; newTween.spanPosition = 0; - newTween.timelineTrack = this; + newTween.tweenedProperties = []; + newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); } else { newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; newTween.keyFramePosition = clickPos; newTween.keyFrameMillisec = currentMillisec; - newTween.keyframeID = this.nextKeyframe; + newTween.tweenID = this.nextKeyframe; newTween.spanPosition = clickPos - newTween.spanWidth; - newTween.timelineTrack = this; + newTween.tweenedProperties = []; + newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); - var animatedProperties = new Array(); - animatedProperties["top"] = this.keyFramePropertyData[0]["top"]; - animatedProperties["left"] = this.keyFramePropertyData[0]["left"]; - this.keyFramePropertyData[this.nextKeyframe] = animatedProperties; - // update the animation duration var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); @@ -279,32 +367,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - alert("Splitting an existing span with a new keyframe is not yet supported.") + alert("Splitting an existing span with a new keyframe is not yet supported."); //console.log("splitting tween at span offsetX: " + ev.offsetX); } }, addAnimationRuleToElement:{ value:function (tweenEvent) { - this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; - var initAnimatedProperties = new Array(); - initAnimatedProperties["top"] = this.animatedElement.offsetTop; - initAnimatedProperties["left"] = this.animatedElement.offsetLeft; - this.keyFramePropertyData[0] = initAnimatedProperties; - + this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; + this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; - this.animationName = this.animatedElement.className + this.trackID; - + this.animationName = "animation_" + this.animatedElement.className; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); - var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); - - this.isAnimated = true; - this.insertTween(tweenEvent.offsetX); + this.isTrackAnimated = true; } }, @@ -316,18 +396,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for (var i = 0; i < this.keyFramePropertyData.length; i++) { - + for (var i = 0; i < this.tweens.length; i++) { var keyframePercent = Math.round((this.tweens[i].keyFrameMillisec / this.trackDuration) * 100) + "%"; - var keyframePropertyString = " " + keyframePercent + " {"; - keyframePropertyString += "top: " + this.keyFramePropertyData[i]["top"] + "px;"; - keyframePropertyString += " left: " + this.keyFramePropertyData[i]["left"] + "px;"; + keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; + keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; keyframePropertyString += "}"; keyframeString += keyframePropertyString; } keyframeString += " }"; - // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); } @@ -337,7 +414,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { init:{ value:function () { var that = this; - this.label = this.element.querySelector(".label-main"); this.myContent = this.element.querySelector(".content-main"); this.labelPosition = this.element.querySelector(".label-position"); @@ -357,7 +433,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser.isAnimated = true; this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; - } + }; this._mainCollapser.needsDraw = true; this._positionCollapser = Collapser.create(); @@ -370,7 +446,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._positionCollapser.isAnimated = true; this._positionCollapser.labelClickEvent = function () { that.isPositionCollapsed = that._positionCollapser.isCollapsed; - } + }; this._positionCollapser.needsDraw = true; this._transformCollapser = Collapser.create(); @@ -383,20 +459,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._transformCollapser.isAnimated = true; this._transformCollapser.labelClickEvent = function () { that.isTransformCollapsed = that._transformCollapser.isCollapsed; - } + }; this._transformCollapser.needsDraw = true; this._styleCollapser = Collapser.create(); this._styleCollapser.clicker = this.labelStyles; this._styleCollapser.myContent = this.contentStyles; - this._styleCollapser.contentHeight = 60; + this._styleCollapser.contentHeight = 20; this._styleCollapser.isLabelClickable = false; this._styleCollapser.element = this.element; this._styleCollapser.isCollapsed = this.isStyleCollapsed; this._styleCollapser.isAnimated = true; this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; - } + }; this._styleCollapser.needsDraw = true; // Register event handler for layer events. @@ -408,11 +484,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { handleLayerEvent:{ value:function (layerEvent) { - if (layerEvent.layerID !== this.trackID) { return; } - if (layerEvent.layerEventType === "labelClick") { if (layerEvent.layerEventLocale === "content-main") { this._mainCollapser.bypassAnimation = layerEvent.bypassAnimation; @@ -427,6 +501,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; this._styleCollapser.handleCollapserLabelClick(); } + } else if (layerEvent.layerEventType === "newStyle") { + this.arrStyleTracks.push("1"); + if (this._styleCollapser.isCollapsed === true) { + this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._styleCollapser.handleCollapserLabelClick(); + } } } } diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css index ddaccd32..842015e9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css +++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css @@ -2,63 +2,6 @@ /* TimelineTrack.scss * Main SCSS file for TimelineTrack component, compiled by SASS into the file css/TimelineTrack.css. */ -/* - 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. - */ -/* - * _colors.scss - * Defines the colors for the UI of the application. - * To create a new theme, copy this file and change the values as desired. - * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. - */ -/* Colors for radio buttons and other form elements */ -/* Base colors for dividers - * - * Dividers consist of a div with a background color and either - * a top & bottom border (in the case of horizontal dividers) - * or a left & right border (in the case of vertical dividers), - * for a total of three different colors. - * - */ -/* top and left */ -/* Middle */ -/* Bottom and right */ -/* Main background color of entire app */ -/* Main app background color. */ -/* rgba version */ -/* Main app border color */ -/* color of drop shadows */ -/* Stage color */ -/* body border color */ -/* Body background color */ -/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */ -/* Colors for tools: background, text, how they interact with the UI */ -/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */ -/* used for editable items in their non-edit state, etc. */ -/* Border for panel and for block elements */ -/* Shadow for text and block elements */ -/* Colors for scroll bars */ -/* - 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. - */ -/* - * themes/themename/mixins.scss - * Mixins that are theme-dependent (e.g. sprite mixins, etc) - */ -/* - 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. - */ -/* - * mixins.scss - * Generic mixins. Theme-specific mixins (e.g. for sprites) - * should go in the theme/themename/mixins.scss file. - */ /* line 16, ../scss/TimelineTrack.scss */ .tracklane { height: 19px; @@ -113,5 +56,11 @@ /* line 63, ../scss/TimelineTrack.scss */ .tl_layertracks .collapsible-content .timeline-track { - height: 21px; + height: 20px; + border-bottom: 1px solid #505050; +} + +/* line 69, ../scss/TimelineTrack.scss */ +.timeline-track .content-main { + background-color: #474747; } diff --git a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss index c492d18d..01dd948c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss +++ b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss @@ -5,13 +5,13 @@ */ // Import theme settings -@import "../../../../../_scss/imports/themes/default/colors"; -// @import "../../../../../_scss/imports/themes/default/fonts"; -@import "../../../../../_scss/imports/themes/default/mixins"; +@import "../../../../../scss/imports/themes/default/colors"; +// @import "../../../../../scss/imports/themes/default/fonts"; +@import "../../../../../scss/imports/themes/default/mixins"; // Import generic mixins and styles -@import "../../../../../_scss/imports/scss/mixins"; -// @import "../../../../../_scss/imports/scss/Base"; +@import "../../../../../scss/imports/scss/mixins"; +// @import "../../../../../scss/imports/scss/Base"; .tracklane{ height: 19px; @@ -61,5 +61,11 @@ } .tl_layertracks .collapsible-content .timeline-track { - height: 21px; + height: 20px; + border-bottom: 1px solid $color-menu-divider; } + + +.timeline-track .content-main { + background-color: $color-menu-bg; +} -- cgit v1.2.3