ArrayEditable: one tooltip, not one per element

When changing the visible annotations in the bins in Pandora, creating
(and destroying) all the Ox.Tooltips takes a substantial fraction of the
time. So instead, maintain only one tooltip for each ArrayEditable.
This commit is contained in:
Will Thompson 2016-04-29 16:21:38 +01:00 committed by j
parent 869de36163
commit db343c382e

View file

@ -45,6 +45,7 @@ Ox.ArrayEditable = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.options({tooltip: tooltip})
.update({ .update({
highlight: function() { highlight: function() {
self.$items.forEach(function($item) { self.$items.forEach(function($item) {
@ -85,7 +86,7 @@ Ox.ArrayEditable = function(options, self) {
// make sure the newline does // make sure the newline does
// not end up in the textarea // not end up in the textarea
setTimeout(function() { setTimeout(function() {
that.editItem(); that.editItem();
}, 0); }, 0);
}, },
key_escape: selectNone, key_escape: selectNone,
@ -176,23 +177,6 @@ Ox.ArrayEditable = function(options, self) {
highlight: self.options.highlight, highlight: self.options.highlight,
maxHeight: self.options.maxHeight, maxHeight: self.options.maxHeight,
submitOnBlur: self.options.submitOnBlur, submitOnBlur: self.options.submitOnBlur,
tooltip: function(e) {
var $target = $(e.target),
isLink = $target.is('a') || $target.parents('a').length,
click = isLink ? 'Shift-click' : 'Click',
doubleclick = isLink ? 'shift-doubleclick' : 'doubleclick';
return (
self.options.tooltipText
? self.options.tooltipText(item) + '<br>'
: ''
) + (
self.options.editable
? Ox._(click + ' to select') + (
item.editable ? Ox._(', ' + doubleclick + ' to edit') : ''
)
: ''
);
},
type: self.options.type, type: self.options.type,
unformat: self.options.unformat, unformat: self.options.unformat,
value: item.value, value: item.value,
@ -366,6 +350,29 @@ Ox.ArrayEditable = function(options, self) {
} }
} }
function tooltip(e) {
var $target = $(e.target),
$element = $target.closest('.OxEditableElement'),
position = $element.data('position'),
item = self.options.items[position],
isLink = $target.closest('a').length,
click = isLink ? 'Shift-click' : 'Click',
doubleclick = isLink ? 'shift-doubleclick' : 'doubleclick';
return item === undefined
? ''
: (
self.options.tooltipText
? self.options.tooltipText(item) + '<br>'
: ''
) + (
self.options.editable
? Ox._(click + ' to select') + (
item.editable ? Ox._(', ' + doubleclick + ' to edit') : ''
)
: ''
);
}
var triggerSelectEvent = Ox.debounce(function() { var triggerSelectEvent = Ox.debounce(function() {
that.triggerEvent('select', { that.triggerEvent('select', {
id: self.options.selected id: self.options.selected