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