From 6f2e283166b6a52da762dd1a1fd80c4be74be4c6 Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Wed, 7 Jan 2015 14:25:27 -0500
Subject: [PATCH] NIFI-231: - Code clean up. - Cleaning up tooltips when
 options are removed. - Setting the correct style on the tooltips.

---
 .../webapp/js/jquery/combo/jquery.combo.js    | 44 ++++++++++++++-----
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js
index 30f0be9ba1..fdcae440ba 100644
--- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js
+++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js
@@ -46,6 +46,13 @@
  * The optionClass option supports specifying a class to apply to the 
  * option element.
  */
+
+/**
+ * jQuery plugin for a NiFi style combo box.
+ * 
+ * @param {type} $
+ * @returns {undefined}
+ */
 (function ($) {
 
     var isUndefined = function (obj) {
@@ -93,7 +100,7 @@
 
         // ensure we found the selected option
         if (isDefinedAndNotNull(selectedOption)) {
-            $(comboText).removeClass('selected-disabled-option').attr('title', selectedOption.text).text(selectedOption.text).data('text', selectedOption.text).width(combo.outerWidth() - 25);
+            comboText.removeClass('selected-disabled-option').attr('title', selectedOption.text).text(selectedOption.text).data('text', selectedOption.text).width(combo.outerWidth() - 25);
 
             // if the selected option is disabled show it
             if (selectedOption.disabled === true) {
@@ -112,6 +119,7 @@
     };
 
     var methods = {
+        
         /**
          * Initializes the combo box.
          * 
@@ -130,24 +138,24 @@
                     combo.empty().unbind().data('options', options);
 
                     // add a div to hold the text
-                    var comboText = $('<div class="combo-text"></div>').appendTo(combo);
+                    $('<div class="combo-text"></div>').appendTo(combo);
 
                     // add hover effect and handle a combo click
                     combo.addClass('button-normal pointer combo').hover(function () {
-                        $(combo).removeClass('button-normal').addClass('button-over');
+                        combo.removeClass('button-normal').addClass('button-over');
                     }, function () {
-                        $(combo).removeClass('button-over').addClass('button-normal');
+                        combo.removeClass('button-over').addClass('button-normal');
                     }).click(function (event) {
 
                         // determine the position of the element in question
-                        var position = $(combo).offset();
+                        var position = combo.offset();
 
                         // create the combo box options beneath it
                         var comboOptions = $('<div></div>').addClass('combo-options').css({
                             'position': 'absolute',
                             'left': position.left + 'px',
-                            'top': (position.top + $(combo).outerHeight() + 1) + 'px',
-                            'width': ($(combo).outerWidth() - 10) + 'px',
+                            'top': (position.top + combo.outerHeight() + 1) + 'px',
+                            'width': (combo.outerWidth() - 10) + 'px',
                             'overflow-y': 'auto'
                         });
 
@@ -195,7 +203,7 @@
                                 $('<img style="float: left; margin-left: 5px; margin-top: 3px;" src="images/iconInfo.png"></img>').appendTo(optionElement).qtip({
                                     content: option.description,
                                     style: {
-                                        classes: 'ui-tooltip-tipped ui-tooltip-shadow'
+                                        classes: 'nifi-tooltip'
                                     },
                                     show: {
                                         solo: true,
@@ -224,14 +232,26 @@
                             if (maxHeight > 0 && actualHeight > maxHeight) {
                                 offset += 20;
                             }
-                            comboOptionText.width($(combo).outerWidth() - offset);
+                            comboOptionText.width(combo.outerWidth() - offset);
                         });
 
                         // show the glass pane to catch the click events
                         var comboGlassPane = $('<div class="combo-glass-pane"></div>').one('click', function () {
-                            if ($(comboOptions).length !== 0) {
-                                $(comboOptions).remove();
+                            if (comboOptions.length !== 0) {
+                                // clean up tooltips
+                                comboOptions.find('img').each(function () {
+                                    var tip = $(this);
+                                    if (tip.data('qtip')) {
+                                        var api = tip.qtip('api');
+                                        api.destroy(true);
+                                    }
+                                });
+                                
+                                // remove the options
+                                comboOptions.remove();
                             }
+                            
+                            // remove the glass pane
                             $(this).remove();
                         });
 
@@ -254,6 +274,7 @@
                 }
             });
         },
+        
         /**
          * Returns the selected option of the first matching element.
          */
@@ -267,6 +288,7 @@
 
             return value;
         },
+        
         /**
          * Sets the selected option.
          *