Timeline: Feature: select first layer by default. Bug fix: Remove left panel blur; we should never have a situation where no layers are selected.

1 files changed, 13 insertions, 34 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 48537cef..860868e5 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -38,9 +38,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this._layerRepetition = newVal;
         }
     },
-   
+        _currentLayerNumber: {
+                value: 0
+        },
     currentLayerNumber:{
-        value:0
+        get: function() {
+                return this._currentLayerNumber;
+        },
+        set: function(newVal) {
+                if (newVal !== this._currentLayerNumber) {
+                        this._currentLayerNumber = newVal;
+                }
+        }
     },
 
     millisecondsOffset:{
@@ -153,9 +162,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             
             // New click listener to handle select/deselect events
             this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
-            
-            // New click listener on body to handle "blurring" the panel
-            document.addEventListener("click", this.handleBlur.bind(this), false);
 
             // Simultaneous scrolling of the layer and tracks
             this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
@@ -170,6 +176,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             _firstLayerDraw = false;
             NJevent('newLayer',this._hashKey);
             _firstLayerDraw = true;
+            this.selectLayer(0);
 
             // TODO - add condition for existing doc and parse DOM for top level elements
         }
@@ -256,17 +263,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         }
                 }
         },
-        
-        handleBlur: {
-                value: function(event) {
-                        var ptrParent = nj.queryParentSelector(event.target, ".tl_leftpane");
-                        if (ptrParent !== false) {
-                                // We were clicking somewhere within the left pane, so we shouldn't blur.
-                        } else {
-                                this.selectLayer("none");
-                        }
-                }
-        },
 
      handleNewLayer:{
         value:function(event){
@@ -400,7 +396,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                             this.layerRepetition.selectedIndexes = [myIndex];
                             */
                            
-                           this.selectLayer(myIndex);
+                                                        this.selectLayer(myIndex);
                            
                             this.hashInstance.setItem(this._hashKey,thingToPush,myIndex);
                             this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex);
@@ -810,23 +806,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 
         }
     },
-    getLayerIndexByName : {
-        value: function(layerName) {
-                // Get the index in this.arrLayers that matches a particular layerName
-                // Returns false if no match
-                var i = 0, 
-                        returnVal = false,
-                        arrLayersLength = this.arrLayers.length;
-                        
-                for (i=0; i < arrLayersLength; i++) {
-                        if (this.arrLayers[i].layerName === layerName) {
-                                returnVal = i;
-                        }
-                }
-                
-                return returnVal;
-        }
-    },
 
     insertLayer: {
             value: function() {