Convert draggable headers and sort links to jQuery UI tooltip

phpmyadmin · Jan 6, 2013 · d9706ac · d9706ac
1 parent 407fe12
commit d9706ac
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 47 deletions.
diff --git a/js/functions.js b/js/functions.js
@@ -3506,16 +3506,16 @@ function PMA_createqTip($elements, content, options)
  * @param item          the item
  *                      (see http://api.jqueryui.com/tooltip/#option-items)
  * @param myContent     content of the tooltip
- * @param additional_options to override the default options
+ * @param additionalOptions to override the default options
  *
  */
-function PMA_tooltip($elements, item, myContent, additional_options)
+function PMA_tooltip($elements, item, myContent, additionalOptions)
 {
     if ($('#no_hint').length > 0) {
         return;
     }
 
-    var default_options = {
+    var defaultOptions = {
         content: myContent,
         items:  item,
         //@todo: when PMA_createqTip() is gone, rename this class
@@ -3525,7 +3525,7 @@ function PMA_tooltip($elements, item, myContent, additional_options)
         hide: {effect: "slideUp", duration: 250}
     }
 
-    $elements.tooltip($.extend(true, default_options, additional_options));
+    $elements.tooltip($.extend(true, defaultOptions, additionalOptions));
 }
 
 /**

diff --git a/js/makegrid.js b/js/makegrid.js
@@ -127,7 +127,8 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi
                 objTop: objPos.top,
                 objLeft: objPos.left
             };
-            g.hideHint();
+            $(t).find('th.draggable').tooltip('disable');
+
             $('body').css('cursor', 'move');
             $('body').noSelect();
             if (g.isCellEditActive) {
@@ -226,6 +227,7 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi
             }
             $('body').css('cursor', 'inherit');
             $('body').noSelect(false);
+            $(t).find('th.draggable').tooltip('enable');
         },
 
         /**
@@ -417,13 +419,18 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi
 
         /**
          * Update current hint using the boolean values (showReorderHint, showSortHint, etc.).
-         * It will hide the hint if all the boolean values is false.
          *
-         * @param e event
          */
-        updateHint: function(e) {
+        updateHint: function() {
+            var text = '';
             if (!g.colRsz && !g.colReorder) {     // if not resizing or dragging
-                var text = '';
+                if (g.visibleHeadersCount > 1) {
+                    g.showReorderHint = true;
+                }
+                if ($(t).find('th.marker').length > 0) {
+                    g.showMarkHint = true;
+                }
+
                 if (g.showReorderHint && g.reorderHint) {
                     text += g.reorderHint;
                 }
@@ -439,21 +446,8 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi
                     text += text.length > 0 ? '<br />' : '';
                     text += g.copyHint;
                 }
-                // hide the hint if no text and the event is mouseenter
-                if (g.qtip) {
-                    g.qtip.disable(!text && e.type == 'mouseenter');
-                    g.qtip.updateContent(text, false);
-                }
-            } else {
-                g.hideHint();
-            }
-        },
-
-        hideHint: function() {
-            if (g.qtip) {
-                g.qtip.hide();
-                g.qtip.disable(true);
             }
+            return text;
         },
 
         /**
@@ -1467,14 +1461,16 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi
                 })
                 .mouseenter(function(e) {
                     if (g.visibleHeadersCount > 1) {
-                        g.showReorderHint = true;
                         $(this).css('cursor', 'move');
                     } else {
                         $(this).css('cursor', 'inherit');
                     }
                 })
                 .mouseleave(function(e) {
                     g.showReorderHint = false;
+                    $(t).find("th.draggable").tooltip("option", {
+                        content: g.updateHint()
+                    }) ;
                 })
                 .dblclick(function(e) {
                     e.preventDefault();
@@ -1826,27 +1822,28 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi
         g.initGridEdit();
     }
 
-    // create qtip for each <th> with draggable class
-    PMA_createqTip($(t).find('th.draggable'));
+    // create tooltip for each <th> with draggable class
+    PMA_tooltip(
+            $(t).find("th.draggable"),
+            'th',
+            g.updateHint()
+    );
 
-    // register events for hint tooltip
+    // register events for hint tooltip (anchors inside draggable th)
     $(t).find('th.draggable a')
-        .attr('title', '')          // hide default tooltip for sorting
         .mouseenter(function(e) {
             g.showSortHint = true;
-            g.updateHint(e);
+            $(t).find("th.draggable").tooltip("option", {
+                content: g.updateHint()
+            }); 
         })
         .mouseleave(function(e) {
             g.showSortHint = false;
-            g.updateHint(e);
-        });
-    $(t).find('th.marker')
-        .mouseenter(function(e) {
-            g.showMarkHint = true;
-        })
-        .mouseleave(function(e) {
-            g.showMarkHint = false;
+            $(t).find("th.draggable").tooltip("option", {
+                content: g.updateHint()
+            }); 
         });
+
     // register events for dragging-related feature
     if (enableResize || enableReorder) {
         $(document).mousemove(function(e) {
@@ -1857,16 +1854,6 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi
         });
     }
 
-    // bind event to update currently hovered qtip API
-    $(t).find('th.draggable')
-        .mouseenter(function(e) {
-            g.qtip = $(this).qtip('api');
-            g.updateHint(e);
-        })
-        .mouseleave(function(e) {
-            g.updateHint(e);
-        });
-
     // some adjustment
     $(t).removeClass('data');
     $(g.gDiv).addClass('data');