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 <jduran@motorola.com>
---
 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 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    	<link rel="stylesheet" type="text/css" href="css/Track.css">
+   		<script type="text/montage-serialization">
+            {
+                "owner": {
+                    "module": "js/panels/Timeline/Track.reel",
+                    "name": "Track",
+                    "properties": {
+                        "element": {"#": "track"},
+                        "spanRepetition" : {"@" : "spanRepetition"},
+                        "track_lane": {"#": "track_lane"}
+                    }
+                },
+
+                "trackslot": {
+                    "module": "montage/ui/slot.reel",
+                    "name": "Slot",
+                    "properties": {
+                        "element": {"#": "track_lane"}
+                    },
+                    "bindings" : {
+                        "content" : {
+                            "boundObject" : {"@": "spanRepetition"},
+                            "boundObjectPropertyPath" : "objectAtCurrentIteration",
+                            "oneway" : false
+                        }
+                    }
+                },
+
+                "spanRepetition": {
+                	"module": "montage/ui/repetition.reel",
+                	"name": "Repetition",
+                	"properties": {
+                	    "element": {"#": "track_lanes"},
+                	        "isSelectionEnabled" : true
+                	},
+                	"bindings": {
+                	    "objects": {
+                	        "boundObject": {"@": "owner"},
+                	        "boundObjectPropertyPath": "spans",
+                	        "oneway": false
+                	    }
+                	}
+                }
+
+            }
+        </script>
+	</head>
+	<body>
+
+    	<div id="track">
+            <div id="track_lanes">
+                <div id="track_lane" class="tracklane"></div>
+            </div>
+    	</div>
+
+    </body>
+</html>
\ 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