From 36a05312c12511da5ae73bd179c2f3b6cf95b8c9 Mon Sep 17 00:00:00 2001
From: Kjetil Thuen <kjetil.thuen@nsd.uib.no>
Date: Wed, 3 Jul 2013 15:27:50 +0200
Subject: [PATCH] Made scroll events work better in IOS

---
 index.html  | 20 ++++++++--------
 listPeek.js | 67 ++++++++++++++++++++++++++++++++++-------------------
 utils.js    |  4 ++--
 3 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index 3599590..85b52b7 100644
--- a/index.html
+++ b/index.html
@@ -18,23 +18,23 @@
        <script>
          var jsondata = {};
          var build_list = function() {
-             //TODO: Remember selected element, and scroll there (default to first element).
              var template = Handlebars.templates['studylist'];
              var listhtml = template(jsondata);
              $('#content').html(listhtml);
-             register_event_handlers();
              initialize_list_peek();
          };
 
          var load_data = function() {
-             $.ajax({
-                 url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
-                 datatype: "json",
-                 context: document.body
-             }).done(function(data) {
-                 jsondata = data;
-                 build_list();
-             });
+            $.ajax({
+               url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
+               datatype: "json",
+               context: document.body
+            }).done(function(data) {
+               jsondata = data;
+               build_list();
+            }).error(function(jqXHR, exception) {
+               alert("Loading data failed:\n" + exception);
+            });
          };
        </script>
    </head>
diff --git a/listPeek.js b/listPeek.js
index 63bf46c..9dac7f8 100644
--- a/listPeek.js
+++ b/listPeek.js
@@ -1,32 +1,47 @@
 var horizontalCenter = Math.floor(window.innerWidth/2);
 var centerOfHeadline = 0;
-var focusedListElement;
+var focusedListElement = null;
 var target_top = 0;
 var scrollVal;
-var currently_selected_element = null;
+var scrollListenersEnabled = false;
+var scrollInProgress = false;
+var handlersRegistered = false;
 
 var initialize_list_peek = function() {
     target_top = $('#content').position().top;
     $('#target').css({top: target_top});
     horizontalCenter = Math.floor(window.innerWidth/2);
     centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2);
-    set_selected_element();
+    if (!handlersRegistered) {
+        register_event_handlers();
+    }
+    set_selected_element(focusedListElement);
 };
 
 var register_event_handlers = function() {
     jQuery(window).bind('scrollstart', function(){
-      console.log("scrollstart");
-      $('#expander:visible').slideUp();
+      if (scrollListenersEnabled) {
+          scrollInProgress = true;
+          console.log("scrollstart");
+          $('#expander:visible').slideUp();
+      }
     });
 
-    jQuery(window).bind('ontouchmove', function(){
-      console.log("touchmove");
-      $('#expander:visible').slideUp();
+    jQuery(window).bind('touchmove', function(){
+      //IOS specific touch event
+      if (scrollListenersEnabled) {
+          scrollInProgress = true;
+          console.log("touchmove");
+          $('#expander:visible').slideUp();
+      }
     });
 
     jQuery(window).bind('scrollstop', function(e){
-      console.log("scrollstop");
-      find_and_select_element();
+      if (scrollInProgress) {
+          scrollInProgress = false;
+          console.log("scrollstop");
+          find_and_select_element();
+      }
     });
 
     $('#studies_list li').click(function() {
@@ -34,32 +49,35 @@ var register_event_handlers = function() {
     });
 
     $(window).resize(function() {
-        set_selected_element(currently_selected_element);
+        initialize_list_peek();
     });
+
+    handlersRegistered = true; 
 };
 
 var show_expanded_info = function() {
     console.log("expanding");
+    console.log("-------------------------");
     var listElem = $('#studies_list li.selected');
+    scrollListenersEnabled = false;
     $('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function() {
         $('#target').animate({height: listElem.height()}, 'fast', function() {
             details = listElem.find("div.abstract").html();
             if (details !== null) {
                 $('#expander').css({top: target_top + $('#target').height()});
                 $('#expander div.abstract').html(details);
-                $('#expander').slideDown();
+                $('#expander').slideDown('fast', function() {
+                    scrollListenersEnabled = true;
+                });
             }
         }); 
     });
 };
 
 var find_and_select_element = function() {
-    console.log("scrolled");
     var newFocusedListElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
     if (newFocusedListElement !== focusedListElement) {
-        console.log("new elem");
-        focusedListElement = newFocusedListElement;
-        set_selected_element(focusedListElement);
+        set_selected_element(newFocusedListElement);
     }
 };
 
@@ -67,19 +85,20 @@ var set_selected_element = function (element) {
     if (!element) {
         element = $('#studies_list li:first-child').get();
     }
-
     if (element) {
         var listElem = $(element).closest('li');
-        if (listElem.is("LI") && listElem !== currently_selected_element) {
+        if (listElem.is("LI") && listElem !== focusedListElement) {
             $('#expander:visible').slideUp();
-            $('ul#studies_list li').removeClass("selected");
-
-            currently_selected_element = listElem;
+            $('#studies_list li').removeClass("selected");
             listElem.addClass('selected');
+            focusedListElement = listElem;
+
             scrollVal = listElem.offset().top - $('#studies_list').position().top;
-            debounce(show_expanded_info, 500, false)();
+            console.log("Debouncing expand function");
+            debounce(show_expanded_info, 200, false)();
+        } else {
+            console.log("Not a list element, hiding");
+            $('#expander').hide();
         }
-    } else {
-        $('#expander').hide();
     }
 };
diff --git a/utils.js b/utils.js
index 412f9c7..7d9d44d 100644
--- a/utils.js
+++ b/utils.js
@@ -16,7 +16,7 @@ var debounce = function (func, threshold, execAsap) {
 
         timeout = setTimeout(delayed, threshold || 100); 
     };
-}
+};
 
 inScroll = false;
 
@@ -59,7 +59,7 @@ inScroll = false;
     };
 
     special.scrollstop = {
-        latency: 200,
+        latency: 100,
         setup: function() {
 
             var timer,
-- 
GitLab