cleanup and fixing selecting each bread crumb

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

3 files changed, 64 insertions, 85 deletions

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css
index 0ca8adec..ae1ea794 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.css
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.css
@@ -11,17 +11,8 @@
 
     -webkit-box-flex: 0;
 }
-.bread_crumb_button{
-    background-color: #575757;
-    float: left;
-    width: 40px;
-    height: 20px;
-    margin-left: 5px;
-    margin-top: 3px;
-
-    font-family: 'Droid Sans', sans-serif;
-    font-size: 12px;
-    text-shadow: 1px 1px 1px black;
 
-    color: white;
-} 
\ No newline at end of file
+.breadcrumbTrail button {
+    float: left;
+    width: 60px;
+}
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html
index 234596a6..f2368e9a 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.html
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -17,43 +17,50 @@
                     "name": "Breadcrumb",
                     "properties": {
                         "element": {"#": "breadcrumbTrail"},
-                        "button" : {"@":"breadCrumbButton"},
-                        "stylerepetition" : {"@":"repetition1"}
-
+                        "breadcrumbBt": {"@": "breadCrumbButton"}
                     }
                 },
 
                 "breadCrumbButton": {
-                   "module": "js/components/layout/bread-crumb-button.reel",
-                   "name": "BreadcrumbButton",
-                   "properties": {
-                       "element": {"#": "breadcrumb_button"}
-                   },
-                   "bindings": {
-                       "data": {
-                           "boundObject": {"@": "repetition1"},
-                           "boundObjectPropertyPath": "objectAtCurrentIteration",
-                           "oneway": true
-                       }
-                   }
-               },
-
-               "repetition1": {
-                   "module": "montage/ui/repetition.reel",
-                   "name": "Repetition",
-                   "properties": {
-                       "element": {"#": "breadcrumb_container"}
-                   },
-                   "bindings": {
-                       "objects": {
-                           "boundObject": {"@": "owner"},
-                           "boundObjectPropertyPath": "containerElements",
-                           "oneway": true
-                       }
-                   }
-               }
-
+                    "module": "montage/ui/button.reel",
+                    "name": "Button",
+                    "properties": {
+                        "element": {"#": "breadcrumb_button"}
+                    },
+                    "listeners": [
+                        {
+                            "type": "action",
+                            "listener": {"@": "owner"}
+                        }
+                    ],
+                    "bindings": {
+                        "label": {
+                            "boundObject": {"@": "repetition1"},
+                            "boundObjectPropertyPath": "objectAtCurrentIteration.label",
+                            "oneway": true
+                        },
+                        "value": {
+                            "boundObject": {"@": "repetition1"},
+                            "boundObjectPropertyPath": "objectAtCurrentIteration.nodeUuid",
+                            "oneway": true
+                        }
+                    }
+                },
 
+                "repetition1": {
+                    "module": "montage/ui/repetition.reel",
+                    "name": "Repetition",
+                    "properties": {
+                        "element": {"#": "breadcrumb_container"}
+                    },
+                    "bindings": {
+                        "objects": {
+                            "boundObject": {"@": "owner"},
+                            "boundObjectPropertyPath": "containerElements",
+                            "oneway": true
+                        }
+                    }
+                }
             }
         </script>
 
@@ -62,7 +69,7 @@
 
         <section id="breadcrumbTrail" class="breadcrumbTrail">
             <div id="breadcrumb_container">
-                <div id="breadcrumb_button"></div>
+                <button id="breadcrumb_button" class="nj-skinned"></button>
             </div>
         </section>
 
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index d071e48a..b2fa42b1 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -29,10 +29,9 @@ exports.Breadcrumb = Montage.create(Component, {
         value: []
     },
 
-
-    deserializedFromTemplate : {
+    prepareForDraw: {
         value: function() {
-            this.eventManager.addEventListener( "breadCrumbTrail", this, false);
+            this.breadcrumbBt.addEventListener("action", this, false);
         }
     },
 
@@ -40,56 +39,38 @@ exports.Breadcrumb = Montage.create(Component, {
         value: function() {
             var parentNode;
 
-            this.containerElements.length = 0
-
-            if(this.container.id === "UserContent") {
-                this.containerElements.push({selected:false, element:this.container});
-            } else {
-                parentNode = this.container;
+            this.containerElements.length = 0;
 
-                while(parentNode.id!=="UserContent") {
-                    this.containerElements.unshift({selected:false,element:parentNode});
-                    parentNode = parentNode.parentNode;
-                }
+            parentNode = this.container;
 
-                this.containerElements.unshift({selected:false,element:parentNode});
+            while(parentNode.id !== "UserContent") {
+                this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName});
+                parentNode = parentNode.parentNode;
             }
 
-            NJevent('layerBinding',{selected:false ,element:this.container})
+            // This is always the top container which is now hardcoded to body
+            this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": "Body"});
+
+            // This is for the timeline -- Disable it since the timeline should not know about this object
+            // NJevent('layerBinding',{selected:false ,element:this.container})
+
         }
     },
 
-    handleBreadCrumbTrail: {
-        value: function(event) {
-            var newLength,revaluatedLength,tmpvalue;
-            var i=0;
+    handleAction: {
+        value: function(evt) {
 
-            if(event.detail.setFlag ){
-                this.application.ninja.currentSelectedContainer = event.detail.element;
+            if(evt.target.value === this.container.uuid) {
                 return;
             }
 
-            newLength = this.containerElements.length;
+            for(var i = this.containerElements.length - 1; i >= 0; i--) {
+                if(evt.target.value === this.containerElements[i].nodeUuid) break;
 
-            while(i < newLength ){
-                if(this.containerElements[i].selected){
-                    tmpvalue = i;
-                    break;
-                }
-                i++;
+                this.containerElements.pop();
             }
 
-            for(i = newLength -1 ; i >= 1 ; i--) {
-                if(tmpvalue !== i) {
-                    this.containerElements.pop();
-                } else {
-                    break;
-                }
-            }
-
-            revaluatedLength = this.containerElements.length;
-            this.application.ninja.currentSelectedContainer = this.containerElements[revaluatedLength-1].element;
+            this.application.ninja.currentSelectedContainer = this.containerElements[i].node;