From 36a05312c12511da5ae73bd179c2f3b6cf95b8c9 Mon Sep 17 00:00:00 2001 From: Kjetil Thuen 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 @@ 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, -- 2.26.2