--- 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;
--- 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 -->
--- 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
--- 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"));
})