diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r--[-rwxr-xr-x] | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 75 | ||||
-rw-r--r--[-rwxr-xr-x] | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 222 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 31 |
3 files changed, 248 insertions, 80 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 29bf6eb3..0c302436 100755..100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -1,4 +1,9 @@ | |||
1 | <!DOCTYPE html> | 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> --> | ||
2 | <html lang="en"> | 7 | <html lang="en"> |
3 | <head> | 8 | <head> |
4 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | 9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
@@ -24,7 +29,10 @@ | |||
24 | "trackRepetition" : {"@" : "repetition2"}, | 29 | "trackRepetition" : {"@" : "repetition2"}, |
25 | "playhead": {"#": "playhead"}, | 30 | "playhead": {"#": "playhead"}, |
26 | "playheadmarker": {"#": "playhead_marker"}, | 31 | "playheadmarker": {"#": "playhead_marker"}, |
27 | "timetext" : {"#": "time_text"} | 32 | "timetext" : {"#": "time_text"}, |
33 | "timebar" : {"#": "time_bar"}, | ||
34 | "container_tracks" : {"#" : "container-tracks"}, | ||
35 | "end_hottext" : {"@" : "endHottext"} | ||
28 | } | 36 | } |
29 | }, | 37 | }, |
30 | 38 | ||
@@ -143,6 +151,36 @@ | |||
143 | "boundObjectPropertyPath" : "objectAtCurrentIteration.tweens", | 151 | "boundObjectPropertyPath" : "objectAtCurrentIteration.tweens", |
144 | "oneway" : false | 152 | "oneway" : false |
145 | }, | 153 | }, |
154 | "animatedElement" : { | ||
155 | "boundObject" : {"@" : "repetition2"}, | ||
156 | "boundObjectPropertyPath" : "objectAtCurrentIteration.animatedElement", | ||
157 | "oneway" : false | ||
158 | }, | ||
159 | "arrStyleTracks" : { | ||
160 | "boundObject" : {"@" : "repetition2"}, | ||
161 | "boundObjectPropertyPath" : "objectAtCurrentIteration.arrStyleTracks", | ||
162 | "oneway" : false | ||
163 | }, | ||
164 | "isTrackAnimated" : { | ||
165 | "boundObject" : {"@" : "repetition2"}, | ||
166 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isTrackAnimated", | ||
167 | "oneway" : false | ||
168 | }, | ||
169 | "trackDuration" : { | ||
170 | "boundObject" : {"@" : "repetition2"}, | ||
171 | "boundObjectPropertyPath" : "objectAtCurrentIteration.trackDuration", | ||
172 | "oneway" : false | ||
173 | }, | ||
174 | "animationName" : { | ||
175 | "boundObject" : {"@" : "repetition2"}, | ||
176 | "boundObjectPropertyPath" : "objectAtCurrentIteration.animationName", | ||
177 | "oneway" : false | ||
178 | }, | ||
179 | "currentKeyframeRule" : { | ||
180 | "boundObject" : {"@" : "repetition2"}, | ||
181 | "boundObjectPropertyPath" : "objectAtCurrentIteration.currentKeyframeRule", | ||
182 | "oneway" : false | ||
183 | }, | ||
146 | "isMainCollapsed" : { | 184 | "isMainCollapsed" : { |
147 | "boundObject" : {"@" : "repetition2"}, | 185 | "boundObject" : {"@" : "repetition2"}, |
148 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed", | 186 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed", |
@@ -162,9 +200,26 @@ | |||
162 | "boundObject" : {"@" : "repetition2"}, | 200 | "boundObject" : {"@" : "repetition2"}, |
163 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", | 201 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", |
164 | "oneway" : false | 202 | "oneway" : false |
165 | } | 203 | }, |
204 | "trackPosition" : { | ||
205 | "boundObject" : {"@" : "repetition2"}, | ||
206 | "boundObjectPropertyPath" : "objectAtCurrentIteration.trackPosition", | ||
207 | "oneway" : false | ||
208 | } | ||
166 | } | 209 | } |
167 | } | 210 | }, |
211 | "endHottext" : { | ||
212 | "module": "js/components/hottextunit.reel", | ||
213 | "name": "HotTextUnit", | ||
214 | "properties": { | ||
215 | "element": {"#": "end_hottext"}, | ||
216 | "maxValue" : 100000, | ||
217 | "minValue" : 1, | ||
218 | "acceptableUnits" : "sec", | ||
219 | "units" : "sec", | ||
220 | "value" : 25 | ||
221 | } | ||
222 | } | ||
168 | } | 223 | } |
169 | </script> | 224 | </script> |
170 | 225 | ||
@@ -193,7 +248,9 @@ | |||
193 | 248 | ||
194 | 249 | ||
195 | <div id="user_layers" class="userlayers"> | 250 | <div id="user_layers" class="userlayers"> |
196 | <div id="master_layer" class="masterlayer">Master Layer</div> | 251 | <div id="master_layer" class="masterlayer"> |
252 | <div>Master Layer</div> | ||
253 | </div> | ||
197 | <div id="container-layers"> | 254 | <div id="container-layers"> |
198 | <div id="container-layer"></div> | 255 | <div id="container-layer"></div> |
199 | </div> | 256 | </div> |
@@ -202,6 +259,7 @@ | |||
202 | <div id="timeline_gutter" class="timelinegutter"> | 259 | <div id="timeline_gutter" class="timelinegutter"> |
203 | <div id="newlayer_button" class="newlayerbutton"></div> | 260 | <div id="newlayer_button" class="newlayerbutton"></div> |
204 | <div id="deletelayer_button" class="deletelayerbutton"></div> | 261 | <div id="deletelayer_button" class="deletelayerbutton"></div> |
262 | <input id="end_hottext" class="endhottext"> | ||
205 | </div> | 263 | </div> |
206 | </div> | 264 | </div> |
207 | </div> | 265 | </div> |
@@ -211,16 +269,17 @@ | |||
211 | <div id="timeline_rightpane" class="tl_rightpane"> | 269 | <div id="timeline_rightpane" class="tl_rightpane"> |
212 | <div id="right_inside" class="rightinside"> | 270 | <div id="right_inside" class="rightinside"> |
213 | <div class="layout_markers"> | 271 | <div class="layout_markers"> |
214 | <div id="timeline_markers" class="timelinemarkers"> | 272 | <div id="playhead" class="playhead"></div> |
215 | <div id="playhead" class="playhead"></div> | 273 | <div id="timeline_markers" class="timelinemarkers"></div> |
216 | </div> | ||
217 | </div> | 274 | </div> |
218 | 275 | ||
219 | 276 | ||
220 | <div id="layer_tracks" class="tl_layertracks"> | 277 | <div id="layer_tracks" class="tl_layertracks"> |
221 | <div class="layout-tracks"> | 278 | <div class="layout-tracks"> |
222 | <div id="playhead_marker" class="playheadmarker"></div> | 279 | <div id="playhead_marker" class="playheadmarker"></div> |
223 | <div id="master_track" class="mastertrack"></div> | 280 | <div id="master_track" class="mastertrack"> |
281 | <div id="time_bar" class="timebar"></div> | ||
282 | </div> | ||
224 | <div id="container-tracks" class="container-tracks"> | 283 | <div id="container-tracks" class="container-tracks"> |
225 | <div id="container-track"></div> | 284 | <div id="container-track"></div> |
226 | </div> | 285 | </div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 07fee19d..a5cde00f 100755..100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -1,3 +1,9 @@ | |||
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 | |||
1 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
2 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
3 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; | 9 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; |
@@ -65,6 +71,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
65 | value:1000 | 71 | value:1000 |
66 | }, | 72 | }, |
67 | 73 | ||
74 | _masterDuration:{ | ||
75 | serializable: true, | ||
76 | value:0 | ||
77 | }, | ||
78 | |||
79 | masterDuration:{ | ||
80 | serializable:true, | ||
81 | get:function(){ | ||
82 | return this._masterDuration; | ||
83 | }, | ||
84 | set:function(val){ | ||
85 | this._masterDuration = val; | ||
86 | this.timebar.style.width = (this._masterDuration / 12) + "px"; | ||
87 | } | ||
88 | }, | ||
89 | |||
68 | _arrTracks:{ | 90 | _arrTracks:{ |
69 | serializable:true, | 91 | serializable:true, |
70 | value:[] | 92 | value:[] |
@@ -109,6 +131,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
109 | } | 131 | } |
110 | }, | 132 | }, |
111 | 133 | ||
134 | _selectedTweens:{ | ||
135 | value:[] | ||
136 | }, | ||
137 | |||
138 | selectedTweens:{ | ||
139 | serializable:true, | ||
140 | get:function () { | ||