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

Made scroll events work better in IOS

parent d72d0327
......@@ -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>
......
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();
}
};
......@@ -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,
......
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