aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js134
1 files changed, 124 insertions, 10 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index ef353490..8f7c63bf 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -2,6 +2,7 @@ var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component; 2var Component = require("montage/ui/component").Component;
3var Layer = require("js/panels/Timeline/Layer.reel").Layer; 3var Layer = require("js/panels/Timeline/Layer.reel").Layer;
4var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; 4var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
5var nj = require("js/lib/NJUtils").NJUtils;
5 6
6// var Track = require("js/panels/Timeline/Track.reel").Track; 7// var Track = require("js/panels/Timeline/Track.reel").Track;
7 8
@@ -37,13 +38,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
37 this._layerRepetition = newVal; 38 this._layerRepetition = newVal;
38 } 39 }
39 }, 40 },
40 41 _currentLayerNumber: {
42 value: 0
43 },
41 currentLayerNumber:{ 44 currentLayerNumber:{
42 value:0 45 get: function() {
46 return this._currentLayerNumber;
47 },
48 set: function(newVal) {
49 if (newVal !== this._currentLayerNumber) {
50 this._currentLayerNumber = newVal;
51 }
52 }
43 }, 53 },
44 54
45 millisecondsOffset:{ 55 millisecondsOffset:{
46 value:5000 56 value:1000
47 }, 57 },
48 58
49 // Track model 59 // Track model
@@ -139,15 +149,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
139 // Initialize the timeline 149 // Initialize the timeline
140 initTimelineView : { 150 initTimelineView : {
141 value:function(){ 151 value:function(){
152
153 // Get some selectors to make life easier.
154 this.layout_tracks = this.element.querySelector(".layout-tracks");
155 this.layout_markers = this.element.querySelector(".layout_markers");
142 156
143 // Add event handlers on the buttons. 157 // Add event handlers on the buttons.
144 this.newlayer_button.identifier = "addLayer"; 158 this.newlayer_button.identifier = "addLayer";
145 this.newlayer_button.addEventListener("click", this, false); 159 this.newlayer_button.addEventListener("click", this, false);
146 this.deletelayer_button.identifier = "deleteLayer"; 160 this.deletelayer_button.identifier = "deleteLayer";
147 this.deletelayer_button.addEventListener("click", this, false); 161 this.deletelayer_button.addEventListener("click", this, false);
162
163 // New click listener to handle select/deselect events
164 this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
148 165
149 // Simultaneous scrolling of the layer and tracks 166 // Simultaneous scrolling of the layer and tracks
150 this.layer_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 167 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
151 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 168 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
152 169
153 // Calculate and draw time markers 170 // Calculate and draw time markers
@@ -159,6 +176,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
159 _firstLayerDraw = false; 176 _firstLayerDraw = false;
160 NJevent('newLayer',this._hashKey); 177 NJevent('newLayer',this._hashKey);
161 _firstLayerDraw = true; 178 _firstLayerDraw = true;
179 this.selectLayer(0);
162 180
163 // TODO - add condition for existing doc and parse DOM for top level elements 181 // TODO - add condition for existing doc and parse DOM for top level elements
164 } 182 }
@@ -166,8 +184,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
166 184
167 updateLayerScroll:{ 185 updateLayerScroll:{
168 value:function(){ 186 value:function(){
169 this.user_layers.scrollTop = this.layer_tracks.scrollTop; 187 console.log(this.layout_tracks.scrollLeft)
170 this.master_track.scrollLeft = this.layer_tracks.scrollLeft; 188 this.user_layers.scrollTop = this.layout_tracks.scrollTop;
189 this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft;
171 } 190 }
172 }, 191 },
173 192
@@ -183,7 +202,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
183 202
184 handleAddLayerClick:{ 203 handleAddLayerClick:{
185 value:function(event){ 204 value:function(event){
186 event.stopPropagation(); 205 //event.stopPropagation();
187 this._isLayer = true; 206 this._isLayer = true;
188 this.needsDraw = true; 207 this.needsDraw = true;
189 } 208 }
@@ -191,7 +210,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
191 210
192 handleDeleteLayerClick:{ 211 handleDeleteLayerClick:{
193 value:function(event){ 212 value:function(event){
194 event.stopPropagation(); 213 //event.stopPropagation();
195 this._deleteKeyDown=false; 214 this._deleteKeyDown=false;
196 if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ 215 if(this.application.ninja.currentSelectedContainer.id==="UserContent"){
197 this._hashKey="123"; 216 this._hashKey="123";
@@ -230,6 +249,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
230 } 249 }
231 }, 250 },
232 251
252 timelineLeftPaneClick : {
253 value: function(event) {
254 // Check ALL THE CLICKS
255 // Are they in a particular layer? If so, we need to select that layer and
256 // deselect the others.
257 var ptrParent = nj.queryParentSelector(event.target, ".container-layer");
258 if (ptrParent !== false) {
259 // Why yes, the click was within a layer. But which one?
260 var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText,
261 myIndex = this.getLayerIndexByName(strLabel);
262 this.selectLayer(myIndex);
263 }
264 }
265 },
266
233 handleNewLayer:{ 267 handleNewLayer:{
234 value:function(event){ 268 value:function(event){
235 // Add a new layer. It should be added above the currently selected layer, 269 // Add a new layer. It should be added above the currently selected layer,
@@ -315,6 +349,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
315 thingToPush.arrLayerStyles = []; 349 thingToPush.arrLayerStyles = [];
316 thingToPush.element=[]; 350 thingToPush.element=[];
317 thingToPush.deleted=false; 351 thingToPush.deleted=false;
352 thingToPush.isSelected = false;
318 if(_firstLayerDraw){ 353 if(_firstLayerDraw){
319 thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid; 354 thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid;
320 thingToPush.parentElement=this.application.ninja.currentSelectedContainer; 355 thingToPush.parentElement=this.application.ninja.currentSelectedContainer;
@@ -341,18 +376,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
341 if (!!this.layerRepetition.selectedIndexes) { 376 if (!!this.layerRepetition.selectedIndexes) {
342 myIndex = this.layerRepetition.selectedIndexes[0]; 377 myIndex = this.layerRepetition.selectedIndexes[0];
343 thingToPush.layerPosition=myIndex; 378 thingToPush.layerPosition=myIndex;
379 thingToPush.isSelected = true;
344 newTrack.trackPosition=myIndex; 380 newTrack.trackPosition=myIndex;
345 this.arrLayers.splice(myIndex, 0, thingToPush); 381 this.arrLayers.splice(myIndex, 0, thingToPush);
346 this.arrTracks.splice(myIndex, 0, newTrack); 382 this.arrTracks.splice(myIndex, 0, newTrack);
347 this._LayerUndoPosition = myIndex; 383 this._LayerUndoPosition = myIndex;
384 /*
348 this.currentLayerSelected= this.arrLayers[myIndex]; 385 this.currentLayerSelected= this.arrLayers[myIndex];
349 this.currentTrackSelected=this.arrTracks[myIndex]; 386 this.currentTrackSelected=this.arrTracks[myIndex];
387 var i = 0,
388 arrLayersLength = this.arrLayers.length;
389 for (i = 0; i < arrLayersLength; i++) {
390 if (i === myIndex) {
391 this.arrLayers[i].isSelected = true;
392 } else {
393 this.arrLayers[i].isSelected = false;
394 }
395 }
350 this.layerRepetition.selectedIndexes = [myIndex]; 396 this.layerRepetition.selectedIndexes = [myIndex];
397 */
398
399 this.selectLayer(myIndex);
400
351 this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); 401 this.hashInstance.setItem(this._hashKey,thingToPush,myIndex);
352 this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); 402 this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex);
353 } else { 403 } else {
354 this.arrLayers.push(thingToPush); 404 this.arrLayers.splice(0, 0, thingToPush);
355 this.arrTracks.push(newTrack); 405 this.arrTracks.splice(0, 0, newTrack);
356 thingToPush.layerPosition=this.arrLayers.length-1; 406 thingToPush.layerPosition=this.arrLayers.length-1;
357 newTrack.trackPosition=this.arrTracks.length-1; 407 newTrack.trackPosition=this.arrTracks.length-1;
358 this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1]; 408 this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1];
@@ -710,6 +760,70 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
710 760
711 } 761