Commit 36a05312 authored by Kjetil Thuen's avatar Kjetil Thuen

Made scroll events work better in IOS

parent d72d0327
...@@ -18,23 +18,23 @@ ...@@ -18,23 +18,23 @@
<script> <script>
var jsondata = {}; var jsondata = {};
var build_list = function() { var build_list = function() {
//TODO: Remember selected element, and scroll there (default to first element).
var template = Handlebars.templates['studylist']; var template = Handlebars.templates['studylist'];
var listhtml = template(jsondata); var listhtml = template(jsondata);
$('#content').html(listhtml); $('#content').html(listhtml);
register_event_handlers();
initialize_list_peek(); initialize_list_peek();
}; };
var load_data = function() { var load_data = function() {
$.ajax({ $.ajax({
url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list", url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
datatype: "json", datatype: "json",
context: document.body context: document.body
}).done(function(data) { }).done(function(data) {
jsondata = data; jsondata = data;
build_list(); build_list();
}); }).error(function(jqXHR, exception) {
alert("Loading data failed:\n" + exception);
});
}; };
</script> </script>
</head> </head>
......
var horizontalCenter = Math.floor(window.innerWidth/2); var horizontalCenter = Math.floor(window.innerWidth/2);
var centerOfHeadline = 0; var centerOfHeadline = 0;
var focusedListElement; var focusedListElement = null;
var target_top = 0; var target_top = 0;
var scrollVal; var scrollVal;
var currently_selected_element = null; var scrollListenersEnabled = false;
var scrollInProgress = false;
var handlersRegistered = false;
var initialize_list_peek = function() { var initialize_list_peek = function() {
target_top = $('#content').position().top; target_top = $('#content').position().top;
$('#target').css({top: target_top}); $('#target').css({top: target_top});
horizontalCenter = Math.floor(window.innerWidth/2); horizontalCenter = Math.floor(window.innerWidth/2);
centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 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() { var register_event_handlers = function() {
jQuery(window).bind('scrollstart', function(){ jQuery(window).bind('scrollstart', function(){
console.log("scrollstart"); if (scrollListenersEnabled) {
$('#expander:visible').slideUp(); scrollInProgress = true;
console.log("scrollstart");
$('#expander:visible').slideUp();
}
}); });
jQuery(window).bind('ontouchmove', function(){ jQuery(window).bind('touchmove', function(){
console.log("touchmove"); //IOS specific touch event
$('#expander:visible').slideUp(); if (scrollListenersEnabled) {
scrollInProgress = true;
console.log("touchmove");
$('#expander:visible').slideUp();
}
}); });
jQuery(window).bind('scrollstop', function(e){ jQuery(window).bind('scrollstop', function(e){
console.log("scrollstop"); if (scrollInProgress) {
find_and_select_element(); scrollInProgress = false;
console.log("scrollstop");
find_and_select_element();
}
}); });
$('#studies_list li').click(function() { $('#studies_list li').click(function() {
...@@ -34,32 +49,35 @@ var register_event_handlers = function() { ...@@ -34,32 +49,35 @@ var register_event_handlers = function() {
}); });
$(window).resize(function() { $(window).resize(function() {
set_selected_element(currently_selected_element); initialize_list_peek();
}); });
handlersRegistered = true;
}; };
var show_expanded_info = function() { var show_expanded_info = function() {
console.log("expanding"); console.log("expanding");
console.log("-------------------------");
var listElem = $('#studies_list li.selected'); var listElem = $('#studies_list li.selected');
scrollListenersEnabled = false;
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function() { $('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function() {
$('#target').animate({height: listElem.height()}, 'fast', function() { $('#target').animate({height: listElem.height()}, 'fast', function() {
details = listElem.find("div.abstract").html(); details = listElem.find("div.abstract").html();
if (details !== null) { if (details !== null) {
$('#expander').css({top: target_top + $('#target').height()}); $('#expander').css({top: target_top + $('#target').height()});
$('#expander div.abstract').html(details); $('#expander div.abstract').html(details);
$('#expander').slideDown(); $('#expander').slideDown('fast', function() {
scrollListenersEnabled = true;
});
} }
}); });
}); });
}; };
var find_and_select_element = function() { var find_and_select_element = function() {
console.log("scrolled");
var newFocusedListElement = document.elementFromPoint(horizontalCenter, centerOfHeadline); var newFocusedListElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
if (newFocusedListElement !== focusedListElement) { if (newFocusedListElement !== focusedListElement) {
console.log("new elem"); set_selected_element(newFocusedListElement);
focusedListElement = newFocusedListElement;
set_selected_element(focusedListElement);
} }
}; };
...@@ -67,19 +85,20 @@ var set_selected_element = function (element) { ...@@ -67,19 +85,20 @@ var set_selected_element = function (element) {
if (!element) { if (!element) {
element = $('#studies_list li:first-child').get(); element = $('#studies_list li:first-child').get();
} }
if (element) { if (element) {
var listElem = $(element).closest('li'); var listElem = $(element).closest('li');
if (listElem.is("LI") && listElem !== currently_selected_element) { if (listElem.is("LI") && listElem !== focusedListElement) {
$('#expander:visible').slideUp(); $('#expander:visible').slideUp();
$('ul#studies_list li').removeClass("selected"); $('#studies_list li').removeClass("selected");
currently_selected_element = listElem;
listElem.addClass('selected'); listElem.addClass('selected');
focusedListElement = listElem;
scrollVal = listElem.offset().top - $('#studies_list').position().top; 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();
} }
}; };
...@@ -16,7 +16,7 @@ var debounce = function (func, threshold, execAsap) { ...@@ -16,7 +16,7 @@ var debounce = function (func, threshold, execAsap) {
timeout = setTimeout(delayed, threshold || 100); timeout = setTimeout(delayed, threshold || 100);
}; };
} };
inScroll = false; inScroll = false;
...@@ -59,7 +59,7 @@ inScroll = false; ...@@ -59,7 +59,7 @@ inScroll = false;
}; };
special.scrollstop = { special.scrollstop = {
latency: 200, latency: 100,
setup: function() { setup: function() {
var timer, var timer,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment