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