mirror of
https://github.com/JonnyBro/JaBa.git
synced 2025-02-23 01:38:29 +05:00
247 lines
8.2 KiB
JavaScript
247 lines
8.2 KiB
JavaScript
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 = $('<div/>', {
|
|
id: 'jqssizetip',
|
|
style: sizetipStyle,
|
|
'class': tooltipClassname
|
|
});
|
|
this.tooltip = $('<div/>', {
|
|
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');
|
|
}
|
|
});
|
|
|