aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Track.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Track.reel')
-rw-r--r--js/panels/Timeline/Track.reel/Track.html66
-rw-r--r--js/panels/Timeline/Track.reel/Track.js192
-rw-r--r--js/panels/Timeline/Track.reel/css/Track.css32
-rw-r--r--js/panels/Timeline/Track.reel/images/gridline.jpgbin0 -> 724 bytes
4 files changed, 290 insertions, 0 deletions
diff --git a/js/panels/Timeline/Track.reel/Track.html b/js/panels/Timeline/Track.reel/Track.html
new file mode 100644
index 00000000..39b387e2
--- /dev/null
+++ b/js/panels/Timeline/Track.reel/Track.html
@@ -0,0 +1,66 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html lang="en">
8 <head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="css/Track.css">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module": "js/panels/Timeline/Track.reel",
15 "name": "Track",
16 "properties": {
17 "element": {"#": "track"},
18 "spanRepetition" : {"@" : "spanRepetition"},
19 "track_lane": {"#": "track_lane"}
20 }
21 },
22
23 "trackslot": {
24 "module": "montage/ui/slot.reel",
25 "name": "Slot",
26 "properties": {
27 "element": {"#": "track_lane"}
28 },
29 "bindings" : {
30 "content" : {
31 "boundObject" : {"@": "spanRepetition"},
32 "boundObjectPropertyPath" : "objectAtCurrentIteration",
33 "oneway" : false
34 }
35 }
36 },
37
38 "spanRepetition": {
39 "module": "montage/ui/repetition.reel",
40 "name": "Repetition",
41 "properties": {
42 "element": {"#": "track_lanes"},
43 "isSelectionEnabled" : true
44 },
45 "bindings": {
46 "objects": {
47 "boundObject": {"@": "owner"},
48 "boundObjectPropertyPath": "spans",
49 "oneway": false
50 }
51 }
52 }
53
54 }
55 </script>
56 </head>
57 <body>
58
59 <div id="track">
60 <div id="track_lanes">
61 <div id="track_lane" class="tracklane"></div>
62 </div>
63 </div>
64
65 </body>
66</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..cfc2541b
--- /dev/null
+++ b/js/panels/Timeline/Track.reel/Track.js
@@ -0,0 +1,192 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component;
9var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
10
11var Track = exports.Track = Montage.create(Component, {
12
13 hasTemplate:{
14 value: true
15 },
16
17 _trackID:{
18 value:null,
19 writable:true,
20 enumerable:true
21 },
22
23 trackID:{
24 get:function(){
25 return this._trackID;
26 },
27 set:function(value){
28 this._trackID = value;
29 }
30 },
31
32 _spans:{
33 serializable:true,
34 value:[]
35 },
36
37 spans:{
38 serializable:true,
39 get:function () {
40 return this._spans;
41 },
42 set:function (newVal) {
43 this._spans = newVal;
44 }
45 },
46
47 _spanRepetition:{
48 serializable:true,
49 value:null
50 },
51
52 spanRepetition:{
53 serializable:true,
54 get:function () {
55 return this._spanRepetition;
56 },
57 set:function (newVal) {
58 this._spanRepetition = newVal;
59 }
60 },
61
62 trackDuration:{
63 value:0
64 },
65
66 currentKeyframe:{
67 value:0
68 },
69
70 currentMillisecClicked:{
71 value: 0
72 },
73
74 isAnimated:{
75 value:false
76 },
77
78 animatedElement:{
79 value:null
80 },
81
82 ninjaStylesContoller:{
83 value: null
84 },
85
86 //TEMP
87 keyFrames:{
88 value:[],
89 writable:true,
90 enumerable:true
91 },
92
93 prepareForDraw: {
94 value: function() {
95 this.keyFrames = new Array();
96 this.spans = new Array();
97 this.track_lane.addEventListener("click", this, false);
98 this.addNewEndPoint(0);
99
100 this.ninjaStylesContoller = this.application.ninja.stylesController;
101 }
102 },
103
104 handleNewTween:{
105 value: function(event){
106 var newTween = Tween.create();
107 }
108 },
109
110 handleClick:{
111 value:function (ev) {
112 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
113 this.currentMillisecClicked = currentMillisecPerPixel * (ev.offsetX + parseInt(ev.target.style.left));
114
115 // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span
116 // This needs to move to a keyboard shortcut that is TBD
117 if (ev.shiftKey) {
118 var prevFrame = this.keyFrames[this.keyFrames.length - 1][0];
119 if (ev.offsetX > prevFrame) {
120 this.addNewEndPoint(ev.offsetX);
121 this.currentMillisecClicked = currentMillisecPerPixel * ev.offsetX;
122 } else {
123 this.currentMillisecClicked = currentMillisecPerPixel * (ev.offsetX + parseInt(ev.target.style.left));
124 this.splitSpan(ev);
125 }
126 }
127
128 console.log("currentMillisecClicked = " + this.currentMillisecClicked);
129 }
130 },
131
132 addNewEndPoint : {
133 value: function(xpos){
134 var newKeyFrame = document.createElement("div");
135 newKeyFrame.className = "keyframe";
136 newKeyFrame.style.left = (xpos - 2) + "px";
137 this.track_lane.appendChild(newKeyFrame);
138
139 if(xpos > 0){
140 var prevFrame = this.keyFrames[this.keyFrames.length - 1][0];
141
142 var newDefaultSpan = document.createElement("div");
143 newDefaultSpan.className = "defaultSpan";
144 newDefaultSpan.style.left = prevFrame + "px";
145 newDefaultSpan.style.width = (xpos - prevFrame) + "px";
146 this.track_lane.appendChild(newDefaultSpan);
147
148 this.spans.push(newDefaultSpan);
149 }
150
151 var keyframePercent = this.currentMillisecClicked / this.application.ninja.timeline.totalDuration;
152 var keyframeProperties;
153
154 //console.log(keyframePercent);
155
156 this.keyFrames.push([xpos, keyframePercent, keyframeProperties]);
157 //console.log(this.keyFrames)
158 }
159 },
160
161 splitSpan: {
162 value: function(ev){
163 console.log("splitting span at span offsetX: " + ev.offsetX);
164
165