From 972c2bd2ed01a096367268920bd1afb20a8c0940 Mon Sep 17 00:00:00 2001
From: David Chester <david@fmail.co.uk>
Date: Sat, 12 Apr 2014 17:29:12 -0400
Subject: [PATCH] support resizing preview range sliders; closes #375; closes
 #417; closes #382

---
 examples/resize.html                         | 24 +++++--
 src/js/Rickshaw.Graph.RangeSlider.Preview.js | 68 ++++++++++++++------
 2 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/examples/resize.html b/examples/resize.html
index a6cc2d25..781ef455 100644
--- a/examples/resize.html
+++ b/examples/resize.html
@@ -3,35 +3,47 @@
 <link type="text/css" rel="stylesheet" href="css/lines.css">
 
 <script src="../vendor/d3.v3.js"></script>
-<script src="../rickshaw.min.js"></script>
+<script src="../rickshaw.js"></script>
 
 <div id="chart"></div>
+<div id="preview"></div>
 
 <script>
 
+var seriesData = [ [], [] ];
+var random = new Rickshaw.Fixtures.RandomData(150);
+
+for (var i = 0; i < 150; i++) {
+	random.addData(seriesData);
+}
+
 var graph = new Rickshaw.Graph( {
 	element: document.getElementById("chart"),
 	renderer: 'area',
 	series: [
 		{
-			data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
+			data: seriesData[0],
 			color: 'steelblue'
 		}, {
-			data: [ { x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 32 }, { x: 3, y: 20 }, { x: 4, y: 21 } ],
+			data: seriesData[1],
 			color: 'lightblue'
 		}
 	]
 } );
 
 var resize = function() {
-	var padding = 40;
 	graph.configure({
-		width: window.innerWidth - padding,
-		height: window.innerHeight - padding
+		width: window.innerWidth * 0.75,
+		height: window.innerHeight * 0.75
 	});
 	graph.render();
 }
 
+var preview = new Rickshaw.Graph.RangeSlider.Preview({
+	graph: graph,
+	element: document.getElementById('preview')
+});
+
 window.addEventListener('resize', resize); 
 resize();
 
diff --git a/src/js/Rickshaw.Graph.RangeSlider.Preview.js b/src/js/Rickshaw.Graph.RangeSlider.Preview.js
index af90dacb..86b39347 100644
--- a/src/js/Rickshaw.Graph.RangeSlider.Preview.js
+++ b/src/js/Rickshaw.Graph.RangeSlider.Preview.js
@@ -8,6 +8,8 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
 		if (!args.graph && !args.graphs) throw "Rickshaw.Graph.RangeSlider.Preview needs a reference to an graph or an array of graphs";
 
 		this.element = args.element;
+		this.element.style.position = 'relative';
+
 		this.graphs = args.graph ? [ args.graph ] : args.graphs;
 
 		this.defaults = {
@@ -18,9 +20,11 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
 			frameHandleThickness: 10,
 			frameColor: "#d4d4d4",
 			frameOpacity: 1,
-			minimumFrameWidth: 0
+			minimumFrameWidth: 0,
+			heightRatio: 0.2
 		};
 
+		this.heightRatio = args.heightRatio || this.defaults.heightRatio;
 		this.defaults.gripperColor = d3.rgb(this.defaults.frameColor).darker().toString(); 
 
 		this.configureCallbacks = [];
@@ -28,8 +32,17 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
 
 		this.previews = [];
 
+		if (!args.width) this.widthFromGraph = true;
+		if (!args.height) this.heightFromGraph = true;
+
+		if (this.widthFromGraph || this.heightFromGraph) {
+			this.graphs[0].onConfigure(function () {
+				this.configure(args); this.render();
+			}.bind(this));
+		}
+
 		args.width = args.width || this.graphs[0].width || this.defaults.width;
-		args.height = args.height || this.graphs[0].height / 5 || this.defaults.height;
+		args.height = args.height || this.graphs[0].height * this.heightRatio || this.defaults.height;
 
 		this.configure(args);
 		this.render();
