From: Lubomir Sotirov <lubomir.sotirov@stockinthechannel.com>
Date: Wed, 7 Sep 2016 14:59:33 +0000 (+0200)
Subject: Fix 3267 Add "onHover" functionality for legend (#3271)
X-Git-Tag: v2.3.0-rc.1~1^2~12
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=38f85c98b5821091c44df6bf07da937b3b1a464f;p=thirdparty%2FChart.js.git

Fix 3267 Add "onHover" functionality for legend (#3271)

Add "onHover" to the legend options that will hold a user defined function (default is null) and called when a "mousemove" event is registered on top of a label item, with same parameters as the "onClick" option.

Also introduced logic that determines if the type of event passed to the legend "handleEvent" function is one we can handle. Currently allowing "click" and "mousemove" events. If the event is not one of those we stop the function execution (this is for the sake of reusing the legend hitbox calculations).
---

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
index 3b1a9d6a1..d4af29593 100644
--- a/docs/01-Chart-Configuration.md
+++ b/docs/01-Chart-Configuration.md
@@ -127,7 +127,8 @@ Name | Type | Default | Description
 display | Boolean | true | Is the legend displayed
 position | String | 'top' | Position of the legend. Possible values are 'top', 'left', 'bottom' and 'right'.
 fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes)
-onClick | Function | `function(event, legendItem) {}` | A callback that is called when a click is registered on top of a label item
+onClick | Function | `function(event, legendItem) {}` | A callback that is called when a 'click' event is registered on top of a label item
+onHover | Function | `function(event, legendItem) {}` | A callback that is called when a 'mousemove' event is registered on top of a label item
 labels |Object|-| See the [Legend Label Configuration](#chart-configuration-legend-label-configuration) section below.
 
 #### Legend Label Configuration
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 2ee3712ba..dc9940076 100644
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -631,13 +631,14 @@ module.exports = function(Chart) {
 				hoverOptions.onHover.call(me, me.active);
 			}
 
+			if (me.legend && me.legend.handleEvent) {
+				me.legend.handleEvent(e);
+			}
+
 			if (e.type === 'mouseup' || e.type === 'click') {
 				if (options.onClick) {
 					options.onClick.call(me, e, me.active);
 				}
-				if (me.legend && me.legend.handleEvent) {
-					me.legend.handleEvent(e);
-				}
 			}
 
 			// Remove styling for last active (even if it may still be active)
diff --git a/src/core/core.legend.js b/src/core/core.legend.js
index 8d3ce3c09..7691cab22 100644
--- a/src/core/core.legend.js
+++ b/src/core/core.legend.js
@@ -25,6 +25,8 @@ module.exports = function(Chart) {
 			ci.update();
 		},
 
+		onHover: null,
+
 		labels: {
 			boxWidth: 40,
 			padding: 10,
@@ -424,10 +426,24 @@ module.exports = function(Chart) {
 		// Handle an event
 		handleEvent: function(e) {
 			var me = this;
+			var opts = me.options;
+			var type = e.type === 'mouseup' ? 'click' : e.type;
+
+			if (type === 'mousemove') {
+				if (!opts.onHover) {
+					return;
+				}
+			} else if (type === 'click') {
+				if (!opts.onClick) {
+					return;
+				}
+			} else {
+				return;
+			}
+
 			var position = helpers.getRelativePosition(e, me.chart.chart),
 				x = position.x,
-				y = position.y,
-				opts = me.options;
+				y = position.y;
 
 			if (x >= me.left && x <= me.right && y >= me.top && y <= me.bottom) {
 				// See if we are touching one of the dataset boxes
@@ -437,10 +453,13 @@ module.exports = function(Chart) {
 
 					if (x >= hitBox.left && x <= hitBox.left + hitBox.width && y >= hitBox.top && y <= hitBox.top + hitBox.height) {
 						// Touching an element
-						if (opts.onClick) {
+						if (type === 'click') {
 							opts.onClick.call(me, e, me.legendItems[i]);
+							break;
+						} else if (type === 'mousemove') {
+							opts.onHover.call(me, e, me.legendItems[i]);
+							break;
 						}
-						break;
 					}
 				}
 			}
diff --git a/test/core.legend.tests.js b/test/core.legend.tests.js
index 2db970f3f..5b81898e0 100644
--- a/test/core.legend.tests.js
+++ b/test/core.legend.tests.js
@@ -23,6 +23,7 @@ describe('Legend block tests', function() {
 
 			// a callback that will handle
 			onClick: jasmine.any(Function),
+			onHover: null,
 
 			labels: {
 				boxWidth: 40,