breadcrumb cleanup and moving the resized on top of the timeline panel

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
author: Valerio Virgillito 2012-02-27 21:17:29 -0800
committer: Valerio Virgillito 2012-02-27 21:17:29 -0800
commit: db5db0a92c1fb67eac262c33d4fbf776ceabbb3c (patch)
tree: 5067bf199ba998dae1ee42de49fc98c989198237 /js
parent: 8125c8c6c9431067840d81c46624b6a2dd5eb4a7 (diff)
download: ninja-db5db0a92c1fb67eac262c33d4fbf776ceabbb3c.tar.gz
6 files changed, 34 insertions, 36 deletions
diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js
index 3f5b87e1..c1ac99bd 100755
--- a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js
+++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js
@@ -17,6 +17,11 @@ exports.BreadcrumbButton = Montage.create(Component, {
        value: null
    },
+    // Bound container for the button
+    container: {
+        value: null
+    },
    prepareForDraw: {
        value: function() {
            this.element.addEventListener("mousedown", this, false);
@@ -25,27 +30,30 @@ exports.BreadcrumbButton = Montage.create(Component, {
    draw: {
        value: function() {
+            // Temporary until we have the new template
+            /*
+            if(this.container.id === "UserContent") {
+                this.button.innerHTML = "Body";
+            } else {
+                this.button.innerHTML = this.container.nodeName.toLowerCase();
+            }
+            */
+            //
            if(this.data.element.id === "UserContent") {
                this.button.innerHTML = "Body";
            } else {
                this.button.innerHTML = this.data.element.nodeName;
            }
        }
    },
    handleMousedown: {
        value: function(event) {
-             //this.data.selected=true;
             NJevent('breadCrumbTrail',this.data);
-             //this.data.selected=false;
        }
    }
 }); 
 \ No newline at end of file
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css
index cc984609..0ca8adec 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.css
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.css
@@ -4,12 +4,11 @@
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-.bread_crumb{
+.breadcrumbTrail{
    background-color: #282828;
    border-style: double;
    height: 26px;
-}
-.breadcrumbtrail{
    -webkit-box-flex: 0;
 }
 .bread_crumb_button{
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html
index c1b9ed61..234596a6 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.html
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -16,7 +16,7 @@
                    "module": "js/components/layout/bread-crumb.reel",
                    "name": "Breadcrumb",
                    "properties": {
-                        "element": {"#": "breadcrumb_trail"},
+                        "element": {"#": "breadcrumbTrail"},
                        "button" : {"@":"breadCrumbButton"},
                        "stylerepetition" : {"@":"repetition1"}
@@ -60,11 +60,11 @@
    </head>
    <body>
-        <div id="breadcrumb_trail" class="breadcrumbtrail">
+        <section id="breadcrumbTrail" class="breadcrumbTrail">
-            <div id="breadcrumb_container" class="bread_crumb">
+            <div id="breadcrumb_container">
                <div id="breadcrumb_button"></div>
            </div>
-        </div>
+        </section>
    </body>
 </html> 
 \ No newline at end of file
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index 1824c7c3..d071e48a 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -7,7 +7,7 @@
 var Montage = require("montage/core/core").Montage,
    Component = require("montage/ui/component").Component;
-var Breadcrumb = exports.Breadcrumb = Montage.create(Component, {
+exports.Breadcrumb = Montage.create(Component, {
    _container:{
        value:null
@@ -32,23 +32,10 @@ var Breadcrumb = exports.Breadcrumb = Montage.create(Component, {
    deserializedFromTemplate : {
        value: function() {
-            this.eventManager.addEventListener( "appLoaded", this, false);
            this.eventManager.addEventListener( "breadCrumbTrail", this, false);
        }
    },
-    handleAppLoaded : {
-        value: function() {
-            Object.defineBinding(this, "container", {
-                    boundObject: this.application.ninja,
-                    boundObjectPropertyPath: "currentSelectedContainer",
-                    oneway: false
-            });
-        }
-    },
    createContainerElements: {
        value: function() {
            var parentNode;
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 1393b4b9..191aef8a 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -181,7 +181,13 @@
                "name": "Breadcrumb",
                "properties":{
                    "element":{"#" : "breadCrumbComponent"}
+                },
+                "bindings" : {
+                    "container": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "currentSelectedContainer",
+                        "oneway": false
+                    }
                }
             },
@@ -369,10 +375,10 @@
                            </section>
                        </section>
+                        <section id="breadCrumbComponent"></section>
                        <section id="timelineResizer" class="timelineResizer resizeBar"></section>
-                            <section id="breadCrumbTrail">
-                                <div id="breadCrumbComponent"></div>
-                            </section>
                        <section id="bottomPanelContainer" class="panelContainer">
                            <section id="timelinePanel" class="panel">
                                <div id="timelinePanelComponent"></div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index a5cde00f..50837e98 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -419,7 +419,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                        hashVariable++;
                    }
                    this.application.ninja.currentSelectedContainer = parentNode;
-                    //NJevent('breadCrumbTrail', {"element":parentNode, "setFlag":this._setBreadCrumb});
                } else {
                    dLayer = this.has
author	Valerio Virgillito	2012-02-27 21:17:29 -0800
committer	Valerio Virgillito	2012-02-27 21:17:29 -0800
commit	db5db0a92c1fb67eac262c33d4fbf776ceabbb3c (patch)
tree	5067bf199ba998dae1ee42de49fc98c989198237 /js
parent	8125c8c6c9431067840d81c46624b6a2dd5eb4a7 (diff)
download	ninja-db5db0a92c1fb67eac262c33d4fbf776ceabbb3c.tar.gz

diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js index 3f5b87e1..c1ac99bd 100755 --- a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js +++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.js
@@ -17,6 +17,11 @@ exports.BreadcrumbButton = Montage.create(Component, {
17	value: null	17	value: null
18	},	18	},
19		19
		20	// Bound container for the button
		21	container: {
		22	value: null
		23	},
		24
20	prepareForDraw: {	25	prepareForDraw: {
21	value: function() {	26	value: function() {
22	this.element.addEventListener("mousedown", this, false);	27	this.element.addEventListener("mousedown", this, false);
@@ -25,27 +30,30 @@ exports.BreadcrumbButton = Montage.create(Component, {
25		30
26	draw: {	31	draw: {
27	value: function() {	32	value: function() {
		33
		34	// Temporary until we have the new template
		35	/*
		36	if(this.container.id === "UserContent") {
		37	this.button.innerHTML = "Body";
		38	} else {
		39	this.button.innerHTML = this.container.nodeName.toLowerCase();
		40	}
		41	*/
		42	//
		43
28	if(this.data.element.id === "UserContent") {	44	if(this.data.element.id === "UserContent") {
29	this.button.innerHTML = "Body";	45	this.button.innerHTML = "Body";
30	} else {	46	} else {
31	this.button.innerHTML = this.data.element.nodeName;	47	this.button.innerHTML = this.data.element.nodeName;
32	}	48	}
		49
33	}	50	}
34	},	51	},
35		52
36	handleMousedown: {	53	handleMousedown: {
37	value: function(event) {	54	value: function(event) {
38
39	//this.data.selected=true;
40	NJevent('breadCrumbTrail',this.data);	55	NJevent('breadCrumbTrail',this.data);
41	//this.data.selected=false;
42
43	}	56	}
44	}	57	}
45		58
46
47
48
49
50
51	}); \ No newline at end of file	59	}); \ No newline at end of file


diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css index cc984609..0ca8adec 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.css +++ b/js/components/layout/bread-crumb.reel/bread-crumb.css
@@ -4,12 +4,11 @@
4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5	</copyright> */	5	</copyright> */
6		6
7	.bread_crumb{	7	.breadcrumbTrail{
8	background-color: #282828;	8	background-color: #282828;
9	border-style: double;	9	border-style: double;
10	height: 26px;	10	height: 26px;
11	}	11
12	.breadcrumbtrail{
13	-webkit-box-flex: 0;	12	-webkit-box-flex: 0;
14	}	13	}
15	.bread_crumb_button{	14	.bread_crumb_button{


diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html index c1b9ed61..234596a6 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.html +++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -16,7 +16,7 @@
16	"module": "js/components/layout/bread-crumb.reel",	16	"module": "js/components/layout/bread-crumb.reel",
17	"name": "Breadcrumb",	17	"name": "Breadcrumb",
18	"properties": {	18	"properties": {
19	"element": {"#": "breadcrumb_trail"},	19	"element": {"#": "breadcrumbTrail"},
20	"button" : {"@":"breadCrumbButton"},	20	"button" : {"@":"breadCrumbButton"},
21	"stylerepetition" : {"@":"repetition1"}	21	"stylerepetition" : {"@":"repetition1"}
22		22
@@ -60,11 +60,11 @@
60	</head>	60	</head>
61	<body>	61	<body>
62		62
63	<div id="breadcrumb_trail" class="breadcrumbtrail">	63	<section id="breadcrumbTrail" class="breadcrumbTrail">
64	<div id="breadcrumb_container" class="bread_crumb">	64	<div id="breadcrumb_container">
65	<div id="breadcrumb_button"></div>	65	<div id="breadcrumb_button"></div>
66	</div>	66	</div>
67	</div>	67	</section>
68		68
69	</body>	69	</body>
70	</html> \ No newline at end of file	70	</html> \ No newline at end of file


diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js index 1824c7c3..d071e48a 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.js +++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -7,7 +7,7 @@
7	var Montage = require("montage/core/core").Montage,	7	var Montage = require("montage/core/core").Montage,
8	Component = require("montage/ui/component").Component;	8	Component = require("montage/ui/component").Component;
9		9
10	var Breadcrumb = exports.Breadcrumb = Montage.create(Component, {	10	exports.Breadcrumb = Montage.create(Component, {
11		11
12	_container:{	12	_container:{
13	value:null	13	value:null
@@ -32,23 +32,10 @@ var Breadcrumb = exports.Breadcrumb = Montage.create(Component, {
32		32
33	deserializedFromTemplate : {	33	deserializedFromTemplate : {
34	value: function() {	34	value: function() {
35	this.eventManager.addEventListener( "appLoaded", this, false);
36	this.eventManager.addEventListener( "breadCrumbTrail", this, false);	35	this.eventManager.addEventListener( "breadCrumbTrail", this, false);
37	}	36	}
38	},	37	},
39		38
40	handleAppLoaded : {
41	value: function() {
42
43	Object.defineBinding(this, "container", {
44	boundObject: this.application.ninja,
45	boundObjectPropertyPath: "currentSelectedContainer",
46	oneway: false
47	});
48
49	}
50	},
51
52	createContainerElements: {	39	createContainerElements: {
53	value: function() {	40	value: function() {
54	var parentNode;	41	var parentNode;


diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 1393b4b9..191aef8a 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html
@@ -181,7 +181,13 @@
181	"name": "Breadcrumb",	181	"name": "Breadcrumb",
182	"properties":{	182	"properties":{
183	"element":{"#" : "breadCrumbComponent"}	183	"element":{"#" : "breadCrumbComponent"}
184		184	},
		185	"bindings" : {
		186	"container": {
		187	"boundObject": {"@": "owner"},
		188	"boundObjectPropertyPath": "currentSelectedContainer",
		189	"oneway": false
		190	}
185	}	191	}
186	},	192	},
187		193
@@ -369,10 +375,10 @@
369	</section>	375	</section>
370	</section>	376	</section>
371		377
		378	<section id="breadCrumbComponent"></section>
		379
372	<section id="timelineResizer" class="timelineResizer resizeBar"></section>	380	<section id="timelineResizer" class="timelineResizer resizeBar"></section>
373	<section id="breadCrumbTrail">	381
374	<div id="breadCrumbComponent"></div>
375	</section>
376	<section id="bottomPanelContainer" class="panelContainer">	382	<section id="bottomPanelContainer" class="panelContainer">
377	<section id="timelinePanel" class="panel">	383	<section id="timelinePanel" class="panel">
378	<div id="timelinePanelComponent"></div>	384	<div id="timelinePanelComponent"></div>


diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a5cde00f..50837e98 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -419,7 +419,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
419	hashVariable++;	419	hashVariable++;
420	}	420	}
421	this.application.ninja.currentSelectedContainer = parentNode;	421	this.application.ninja.currentSelectedContainer = parentNode;
422	//NJevent('breadCrumbTrail', {"element":parentNode, "setFlag":this._setBreadCrumb});
423	} else {	422	} else {
424	dLayer = this.has