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.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.") } } } }, 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.timeline.arrLayers[this.trackID - 1].element[0]; 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(); } } } } });