Element: faster tooltip event binding
Even when there is no tooltip, setTooltip() accounts for about 5% of the time spent setting the values on an ArrayEditable, of which about 2% is Ox.filter. There only a few possible sets of events, so use object identity rather than calculating the set difference. In particular, this is a lot faster when self.options.tooltip is false-y. (I think it was actually wrong before, anyway: bindTooltipEvents({mouseenter, mouseleave}) bindTooltipEvents({mousemove, mouseleave}) would (correctly) unbind mouseenter and bind mousemove, but would set boundTooltipEvents = {mousemove} even though mouseleave is still bound.)
This commit is contained in:
parent
db343c382e
commit
ec85c7b458
1 changed files with 18 additions and 16 deletions
|
@ -1,6 +1,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
(function(_) {
|
(function(_) {
|
||||||
|
var noTooltipEvents = {};
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.Element <f> Basic UI element object
|
Ox.Element <f> Basic UI element object
|
||||||
|
@ -88,7 +89,7 @@
|
||||||
|
|
||||||
// create private object
|
// create private object
|
||||||
self = self || {};
|
self = self || {};
|
||||||
self.boundTooltipEvents = {}; // FIXME?
|
self.boundTooltipEvents = noTooltipEvents;
|
||||||
self.defaults = {};
|
self.defaults = {};
|
||||||
self.eventCallbacks = self.eventCallbacks || {};
|
self.eventCallbacks = self.eventCallbacks || {};
|
||||||
// allow for Ox.Element('<tagname>') or Ox.Element('cssSelector')
|
// allow for Ox.Element('<tagname>') or Ox.Element('cssSelector')
|
||||||
|
@ -147,14 +148,22 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var constantTooltipEvents = {
|
||||||
|
mouseenter: onMouseenter,
|
||||||
|
mouseleave: onMouseleave
|
||||||
|
},
|
||||||
|
dynamicTooltipEvents = {
|
||||||
|
mousemove: onMousemove,
|
||||||
|
mouseleave: onMouseleave
|
||||||
|
};
|
||||||
|
|
||||||
setTooltip();
|
setTooltip();
|
||||||
|
|
||||||
function bindTooltipEvents(events) {
|
function bindTooltipEvents(events) {
|
||||||
that.off(Ox.filter(self.boundTooltipEvents, function(value, key) {
|
if (self.boundTooltipEvents !== events) {
|
||||||
return !events[key];
|
that.off(self.boundTooltipEvents).on(events);
|
||||||
})).on(self.boundTooltipEvents = Ox.filter(events, function(value, key) {
|
self.boundTooltipEvents = events;
|
||||||
return !self.boundTooltipEvents[key];
|
}
|
||||||
}));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMousedown(e) {
|
function onMousedown(e) {
|
||||||
|
@ -322,26 +331,20 @@
|
||||||
function setTooltip() {
|
function setTooltip() {
|
||||||
if (self.options.tooltip) {
|
if (self.options.tooltip) {
|
||||||
if (Ox.isString(self.options.tooltip)) {
|
if (Ox.isString(self.options.tooltip)) {
|
||||||
bindTooltipEvents({
|
bindTooltipEvents(constantTooltipEvents);
|
||||||
mouseenter: onMouseenter,
|
|
||||||
mouseleave: onMouseleave
|
|
||||||
});
|
|
||||||
that.$tooltip && that.$tooltip.options({
|
that.$tooltip && that.$tooltip.options({
|
||||||
title: self.options.tooltip,
|
title: self.options.tooltip,
|
||||||
animate: true
|
animate: true
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
that.$tooltip = Ox.Tooltip({animate: false});
|
that.$tooltip = Ox.Tooltip({animate: false});
|
||||||
bindTooltipEvents({
|
bindTooltipEvents(dynamicTooltipEvents);
|
||||||
mousemove: onMousemove,
|
|
||||||
mouseleave: onMouseleave
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (that.$tooltip) {
|
if (that.$tooltip) {
|
||||||
that.$tooltip.remove();
|
that.$tooltip.remove();
|
||||||
}
|
}
|
||||||
bindTooltipEvents({});
|
bindTooltipEvents(noTooltipEvents);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -841,4 +844,3 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
}({}));
|
}({}));
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue