Timeline: select/deselect layers. Work on focus/blur for layers.

2 files changed, 84 insertions, 5 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 9ed69f4a..1785f888 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -14,6 +14,7 @@
                         "element": {"#": "timeline_panel"},
                         "user_layers": {"#": "user_layers"},
                         "track_container": {"#": "right_inside"},
+                        "timeline_leftpane" : {"#" : "timeline_leftpane"},
                         "layer_tracks": {"#": "layer_tracks"},
                         "master_track": {"#": "master_track"},
                         "newlayer_button": {"#": "newlayer_button"},
@@ -92,6 +93,11 @@
                                         "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed",
                                         "oneway" : false
                                 },
+                                "isSelected" : {
+                                        "boundObject" : {"@" : "repetition1"},
+                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected",
+                                        "oneway" : false
+                                },
                                 "isStyleCollapsed" : {
                                         "boundObject" : {"@" : "repetition1"},
                                         "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed",
@@ -167,7 +173,7 @@
             <div id="main_timeline" class="maintimeline">
 
 
-                <div id="timeline_leftpane" class="tl_leftpane">
+                <div id="timeline_leftpane" class="tl_leftpane" tabindex="-1">
                     <div id="leftpane_inside" class="leftinside">
                         <div id="timeline_controller" class="timelinecontroller">
                             <div id="timeline_controls" class="timelinecontrols">
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index e0825893..a8934017 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;
 var Component = require("montage/ui/component").Component;
 var Layer = require("js/panels/Timeline/Layer.reel").Layer;
 var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
+var nj = require("js/lib/NJUtils").NJUtils;
 
 // var Track = require("js/panels/Timeline/Track.reel").Track;
 
@@ -155,6 +156,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.newlayer_button.addEventListener("click", this, false);
             this.deletelayer_button.identifier = "deleteLayer";
             this.deletelayer_button.addEventListener("click", this, false);
+            
+            // New click listener to handle select/deselect events
+            this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
+            this.timeline_leftpane.addEventListener("blur", this.timelineLeftPanelBlur.bind(this), false);
+            this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false);
+            
+            
 
             // Simultaneous scrolling of the layer and tracks
             this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
@@ -194,7 +202,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     handleAddLayerClick:{
         value:function(event){
-            event.stopPropagation();
+            //event.stopPropagation();
             this._isLayer = true;
             this.needsDraw = true;
 
@@ -203,7 +211,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     handleDeleteLayerClick:{
         value:function(event){
-            event.stopPropagation();
+            //event.stopPropagation();
             this._deleteKeyDown=false;
             if(this.application.ninja.currentSelectedContainer.id==="UserContent"){
                 this._hashKey="123";
@@ -237,6 +245,60 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+        timelineLeftPaneClick : {
+                value: function(event) {
+                        // Check ALL THE CLICKS
+                        // Are they in a particular layer? If so, we need to select that layer and
+                        // deselect the others.
+                        var ptrParent = nj.queryParentSelector(event.target, ".container-layer");
+                        if (ptrParent !== false) {
+                                // Why yes, the click was within a layer.  But which one?
+                                var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText,
+                                        myIndex = 0,
+                                        i = 0,
+                                        arrLayersLength = this.arrLayers.length;
+                                        console.log(strLabel);
+                                for (i = 0; i < arrLayersLength; i++) {
+                                        if (this.arrLayers[i].layerName === strLabel) {
+                                                myIndex = i;
+                                                this.arrLayers[i].isSelected = true;
+                                        } else {
+                                                this.arrLayers[i].isSelected = false;
+                                        }
+                                }
+                        }
+                }
+        },
+        
+        timelineLeftPanelBlur: {
+                value: function(event) {
+                        console.log('blur called with ' + this._skipNextBlur);
+                        if (this._skipNextBlur === true) {
+                                this._skipNextBlur = false;
+                        } else {
+                                var i = 0,
+                                        arrLayersLength = this.arrLayers.length;
+                                for (i = 0; i < arrLayersLength; i++) {
+                                        this.arrLayers[i].isSelected = false;
+                                }
+                                this.layerRepetition.selectedIndexes = null;
+                        }
+                }
+        },
+        _skipNextBlur : {
+                value: false
+        },
+        timelineLeftPanelMousedown : {
+                value: function(event) {
+                        console.log(event.target.classList)
+                        var ptrParent = nj.queryParentSelector(event.target, ".label-style");
+                        console.log('mousedown with ' + ptrParent)
+                        if (ptrParent !== false) {
+                                this._skipNextBlur = true;
+                        }
+                }
+        },
+
      handleNewLayer:{
         value:function(event){
             // Add a new layer.  It should be added above the currently selected layer,
@@ -314,6 +376,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         thingToPush.arrLayerStyles = [];
                         thingToPush.element=[];
                         thingToPush.deleted=false;
+                        thingToPush.isSelected = false;
                         thingToPush.parentElement=this.application.ninja.currentSelectedContainer;
                        // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid;
 
@@ -332,14 +395,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                             this.hashInstance.setItem(this._hashKey,thingToPush,myIndex);
                             this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex);
                             thingToPush.layerPosition=myIndex;
+                            thingToPush.isSelected = true;
                             newTrack.trackPosition=myIndex;
                             this.arrLayers.splice(myIndex, 0, thingToPush);
                             this.arrTracks.splice(myIndex, 0, newTrack);
                             this.currentLayerSelected= this.arrLayers[myIndex];
+                            var i = 0,
+                                                                arrLayersLength = this.arrLayers.length;
+                                                        for (i = 0; i < arrLayersLength; i++) {
+                                                                if (i === myIndex) {
+                                                                        this.arrLayers[i].isSelected = true;
+                                                                } else {
+                                                                        this.arrLayers[i].isSelected = false;
+                                                                }
+                                                        }
                             this.layerRepetition.selectedIndexes = [myIndex];
                         } else {
-                            this.arrLayers.push(thingToPush);
-                            this.arrTracks.push(newTrack);
+                            this.arrLayers.splice(0, 0, thingToPush);
+                            this.arrTracks.splice(0, 0, newTrack);