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.html4
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1128
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css2
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss2
4 files changed, 719 insertions, 417 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 19709ca7..5c957619 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,6 +32,7 @@
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"}, 37 "checkable_relative" : {"#" : "checkable_relative"},
36 "checkable_absolute" : {"#" : "checkable_absolute"}, 38 "checkable_absolute" : {"#" : "checkable_absolute"},
@@ -210,7 +212,7 @@
210 212
211 213
212 <div data-montage-id="layer_tracks" class="tl_layertracks"> 214 <div data-montage-id="layer_tracks" class="tl_layertracks">
213 <div class="layout-tracks"> 215 <div class="layout-tracks" data-montage-id="layout_tracks">
214 <div data-montage-id="playhead_marker" class="playheadmarker"></div> 216 <div data-montage-id="playhead_marker" class="playheadmarker"></div>
215 <div data-montage-id="master_track" class="mastertrack"> 217 <div data-montage-id="master_track" class="mastertrack">
216 <div data-montage-id="time_bar" class="timebar"></div> 218 <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 d7329ac7..a902d282 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -127,12 +127,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
127 this._layerRepetition = newVal; 127 this._layerRepetition = newVal;
128 } 128 }
129 }, 129 },
130
131 _areTracksScrolling: {
132 value: false
133 },
130 134
131 // Set to false to skip array caching array sets in current document 135 // Set to false to skip array caching array sets in currentDocument
132 _boolCacheArrays:{ 136 _boolCacheArrays:{
133 value:true 137 value:true
134 }, 138 },
135 139
140 // Current layer number: iterated and used to assign layer IDs.
136 _currentLayerNumber:{ 141 _currentLayerNumber:{
137 value:0 142 value:0
138 }, 143 },
@@ -161,36 +166,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
161 this.cacheTimeline(); 166 this.cacheTimeline();
162 } 167 }
163 }, 168 },
164 169 _currentElementsSelected: {
165 _selectedLayerID:{ 170 value: []
166 value:false
167 }, 171 },
168 selectedLayerID:{ 172 currentElementsSelected: {
169 get:function () { 173 get: function() {
170 return this._selectedLayerID; 174 return this._currentElementsSelected;
171 }, 175 },
172 set:function (newVal) { 176 set: function(newVal) {
173 if (newVal === false) { 177 this._currentElementsSelected = newVal;
174 // We are clearing the timeline, so just set the value and return. 178 this.cacheTimeline();
175 this._selectedLayerID = newVal; 179 }
176 return;
177 }
178 if (newVal !== this._selectedLayerID) {
179 var selectIndex = this.getLayerIndexByID(newVal);
180 this._selectedLayerID = newVal;
181 this._captureSelection = true;
182 if (this.currentLayerSelected !== false) {
183 this.selectLayer(selectIndex, false);
184 }
185 if (this.currentLayersSelected !== false) {
186 this.selectLayers(this.currentLayersSelected);
187 }
188 if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) {
189 this.selectLayers([]);
190 }
191
192 }
193 }
194 }, 180 },
195 181
196 _currentLayersSelected:{ 182 _currentLayersSelected:{
@@ -205,7 +191,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
205 this.cacheTimeline(); 191 this.cacheTimeline();
206 } 192 }
207 }, 193 },
208 194
195 // The index of the last layer that was clicked on
196 // (used for shift-click multiselect)
197 _lastLayerClicked : {
198 value: 0
199 },
200 lastLayerClicked: {
201 serializable: true,
202 get: function() {
203 return this._lastLayerClicked;
204 },
205 set: function(newVal) {
206 this._lastLayerClicked = newVal
207 }
208 },
209 209
210 _millisecondsOffset:{ 210 _millisecondsOffset:{
211 value:1000 211 value:1000
@@ -235,7 +235,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
235 }, 235 },
236 set:function (val) { 236 set:function (val) {
237 this._masterDuration = val; 237 this._masterDuration = val;
238 this.timebar.style.width = (this._masterDuration / 12) + "px"; 238 var intDur = Math.round(val/12),
239 strWidth = intDur + "px";
240 this.timebar.style.width = strWidth;
239 } 241 }
240 }, 242 },
241 243
@@ -295,10 +297,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
295 } 297 }
296 }, 298 },
297 299
298 _isLayer:{
299 value:false
300 },
301
302 _firstTimeLoaded:{ 300 _firstTimeLoaded:{
303 value:true 301 value:true
304 }, 302 },
@@ -314,6 +312,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
314 timeMarkerHolder:{ 312 timeMarkerHolder:{
315 value:null 313 value:null
316 }, 314 },
315
316 // Drag and Drop properties
317 _dragAndDropHelper : { 317 _dragAndDropHelper : {
318 value: false 318 value: false
319 }, 319 },
@@ -326,6 +326,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
326 _dragLayerID : { 326 _dragLayerID : {
327 value: null 327 value: null
328 }, 328 },
329 _draggingType: {
330 value: false
331 },
332 draggingType: {
333 get: function() {
334 return this._draggingType;
335 },
336 set: function(newVal) {
337 this._draggingType = newVal;
338 }
339 },
329 340
330 layersDragged:{ 341 layersDragged:{
331 value:[], 342 value:[],
@@ -342,6 +353,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
342 } 353 }
343 } 354 }
344 }, 355 },
356 _dragLayerIndexes: {
357 value: []
358 },
345 _dropLayerID : { 359 _dropLayerID : {
346 value: null 360 value: null
347 }, 361 },
@@ -353,20 +367,32 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
353 if (newVal !== this._dropLayerID) { 367 if (newVal !== this._dropLayerID) {
354 this._dropLayerID = newVal; 368 this._dropLayerID = newVal;
355