From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 13:30:49 -0800 Subject: merge new timeline Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 112 ++++++ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 414 +++++++++++++++++++++ .../TimelineTrack.reel/css/TimelineTrack.css | 117 ++++++ .../TimelineTrack.reel/images/gridline.jpg | Bin 0 -> 724 bytes .../TimelineTrack.reel/scss/TimelineTrack.scss | 65 ++++ .../Timeline/TimelineTrack.reel/scss/config.rb | 9 + 6 files changed, 717 insertions(+) create mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html create mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js create mode 100644 js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css create mode 100644 js/panels/Timeline/TimelineTrack.reel/images/gridline.jpg create mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss create mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/config.rb (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 new file mode 100644 index 00000000..b0d191c2 --- /dev/null +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -0,0 +1,112 @@ + + + + + + + + + +

+ +

+ + + \ No newline at end of file diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js new file mode 100644 index 00000000..13529115 --- /dev/null +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -0,0 +1,414 @@ +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; +var Collapser = require("js/panels/Timeline/Collapser").Collapser; +var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; + +var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { + + hasTemplate:{ + value: true + }, + + _trackID:{ + value:null, + writable:true, + serializable:true, + enumerable:true + }, + + trackID:{ + serializable:true, + get:function(){ + return this._trackID; + }, + set:function(value){ + this._trackID = value; + this.needsDraw = true; + } + }, + + // Are the various collapsers collapsed or not + _isMainCollapsed : { + value: "" + }, + isMainCollapsed : { + get: function() { + return this._isMainCollapsed; + }, + set: function(newVal) { + if (newVal !== this._isMainCollapsed) { + this._isMainCollapsed = newVal; + this.needsDraw = true; + } + + } + }, + _isTransformCollapsed : { + value: true + }, + isTransformCollapsed : { + get: function() { + return this._isTransformCollapsed; + }, + set: function(newVal) { + if (newVal !== this._isTransformCollapsed) { + this._isTransformCollapsed = newVal; + this.needsDraw = true; + } + } + }, + _isPositionCollapsed : { + value: true + }, + isPositionCollapsed : { + get: function() { + return this._isPositionCollapsed; + }, + set: function(newVal) { + if (newVal !== this._isPositionCollapsed) { + this._isPositionCollapsed = newVal; + this.needsDraw = true; + } + } + }, + _isStyleCollapsed : { + value: true + }, + isStyleCollapsed : { + get: function() { + return this._isStyleCollapsed; + }, + set: function(newVal) { + if (newVal !== this._isStyleCollapsed) { + this._isStyleCollapsed = newVal; + this.needsDraw = true; + } + } + }, + + _tweens:{ + serializable: true, + enumerable: true, + value: [] + }, + + tweens:{ + serializable: true, + enumerable: true, + get:function () { + return this._spans; + }, + set:function (newVal) { + this._spans = newVal; + } + }, + + _tweenRepetition:{ + serializable:true, + value:null + }, + + tweenRepetition:{ + serializable:true, + get:function () { + return this._spanRepetition; + }, + set:function (newVal) { + this._spanRepetition = newVal; + } + }, + + trackDuration:{ + value:0 + }, + + currentKeyframeRule:{ + value:null + }, + + nextKeyframe:{ + value:1 + }, + + currentMillisecClicked:{ + value: 0 + }, + + isAnimated:{ + value:false + }, + + animatedElement:{ + value:null + }, + + animationName:{ + value:null + }, + + keyFramePropertyData:{ + value:[] + }, + + ninjaStylesContoller:{ + value: null + }, + + _positionCollapser : { + value: null + }, + _mainCollapser: { + value: null + }, + _transformCollapser: { + value: null + }, + _styleCollapser: { + value: null + }, + + prepareForDraw: { + value: function() { + this.init(); + this.ninjaStylesContoller = this.application.ninja.stylesController; + this.track_lane.addEventListener("click", this, false); + this.keyFramePropertyData = new Array(); + //this.insertTween(0); + } + }, + + draw: { + value: function() { + if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { + this._mainCollapser.toggle(false); + } + if (this._positionCollapser.isCollapsed !== this.isPositionCollapsed) { + this._positionCollapser.toggle(false); + } + if (this._transformCollapser.isCollapsed !== this.isTransformCollapsed) { + this._transformCollapser.toggle(false); + } + if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) { + this._styleCollapser.toggle(false); + } + } + }, + + handleClick:{ + 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 + if (ev.shiftKey) { + if (this.tweens.length < 1) { + this.addAnimationRuleToElement(); + this.insertTween(0); + } + this.handleNewTween(ev); + } + } + }, + + handleNewTween:{ + value: function(ev){ + if(ev.offsetX > this.tweens[this.tweens.length-1].keyFramePosition){ + this.insertTween(ev.offsetX); + } else { + this.splitTween(ev); + } + } + }, + + insertTween:{ + value:function (clickPos) { + + // calculate new tween's keyframe percent 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; + + var newTween = {}; + if (this.tweens.length < 1) { + newTween.spanWidth = 0; + newTween.keyFramePosition = 0; + newTween.keyFrameMillisec = 0; + newTween.keyframeID = 0; + newTween.spanPosition = 0; + newTween.timelineTrack = this; + 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.spanPosition = clickPos - newTween.spanWidth; + newTween.timelineTrack = this; + 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); + + this.nextKeyframe += 1; + } + } + }, + + splitTween: { + value: function(ev){ + console.log("splitting tween at span offsetX: " + ev.offsetX); + } + }, + + addAnimationRuleToElement:{ + value: function(){ + var theElement = this.application.ninja.currentDocument._document.getElementById(this.application.ninja.timeline.arrLayers[this.trackID - 1].layerName); + this.animatedElement = theElement; + + var initAnimatedProperties = new Array(); + initAnimatedProperties["top"] = theElement.offsetTop; + initAnimatedProperties["left"] = theElement.offsetLeft; + this.keyFramePropertyData[0] = initAnimatedProperties; + + var animationDuration = Math.round(this.trackDuration/1000) + "s"; + this.animationName = "testAnimation" + this.trackID; + + this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-name", this.animationName); + this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-duration", animationDuration); + this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-iteration-count", "infinite"); + + var initRule = "@-webkit-keyframes testAnim { 0% {top: "+theElement.offsetTop+"px; left: "+theElement.offsetLeft+"px;} 100% {top: "+theElement.offsetTop+"px; left: "+theElement.offsetLeft+"px;} }"; + this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); + + this.isAnimated = true; + } + }, + + updateKeyframeRule:{ + value:function(){ + // delete the current rule + this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); + + // build the new keyframe string + var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; + + for(var i=0;i < this.keyFramePropertyData.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 += "}"; + keyframeString += keyframePropertyString; + } + keyframeString += " }"; + + // set the keyframe string as the new rule + this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); + } + }, + + // Init and event handler for layer expand/collapse + 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"); + this.contentPosition = this.element.querySelector(".content-position"); + this.labelTransform = this.element.querySelector(".label-transform"); + this.contentTransform = this.element.querySelector(".content-transform"); + this.labelStyles = this.element.querySelector(".label-styles"); + this.contentStyles = this.element.querySelector(".content-styles"); + + this._mainCollapser = Collapser.create(); + this._mainCollapser.clicker = this.label; + this._mainCollapser.myContent = this.myContent; + this._mainCollapser.contentHeight = 60; + this._mainCollapser.isLabelClickable = false; + this._mainCollapser.element = this.element; + this._mainCollapser.isCollapsed = this.isMainCollapsed; + this._mainCollapser.isAnimated = true; + this._mainCollapser.labelClickEvent = function() { + that.isMainCollapsed = that._mainCollapser.isCollapsed; + } + this._mainCollapser.needsDraw = true; + + this._positionCollapser = Collapser.create(); + this._positionCollapser.clicker = this.labelPosition; + this._positionCollapser.myContent = this.contentPosition; + this._positionCollapser.contentHeight = 60; + this._positionCollapser.isLabelClickable = true; + this._positionCollapser.element = this.element; + this._positionCollapser.isCollapsed = this.isPositionCollapsed; + this._positionCollapser.isAnimated = true; + this._positionCollapser.labelClickEvent = function() { + that.isPositionCollapsed = that._positionCollapser.isCollapsed; + } + this._positionCollapser.needsDraw = true; + + this._transformCollapser = Collapser.create(); + this._transformCollapser.clicker = this.labelTransform; + this._transformCollapser.myContent = this.contentTransform; + this._transformCollapser.contentHeight = 100; + this._transformCollapser.isLabelClickable = false; + this._transformCollapser.element = this.element; + this._transformCollapser.isCollapsed = this.isTransformCollapsed; + 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.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. + var that = this; + defaultEventManager.addEventListener("layerEvent", this, false); + + } + }, + handleLayerEvent : { + value: function(layerEvent) { + + if (layerEvent.layerID !== this.trackID) { + return; + } + + if (layerEvent.layerEventType === "labelClick") { + if (layerEvent.layerEventLocale === "content-main") { + this._mainCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._mainCollapser.toggle(); + } else if (layerEvent.layerEventLocale === "content-position") { + this._positionCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._positionCollapser.handleCollapserLabelClick(); + } else if (layerEvent.layerEventLocale === "content-transform") { + this._transformCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._transformCollapser.handleCollapserLabelClick(); + } else if (layerEvent.layerEventLocale === "content-style") { + this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._styleCollapser.handleCollapserLabelClick(); + } + } + } + } +}); \ No newline at end of file diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css new file mode 100644 index 00000000..ddaccd32 --- /dev/null +++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css @@ -0,0 +1,117 @@ +@charset "UTF-8"; +/* 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; + 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; +} + +/* line 28, ../scss/TimelineTrack.scss */ +.keyframe { + position: absolute; + height: 16px; + width: 4px; + background-color: white; +} + +/* line 36, ../scss/TimelineTrack.scss */ +.defaultSpan { + position: absolute; + height: 16px; + opacity: 0.3; + background-color: white; +} + +/* line 45, ../scss/TimelineTrack.scss */ +.tl_layertracks .content-position { + height: 63px; +} + +/* line 48, ../scss/TimelineTrack.scss */ +.tl_layertracks .content-transform { + height: 106px; +} + +/* line 52, ../scss/TimelineTrack.scss */ +.tl_layertracks .collapsible-content.collapsible-collapsed { + overflow: hidden; + height: 0px; +} + +/* line 57, ../scss/TimelineTrack.scss */ +.tl_layertracks .collapsible-content .collapsible-label { + height: 21px; + background-color: #474747; + color: white; +} + +/* line 63, ../scss/TimelineTrack.scss */ +.tl_layertracks .collapsible-content .timeline-track { + height: 21px; +} diff --git a/js/panels/Timeline/TimelineTrack.reel/images/gridline.jpg b/js/panels/Timeline/TimelineTrack.reel/images/gridline.jpg new file mode 100644 index 00000000..9f451b0a Binary files /dev/null and b/js/panels/Timeline/TimelineTrack.reel/images/gridline.jpg differ diff --git a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss new file mode 100644 index 00000000..c492d18d --- /dev/null +++ b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss @@ -0,0 +1,65 @@ +@charset "UTF-8"; + +/* TimelineTrack.scss + * Main SCSS file for TimelineTrack component, compiled by SASS into the file css/TimelineTrack.css. + */ + +// Import theme settings +@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"; + +.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; +} + + + +.tl_layertracks .content-position { + height: 63px; +} +.tl_layertracks .content-transform { + height: 106px; +} + +.tl_layertracks .collapsible-content.collapsible-collapsed { + overflow: hidden; + height: 0px; +} + +.tl_layertracks .collapsible-content .collapsible-label { + height: 21px; + background-color: $color-panel-bg; + color: $color-panel-text; + +} + .tl_layertracks .collapsible-content .timeline-track { + height: 21px; + } diff --git a/js/panels/Timeline/TimelineTrack.reel/scss/config.rb b/js/panels/Timeline/TimelineTrack.reel/scss/config.rb new file mode 100644 index 00000000..e5a99b70 --- /dev/null +++ b/js/panels/Timeline/TimelineTrack.reel/scss/config.rb @@ -0,0 +1,9 @@ +# Require any additional compass plugins here. +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "../css" +sass_dir = "" +images_dir = "../images/" +javascripts_dir = "../js" +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true -- cgit v1.2.3 From 156b0648c6b046f74303221ce632a49fb28c9a8a Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 7 Feb 2012 07:50:50 -0800 Subject: Hookup track animations to layer element Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 13529115..5b1354d2 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -199,11 +199,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // 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) { - if (this.tweens.length < 1) { - this.addAnimationRuleToElement(); - this.insertTween(0); + if(this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1){ + if (this.tweens.length < 1) { + this.addAnimationRuleToElement(); + this.insertTween(0); + } + this.handleNewTween(ev); + } else { + alert("There much be only one element in an animated layer.") } - this.handleNewTween(ev); + } } }, @@ -268,7 +273,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { addAnimationRuleToElement:{ value: function(){ - var theElement = this.application.ninja.currentDocument._document.getElementById(this.application.ninja.timeline.arrLayers[this.trackID - 1].layerName); + var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]; this.animatedElement = theElement; var initAnimatedProperties = new Array(); -- cgit v1.2.3 From a8c16ca440b8ded3b78b59c767539e8c080680e7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 16:12:58 -0800 Subject: Squashed commit of the following: commit 46292bddbfbe7415c6852142dd10fd02a276722a Author: Jon Reid Date: Wed Feb 8 14:32:22 2012 -0800 Timeline: turn off console logging. commit b8de88393182bc6e819c3d6a290ade2f804236ac Merge: e651344 37b952c Author: Jon Reid Date: Wed Feb 8 14:10:06 2012 -0800 Merge branch 'Timeline-jduran' into Timeline-jreid commit e651344d5d6c2911b31a54510c65a349c4d52db2 Author: Jon Reid Date: Wed Feb 8 14:08:25 2012 -0800 Timeline: Bug fixes IKNINJA-947: Weird behavior with adding layers with an empty layer name selected IKNINJA-990: Multiple styles can be highlighted at the same time even when they are under different layers IKNINJA-1063: Styles can be added while style column is collapsed IKNINJA-970: When there is no style added yet, the arrow sign should be in a collapsed mode Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 5b1354d2..ae7eb001 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -414,6 +414,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleCollapser.handleCollapserLabelClick(); } } + /* + if (layerEvent.layerEventType === "newStyle") { + var newDiv = document.createElement("div"); + newDiv.classList.add("timeline-track"); + this.contentStyles.appendChild(newDiv); + } + */ } } }); \ No newline at end of file -- cgit v1.2.3 From c84c9c97b4aa8f6b6d8e18b628e083c66ae3eb6b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 21:50:50 -0800 Subject: Display time reading above layers and code clean up Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 421 ++++++++++----------- 1 file changed, 208 insertions(+), 213 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index ae7eb001..f9d3ad6b 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -6,7 +6,7 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { hasTemplate:{ - value: true + value:true }, _trackID:{ @@ -18,83 +18,83 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { trackID:{ serializable:true, - get:function(){ + get:function () { return this._trackID; }, - set:function(value){ + set:function (value) { this._trackID = value; this.needsDraw = true; } }, - + // Are the various collapsers collapsed or not - _isMainCollapsed : { - value: "" - }, - isMainCollapsed : { - get: function() { - return this._isMainCollapsed; - }, - set: function(newVal) { - if (newVal !== this._isMainCollapsed) { - this._isMainCollapsed = newVal; - this.needsDraw = true; - } - - } - }, - _isTransformCollapsed : { - value: true - }, - isTransformCollapsed : { - get: function() { - return this._isTransformCollapsed; - }, - set: function(newVal) { - if (newVal !== this._isTransformCollapsed) { - this._isTransformCollapsed = newVal; - this.needsDraw = true; - } - } - }, - _isPositionCollapsed : { - value: true - }, - isPositionCollapsed : { - get: function() { - return this._isPositionCollapsed; - }, - set: function(newVal) { - if (newVal !== this._isPositionCollapsed) { - this._isPositionCollapsed = newVal; - this.needsDraw = true; - } - } - }, - _isStyleCollapsed : { - value: true - }, - isStyleCollapsed : { - get: function() { - return this._isStyleCollapsed; - }, - set: function(newVal) { - if (newVal !== this._isStyleCollapsed) { - this._isStyleCollapsed = newVal; - this.needsDraw = true; - } - } + _isMainCollapsed:{ + value:"" + }, + isMainCollapsed:{ + get:function () { + return this._isMainCollapsed; + }, + set:function (newVal) { + if (newVal !== this._isMainCollapsed) { + this._isMainCollapsed = newVal; + this.needsDraw = true; + } + + } + }, + _isTransformCollapsed:{ + value:true + }, + isTransformCollapsed:{ + get:function () { + return this._isTransformCollapsed; + }, + set:function (newVal) { + if (newVal !== this._isTransformCollapsed) { + this._isTransformCollapsed = newVal; + this.needsDraw = true; + } + } + }, + _isPositionCollapsed:{ + value:true + }, + isPositionCollapsed:{ + get:function () { + return this._isPositionCollapsed; + }, + set:function (newVal) { + if (newVal !== this._isPositionCollapsed) { + this._isPositionCollapsed = newVal; + this.needsDraw = true; + } + } + }, + _isStyleCollapsed:{ + value:true + }, + isStyleCollapsed:{ + get:function () { + return this._isStyleCollapsed; + }, + set:function (newVal) { + if (newVal !== this._isStyleCollapsed) { + this._isStyleCollapsed = newVal; + this.needsDraw = true; + } + } }, _tweens:{ - serializable: true, - enumerable: true, - value: [] + serializable:true, + enumerable:true, + value:[] }, tweens:{ - serializable: true, - enumerable: true, + serializable:true, + enumerable:true, get:function () { return this._spans; }, @@ -131,7 +131,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, currentMillisecClicked:{ - value: 0 + value:0 }, isAnimated:{ @@ -151,47 +151,47 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, ninjaStylesContoller:{ - value: null - }, - - _positionCollapser : { - value: null - }, - _mainCollapser: { - value: null - }, - _transformCollapser: { - value: null - }, - _styleCollapser: { - value: null - }, - - prepareForDraw: { - value: function() { - this.init(); + value:null + }, + + _positionCollapser:{ + value:null + }, + _mainCollapser:{ + value:null + }, + _transformCollapser:{ + value:null + }, + _styleCollapser:{ + value:null + }, + + prepareForDraw:{ + value:function () { + this.init(); this.ninjaStylesContoller = this.application.ninja.stylesController; this.track_lane.addEventListener("click", this, false); this.keyFramePropertyData = new Array(); //this.insertTween(0); } }, - - draw: { - value: function() { - if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { - this._mainCollapser.toggle(false); + + draw:{ + value:function () { + if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { + this._mainCollapser.toggle(false); } - if (this._positionCollapser.isCollapsed !== this.isPositionCollapsed) { - this._positionCollapser.toggle(false); + if (this._positionCollapser.isCollapsed !== this.isPositionCollapsed) { + this._positionCollapser.toggle(false); } - if (this._transformCollapser.isCollapsed !== this.isTransformCollapsed) { - this._transformCollapser.toggle(false); + if (this._transformCollapser.isCollapsed !== this.isTransformCollapsed) { + this._transformCollapser.toggle(false); } - if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) { - this._styleCollapser.toggle(false); + if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) { + this._styleCollapser.toggle(false); } - } + } }, handleClick:{ @@ -199,23 +199,22 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // 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) { - if(this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1){ + if (this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1) { if (this.tweens.length < 1) { - this.addAnimationRuleToElement(); this.insertTween(0); + this.addAnimationRuleToElement(); } this.handleNewTween(ev); } else { - alert("There much be only one element in an animated layer.") + alert("There must be exactly one element in an animated layer.") } - } } }, handleNewTween:{ - value: function(ev){ - if(ev.offsetX > this.tweens[this.tweens.length-1].keyFramePosition){ + value:function (ev) { + if (ev.offsetX > this.tweens[this.tweens.length - 1].keyFramePosition) { this.insertTween(ev.offsetX); } else { this.splitTween(ev); @@ -234,7 +233,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackDuration = currentMillisec; var newTween = {}; - if (this.tweens.length < 1) { + if (clickPos == 0) { newTween.spanWidth = 0; newTween.keyFramePosition = 0; newTween.keyFrameMillisec = 0; @@ -243,7 +242,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.timelineTrack = this; this.tweens.push(newTween); } else { - newTween.spanWidth = clickPos - this.tweens[this.tweens.length-1].keyFramePosition; + newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; newTween.keyFramePosition = clickPos; newTween.keyFrameMillisec = currentMillisec; newTween.keyframeID = this.nextKeyframe; @@ -257,7 +256,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.keyFramePropertyData[this.nextKeyframe] = animatedProperties; // update the animation duration - var animationDuration = Math.round(this.trackDuration/1000) + "s"; + var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.nextKeyframe += 1; @@ -265,14 +264,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - splitTween: { - value: function(ev){ + splitTween:{ + value:function (ev) { console.log("splitting tween at span offsetX: " + ev.offsetX); } }, addAnimationRuleToElement:{ - value: function(){ + value:function () { var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]; this.animatedElement = theElement; @@ -281,14 +280,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { initAnimatedProperties["left"] = theElement.offsetLeft; this.keyFramePropertyData[0] = initAnimatedProperties; - var animationDuration = Math.round(this.trackDuration/1000) + "s"; - this.animationName = "testAnimation" + this.trackID; + var animationDuration = Math.round(this.trackDuration / 1000) + "s"; + //console.log(this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]); + //console.log(this.trackID); + this.animationName = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0].className + this.trackID; this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-name", this.animationName); this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-iteration-count", "infinite"); - var initRule = "@-webkit-keyframes testAnim { 0% {top: "+theElement.offsetTop+"px; left: "+theElement.offsetLeft+"px;} 100% {top: "+theElement.offsetTop+"px; left: "+theElement.offsetLeft+"px;} }"; + var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + theElement.offsetTop + "px; left: " + theElement.offsetLeft + "px;} 100% {top: " + theElement.offsetTop + "px; left: " + theElement.offsetLeft + "px;} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.isAnimated = true; @@ -296,16 +297,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, updateKeyframeRule:{ - value:function(){ + value:function () { // delete the current rule this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for(var i=0;i < this.keyFramePropertyData.length;i++){ + for (var i = 0; i < this.keyFramePropertyData.length; i++) { - var keyframePercent = Math.round((this.tweens[i].keyFrameMillisec/this.trackDuration)*100) + "%"; + var keyframePercent = Math.round((this.tweens[i].keyFrameMillisec / this.trackDuration) * 100) + "%"; var keyframePropertyString = " " + keyframePercent + " {"; keyframePropertyString += "top: " + this.keyFramePropertyData[i]["top"] + "px;"; @@ -321,106 +322,100 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, // Init and event handler for layer expand/collapse - 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"); - this.contentPosition = this.element.querySelector(".content-position"); - this.labelTransform = this.element.querySelector(".label-transform"); - this.contentTransform = this.element.querySelector(".content-transform"); - this.labelStyles = this.element.querySelector(".label-styles"); - this.contentStyles = this.element.querySelector(".content-styles"); - - this._mainCollapser = Collapser.create(); - this._mainCollapser.clicker = this.label; - this._mainCollapser.myContent = this.myContent; - this._mainCollapser.contentHeight = 60; - this._mainCollapser.isLabelClickable = false; - this._mainCollapser.element = this.element; - this._mainCollapser.isCollapsed = this.isMainCollapsed; - this._mainCollapser.isAnimated = true; - this._mainCollapser.labelClickEvent = function() { - that.isMainCollapsed = that._mainCollapser.isCollapsed; + 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"); + this.contentPosition = this.element.querySelector(".content-position"); + this.labelTransform = this.element.querySelector(".label-transform"); + this.contentTransform = this.element.querySelector(".content-transform"); + this.labelStyles = this.element.querySelector(".label-styles"); + this.contentStyles = this.element.querySelector(".content-styles"); + + this._mainCollapser = Collapser.create(); + this._mainCollapser.clicker = this.label; + this._mainCollapser.myContent = this.myContent; + this._mainCollapser.contentHeight = 60; + this._mainCollapser.isLabelClickable = false; + this._mainCollapser.element = this.element; + this._mainCollapser.isCollapsed = this.isMainCollapsed; + this._mainCollapser.isAnimated = true; + this._mainCollapser.labelClickEvent = function () { + that.isMainCollapsed = that._mainCollapser.isCollapsed; + } + this._mainCollapser.needsDraw = true; + + this._positionCollapser = Collapser.create(); + this._positionCollapser.clicker = this.labelPosition; + this._positionCollapser.myContent = this.contentPosition; + this._positionCollapser.contentHeight = 60; + this._positionCollapser.isLabelClickable = true; + this._positionCollapser.element = this.element; + this._positionCollapser.isCollapsed = this.isPositionCollapsed; + this._positionCollapser.isAnimated = true; + this._positionCollapser.labelClickEvent = function () { + that.isPositionCollapsed = that._positionCollapser.isCollapsed; } - this._mainCollapser.needsDraw = true; - - this._positionCollapser = Collapser.create(); - this._positionCollapser.clicker = this.labelPosition; - this._positionCollapser.myContent = this.contentPosition; - this._positionCollapser.contentHeight = 60; - this._positionCollapser.isLabelClickable = true; - this._positionCollapser.element = this.element; - this._positionCollapser.isCollapsed = this.isPositionCollapsed; - this._positionCollapser.isAnimated = true; - this._positionCollapser.labelClickEvent = function() { - that.isPositionCollapsed = that._positionCollapser.isCollapsed; + this._positionCollapser.needsDraw = true; + + this._transformCollapser = Collapser.create(); + this._transformCollapser.clicker = this.labelTransform; + this._transformCollapser.myContent = this.contentTransform; + this._transformCollapser.contentHeight = 100; + this._transformCollapser.isLabelClickable = false; + this._transformCollapser.element = this.element; + this._transformCollapser.isCollapsed = this.isTransformCollapsed; + this._transformCollapser.isAnimated = true; + this._transformCollapser.labelClickEvent = function () { + that.isTransformCollapsed = that._transformCollapser.isCollapsed; } - this._positionCollapser.needsDraw = true; - - this._transformCollapser = Collapser.create(); - this._transformCollapser.clicker = this.labelTransform; - this._transformCollapser.myContent = this.contentTransform; - this._transformCollapser.contentHeight = 100; - this._transformCollapser.isLabelClickable = false; - this._transformCollapser.element = this.element; - this._transformCollapser.isCollapsed = this.isTransformCollapsed; - 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.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. + var that = this; + defaultEventManager.addEventListener("layerEvent", this, false); + + } + }, + + handleLayerEvent:{ + value:function (layerEvent) { + + if (layerEvent.layerID !== this.trackID) { + return; } - this._transformCollapser.needsDraw = true; - - this._styleCollapser = Collapser.create(); - this._styleCollapser.clicker = this.labelStyles; - this._styleCollapser.myContent = this.contentStyles; - this._styleCollapser.contentHeight = 60; - 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; + + if (layerEvent.layerEventType === "labelClick") { + if (layerEvent.layerEventLocale === "content-main") { + this._mainCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._mainCollapser.toggle(); + } else if (layerEvent.layerEventLocale === "content-position") { + this._positionCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._positionCollapser.handleCollapserLabelClick(); + } else if (layerEvent.layerEventLocale === "content-transform") { + this._transformCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._transformCollapser.handleCollapserLabelClick(); + } else if (layerEvent.layerEventLocale === "content-style") { + this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._styleCollapser.handleCollapserLabelClick(); + } } - this._styleCollapser.needsDraw = true; - - // Register event handler for layer events. - var that = this; - defaultEventManager.addEventListener("layerEvent", this, false); - - } - }, - handleLayerEvent : { - value: function(layerEvent) { - - if (layerEvent.layerID !== this.trackID) { - return; - } - - if (layerEvent.layerEventType === "labelClick") { - if (layerEvent.layerEventLocale === "content-main") { - this._mainCollapser.bypassAnimation = layerEvent.bypassAnimation; - this._mainCollapser.toggle(); - } else if (layerEvent.layerEventLocale === "content-position") { - this._positionCollapser.bypassAnimation = layerEvent.bypassAnimation; - this._positionCollapser.handleCollapserLabelClick(); - } else if (layerEvent.layerEventLocale === "content-transform") { - this._transformCollapser.bypassAnimation = layerEvent.bypassAnimation; - this._transformCollapser.handleCollapserLabelClick(); - } else if (layerEvent.layerEventLocale === "content-style") { - this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; - this._styleCollapser.handleCollapserLabelClick(); - } - } - /* - if (layerEvent.layerEventType === "newStyle") { - var newDiv = document.createElement("div"); - newDiv.classList.add("timeline-track"); - this.contentStyles.appendChild(newDiv); - } - */ - } - } + } + } }); \ No newline at end of file -- cgit v1.2.3 From 112ba5f5beea03010d40a53a64bfa9595e0faa88 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 9 Feb 2012 09:09:01 -0800 Subject: Cleaning up more code and adding more models for timeline Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f9d3ad6b..dde01a2c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -173,7 +173,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.ninjaStylesContoller = this.application.ninja.stylesController; this.track_lane.addEventListener("click", this, false); this.keyFramePropertyData = new Array(); - //this.insertTween(0); } }, @@ -202,9 +201,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1) { if (this.tweens.length < 1) { this.insertTween(0); - this.addAnimationRuleToElement(); + this.addAnimationRuleToElement(ev); + } else { + this.handleNewTween(ev); } - this.handleNewTween(ev); } else { alert("There must be exactly one element in an animated layer.") } @@ -266,12 +266,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - console.log("splitting tween at span offsetX: " + ev.offsetX); + 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 () { + value:function (tweenEvent) { var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]; this.animatedElement = theElement; @@ -293,6 +294,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.isAnimated = true; + + this.insertTween(tweenEvent.offsetX); } }, -- cgit v1.2.3 From a822fec0e8e044b647306ed50619cb9a818269e4 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 9 Feb 2012 11:17:47 -0800 Subject: Fixes for animation element assignment Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 35 ++++++++++++++-------- 1 file changed, 22 insertions(+), 13 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index dde01a2c..62688825 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -138,10 +138,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:false }, - animatedElement:{ + _animatedElement:{ + serializable:true, + enumerable:true, + writable:true, value:null }, + animatedElement:{ + serializable:true, + get:function () { + return this._animatedElement; + }, + set:function (val) { + this._animatedElement = val; + } + }, + animationName:{ value:null }, @@ -273,24 +286,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { addAnimationRuleToElement:{ value:function (tweenEvent) { - var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]; - this.animatedElement = theElement; - + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; var initAnimatedProperties = new Array(); - initAnimatedProperties["top"] = theElement.offsetTop; - initAnimatedProperties["left"] = theElement.offsetLeft; + initAnimatedProperties["top"] = this.animatedElement.offsetTop; + initAnimatedProperties["left"] = this.animatedElement.offsetLeft; this.keyFramePropertyData[0] = initAnimatedProperties; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; - //console.log(this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]); - //console.log(this.trackID); - this.animationName = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0].className + this.trackID; + this.animationName = this.animatedElement.className + this.trackID; - this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-name", this.animationName); - this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-duration", animationDuration); - this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-iteration-count", "infinite"); + 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: " + theElement.offsetTop + "px; left: " + theElement.offsetLeft + "px;} 100% {top: " + theElement.offsetTop + "px; left: " + theElement.offsetLeft + "px;} }"; + 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; -- cgit v1.2.3 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": { +