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 --- js/panels/Timeline/Track.reel/Track.html | 61 +++++++ js/panels/Timeline/Track.reel/Track.js | 186 ++++++++++++++++++++++ js/panels/Timeline/Track.reel/css/Track.css | 26 +++ js/panels/Timeline/Track.reel/images/gridline.jpg | Bin 0 -> 724 bytes 4 files changed, 273 insertions(+) create mode 100644 js/panels/Timeline/Track.reel/Track.html create mode 100644 js/panels/Timeline/Track.reel/Track.js create mode 100644 js/panels/Timeline/Track.reel/css/Track.css create mode 100644 js/panels/Timeline/Track.reel/images/gridline.jpg (limited to 'js/panels/Timeline/Track.reel') diff --git a/js/panels/Timeline/Track.reel/Track.html b/js/panels/Timeline/Track.reel/Track.html new file mode 100644 index 00000000..c4deab9d --- /dev/null +++ b/js/panels/Timeline/Track.reel/Track.html @@ -0,0 +1,61 @@ + + + + + + + + + +

+ + + \ No newline at end of file diff --git a/js/panels/Timeline/Track.reel/Track.js b/js/panels/Timeline/Track.reel/Track.js new file mode 100644 index 00000000..a60c7cd1 --- /dev/null +++ b/js/panels/Timeline/Track.reel/Track.js @@ -0,0 +1,186 @@ +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; +var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; + +var Track = exports.Track = Montage.create(Component, { + + hasTemplate:{ + value: true + }, + + _trackID:{ + value:null, + writable:true, + enumerable:true + }, + + trackID:{ + get:function(){ + return this._trackID; + }, + set:function(value){ + this._trackID = value; + } + }, + + _spans:{ + serializable:true, + value:[] + }, + + spans:{ + serializable:true, + get:function () { + return this._spans; + }, + set:function (newVal) { + this._spans = newVal; + } + }, + + _spanRepetition:{ + serializable:true, + value:null + }, + + spanRepetition:{ + serializable:true, + get:function () { + return this._spanRepetition; + }, + set:function (newVal) { + this._spanRepetition = newVal; + } + }, + + trackDuration:{ + value:0 + }, + + currentKeyframe:{ + value:0 + }, + + currentMillisecClicked:{ + value: 0 + }, + + isAnimated:{ + value:false + }, + + animatedElement:{ + value:null + }, + + ninjaStylesContoller:{ + value: null + }, + + //TEMP + keyFrames:{ + value:[], + writable:true, + enumerable:true + }, + + prepareForDraw: { + value: function() { + this.keyFrames = new Array(); + this.spans = new Array(); + this.track_lane.addEventListener("click", this, false); + this.addNewEndPoint(0); + + this.ninjaStylesContoller = this.application.ninja.stylesController; + } + }, + + handleNewTween:{ + value: function(event){ + var newTween = Tween.create(); + } + }, + + handleClick:{ + value:function (ev) { + var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.currentMillisecClicked = currentMillisecPerPixel * (ev.offsetX + parseInt(ev.target.style.left)); + + // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span + // This needs to move to a keyboard shortcut that is TBD + if (ev.shiftKey) { + var prevFrame = this.keyFrames[this.keyFrames.length - 1][0]; + if (ev.offsetX > prevFrame) { + this.addNewEndPoint(ev.offsetX); + this.currentMillisecClicked = currentMillisecPerPixel * ev.offsetX; + } else { + this.currentMillisecClicked = currentMillisecPerPixel * (ev.offsetX + parseInt(ev.target.style.left)); + this.splitSpan(ev); + } + } + + console.log("currentMillisecClicked = " + this.currentMillisecClicked); + } + }, + + addNewEndPoint : { + value: function(xpos){ + var newKeyFrame = document.createElement("div"); + newKeyFrame.className = "keyframe"; + newKeyFrame.style.left = (xpos - 2) + "px"; + this.track_lane.appendChild(newKeyFrame); + + if(xpos > 0){ + var prevFrame = this.keyFrames[this.keyFrames.length - 1][0]; + + var newDefaultSpan = document.createElement("div"); + newDefaultSpan.className = "defaultSpan"; + newDefaultSpan.style.left = prevFrame + "px"; + newDefaultSpan.style.width = (xpos - prevFrame) + "px"; + this.track_lane.appendChild(newDefaultSpan); + + this.spans.push(newDefaultSpan); + } + + var keyframePercent = this.currentMillisecClicked / this.application.ninja.timeline.totalDuration; + var keyframeProperties; + + //console.log(keyframePercent); + + this.keyFrames.push([xpos, keyframePercent, keyframeProperties]); + //console.log(this.keyFrames) + } + }, + + splitSpan: { + value: function(ev){ + console.log("splitting span at span offsetX: " + ev.offsetX); + + //this.track_lane.removeChild(ev.target); + } + }, + + updateKeyframePercents:{ + value:function(){ + + } + }, + + addAnimationRuleToElement:{ + value: function(){ + + } + }, + + calculateKeyframePercent:{ + value:function() { + + } + }, + + buildKeyframesString:{ + value:function(){ + + } + } +}); \ No newline at end of file diff --git a/js/panels/Timeline/Track.reel/css/Track.css b/js/panels/Timeline/Track.reel/css/Track.css new file mode 100644 index 00000000..c2353bac --- /dev/null +++ b/js/panels/Timeline/Track.reel/css/Track.css @@ -0,0 +1,26 @@ +.tracklane{ + height: 19px; + width: 100%; + color: white; + padding-top: 2px; + border-bottom: #444; + border-bottom-style: solid; + border-bottom-width: thin; + background-image: url("../images/gridline.jpg"); + overflow: hidden; +} + +.keyframe{ + position: absolute; + height: 16px; + width: 4px; + background-color: white; + +} + +.defaultSpan{ + position: absolute; + height: 16px; + opacity: 0.3; + background-color: white; +} \ No newline at end of file diff --git a/js/panels/Timeline/Track.reel/images/gridline.jpg b/js/panels/Timeline/Track.reel/images/gridline.jpg new file mode 100644 index 00000000..9f451b0a Binary files /dev/null and b/js/panels/Timeline/Track.reel/images/gridline.jpg differ -- cgit v1.2.3