MouseHandler = createClass({ init: function (el, options) { var $el = $(el); this.$el = $el; this.options = options; this.currentPageX = 0; this.currentPageY = 0; this.el = el; this.splist = []; this.tooltip = null; this.over = false; this.displayTooltips = !options.get('disableTooltips'); this.highlightEnabled = !options.get('disableHighlight'); }, registerSparkline: function (sp) { this.splist.push(sp); if (this.over) { this.updateDisplay(); } }, registerCanvas: function (canvas) { var $canvas = $(canvas.canvas); this.canvas = canvas; this.$canvas = $canvas; $canvas.mouseenter($.proxy(this.mouseenter, this)); $canvas.mouseleave($.proxy(this.mouseleave, this)); $canvas.click($.proxy(this.mouseclick, this)); }, reset: function (removeTooltip) { this.splist = []; if (this.tooltip && removeTooltip) { this.tooltip.remove(); this.tooltip = undefined; } }, mouseclick: function (e) { var clickEvent = $.Event('sparklineClick'); clickEvent.originalEvent = e; clickEvent.sparklines = this.splist; this.$el.trigger(clickEvent); }, mouseenter: function (e) { $(document.body).unbind('mousemove.jqs'); $(document.body).bind('mousemove.jqs', $.proxy(this.mousemove, this)); this.over = true; this.currentPageX = e.pageX; this.currentPageY = e.pageY; this.currentEl = e.target; if (!this.tooltip && this.displayTooltips) { this.tooltip = new Tooltip(this.options); this.tooltip.updatePosition(e.pageX, e.pageY); } this.updateDisplay(); }, mouseleave: function () { $(document.body).unbind('mousemove.jqs'); var splist = this.splist, spcount = splist.length, needsRefresh = false, sp, i; this.over = false; this.currentEl = null; if (this.tooltip) { this.tooltip.remove(); this.tooltip = null; } for (i = 0; i < spcount; i++) { sp = splist[i]; if (sp.clearRegionHighlight()) { needsRefresh = true; } } if (needsRefresh) { this.canvas.render(); } }, mousemove: function (e) { this.currentPageX = e.pageX; this.currentPageY = e.pageY; this.currentEl = e.target; if (this.tooltip) { this.tooltip.updatePosition(e.pageX, e.pageY); } this.updateDisplay(); }, updateDisplay: function () { var splist = this.splist, spcount = splist.length, needsRefresh = false, offset = this.$canvas.offset(), localX = this.currentPageX - offset.left, localY = this.currentPageY - offset.top, tooltiphtml, sp, i, result, changeEvent; if (!this.over) { return; } for (i = 0; i < spcount; i++) { sp = splist[i]; result = sp.setRegionHighlight(this.currentEl, localX, localY); if (result) { needsRefresh = true; } } if (needsRefresh) { changeEvent = $.Event('sparklineRegionChange'); changeEvent.sparklines = this.splist; this.$el.trigger(changeEvent); if (this.tooltip) { tooltiphtml = ''; for (i = 0; i < spcount; i++) { sp = splist[i]; tooltiphtml += sp.getCurrentRegionTooltip(); } this.tooltip.setContent(tooltiphtml); } if (!this.disableHighlight) { this.canvas.render(); } } if (result === null) { this.mouseleave(); } } }); Tooltip = createClass({ sizeStyle: 'position: static !important;' + 'display: block !important;' + 'visibility: hidden !important;' + 'float: left !important;', init: function (options) { var tooltipClassname = options.get('tooltipClassname', 'jqstooltip'), sizetipStyle = this.sizeStyle, offset; this.container = options.get('tooltipContainer') || document.body; this.tooltipOffsetX = options.get('tooltipOffsetX', 10); this.tooltipOffsetY = options.get('tooltipOffsetY', 12); // remove any previous lingering tooltip $('#jqssizetip').remove(); $('#jqstooltip').remove(); this.sizetip = $('
', { id: 'jqssizetip', style: sizetipStyle, 'class': tooltipClassname }); this.tooltip = $('
', { id: 'jqstooltip', 'class': tooltipClassname }).appendTo(this.container); // account for the container's location offset = this.tooltip.offset(); this.offsetLeft = offset.left; this.offsetTop = offset.top; this.hidden = true; $(window).unbind('resize.jqs scroll.jqs'); $(window).bind('resize.jqs scroll.jqs', $.proxy(this.updateWindowDims, this)); this.updateWindowDims(); }, updateWindowDims: function () { this.scrollTop = $(window).scrollTop(); this.scrollLeft = $(window).scrollLeft(); this.scrollRight = this.scrollLeft + $(window).width(); this.updatePosition(); }, getSize: function (content) { this.sizetip.html(content).appendTo(this.container); this.width = this.sizetip.width() + 1; this.height = this.sizetip.height(); this.sizetip.remove(); }, setContent: function (content) { if (!content) { this.tooltip.css('visibility', 'hidden'); this.hidden = true; return; } this.getSize(content); this.tooltip.html(content) .css({ 'width': this.width, 'height': this.height, 'visibility': 'visible' }); if (this.hidden) { this.hidden = false; this.updatePosition(); } }, updatePosition: function (x, y) { if (x === undefined) { if (this.mousex === undefined) { return; } x = this.mousex - this.offsetLeft; y = this.mousey - this.offsetTop; } else { this.mousex = x = x - this.offsetLeft; this.mousey = y = y - this.offsetTop; } if (!this.height || !this.width || this.hidden) { return; } y -= this.height + this.tooltipOffsetY; x += this.tooltipOffsetX; if (y < this.scrollTop) { y = this.scrollTop; } if (x < this.scrollLeft) { x = this.scrollLeft; } else if (x + this.width > this.scrollRight) { x = this.scrollRight - this.width; } this.tooltip.css({ 'left': x, 'top': y }); }, remove: function () { this.tooltip.remove(); this.sizetip.remove(); this.sizetip = this.tooltip = undefined; $(window).unbind('resize.jqs scroll.jqs'); } });