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:
Will Thompson 2016-05-03 18:19:37 +01:00 committed by j
parent db343c382e
commit ec85c7b458

View file

@ -1,6 +1,7 @@
'use strict';
(function(_) {
var noTooltipEvents = {};
/*@
Ox.Element <f> Basic UI element object
@ -88,7 +89,7 @@
// create private object
self = self || {};
self.boundTooltipEvents = {}; // FIXME?
self.boundTooltipEvents = noTooltipEvents;
self.defaults = {};
self.eventCallbacks = self.eventCallbacks || {};
// 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();
function bindTooltipEvents(events) {
that.off(Ox.filter(self.boundTooltipEvents, function(value, key) {
return !events[key];
})).on(self.boundTooltipEvents = Ox.filter(events, function(value, key) {
return !self.boundTooltipEvents[key];
}));
if (self.boundTooltipEvents !== events) {
that.off(self.boundTooltipEvents).on(events);
self.boundTooltipEvents = events;
}
}
function onMousedown(e) {
@ -322,26 +331,20 @@
function setTooltip() {
if (self.options.tooltip) {
if (Ox.isString(self.options.tooltip)) {
bindTooltipEvents({
mouseenter: onMouseenter,
mouseleave: onMouseleave
});
bindTooltipEvents(constantTooltipEvents);
that.$tooltip && that.$tooltip.options({
title: self.options.tooltip,
animate: true
});
} else {
that.$tooltip = Ox.Tooltip({animate: false});
bindTooltipEvents({
mousemove: onMousemove,
mouseleave: onMouseleave
});
bindTooltipEvents(dynamicTooltipEvents);
}
} else {
if (that.$tooltip) {
that.$tooltip.remove();
}
bindTooltipEvents({});
bindTooltipEvents(noTooltipEvents);
}
}
@ -841,4 +844,3 @@
};
}({}));