Fix the bug that the quick menu fires for the wrong photo. This stems

from using a single gQuickPane <div> that we move around.  A race
condition happens when you mouse over two thumbnails quickly.
Whichever server response loses the race gets displayed, and sometimes
it's the one that you're no longer hovering over.

Fix it by changing gQuickPane to be a class and creating a <div> per
thumbnail.

Fixes ticket #290.

4 files changed, 17 insertions, 21 deletions

diff --git a/modules/gallery/css/quick.css b/modules/gallery/css/quick.css
index 0e45eac2..f153d475 100644
--- a/modules/gallery/css/quick.css
+++ b/modules/gallery/css/quick.css
@@ -1,4 +1,4 @@
-#gQuickPane {
+.gQuickPane {
   position: absolute;
   top: 0;
   left: 0;
@@ -17,7 +17,7 @@
   padding: 0 !important;
 }
 
-#gQuickPane {
+.gQuickPane {
   background: #000;
   border-bottom: 1px solid #ccc;
   opacity: 0.9;
@@ -26,19 +26,19 @@
   left: 0;
 }
 
-#gQuickPane a {
+.gQuickPane a {
   cursor: pointer;
   float: left;
   margin: 4px;
 }
 
-#gQuickPaneOptions {
+.gQuickPaneOptions {
   background: #000;
   float: left;
   width: 100%;
 }
 
-#gQuickPaneOptions li a {
+.gQuickPaneOptions li a {
   display: block;
   float: none;
   width: auto;
@@ -47,6 +47,6 @@
   text-align: left;
 }
 
-#gQuickPaneOptions li a:hover {
+.gQuickPaneOptions li a:hover {
   background-color: #4d4d4d;
 }
diff --git a/modules/gallery/js/quick.js b/modules/gallery/js/quick.js
index 3ac97f8e..fda6470f 100644
--- a/modules/gallery/js/quick.js
+++ b/modules/gallery/js/quick.js
@@ -12,15 +12,15 @@ var show_quick = function() {
   var cont = $(this);
   var quick = $(this).find(".gQuick");
   var img = cont.find(".gThumbnail,.gResize");
-  $("#gQuickPane").remove();
-  cont.append("<div id=\"gQuickPane\"></div>");
-  $("#gQuickPane").hide();
-  cont.hover(function() {}, hide_quick);
+  cont.find(".gQuickPane").remove();
+  cont.append("<div class=\"gQuickPane\"></div>");
+  cont.find(".gQuickPane").hide();
+  cont.hover(function() {}, function() { cont.find(".gQuickPane").remove(); });
   $.get(
     quick.attr("href"),
     {},
     function(data, textStatus) {
-      $("#gQuickPane").html(data).slideDown("fast");
+      cont.find(".gQuickPane").html(data).slideDown("fast");
       $(".ui-state-default").hover(
         function() {
           $(this).addClass("ui-state-hover");
@@ -29,13 +29,13 @@ var show_quick = function() {
           $(this).removeClass("ui-state-hover");
         }
       );
-      $("#gQuickPane a:not(.options)").click(function(e) {
+      cont.find(".gQuickPane a:not(.options)").click(function(e) {
         e.preventDefault();
         quick_do(cont, $(this), img);
       });
-      $("#gQuickPane a.options").click(function(e) {
+      cont.find(".gQuickPane a.options").click(function(e) {
         e.preventDefault();
-        $("#gQuickPaneOptions").slideToggle("fast");
+        cont.find(".gQuickPaneOptions").slideToggle("fast");
       });
     }
   );
@@ -76,7 +76,3 @@ var quick_do = function(cont, pane, img) {
   }
   return false;
 };
-
-var hide_quick = function() {
-  $("#gQuickPane").remove();
-};
diff --git a/modules/gallery/views/quick_pane.html.php b/modules/gallery/views/quick_pane.html.php
index eabf4a67..e5469696 100644
--- a/modules/gallery/views/quick_pane.html.php
+++ b/modules/gallery/views/quick_pane.html.php
@@ -15,7 +15,7 @@
   </span>
 </a>
 
-<ul id="gQuickPaneOptions" style="display: none">
+<ul class="gQuickPaneOptions" style="display: none">
   <? foreach ($button_list->additional as $button): ?>
   <li><a class="<?= $button->class ?>" href="<?= $button->href ?>"
     title="<?= $button->title ?>">
diff --git a/themes/default/css/fix-ie.css b/themes/default/css/fix-ie.css
index 3d9604e6..d071abac 100644
--- a/themes/default/css/fix-ie.css
+++ b/themes/default/css/fix-ie.css
@@ -45,6 +45,6 @@ input.submit {
   width: 60px;
 }
 
-#gQuickPane {
+.gQuickPane {
   height: 32px !important;
-}
\ No newline at end of file
+}