# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1474912364 -7200
# Node ID e1f154f20f9676eff0aa05c85f72e5c4031367d6
# Parent  f3dae62a0d8ae7aacc266bc3a2874f7356bf6a2e
Add selected state to treemap

diff -r f3dae62a0d8a -r e1f154f20f96 cms/app-client/app/components/visu-langues.js
--- a/cms/app-client/app/components/visu-langues.js	Mon Sep 26 19:01:35 2016 +0200
+++ b/cms/app-client/app/components/visu-langues.js	Mon Sep 26 19:52:44 2016 +0200
@@ -8,6 +8,11 @@
     constants: Ember.inject.service(),
     filter: Ember.inject.service(),
 
+    filterObserver: Ember.observer('filter.language', function() {
+        Ember.$('.node').removeClass("selected");
+        Ember.$('.node[data-id="' + this.get('filter').get('language') + '"]').addClass("selected");
+    }),
+
     didInsertElement: function(){
         var self = this;
         var baseurl = ENV.rootURL.replace(/\/$/,"")+'/api/v1';
@@ -122,9 +127,10 @@
                 var node = nodes.selectAll()
                     .data(d._children)
                     .enter()
-                    .append("div");
+                    .append("div")
+                    .attr("data-id", function(d) { return d.id; });
 
-                node.attr("class", "node")
+                node.attr("class", function(d) { return "node" + ( d.id === self.get('filter').get('language') ? " selected" : "" ); })
                     .call(position)
                     .on("click", selectHandler);
 
@@ -184,7 +190,6 @@
             }
 
         });
-
     }
 
 });
diff -r f3dae62a0d8a -r e1f154f20f96 cms/app-client/app/styles/tabs/langues.scss
--- a/cms/app-client/app/styles/tabs/langues.scss	Mon Sep 26 19:01:35 2016 +0200
+++ b/cms/app-client/app/styles/tabs/langues.scss	Mon Sep 26 19:52:44 2016 +0200
@@ -48,10 +48,16 @@
 	position: absolute;
 	margin: 0;
 	padding: 0;
-	border-right: 1px solid $dark-grey;
+	border-left: 1px solid $dark-grey;
 	border-bottom: 1px solid $dark-grey;
 	padding: 10px;
 	box-sizing: border-box;
+	background-color: $medium-white;
+}
+
+#tabs-langues .node.selected {
+	background-color: $medium-blue;
+	color: $light-blue;
 }
 
 #tabs-langues .node:hover {