diff options
Diffstat (limited to 'js/components/layout/bread-crumb.reel')
-rwxr-xr-x | js/components/layout/bread-crumb.reel/bread-crumb.css | 17 | ||||
-rwxr-xr-x | js/components/layout/bread-crumb.reel/bread-crumb.html | 73 | ||||
-rwxr-xr-x | js/components/layout/bread-crumb.reel/bread-crumb.js | 59 |
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 @@ | |||
11 | 11 | ||
12 | -webkit-box-flex: 0; | 12 | -webkit-box-flex: 0; |
13 | } | 13 | } |
14 | .bread_crumb_button{ | ||
15 | background-color: #575757; | ||
16 | float: left; | ||
17 | width: 40px; | ||
18 | height: 20px; | ||
19 | margin-left: 5px; | ||
20 | margin-top: 3px; | ||
21 | |||
22 | font-family: 'Droid Sans', sans-serif; | ||
23 | font-size: 12px; | ||
24 | text-shadow: 1px 1px 1px black; | ||
25 | 14 | ||
26 | color: white; | 15 | .breadcrumbTrail button { |
27 | } \ No newline at end of file | 16 | float: left; |
17 | width: 60px; | ||
18 | } | ||
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 @@ | |||
17 | "name": "Breadcrumb", | 17 | "name": "Breadcrumb", |
18 | "properties": { | 18 | "properties": { |
19 | "element": {"#": "breadcrumbTrail"}, | 19 | "element": {"#": "breadcrumbTrail"}, |
20 | "button" : {"@":"breadCrumbButton"}, | 20 | "breadcrumbBt": {"@": "breadCrumbButton"} |
21 | "stylerepetition" : {"@":"repetition1"} | ||
22 | |||
23 | } | 21 | } |
24 | }, | 22 | }, |
25 | 23 | ||
26 | "breadCrumbButton": { | 24 | "breadCrumbButton": { |
27 | "module": "js/components/layout/bread-crumb-button.reel", | 25 | "module": "montage/ui/button.reel", |
28 | "name": "BreadcrumbButton", | 26 | "name": "Button", |
29 | "properties": { | 27 | "properties": { |
30 | "element": {"#": "breadcrumb_button"} | 28 | "element": {"#": "breadcrumb_button"} |
31 | }, | 29 | }, |
32 | "bindings": { | 30 | "listeners": [ |
33 | "data": { | 31 | { |
34 | "boundObject": {"@": "repetition1"}, | 32 | "type": "action", |
35 | "boundObjectPropertyPath": "objectAtCurrentIteration", | 33 | "listener": {"@": "owner"} |
36 | "oneway": true | 34 | } |
37 | } | 35 | ], |
38 | } | 36 | "bindings": { |
39 | }, | 37 | "label": { |
40 | 38 | "boundObject": {"@": "repetition1"}, | |
41 | "repetition1": { | 39 | "boundObjectPropertyPath": "objectAtCurrentIteration.label", |
42 | "module": "montage/ui/repetition.reel", | 40 | "oneway": true |
43 | "name": "Repetition", | 41 | }, |
44 | "properties": { | 42 | "value": { |
45 | "element": {"#": "breadcrumb_container"} | 43 | "boundObject": {"@": "repetition1"}, |
46 | }, | 44 | "boundObjectPropertyPath": "objectAtCurrentIteration.nodeUuid", |
47 | "bindings": { | 45 | "oneway": true |
48 | "objects": { | 46 | } |
49 | "boundObject": {"@": "owner"}, | 47 | } |
50 | "boundObjectPropertyPath": "containerElements", | 48 | }, |
51 | "oneway": true | ||
52 | } | ||
53 | } | ||
54 | } | ||
55 | |||
56 | 49 | ||
50 | "repetition1": { | ||
51 | "module": "montage/ui/repetition.reel", | ||
52 | "name": "Repetition", | ||
53 | "properties": { | ||
54 | "element": {"#": "breadcrumb_container"} | ||
55 | }, | ||
56 | "bindings": { | ||
57 | "objects": { | ||
58 | "boundObject": {"@": "owner"}, | ||
59 | "boundObjectPropertyPath": "containerElements", | ||
60 | "oneway": true | ||
61 | } | ||
62 | } | ||
63 | } | ||
57 | } | 64 | } |
58 | </script> | 65 | </script> |
59 | 66 | ||
@@ -62,7 +69,7 @@ | |||
62 | 69 | ||
63 | <section id="breadcrumbTrail" class="breadcrumbTrail"> | 70 | <section id="breadcrumbTrail" class="breadcrumbTrail"> |
64 | <div id="breadcrumb_container"> | 71 | <div id="breadcrumb_container"> |
65 | <div id="breadcrumb_button"></div> | 72 | <button id="breadcrumb_button" class="nj-skinned"></button> |
66 | </div> | 73 | </div> |
67 | </section> | 74 | </section> |
68 | 75 | ||
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, { | |||
29 | value: [] | 29 | value: [] |
30 | }, | 30 | }, |
31 | 31 | ||
32 | 32 | prepareForDraw: { | |
33 | deserializedFromTemplate : { | ||
34 | value: function() { | 33 | value: function() { |
35 | this.eventManager.addEventListener( "breadCrumbTrail", this, false); | 34 | this.breadcrumbBt.addEventListener("action", this, false); |
36 | } | 35 | } |
37 | }, | 36 | }, |
38 | 37 | ||
@@ -40,56 +39,38 @@ exports.Breadcrumb = Montage.create(Component, { | |||
40 | value: function() { | 39 | value: function() { |
41 | var parentNode; | 40 | var parentNode; |
42 | 41 | ||
43 | this.containerElements.length = 0 | 42 | this.containerElements.length = 0; |
44 | |||
45 | if(this.container.id === "UserContent") { | ||
46 | this.containerElements.push({selected:false, element:this.container}); | ||
47 | } else { | ||
48 | parentNode = this.container; | ||
49 | 43 | ||
50 | while(parentNode.id!=="UserContent") { | 44 | parentNode = this.container; |
51 | this.containerElements.unshift({selected:false,element:parentNode}); | ||
52 | parentNode = parentNode.parentNode; | ||
53 | } | ||
54 | 45 | ||
55 | this.containerElements.unshift({selected:false,element:parentNode}); | 46 | while(parentNode.id !== "UserContent") { |
47 | this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName}); | ||
48 | parentNode = parentNode.parentNode; | ||
56 | } | 49 | } |
57 | 50 | ||
58 | NJevent('layerBinding',{selected:false ,element:this.container}) | 51 | // This is always the top container which is now hardcoded to body |
52 | this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": "Body"}); | ||
53 | |||
54 | // This is for the timeline -- Disable it since the timeline should not know about this object | ||
55 | // NJevent('layerBinding',{selected:false ,element:this.container}) | ||
56 | |||
59 | } | 57 | } |
60 | }, | 58 | }, |
61 | 59 | ||
62 | handleBreadCrumbTrail: { | 60 | handleAction: { |
63 | value: function(event) { | 61 | value: function(evt) { |
64 | var newLength,revaluatedLength,tmpvalue; | ||
65 | var i=0; | ||
66 | 62 | ||
67 | if(event.detail.setFlag ){ | 63 | if(evt.target.value === this.container.uuid) { |
68 | this.application.ninja.currentSelectedContainer = event.detail.element; | ||
69 | return; | 64 | return; |
70 | } | 65 | } |
71 | 66 | ||
72 | newLength = this.containerElements.length; | 67 | for(var i = this.containerElements.length - 1; i >= 0; i--) { |
68 | if(evt.target.value === this.containerElements[i].nodeUuid) break; | ||
73 | 69 | ||
74 | while(i < newLength ){ | 70 | this.containerElements.pop(); |
75 | if(this.containerElements[i].selected){ | ||
76 | tmpvalue = i; | ||
77 | break; | ||
78 | } | ||
79 | i++; | ||
80 | } | 71 | } |
81 | 72 | ||
82 | for(i = newLength -1 ; i >= 1 ; i--) { | 73 | this.application.ninja.currentSelectedContainer = this.containerElements[i].node; |
83 | if(tmpvalue !== i) { | ||
84 | this.containerElements.pop(); | ||
85 | } else { | ||
86 | break; | ||
87 | } | ||
88 | } | ||
89 | |||
90 | revaluatedLength = this.containerElements.length; | ||
91 | this.application.ninja.currentSelectedContainer = this.containerElements[revaluatedLength-1].element; | ||
92 | |||
93 | } | 74 | } |
94 | } | 75 | } |
95 | }); |