aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html15
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1368
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css24
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss3
4 files changed, 934 insertions, 476 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 19709ca7..eac361a8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -20,6 +20,7 @@
20 "track_container": {"#": "right_inside"}, 20 "track_container": {"#": "right_inside"},
21 "timeline_leftpane" : {"#" : "leftpane_inside"}, 21 "timeline_leftpane" : {"#" : "leftpane_inside"},
22 "layer_tracks": {"#": "layer_tracks"}, 22 "layer_tracks": {"#": "layer_tracks"},
23 "layout_tracks": {"#": "layout_tracks"},
23 "master_track": {"#": "master_track"}, 24 "master_track": {"#": "master_track"},
24 "time_markers" : {"#": "timeline_markers"}, 25 "time_markers" : {"#": "timeline_markers"},
25 "layerRepetition" : {"@": "repetition1"}, 26 "layerRepetition" : {"@": "repetition1"},
@@ -31,11 +32,12 @@
31 "container_tracks" : {"#" : "container-tracks"}, 32 "container_tracks" : {"#" : "container-tracks"},
32 "end_hottext" : {"@" : "endHottext"}, 33 "end_hottext" : {"@" : "endHottext"},
33 "container_layers" : {"#" : "container-layers"}, 34 "container_layers" : {"#" : "container-layers"},
35 "container_tracks" : {"#" : "container-tracks"},
34 "timeline_disabler" : {"#" : "timeline-disabler"}, 36 "timeline_disabler" : {"#" : "timeline-disabler"},
35 "checkable_relative" : {"#" : "checkable_relative"},
36 "checkable_absolute" : {"#" : "checkable_absolute"},
37 "checkable_animated" : {"#" : "checkable_animated"}, 37 "checkable_animated" : {"#" : "checkable_animated"},
38 "tl_configbutton" : {"#" : "tl-configbutton"} 38 "tl_configbutton" : {"#" : "tl-configbutton"},
39 "checkable_lock" : {"#" : "checkable_lock"},
40 "checkable_visible":{"#" : "checkable_visible"}
39 } 41 }
40 }, 42 },
41 43
@@ -177,10 +179,9 @@
177 <div class="layer-master">Master Layer 179 <div class="layer-master">Master Layer
178 <div class="tl-configbutton" data-montage-id="tl-configbutton"> 180 <div class="tl-configbutton" data-montage-id="tl-configbutton">
179 <div class="tl-dropdown"> 181 <div class="tl-dropdown">
180 <div class="checkable" data-montage-id="checkable_relative">Use relative positioning</div>
181 <div class="checkable checked" data-montage-id="checkable_absolute">Use absolute positioning</div>
182 <div class="nj-divider divider-horizontal"></div>
183 <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div> 182 <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div>
183 <div class="checkable" data-montage-id="checkable_lock">Lock Layers</div>
184 <div class="checkable" data-montage-id="checkable_visible">Visibility of Layers</div>
184 </div> 185 </div>
185 </div> 186 </div>
186 187
@@ -210,7 +211,7 @@
210 211
211 212
212 <div data-montage-id="layer_tracks" class="tl_layertracks"> 213 <div data-montage-id="layer_tracks" class="tl_layertracks">
213 <div class="layout-tracks"> 214 <div class="layout-tracks" data-montage-id="layout_tracks">
214 <div data-montage-id="playhead_marker" class="playheadmarker"></div> 215 <div data-montage-id="playhead_marker" class="playheadmarker"></div>
215 <div data-montage-id="master_track" class="mastertrack"> 216 <div data-montage-id="master_track" class="mastertrack">
216 <div data-montage-id="time_bar" class="timebar"></div> 217 <div data-montage-id="time_bar" class="timebar"></div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index cb8185e5..2cbd9e2b 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -4,9 +4,10 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6 6
7var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage,
8var Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component,
9var nj = require("js/lib/NJUtils").NJUtils; 9 nj = require("js/lib/NJUtils").NJUtils,
10 EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu;
10 11
11var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 12var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
12 13
@@ -223,12 +224,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
223 this._layerRepetition = newVal; 224 this._layerRepetition = newVal;
224 } 225 }
225 }, 226 },
227
228 _areTracksScrolling: {
229 value: false
230 },
231
232 _currentOpenSpanMenu: {
233 value: false
234 },
235 currentOpenSpanMenu: {
236 get: function() {
237 return this._currentOpenSpanMenu;
238 },
239 set: function(newVal) {
240 this._currentOpenSpanMenu = newVal;
241 }
242 },
226 243
227 // Set to false to skip array caching array sets in current document 244 // Set to false to skip array caching array sets in currentDocument
228 _boolCacheArrays:{ 245 _boolCacheArrays:{
229 value:true 246 value:true
230 }, 247 },
231 248
249 // Current layer number: iterated and used to assign layer IDs.
232 _currentLayerNumber:{ 250 _currentLayerNumber:{
233 value:0 251 value:0
234 }, 252 },
@@ -257,36 +275,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
257 this.cacheTimeline(); 275 this.cacheTimeline();
258 } 276 }
259 }, 277 },
260 278 _currentElementsSelected: {
261 _selectedLayerID:{ 279 value: []
262 value:false
263 }, 280 },
264 selectedLayerID:{ 281 currentElementsSelected: {
265 get:function () { 282 get: function() {
266 return this._selectedLayerID; 283 return this._currentElementsSelected;
267 }, 284 },
268 set:function (newVal) { 285 set: function(newVal) {
269 if (newVal === false) { 286 this._currentElementsSelected = newVal;
270 // We are clearing the timeline, so just set the value and return. 287 this.cacheTimeline();
271 this._selectedLayerID = newVal; 288 }
272 return;
273 }
274 if (newVal !== this._selectedLayerID) {
275 var selectIndex = this.getLayerIndexByID(newVal);
276 this._selectedLayerID = newVal;
277 this._captureSelection = true;
278 if (this.currentLayerSelected !== false) {
279 this.selectLayer(selectIndex, false);
280 }
281 if (this.currentLayersSelected !== false) {
282 this.selectLayers(this.currentLayersSelected);
283 }
284 if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) {
285 this.selectLayers([]);
286 }
287
288 }
289 }
290 }, 289 },
291 290
292 _currentLayersSelected:{ 291 _currentLayersSelected:{
@@ -301,7 +300,34 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
301 this.cacheTimeline(); 300 this.cacheTimeline();
302 } 301 }
303 }, 302 },
304 303
304 _easingMenu: {
305 value: null
306 },
307 easingMenu: {
308 serializable: true,
309 get: function() {
310 return this._easingMenu;
311 },
312 set: function(newVal) {
313 this._easingMenu = newVal;
314 }
315 },
316
317 // The index of the last layer that was clicked on
318 // (used for shift-click multiselect)
319 _lastLayerClicked : {
320 value: 0
321 },
322 lastLayerClicked: {
323 serializable: true,
324 get: function() {
325 return this._lastLayerClicked;
326 },
327 set: function(newVal) {
328 this._lastLayerClicked = newVal
329 }
330 },
305 331
306 _millisecondsOffset:{ 332 _millisecondsOffset:{
307 value:1000 333 value:1000
@@ -331,7 +357,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
331 }, 357 },
332 set:function (val) { 358 set:function (val) {
333 this._masterDuration = val; 359 this._masterDuration = val;
334 this.timebar.style.width = (this._masterDuration / 12) + "px";