# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1474835712 -7200
# Node ID df030ddd4eca824bbc23b5c0ccc74ff2b435db65
# Parent  478cdcc56a63dfa84316a436435eed40b8687d1b
Convert discourses pack circles to div + Highlight select filter

diff -r 478cdcc56a63 -r df030ddd4eca cms/app-client/app/components/discourses-component.js
--- a/cms/app-client/app/components/discourses-component.js	Sun Sep 25 20:05:56 2016 +0200
+++ b/cms/app-client/app/components/discourses-component.js	Sun Sep 25 22:35:12 2016 +0200
@@ -11,6 +11,11 @@
     constants: Ember.inject.service(),
     filter: Ember.inject.service(),
 
+    discourseObserver: Ember.observer('filter.discourse', function() {
+        Ember.$('.item').removeClass("selected");
+        Ember.$('.item[data-id="' + this.get('filter').get('discourse') + '"]').addClass("selected");
+    }).on('init'),
+
     didRender: function() {
         var self = this;
         var baseURL = ENV.rootURL.replace(/\/$/,"")+'/api/v1';
@@ -39,53 +44,30 @@
 
             var bubbles = bubble.nodes(self.createNodes(discourses));
 
-            var caption = element.append("div")
-                .attr("class", "caption");
-            var caption_nodes = caption.selectAll(".node")
+            var nodes = element
+                .selectAll()
                 .data(bubbles);
 
-            caption_nodes.enter().append("div")
-                .attr("class", function(d) { return d.children ? " category": " item"; });
+            nodes.enter().append("div")
+                .attr("class", function(d) { return ( d.children ? "category": "item" ) + ( self.get('filter').get('discourse') === d.id ? " selected" : "" ) ; });
 
-            var item = caption.selectAll(".item")
-                .style("width", function(d) { return (d.r * 2) + 'px'; })
-                .style("height", function(d) { return (d.r * 2) + 'px'; })
-                .style("left", function(d) { return d.x - d.r + 'px'; })
-                .style("top", function(d) { return d.y - d.r + 'px'; })
-                .style("font-size", function(d) {
-                    return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px';
-                })
-                .on('click', function(d) {
-                    self.get('filter').set('discourse', d.id);
-                });
-            item.append("span")
-                .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; })
-                .style("display", function(d) { return d.children ? 'none' : 'inline-block'; })
-                .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; })
-                .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
-                .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; });
-
-            var svg = element.append("svg")
-                .style("width", width + "px")
-                .style("height", height + "px")
-                .attr("class", "bubble");
-
-            var svg_nodes = svg.selectAll(".node")
-                .data(bubbles);
-            svg_nodes.enter().append("g")
-                .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); })
-                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
-
-            var leaf = svg.selectAll(".leaf")
+            var item = element.selectAll(".item")
+                .attr("data-id", function(d) { return d.id; })
+                .style("left", function(d) { return ( d.x - d.r)  + "px"; })
+                .style("top", function(d) { return ( d.y - d.r)  + "px"; })
+                .style("width", function(d) { return (d.r * 2) + "px"; })
+                .style("height", function(d) { return (d.r * 2) + "px"; })
+                .style("background-color", function(d) { return d.fill; })
+                .style("border-color", function(d) { return d.stroke; })
+                .style("font-size", function(d) { return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px'; })
                 .on('click', function(d) {
                     self.get('filter').set('discourse', d.id);
                 });
 
-            leaf.append("circle")
-                .attr("r", function(d) { return d.r; })
-                .attr("fill", function(d) { return d.fill; })
-                .attr("stroke", function(d) { return d.stroke; });
-            element.style("height", height + "px");
+            item.append("span")
+                .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; })
+                .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
+                .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; });
         });
 
         this._super(...arguments);
diff -r 478cdcc56a63 -r df030ddd4eca cms/app-client/app/styles/components/discourses-component.scss
--- a/cms/app-client/app/styles/components/discourses-component.scss	Sun Sep 25 20:05:56 2016 +0200
+++ b/cms/app-client/app/styles/components/discourses-component.scss	Sun Sep 25 22:35:12 2016 +0200
@@ -2,19 +2,46 @@
 	position: relative;
 }
 
-.discourses-component .caption .item,
-.discourses-component .caption .node {
+.discourses-component .item {
 	cursor: pointer;
 }
 
-.discourses-component .caption .item {
+.discourses-component .category {
+	display: none;
+}
+
+.discourses-component .item {
 	color: $dark-blue;
 	text-align: center;
 	font-size: 12px;
 	position: absolute;
+	display: inline-block;
+	border-radius: 100%;
+	border-width: 1px;
+	border-style: solid;
+}
+
+.discourses-component .item::before {
+	content: '';
+	display: block;
+	width: 100%;
+	height: 100%;
+	position: absolute;
 }
 
-.discourses-component .caption .item .count {
+.discourses-component .item.selected {
+	color: $light-blue;
+	background-color: $medium-blue!important;
+	border-color: $light-blue!important;
+}
+
+.discourses-component .item span {
+	display: inline-block;
+	text-align: center;
+}
+
+
+.discourses-component .item span .count {
 	font-weight: bold;
 	display: block;
 }
\ No newline at end of file