show details on click

lib/gantt.js

@@ -699,12 +699,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 		function bind_grid_click() {
 			self.element_groups.grid.click(function () {
-				self.canvas.selectAll('.bar-wrapper').forEach(function (el) {
+				unselect_all();
-					el.removeClass('active');
+				self.element_groups.details.addClass('hide');
-				});
 			});
 		}
 	
+		function unselect_all() {
+			self.canvas.selectAll('.bar-wrapper').forEach(function (el) {
+				el.removeClass('active');
+			});
+		}
+		self.unselect_all = unselect_all;
+	
 		function view_is(modes) {
 			if (typeof modes === 'string') {
 				return self.config.view_mode === modes;
@@ -1238,11 +1244,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 		function bind() {
 			if (self.invalid) return;
+			setup_click_event();
 			show_details();
 			bind_resize();
 			bind_drag();
 			bind_resize_progress();
-			setup_click_event();
 		}
 	
 		function show_details() {
@@ -1255,9 +1261,17 @@ return /******/ (function(modules) { // webpackBootstrap
 				gt.canvas.text(0, 0, '').attr({ dx: 10, dy: 30 }).addClass('details-heading').appendTo(details_box);
 				gt.canvas.text(0, 0, '').attr({ dx: 10, dy: 65 }).addClass('details-body').appendTo(details_box);
 				gt.canvas.text(0, 0, '').attr({ dx: 10, dy: 90 }).addClass('details-body').appendTo(details_box);
+				var f = gt.canvas.filter(Snap.filter.shadow(0, 1, 1, '#666', 0.6));
+				details_box.attr({
+					filter: f
+				});
 			}
 	
-			self.group.mouseover(function (e, x, y) {
+			self.group.click(function (e) {
+				if (self.action_completed) {
+					// just finished a move action, wait for a few seconds
+					return;
+				}
 				popover_group.removeClass('hide');
 	
 				var pos = get_details_position();
@@ -1280,12 +1294,6 @@ return /******/ (function(modules) { // webpackBootstrap
 				$body[0].attr('text', body1);
 				$body[1].attr('text', body2);
 			});
-	
-			self.group.mouseout(function () {
-				setTimeout(function () {
-					return popover_group.addClass('hide');
-				}, 500);
-			});
 		}
 	
 		function get_details_position() {
@@ -1466,7 +1474,7 @@ return /******/ (function(modules) { // webpackBootstrap
 				if (self.group.hasClass('active')) {
 					gt.trigger_event('click', [self.task]);
 				}
-				unselect_all();
+				gt.unselect_all();
 				self.group.toggleClass('active');
 			});
 		}
@@ -1603,12 +1611,6 @@ return /******/ (function(modules) { // webpackBootstrap
 			details_box && details_box.transform('t' + pos.x + ',' + pos.y);
 		}
 	
-		function unselect_all() {
-			gt.canvas.selectAll('.bar-wrapper').forEach(function (el) {
-				el.removeClass('active');
-			});
-		}
-	
 		init();
 	
 		return self;

src/Bar.js

@@ -130,11 +130,11 @@ export default function Bar(gt, task) {
 
 	function bind() {
 		if (self.invalid) return;
+		setup_click_event();
 		show_details();
 		bind_resize();
 		bind_drag();
 		bind_resize_progress();
-		setup_click_event();
 	}
 
 	function show_details() {
@@ -160,9 +160,18 @@ export default function Bar(gt, task) {
 				.attr({ dx: 10, dy: 90 })
 				.addClass('details-body')
 				.appendTo(details_box);
+			const f = gt.canvas.filter(
+				Snap.filter.shadow(0, 1, 1, '#666', 0.6));
+			details_box.attr({
+				filter: f
+			});
 		}
 
-		self.group.mouseover((e, x, y) => {
+		self.group.click((e) => {
+			if (self.action_completed) {
+				// just finished a move action, wait for a few seconds
+				return;
+			}
 			popover_group.removeClass('hide');
 
 			const pos = get_details_position();
@@ -189,10 +198,6 @@ export default function Bar(gt, task) {
 			$body[0].attr('text', body1);
 			$body[1].attr('text', body2);
 		});
-
-		self.group.mouseout(() => {
-			setTimeout(() => popover_group.addClass('hide'), 500);
-		});
 	}
 
 	function get_details_position() {
@@ -350,7 +355,7 @@ export default function Bar(gt, task) {
 			if (self.group.hasClass('active')) {
 				gt.trigger_event('click', [self.task]);
 			}
-			unselect_all();
+			gt.unselect_all();
 			self.group.toggleClass('active');
 		});
 	}
@@ -470,12 +475,6 @@ export default function Bar(gt, task) {
 		details_box && details_box.transform(`t${pos.x},${pos.y}`);
 	}
 
-	function unselect_all() {
-		gt.canvas.selectAll('.bar-wrapper').forEach(function (el) {
-			el.removeClass('active');
-		});
-	}
-
 	init();
 
 	return self;

src/Gantt.js

@@ -469,12 +469,18 @@ export default function Gantt(element, tasks, config) {
 
 	function bind_grid_click() {
 		self.element_groups.grid.click(() => {
-			self.canvas.selectAll('.bar-wrapper').forEach(el => {
+			unselect_all();
-				el.removeClass('active');
+			self.element_groups.details.addClass('hide');
-			});
 		});
 	}
 
+	function unselect_all() {
+		self.canvas.selectAll('.bar-wrapper').forEach(el => {
+			el.removeClass('active');
+		});
+	}
+	self.unselect_all = unselect_all;
+
 	function view_is(modes) {
 		if (typeof modes === 'string') {
 			return self.config.view_mode === modes;