diff options
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 111 |
1 files changed, 19 insertions, 92 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 3c4cfa2e..b3f4318a 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -11,11 +11,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
11 | }, | 11 | }, |
12 | 12 | ||
13 | /* === BEGIN: Models === */ | 13 | /* === BEGIN: Models === */ |
14 | |||
15 | // Layer models: arrays for the data and repetition, current layer number, | ||
16 | _arrLayers:{ | 14 | _arrLayers:{ |
17 | value:[] | 15 | value:[] |
18 | }, | 16 | }, |
17 | |||
19 | arrLayers:{ | 18 | arrLayers:{ |
20 | get:function () { | 19 | get:function () { |
21 | return this._arrLayers; | 20 | return this._arrLayers; |
@@ -28,6 +27,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
28 | _layerRepetition:{ | 27 | _layerRepetition:{ |
29 | value:null | 28 | value:null |
30 | }, | 29 | }, |
30 | |||
31 | layerRepetition:{ | 31 | layerRepetition:{ |
32 | get:function () { | 32 | get:function () { |
33 | return this._layerRepetition; | 33 | return this._layerRepetition; |
@@ -36,9 +36,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
36 | this._layerRepetition = newVal; | 36 | this._layerRepetition = newVal; |
37 | } | 37 | } |
38 | }, | 38 | }, |
39 | |||
39 | _currentLayerNumber:{ | 40 | _currentLayerNumber:{ |
40 | value:0 | 41 | value:0 |
41 | }, | 42 | }, |
43 | |||
42 | currentLayerNumber:{ | 44 | currentLayerNumber:{ |
43 | get:function () { | 45 | get:function () { |
44 | return this._currentLayerNumber; | 46 | return this._currentLayerNumber; |
@@ -62,11 +64,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
62 | value:1000 | 64 | value:1000 |
63 | }, | 65 | }, |
64 | 66 | ||
65 | // Track model | ||
66 | _arrTracks:{ | 67 | _arrTracks:{ |
67 | serializable:true, | 68 | serializable:true, |
68 | value:[] | 69 | value:[] |
69 | }, | 70 | }, |
71 | |||
70 | arrTracks:{ | 72 | arrTracks:{ |
71 | serializable:true, | 73 | serializable:true, |
72 | get:function () { | 74 | get:function () { |
@@ -76,10 +78,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
76 | this._arrTracks = newVal; | 78 | this._arrTracks = newVal; |
77 | } | 79 | } |
78 | }, | 80 | }, |
81 | |||
79 | _trackRepetition:{ | 82 | _trackRepetition:{ |
80 | serializable:true, | 83 | serializable:true, |
81 | value:null | 84 | value:null |
82 | }, | 85 | }, |
86 | |||
83 | trackRepetition:{ | 87 | trackRepetition:{ |
84 | serializable:true, | 88 | serializable:true, |
85 | get:function () { | 89 | get:function () { |
@@ -104,11 +108,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
104 | } | 108 | } |
105 | }, | 109 | }, |
106 | 110 | ||
111 | _isLayer:{ | ||
112 | value:false | ||
113 | }, | ||
114 | |||
115 | _firstTimeLoaded:{ | ||
116 | value:true, | ||
117 | writable:true | ||
118 | }, | ||
107 | 119 | ||
120 | _arrLayersNonEmpty:{ | ||
121 | value:true, | ||
122 | writable:true | ||
123 | }, | ||
108 | /* === END: Models === */ | 124 | /* === END: Models === */ |
109 | 125 | ||
110 | /* === BEGIN: Draw cycle === */ | 126 | /* === BEGIN: Draw cycle === */ |
111 | |||
112 | prepareForDraw:{ | 127 | prepareForDraw:{ |
113 | value:function () { | 128 | value:function () { |
114 | 129 | ||
@@ -126,20 +141,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
126 | } | 141 | } |
127 | }, | 142 | }, |
128 | 143 | ||
129 | _isLayer:{ | ||
130 | value:false | ||
131 | }, | ||
132 | |||
133 | _firstTimeLoaded:{ | ||
134 | value:true, | ||
135 | writable:true | ||
136 | }, | ||
137 | |||
138 | _arrLayersNonEmpty:{ | ||
139 | value:true, | ||
140 | writable:true | ||
141 | }, | ||
142 | |||
143 | willDraw:{ | 144 | willDraw:{ |
144 | value:function () { | 145 | value:function () { |
145 | if (this._isLayer) { | 146 | if (this._isLayer) { |
@@ -148,43 +149,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
148 | } | 149 | } |
149 | } | 150 | } |
150 | }, | 151 | }, |
151 | |||
152 | /* === END: Draw cycle === */ | 152 | /* === END: Draw cycle === */ |
153 | 153 | ||
154 | /* === BEGIN: Controllers === */ | 154 | /* === BEGIN: Controllers === */ |
155 | |||
156 | initTimelineView:{ | 155 | initTimelineView:{ |
157 | value:function () { | 156 | value:function () { |
158 | |||
159 | // Get some selectors to make life easier. | ||
160 | this.layout_tracks = this.element.querySelector(".layout-tracks"); | 157 | this.layout_tracks = this.element.querySelector(".layout-tracks"); |
161 | this.layout_markers = this.element.querySelector(".layout_markers"); | 158 | this.layout_markers = this.element.querySelector(".layout_markers"); |
162 | 159 | ||
163 | // Add event handlers on the buttons. | ||
164 | this.newlayer_button.identifier = "addLayer"; | 160 | this.newlayer_button.identifier = "addLayer"; |
165 | this.newlayer_button.addEventListener("click", this, false); | 161 | this.newlayer_button.addEventListener("click", this, false); |
166 | this.deletelayer_button.identifier = "deleteLayer"; | 162 | this.deletelayer_button.identifier = "deleteLayer"; |
167 | this.deletelayer_button.addEventListener("click", this, false); | 163 | this.deletelayer_button.addEventListener("click", this, false); |
168 | |||
169 | // New click listener to handle select/deselect events | ||
170 | this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); | 164 | this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); |
171 | |||
172 | // Simultaneous scrolling of the layer and tracks | ||
173 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 165 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
174 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 166 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
175 | 167 | ||
176 | // Calculate and draw time markers | ||
177 | this.drawTimeMarkers(); | 168 | this.drawTimeMarkers(); |
178 | 169 | ||
179 | // Default to one layer for new doc | ||
180 | // this.newLayer(); | ||
181 | this._hashKey = "123"; | 170 | this._hashKey = "123"; |
182 | _firstLayerDraw = false; | 171 | _firstLayerDraw = false; |
183 | NJevent('newLayer', this._hashKey); | 172 | NJevent('newLayer', this._hashKey); |
184 | _firstLayerDraw = true; | 173 | _firstLayerDraw = true; |
185 | this.selectLayer(0); | 174 | this.selectLayer(0); |
186 | |||
187 | // TODO - add condition for existing doc and parse DOM for top level elements | ||
188 | } | 175 | } |
189 | }, | 176 | }, |
190 | 177 | ||
@@ -234,7 +221,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
234 | 221 | ||
235 | handleAddLayerClick:{ | 222 | handleAddLayerClick:{ |
236 | value:function (event) { | 223 | value:function (event) { |
237 | //event.stopPropagation(); | ||
238 | this._isLayer = true; | 224 | this._isLayer = true; |
239 | this.needsDraw = true; | 225 | this.needsDraw = true; |
240 | } | 226 | } |
@@ -242,7 +228,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
242 | 228 | ||
243 | handleDeleteLayerClick:{ | 229 | handleDeleteLayerClick:{ |
244 | value:function (event) { | 230 | value:function (event) { |
245 | //event.stopPropagation(); | ||
246 | this._deleteKeyDown = false; | 231 | this._deleteKeyDown = false; |
247 | if (this.application.ninja.currentSelectedContainer.id === "UserContent") { | 232 | if (this.application.ninja.currentSelectedContainer.id === "UserContent") { |
248 | this._hashKey = "123"; | 233 | this._hashKey = "123"; |
@@ -260,17 +245,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
260 | this._firstTimeLoaded = false; | 245 | this._firstTimeLoaded = false; |
261 | } else { | 246 | } else { |
262 | while (this.arrLayers.pop()) { | 247 | while (this.arrLayers.pop()) { |
263 | |||
264 | } | 248 | } |
265 | while (this.arrTracks.pop()) { | 249 | while (this.arrTracks.pop()) { |
266 | } | 250 | } |
267 | |||
268 | if (event.detail.element.id === "UserContent") { |