From db343c382ed3aed31fb0fa261e8f51b4bf5fba2c Mon Sep 17 00:00:00 2001
From: Will Thompson <will@willthompson.co.uk>
Date: Fri, 29 Apr 2016 16:21:38 +0100
Subject: [PATCH] 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.
---
 source/UI/js/Form/ArrayEditable.js | 43 +++++++++++++++++-------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/source/UI/js/Form/ArrayEditable.js b/source/UI/js/Form/ArrayEditable.js
index 73ea6614..0e583ae4 100644
--- a/source/UI/js/Form/ArrayEditable.js
+++ b/source/UI/js/Form/ArrayEditable.js
@@ -45,6 +45,7 @@ Ox.ArrayEditable = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .options({tooltip: tooltip})
         .update({
             highlight: function() {
                 self.$items.forEach(function($item) {
@@ -85,7 +86,7 @@ Ox.ArrayEditable = function(options, self) {
                 // make sure the newline does
                 // not end up in the textarea
                 setTimeout(function() {
-                    that.editItem();                    
+                    that.editItem();
                 }, 0);
             },
             key_escape: selectNone,
@@ -176,23 +177,6 @@ Ox.ArrayEditable = function(options, self) {
                         highlight: self.options.highlight,
                         maxHeight: self.options.maxHeight,
                         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,
                         unformat: self.options.unformat,
                         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() {
         that.triggerEvent('select', {
             id: self.options.selected