From 94caaeca8db379a3a4ce9452e89e394622aa6efd Mon Sep 17 00:00:00 2001
From: Benjamin Attal <attal.benjamin@gmail.com>
Date: Wed, 4 Jun 2014 21:58:24 -0400
Subject: [PATCH] Fix scrolling / shortcut problems with focusing on results by
 only disabling mouse events on scroll and enabling them after scroll is
 finished.

---
 static/js/index.js     | 53 +++++++++++++++++++++++++++++++++++---------------
 static/sass/index.sass | 38 ++++++++++++++++++++----------------
 2 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 245437d..ff7cc3c 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -9,17 +9,27 @@ FINISH_TYPING_INTERVAL = 650;
 var searchBar = $("form#search-bar input[type='text']")[0];
 var resultsDiv = $("div#results")[0];
 
-var typingTimer, lastValue;
+var typingTimer, scrollTimer, lastValue;
 var searchResultsPage = 1;
 /*
  * Set all page callbacks.
  */
 (function setHomePageCallbabacks(){
+    var results = $('#results').get(0);
+
     // Enable infinite scrolling down the results page.
     $(window).scroll(function(){
         if($(window).scrollTop() + $(window).height() == $(document).height() &&
                 resultsDiv.querySelectorAll(".result").length > 0)
             loadMoreResults();
+
+        clearTimeout(scrollTimer);
+        if (!results.classList.contains('disable-hover'))
+            results.classList.add('disable-hover')
+
+        scrollTimer = setTimeout(function(){
+            results.classList.remove('disable-hover');
+        }, 200);
     });
 
     // Toggle the advanced-search form's visibility.
@@ -57,13 +67,13 @@ var searchResultsPage = 1;
     var previousResult = function(){
         var currResult = $(".display-all");
         if(currResult.length) {
-            currResult.removeClass('display-all');
+            currResult.removeClass("display-all");
             currResult = currResult.closest(".result").prev(".result");
         } else {
-            currResult = $(document.querySelectorAll('.result')[0]);
+            currResult = $(document.querySelectorAll(".result")[0]);
         }
 
-        currResult.addClass('display-all');
+        currResult.addClass("display-all");
         currResult.each(function(){
             $('html,body').stop().animate({
                 scrollTop: $(this).offset().top - (
@@ -79,10 +89,10 @@ var searchResultsPage = 1;
     var nextResult = function(){
         var currResult = $(".display-all");
         if(currResult.length) {
-            currResult.removeClass('display-all');
+            currResult.removeClass("display-all");
             currResult = currResult.closest(".result").next(".result");
         } else {
-            currResult = $(document.querySelectorAll('.result')[0]);
+            currResult = $(document.querySelectorAll(".result")[0]);
         }
 
         currResult.addClass('display-all');
@@ -104,8 +114,13 @@ var searchResultsPage = 1;
     $(window).keypress(function(key){
         for(var hotkey in hotkeyActions){
             var keyChar = String.fromCharCode(key.keyCode);
-            if(keyChar == hotkey)
+            if(keyChar == hotkey) {
+                var results = $('#results').get(0);
+                if (!results.classList.contains('disable-hover'))
+                    results.classList.add('disable-hover')
+
                 hotkeyActions[keyChar]();
+            }
         }
     });
 }());
@@ -273,14 +288,20 @@ function createResult(codelet) {
     codeElt.innerHTML = '<div id=tablecontainer>' + codelet.html_code + '</div>';
 
     //Event binding
-    $(newDiv).hover(function(e) {
-        $(this).addClass('display-all');
+    $(newDiv).on('mousemove', function(e) {
+        var holdCondition = $('.disable-hover');
+
+        if(holdCondition.length == 0) {
+            $(this).siblings().removeClass('display-all');
+            $(this).addClass('display-all');
+        }
     });
 
-    $(newDiv).on('transitionend', function(e) {
-        $(this).on('mouseleave', function(e) {
+    $(newDiv).on('mouseleave', function(e) {
+        var holdCondition = $('.disable-hover');
+
+        if(holdCondition.length == 0)
             $(this).removeClass('display-all');
-        });
     });
 
     $(nextMatch).click(function(e) {
@@ -346,12 +367,12 @@ function nextSymbolMatch() {
     var currResult = $(".display-all"),
         currMatch = currResult.find(".hll.current"),
         matches = currResult.find(".hll"),
-        scrollDiv = currResult.find('#tablecontainer');
+        scrollDiv = currResult.find("#tablecontainer");
 
     if (currMatch.length == 0)
         currMatch = $(matches[0]);
     else
-        currMatch.removeClass('current');
+        currMatch.removeClass("current");
 
     var index = matches.index(currMatch.get(0)) + 1;
     index = index >= matches.length ? 0 : index;
@@ -361,8 +382,8 @@ function nextSymbolMatch() {
             - scrollDiv.height() / 2
             + newMatch.position().top + newMatch.height() / 2);
 
-    newMatch.effect("highlight", {color: '#FFF'}, 750)
-    newMatch.addClass('current');
+    newMatch.effect("highlight", {color: "#FFF"}, 750)
+    newMatch.addClass("current");
 };
 
 /*
diff --git a/static/sass/index.sass b/static/sass/index.sass
index f1a5cba..d1e3994 100644
--- a/static/sass/index.sass
+++ b/static/sass/index.sass
@@ -296,29 +296,33 @@ div#results
         &:hover
             color: orange
 
-    div.result
-        @extend .t3
+    &.disable-hover
+        pointer-events: none
 
-        width: $resultWidth
-        height: 200px
-        margin-bottom: 100%
+div.result
+    @extend .t3
 
-        table
-            border-collapse: collapse
-            height: inherit
+    width: $resultWidth
+    height: 200px
+    margin-bottom: 100%
+    pointer-events: auto
 
-            tr
-                @extend .t3
-                @include opaque(0.8)
+    table
+        border-collapse: collapse
+        height: inherit
+
+        tr
+            @extend .t3
+            @include opaque(0.8)
 
-                height: inherit
+            height: inherit
 
-        &.cascade
-            @extend .t1
-            margin-bottom: 15%
+    &.cascade
+        @extend .t1
+        margin-bottom: 15%
 
-        &.display-all table tr
-            @include opaque(1.0)
+    &.display-all table tr
+        @include opaque(1.0)
 
 div#display-info
     font-size: 1.3em