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

5 files changed, 137 insertions, 8 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index add6cb38..add28385 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -66,6 +66,11 @@
                                         "boundObjectPropertyPath" : "objectAtCurrentIteration.editorProperty",
                                         "oneway" : false
                                 },
+                                "isSelected" : {
+                                        "boundObject" : {"@": "repetition1"},
+                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected",
+                                        "oneway" : false
+                                },
                                 "editorValue" : {
                                         "boundObject" : {"@": "repetition1"},
                                         "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue",
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 29171272..c5f5d7e4 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -103,6 +103,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     _isSelected:{
         value: false,
         writable: true,
+        serializable: true,
         enumerable: false
     },
 
@@ -111,7 +112,22 @@ var Layer = exports.Layer = Montage.create(Component, {
             return this._isSelected;
         },
         set:function(value){
-            this._isSelected = value;
+                if (value !== this._isSelected) {
+                        // Only concerned about different values
+                        if (value === false) {
+                                // Deselect all of the styles
+                                var i = 0, arrLayerStylesLength = this.arrLayerStyles.length;
+                                if (arrLayerStylesLength > 0) {
+                                        for (i = 0; i < arrLayerStylesLength; i++) {
+                                                this.arrLayerStyles[i].isSelected = false;
+                                        }
+                                        this.styleRepetition.selectedIndexes = null;
+                                }
+                        }
+                        this._isSelected = value;
+                        this.needsDraw = true;
+                }
+            
         }
     },
     _isAnimated:{
@@ -335,6 +351,12 @@ var Layer = exports.Layer = Montage.create(Component, {
                 this.styleCollapser.bypassAnimation = true;
                 this.styleCollapser.toggle();
             }
+            
+            if (this.isSelected) {
+                this.element.classList.add("selected");
+            } else {
+                this.element.classList.remove("selected");
+            }
         }
     },
         /* End: Draw cycle */
@@ -398,6 +420,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         newStyle.editorProperty = "";
                         newStyle.editorValue = "";
                         newStyle.ruleTweener = false;
+                        newStyle.isSelected = true;
                         
                         if (!!this.styleRepetition.selectedIndexes) {
                                 mySelection = this.styleRepetition.selectedIndexes[0];
@@ -450,13 +473,13 @@ var Layer = exports.Layer = Montage.create(Component, {
         handleAddStyleClick: {
                 value: function(event) {
                         // Stop the event propagation
-                        event.stopPropagation();
+                        //event.stopPropagation();
                         this.addStyle();
                 }
         },
         handleDeleteStyleClick: {
                 value: function(event) {
-                        event.stopPropagation();
+                        //event.stopPropagation();
                         this.deleteStyle();
                 }
         },
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index 796385d0..bf254795 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -19,6 +19,23 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
     },
     
     /* === BEGIN: Models === */
+        // isSelected: whether or not the style is selected
+        _isSelected: {
+                serializable: true,
+                value: false
+        },
+        isSelected: {
+                serializable: true,
+                get: function() {
+                        return this._isSelected;
+                },
+                set: function(newVal) {
+                        if (newVal !== this._isSelected) {
+                                this._isSelected = newVal;
+                                this.needsDraw = true;
+                        }
+                }
+        },
    
    // Property for this editor
     _editorProperty: {
@@ -152,6 +169,11 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                         // Show the right thing
                         this._showView();
                 }
+                if (this.isSelected) {
+                        this.element.classList.add("selected");
+                } else {
+                        this.element.classList.remove("selected");
+                }
         }
     },
     didDraw: {
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.addEventL