# HG changeset patch
# User veltr
# Date 1350307368 -7200
# Node ID 86ddd934464a98c45d63b42d56018c9f3624df97
# Parent  dfdefb4dae2c0501deed25f670cf1e939508b686
Paired streamgraph with slider

diff -r dfdefb4dae2c -r 86ddd934464a integration/css/style.css
--- a/integration/css/style.css	Mon Oct 15 14:19:51 2012 +0200
+++ b/integration/css/style.css	Mon Oct 15 15:22:48 2012 +0200
@@ -784,9 +784,12 @@
     background: #fff;
 }
 div.frise .ui-slider-horizontal {
-    height: 114px;
+    height: 20px;
+    position: absolute;
+    width: 100%;
+    bottom: 0;
     background: none repeat scroll 0 0 transparent;
-   	
+   	border: none;
     -webkit-border-radius: 0;
   	-moz-border-radius: 0;
   	border-radius: 0;
@@ -798,25 +801,6 @@
 div.frise .ui-slider-horizontal .ui-slider-range{
 	background: none repeat scroll 0 0 transparent;
 }
-#slider-range{
-	position: relative;
-}
-.voile-left{
-	border-right: 1px solid #C51810;
-	background-color:rgba(0,0,0,.5);
-	width: 200px;
-	height: 100%; 
-
-}
-.voile-right{
-	position: absolute;
-	right: 0;
-	top: 0;
-	width: 200px;
-	height: 100%; 
-	background-color:rgba(0,0,0,.5);
-	border-left: 1px solid #C51810;
-}
 .ui-slider-handle.ui-state-default.ui-corner-all{
 	cursor: pointer;
 	width: 19px;
@@ -828,9 +812,6 @@
   	border-radius: 0;
 }
 
-
-
-
 /* page dossier documentaire */
 div.dossier-similaire, div.dossiers{
 	float: left;
diff -r dfdefb4dae2c -r 86ddd934464a integration/home.html
--- a/integration/home.html	Mon Oct 15 14:19:51 2012 +0200
+++ b/integration/home.html	Mon Oct 15 15:22:48 2012 +0200
@@ -130,10 +130,7 @@
             <div class="content-wrap clearfix">
                 <div class="frise">
                     <div class="streamgraph"></div>
-                    <div id="slider-range">
-                        <div class="voile-left"></div>
-                        <div class="voile-right"></div>
-                    </div>
+                    <div id="slider-range"></div>
                 </div><!-- frise -->
 
 
diff -r dfdefb4dae2c -r 86ddd934464a integration/js/main.js
--- a/integration/js/main.js	Mon Oct 15 14:19:51 2012 +0200
+++ b/integration/js/main.js	Mon Oct 15 15:22:48 2012 +0200
@@ -115,19 +115,10 @@
 		min: 0,
 		max: widthFrise,
 		values: [ valSlider1, valSlider2 ],
-		create: function(event, ui){
-			$(".voile-left").width(valSlider1);
-			$(".voile-right").width(widthFrise-valSlider2); 
-		},
 		slide: function( event, ui ) {
-			
-			/*//bloquer les curseur
-			if(ui.values[1]-ui.values[ 0 ]!= diffSlide){
-				return false;
-			}
-			*/
-			$(".voile-left").width(ui.values[ 0 ]);
-			$(".voile-right").width(widthFrise-ui.values[ 1 ]);
+            if (window.streamgraph) {
+                streamgraph.slidevalues(ui.values[0], ui.values[1]);
+            }
 		},
 		change: function( event, ui ){
 			//ici on récup les valeurs après un slide
diff -r dfdefb4dae2c -r 86ddd934464a integration/js/streamgraph.js
--- a/integration/js/streamgraph.js	Mon Oct 15 14:19:51 2012 +0200
+++ b/integration/js/streamgraph.js	Mon Oct 15 15:22:48 2012 +0200
@@ -1,4 +1,4 @@
-function streamgraph($selector, $slider) {
+function Streamgraph($selector) {
     
     /* Constants */
    
@@ -6,7 +6,8 @@
         YEARSHEIGHT = 20,
         STARTTIME = new Date(2007,6,1),
         ENDTIME = new Date(),
-        CURVE = .3,
+        CURVE = .25,
+        DATEPADDING = 10,
         COLORS = [ "#943a23", "#fbee97", "#cfbb95", "#da9761", "#ba5036" ],
         SELECTEDCOLOR = "#c51810"; 
     
@@ -94,18 +95,10 @@
     
     _(paths).each(function(path, index) {
         var color = COLORS[index % COLORS.length],
-            path = paper.path(path);
-        path.attr({
+            p = paper.path(path);
+        p.attr({
             stroke: "none",
             fill: color
-        }).mouseover(function() {
-            path.attr({
-                fill: SELECTEDCOLOR
-            });
-        }).mouseout(function() {
-            path.attr({
-                fill: color
-            })
         });
     });
     
@@ -124,9 +117,86 @@
                 "font-size": "14px"
             });
     }
+    
+    /* Drawing range window */
+    
+    var carregauche = paper.rect(width,-1,width,(2+height)),
+        carredroite = paper.rect(-width,-1,width,(2+height)),
+        attrcarres = {
+            fill: "#333333",
+            "fill-opacity": .5,
+            stroke: SELECTEDCOLOR
+        };
+    carregauche.attr(attrcarres);
+    carredroite.attr(attrcarres);
+    
+    var rangerect = paper.rect(0, (height - YEARSHEIGHT), width, YEARSHEIGHT);
+    rangerect.attr({
+        fill: SELECTEDCOLOR,
+        stroke: "none"
+    });
+    
+    function datetext(date) {
+        var d = new Date(date),
+            m = 1+d.getMonth(),
+            y = d.getFullYear();
+        return ((m < 10 ? "0" : "") + m + "/" + y);
+    }
+    
+    var startdate = paper.text(DATEPADDING, height - .5 * YEARSHEIGHT, datetext(STARTTIME));
+    startdate.attr({
+        fill: "#ffffff",
+        "text-anchor": "start"
+    });
+    var enddate = paper.text(width - DATEPADDING, height - .5 * YEARSHEIGHT, datetext(ENDTIME));
+    enddate.attr({
+        fill: "#ffffff",
+        "text-anchor": "end"
+    });
+    
+    /* Redrawing time slices for rollover effect */
+   
+    _(paths).each(function(path, index) {
+        var p = paper.path(path);
+        p.attr({
+            stroke: "none",
+            fill: SELECTEDCOLOR,
+            opacity: .01
+        }).mouseover(function() {
+            p.attr({
+                opacity: 1
+            });
+        }).mouseout(function() {
+            p.attr({
+                opacity: .01
+            })
+        });
+    });
+    
+    /* Returning a handler for slide value change */
+    
+    this.slidevalues = function(left, right) {
+        left = left || 0;
+        right = right || width;
+        carregauche.attr({x: left - width});
+        carredroite.attr({x: right});
+        startdate.attr({
+            x: DATEPADDING + left,
+            text: datetext(STARTTIME.valueOf() + left / txscale)
+        });
+        enddate.attr({
+            x: right - DATEPADDING,
+            text: datetext(STARTTIME.valueOf() + right / txscale)
+        });
+        rangerect.attr({
+            x: left,
+            width: right - left
+        });
+    }
 
 }
 
 $(function() {
-    streamgraph($(".streamgraph"), $("#slider-range"));
+    window.streamgraph = new Streamgraph($(".streamgraph"));
+    streamgraph.slidevalues.apply(streamgraph,$("#slider-range").dragslider("values"));
 })