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'; '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 @@
}; };
}({})); }({}));