From 63f711ce5a3b1217f97be6fbe99fc7dd098f7d43 Mon Sep 17 00:00:00 2001 From: James Lorenzen Date: Mon, 7 Oct 2013 11:53:53 -0500 Subject: [PATCH 1/3] Add customClass to bar hover hint Updated the bar mouseover hint to also include the customClass. This will give developers more control over the color of the hover. Currently is defaults to a yellow. Now developers can customize the color of the hover based on the gantt Color passed in to the values. --- js/jquery.fn.gantt.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.fn.gantt.js b/js/jquery.fn.gantt.js index 8870c46..cd3cd27 100755 --- a/js/jquery.fn.gantt.js +++ b/js/jquery.fn.gantt.js @@ -947,7 +947,7 @@ if (desc) { bar .mouseover(function (e) { - var hint = $('
').html(desc); + var hint = $('
').addClass(cls).html(desc); $("body").append(hint); hint.css("left", e.pageX); hint.css("top", e.pageY); From 08a44630a23d4661e906fc17338a685ee637d76f Mon Sep 17 00:00:00 2001 From: James Lorenzen Date: Tue, 15 Oct 2013 10:04:02 -0500 Subject: [PATCH 2/3] Revert "Add customClass to bar hover hint" This reverts commit 63f711ce5a3b1217f97be6fbe99fc7dd098f7d43. --- js/jquery.fn.gantt.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.fn.gantt.js b/js/jquery.fn.gantt.js index cd3cd27..8870c46 100755 --- a/js/jquery.fn.gantt.js +++ b/js/jquery.fn.gantt.js @@ -947,7 +947,7 @@ if (desc) { bar .mouseover(function (e) { - var hint = $('
').addClass(cls).html(desc); + var hint = $('
').html(desc); $("body").append(hint); hint.css("left", e.pageX); hint.css("top", e.pageY); From 965d7a023fd9905d6b7adca282b3787214cf2cbd Mon Sep 17 00:00:00 2001 From: James Lorenzen Date: Tue, 15 Oct 2013 12:59:15 -0500 Subject: [PATCH 3/3] Append hint to Progress Bar instead of body Second pass at attempting to support allowing the user to control the color of the progress bar hover. Currently it's hardcoded to be yellow. Some users, like myself, might want to match the hover color with the progress bar color. My first attempt I added the customClass to the hint div. However, usmonster suggested to better support backwards compatibility that I instead try to append the hint div to the bar div since the bar div already has the customClass. This would give developers control over the hint div with a selector like .bar.ganttRed .fn-gantt-hint. These changes accomplish these use cases. However, I think the changes were more involved than we originally anticipated. There were two main issues I had to work around: position and z-index. First, now that we append to the bar div and not body, the left/top positioning had to be updated since the hint div is now relative to the bar div. So I had to use event.offsetX/Y, but those values were only available in Chrome and IE and not in Firefox. According to this jquery bug, http://bugs.jquery.com/ticket/8523, it's best to calculate the offset when offsetX/Y are not present. The second issue, was a z-index issue. I was curious to see how the hover worked if I had another progress bar right below another. Turns out that when you do this, with these changes, the hover is behind the other progress bar even though the z-index is correct. It appears that when the hint div was moved to the bar div this caused the issue. Moving it back to being appended to the body I don't see this issue. The solution was to remove the z-index for the .fn-gantt .bar style. This didn't seem to have any negative side effects, but it may not be the solution we want. I also applied an additional offset of 15 for both top and left. Previously we were only adding 15 for top and that was only on the mousemove. I added 15 to both top and left, and during mouseover and mousemove. Also doing it in mouseover prevents the hint from jumping, which I only noticed in IE. Finally, at the suggestion of usmonster, I replaced hint.remove() with hint.detach() in mouseout. I've tested all these changes in Chrome 30, Firefox 24, and IE9. --- css/style.css | 1 - js/jquery.fn.gantt.js | 33 ++++++++++++++++++++++++++------- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index a286fcd..7573719 100644 --- a/css/style.css +++ b/css/style.css @@ -183,7 +183,6 @@ height: 18px; margin: 4px 3px 3px 3px; position: absolute; - z-index: 10; text-align: center; -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset; -moz-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset; diff --git a/js/jquery.fn.gantt.js b/js/jquery.fn.gantt.js index 8870c46..298c82f 100755 --- a/js/jquery.fn.gantt.js +++ b/js/jquery.fn.gantt.js @@ -945,20 +945,22 @@ .data("dataObj", dataObj); if (desc) { + var hint; bar .mouseover(function (e) { - var hint = $('
').html(desc); - $("body").append(hint); - hint.css("left", e.pageX); - hint.css("top", e.pageY); + if (!hint) { + hint = $('
').html(desc); + } + + $(this).append(hint); + core.updateHintPosition(hint, e); hint.show(); }) .mouseout(function () { - $(".fn-gantt-hint").remove(); + hint = hint.detach(); }) .mousemove(function (e) { - $(".fn-gantt-hint").css("left", e.pageX); - $(".fn-gantt-hint").css("top", e.pageY + 15); + core.updateHintPosition(hint, e); }); } bar.click(function (e) { @@ -968,6 +970,23 @@ return bar; }, + // updates the x/y position of the bar hint + // offsetX/Y is available in Chrome/IE but not Firefox + // see http://bugs.jquery.com/ticket/8523 + updateHintPosition: function(hint, e) { + var hintOffset = 15; + var x = e.offsetX, y = e.offsetY; + + if (typeof x === "undefined" || typeof y === "undefined") { + var targetOffset = $(e.target).offset(); + x = e.pageX - targetOffset.left; + y = e.pageY - targetOffset.top; + } + + hint.css("left", x + hintOffset); + hint.css("top", y + hintOffset); + }, + // Remove the `wd` (weekday) class and add `today` class to the // current day/week/month (depending on the current scale) markNow: function (element) {