@@ -45,7 +58,7 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
 
 	configure: function(args) {
 
-		this.config = {};
+		this.config = this.config || {};
 
 		this.configureCallbacks.forEach(function(callback) {
 			callback(args);
@@ -57,17 +70,29 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
 				: this.defaults[k];
 		}, this);
 
-		if (args.width) {
-			this.previews.forEach(function(preview) {
-				var width = args.width - this.config.frameHandleThickness * 2;
-				preview.setSize({ width: width });
-			}, this);
-		}
+		if ('width' in args || 'height' in args) {
+
+			if (this.widthFromGraph) {
+				this.config.width = this.graphs[0].width;
+			}
+
+			if (this.heightFromGraph) {
+				this.config.height = this.graphs[0].height * this.heightRatio;
+				this.previewHeight = this.config.height;
+			}
 
-		if (args.height) {
 			this.previews.forEach(function(preview) {
-				var height = this.previewHeight / this.graphs.length;
-				preview.setSize({ height: height });
+
+				var height = this.previewHeight / this.graphs.length - this.config.frameTopThickness * 2;
+				var width = this.config.width - this.config.frameHandleThickness * 2;
+				preview.setSize({ width: width, height: height });
+
+				if (this.svg) {
+					var svgHeight = height + this.config.frameHandleThickness * 2;
+					var svgWidth = width + this.config.frameHandleThickness * 2;
+					this.svg.style("width", svgWidth + "px");
+					this.svg.style("height", svgHeight + "px");
+				}
 			}, this);
 		}
 	},
@@ -107,6 +132,7 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
 			parent.onConfigure(function(args) { 
 				// don't propagate height
 				delete args.height;
+				args.width = args.width - self.config.frameHandleThickness * 2;
 				graph.configure(args);
 				graph.render();
 			});
@@ -160,8 +186,8 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
 			.classed("rickshaw_range_slider_preview", true)
 			.style("height", this.config.height + "px")
 			.style("width", this.config.width + "px")
-			.style("position", "relative")
-			.style("top", -this.previewHeight + "px");
+			.style("position", "absolute")
+			.style("top", 0);
 
 		this._renderDimming();
 		this._renderFrame();
@@ -261,12 +287,13 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
 		leftHandle.enter()
 			.append("rect")
 			.attr('width', this.config.frameHandleThickness)
-			.attr('height', this.config.height)
 			.style("cursor", "ew-resize")
 			.style("fill-opacity", "0")
 			.classed("left_handle", true);
 
-		leftHandle.attr('x', this.currentFrame[0]);
+		leftHandle
+			.attr('x', this.currentFrame[0])
+			.attr('height', this.config.height);
 
 		var rightHandle = this.svg.selectAll("rect.right_handle")
 			.data([null]);
@@ -274,12 +301,13 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
 		rightHandle.enter()
 			.append("rect")
 			.attr('width', this.config.frameHandleThickness)
-			.attr('height', this.config.height)
 			.style("cursor", "ew-resize")
 			.style("fill-opacity", "0")
 			.classed("right_handle", true);
 
-		rightHandle.attr('x', this.currentFrame[1] + this.config.frameHandleThickness);
+		rightHandle
+			.attr('x', this.currentFrame[1] + this.config.frameHandleThickness)
+			.attr('height', this.config.height);
 	},
 
 	_renderMiddle: function() {
@@ -289,14 +317,14 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
 
 		middleHandle.enter()
 			.append("rect")
-			.attr('height', this.config.height)
 			.style("cursor", "move")
 			.style("fill-opacity", "0")
 			.classed("middle_handle", true);
 
 		middleHandle
 			.attr('width', Math.max(0, this.currentFrame[1] - this.currentFrame[0]))
-			.attr('x', this.currentFrame[0] + this.config.frameHandleThickness);
+			.attr('x', this.currentFrame[0] + this.config.frameHandleThickness)
+			.attr('height', this.config.height);
 	},
 
 	_registerMouseEvents: function() {