diff --git a/package-lock.json b/package-lock.json index d0ec5b9..278d316 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "D3.TimeSlider", - "version": "1.6.4", + "version": "1.6.5-rc.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 86cd151..39cd642 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "D3.TimeSlider", - "version": "1.6.4", + "version": "1.6.5-rc.0", "description": "A D3.js based time slider", "homepage": "https://github.com/EOX-A/d3.TimeSlider", "author": { diff --git a/src/d3.timeslider.coffee b/src/d3.timeslider.coffee index 55ea000..4a4d94d 100644 --- a/src/d3.timeslider.coffee +++ b/src/d3.timeslider.coffee @@ -262,21 +262,21 @@ class TimeSlider extends EventEmitter if @brushTooltip # setup hover events on brush @gBrush.selectAll('.resize.w') - .on('mouseover', => + .on('mouseover', => @tooltipBrushMin.transition() .duration(100) .style('opacity', 0.9)) - .on('mouseout', => + .on('mouseout', => if !@brushing @tooltipBrushMin.transition() .duration(100) .style('opacity', 0)) @gBrush.selectAll('.resize.e') - .on('mouseover', => + .on('mouseover', => @tooltipBrushMax.transition() .duration(100) .style('opacity', 0.9)) - .on('mouseout', => + .on('mouseout', => if !@brushing @tooltipBrushMax.transition() .duration(100) @@ -418,7 +418,7 @@ class TimeSlider extends EventEmitter e = new Date(e.getTime()+(d/2)) [low, high] = @scales.x.domain() if @options.displayLimit != null and - (e - s) > @options.displayLimit * 1000 + (e - s) > @options.displayLimit * 1000 [s, e] = @scales.x.domain() @center(s,e) ) diff --git a/src/utils.coffee b/src/utils.coffee index 36b7185..bea3156 100644 --- a/src/utils.coffee +++ b/src/utils.coffee @@ -18,7 +18,7 @@ bisect = (array, x, lo = 0, hi = array.length) -> return lo insort = (array, x) -> - array.splice(bisect(array, x), 0, x); + array.splice(bisect(array, x), 0, x) intersects = (a, b) -> return a[0] <= b[1] and b[0] <= a[1] @@ -110,19 +110,43 @@ parseDuration = (duration) -> offsetDate = (date, seconds) -> return new Date(date.getTime() + seconds * 1000) -centerTooltipOn = (tooltip, target, dir = 'center', offset = [0, 0]) -> + +findParentByClass = (element, className) -> + # traverse up the DOM tree until requested parent node is found + while element.classList + if element.classList.contains(className) + return element + element = element.parentNode + + +centerTooltipOn = (tooltip, target, dir = 'center', offset = [0, 0], viewportClassName = 'timeslider') -> rect = target.getBoundingClientRect() tooltipRect = tooltip[0][0].getBoundingClientRect() + + viewport = findParentByClass(target, viewportClassName) + + if viewport + # clip the x-axis rectangle bounds to the viewport extent + # to make the tooltip always visible + viewportRect = viewport.getBoundingClientRect() + xLeft = Math.max(rect.left, viewportRect.left) + xRight = Math.min(rect.right, viewportRect.right) + else + # default to the rectangle bounds if the viewport cannot be found + xLeft = rect.left + xRight = rect.right + if dir == 'left' - xOff = rect.left + xOff = xLeft else if dir == 'right' - xOff = rect.right + xOff = xRight else - xOff = rect.left + rect.width / 2 + xOff = xLeft + (xRight - xLeft) / 2 tooltip .style('left', xOff - tooltipRect.width / 2 + offset[0] + "px") .style('top', (rect.top - tooltipRect.height) + offset[1] + "px") + module.exports = split: split bisect: bisect