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:
parent
869de36163
commit
db343c382e
1 changed files with 25 additions and 18 deletions
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue