diff options
author | Jonathan Duran | 2012-02-06 13:30:49 -0800 |
---|---|---|
committer | Jonathan Duran | 2012-02-06 13:30:49 -0800 |
commit | a39bad832722a10f6556f91e94c3301a41f59bd5 (patch) | |
tree | e436e919f9f67c56e8bce462aab95ff3804813cc /js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |
parent | 671a27069db6a121507c2b342653aede685cff67 (diff) | |
download | ninja-a39bad832722a10f6556f91e94c3301a41f59bd5.tar.gz |
merge new timeline
Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 615 |
1 files changed, 387 insertions, 228 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 9bf51e60..45899648 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -1,295 +1,454 @@ | |||
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 | |||
7 | var Montage = require("montage/core/core").Montage; | 1 | var Montage = require("montage/core/core").Montage; |
8 | var Component = require("montage/ui/component").Component; | 2 | var Component = require("montage/ui/component").Component; |
9 | var TimelineController = require("js/panels/Timeline/TimelineController").TimelineController; | 3 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; |
4 | var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; | ||
5 | // var Track = require("js/panels/Timeline/Track.reel").Track; | ||
10 | 6 | ||
11 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | 7 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { |
12 | 8 | ||
13 | tmpImg: { value: null}, | 9 | hasTemplate: { |
10 | value: true | ||
11 | }, | ||
12 | |||
13 | /* === BEGIN: Models === */ | ||
14 | |||
15 | // Layer models: arrays for the data and repetition, current layer number, | ||
16 | _arrLayers : { | ||
17 | value: [] | ||
18 | }, | ||
19 | arrLayers: { | ||
20 | get: function() { | ||
21 | return this._arrLayers; | ||
22 | }, | ||
23 | set: function(newVal) { | ||
24 | this._arrLayers = newVal; | ||
25 | } | ||
26 | }, | ||
27 | |||
28 | _layerRepetition: { | ||
29 | value: null | ||
30 | }, | ||
31 | layerRepetition: { | ||
32 | get: function() { | ||
33 | return this._layerRepetition; | ||
34 | }, | ||
35 | set: function(newVal) { | ||
36 | this._layerRepetition = newVal; | ||
37 | } | ||
38 | }, | ||
39 | |||
40 | currentLayerNumber:{ | ||
41 | value:0 | ||
42 | }, | ||
14 | 43 | ||
15 | templateDidLoad: { | 44 | millisecondsOffset:{ |
16 | value: function() { | 45 | value:5000 |
17 | /* | ||
18 | this.tmpImg = document.createElement("img"); | ||
19 | this.tmpImg.width = 1879; | ||
20 | this.tmpImg.height = 440; | ||
21 | this.tmpImg.src = "images/timeline/timeline.png"; | ||
22 | */ | ||
23 | } | ||
24 | }, | 46 | }, |
25 | 47 | ||
26 | prepareForDraw: { | 48 | // Track model |
27 | value: function() { | 49 | _arrTracks: { |
28 | this.element.style.background = "url('images/timeline/timeline.png')"; | 50 | serializable: true, |
29 | this.element.style.width = "100%"; | 51 | value: [] |
30 | this.element.style.height = "400px"; | 52 | }, |
31 | this.element.style.backgroundPosition = "-5px -40px"; | 53 | arrTracks: { |
32 | } | 54 | serializable: true, |
55 | get: function() { | ||
56 | return this._arrTracks; | ||
57 | }, | ||
58 | set: function(newVal) { | ||
59 | this._arrTracks = newVal; | ||
60 | } | ||
61 | }, | ||
62 | _trackRepetition: { | ||
63 | serializable: true, | ||
64 | value: null | ||
65 | }, | ||
66 | trackRepetition : { | ||
67 | serializable: true, | ||
68 | get: function() { | ||
69 | return this._trackRepetition; | ||
70 | }, | ||
71 | set: function(newVal) { | ||
72 | this._trackRepetition = newVal; | ||
73 | } | ||
33 | }, | 74 | }, |
34 | 75 | ||
35 | init : { | 76 | _selectedKeyframes:{ |
36 | value : function() | 77 | value:[] |
37 | { | 78 | }, |
38 | this.buildTimelineView(); | ||
39 | 79 | ||
80 | selectedKeyframes:{ | ||
81 | serializable: true, | ||
82 | get: function() { | ||
83 | return this._selectedKeyframes; | ||
84 | }, | ||
85 | set: function(value){ | ||
86 | this._selectedKeyframes = value; | ||
40 | } | 87 | } |
41 | }, | 88 | }, |
42 | 89 | ||
43 | breadCrumbContainer:{ | ||
44 | value:null, | ||
45 | writable:true, | ||
46 | enumerable:true | ||
47 | }, | ||
48 | 90 | ||
49 | controlsContainer:{ | 91 | /* === END: Models === */ |
50 | value:null, | 92 | |
51 | writable:true, | 93 | /* === BEGIN: Draw cycle === */ |
52 | enumerable:true | ||
53 | }, | ||
54 | 94 | ||
55 | timelineGutter:{ | 95 | prepareForDraw: { |
56 | value:null, | 96 | value: function() { |
57 | writable:true, | ||
58 | enumerable:true | ||
59 | }, | ||
60 | 97 | ||
61 | userLayerContainer:{ | 98 | this.eventManager.addEventListener("deleteLayerClick", this, false); |
62 | value:null, | 99 | this.eventManager.addEventListener("newLayer", this, false); |
63 | writable:true, | 100 | this.eventManager.addEventListener("deleteLayer", this, false); |
64 | enumerable:true | ||
65 | }, | ||
66 | 101 | ||
67 | currentLayerNumber:{ | 102 | this.initTimelineView(); |
68 | value:1, | 103 | } |
69 | writable:true, | ||
70 | enumerable:true | ||
71 | }, | 104 | }, |
72 | 105 | _isLayer: { | |
73 | newLayerButton:{ | 106 | value: false |
74 | value:null, | ||
75 | writable:true, | ||
76 | enumerable:true | ||
77 | }, | 107 | }, |
78 | 108 | ||
79 | deleteLayerButton:{ | 109 | willDraw: { |
80 | value:null, | 110 | value: function() { |
81 | writable:true, | 111 | if (this._isLayer) { |
82 | enumerable:true | 112 | |
113 | this.insertLayer(); | ||
114 | this._isLayer = false; | ||
115 | } | ||
116 | } | ||
83 | }, | 117 | }, |
84 | 118 | ||
85 | newFolderButton:{ | ||
86 | value:null, | ||
87 | writable:true, | ||
88 | enumerable:true | ||
89 | }, | ||
90 | 119 | ||
91 | buildTimelineView : { | 120 | |
92 | value:function(){ | 121 | /* === END: Draw cycle === */ |
93 | var timeline = document.getElementById("timelinePanel"); | ||
94 | |||
95 | var mainTimelineContainer = document.createElement("div"); | ||
96 | mainTimelineContainer.style.backgroundColor = "#000000"; | ||
97 | mainTimelineContainer.style.width = "100%"; | ||
98 | mainTimelineContainer.style.height = "100%"; | ||
99 | mainTimelineContainer.style.overflow = "visible"; | ||
100 | |||
101 | timeline.appendChild(mainTimelineContainer); | ||
102 | |||
103 | this.breadCrumbContainer = document.createElement("div"); | ||
104 | this.breadCrumbContainer.style.width = "100%"; | ||
105 | this.breadCrumbContainer.style.height = "20px"; | ||
106 | this.breadCrumbContainer.style.backgroundColor = "#111111"; | ||
107 | |||
108 | var timeControllerContainer = document.createElement("div"); | ||
109 | timeControllerContainer.style.width = "auto"; | ||
110 | timeControllerContainer.style.height = "20px"; | ||
111 | timeControllerContainer.style.backgroundColor = "#000000"; | ||
112 | |||
113 | this.controlsContainer = document.createElement("div"); | ||
114 | this.controlsContainer.style.width = "200px"; | ||
115 | this.controlsContainer.style.height = "20px"; | ||
116 | this.controlsContainer.style.backgroundColor = "#440000"; |