Commit 78bbb9e2 authored by Kjetil Thuen's avatar Kjetil Thuen

Improved performance

Run transition animations in paralell instead of sequentally, and keep
the bottom of the target zone in place at all times. This makes the
behaviour much more pleasant.
parent 62ab76c6
......@@ -76,13 +76,14 @@ inScroll = false;
}
};
}());
(function () {
"use strict";
var horizontalCenter = Math.floor(window.innerWidth/2),
centerOfHeadline = 0,
focusedListElement = null,
target_top = 0,
target_bottom = 0,
scrollVal,
scrollListenersEnabled = false,
scrollInProgress = false,
......@@ -111,25 +112,31 @@ inScroll = false;
};
var show_expanded_info = function() {
// console.log("expanding");
console.log("expanding");
var listElem = $('#studies_list li.selected'),
details;
details,
heightDiff,
marginDiff;
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('fast', function() {
scrollListenersEnabled = true;
scrollInProgress = false;
// inScroll = false;
});
}
});
});
heightDiff = $('#target').height() - listElem.height();
if (heightDiff !== 0) {
marginDiff = parseInt($('#target').css('margin-top'), 0) + heightDiff;
$('#target').animate({height: listElem.height(),'margin-top': marginDiff + 'px'}, 'fast');
}
//FIXME: Figure out where the 60pixels come from and make them dynamic
$('body').animate({scrollTop: scrollVal + 60}, 'fast');
details = listElem.find("div.abstract").html();
scrollInProgress = false;
if (details !== null) {
$('#expander div.abstract').html(details);
$('#expander').slideDown('fast', function() {
scrollListenersEnabled = true;
});
}
};
var set_selected_element = function (element) {
......@@ -139,13 +146,13 @@ inScroll = false;
if (element) {
var listElem = $(element).closest('li');
if (listElem.is("LI") && listElem !== focusedListElement) {
$('#expander:visible').slideUp();
$('#expander:visible').slideUp(100);
$('#studies_list li').removeClass("selected");
listElem.addClass('selected');
focusedListElement = listElem;
scrollVal = listElem.offset().top - $('#studies_list').position().top;
// console.log("Debouncing expand function");
scrollVal = listElem.offset().top + listElem.height() - $('#studies_list').position().top;
console.log("Debouncing expand function");
debounce(show_expanded_info, 500, false)();
} else {
$('#expander').hide();
......@@ -161,14 +168,16 @@ inScroll = false;
};
var initialize_list_peek = function() {
target_top = $('#content').position().top;
$('#target').css({top: target_top});
target_bottom = $('#content').position().top;
// $('#target').css({bottom: target_bottom});
horizontalCenter = Math.floor(window.innerWidth/2);
//FIXME: Figure out where the 60pixels come from and make them dynamic
$('#expander').css({top: target_bottom - 60});
centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2);
if (!handlersRegistered) {
register_event_handlers();
}
set_selected_element(focusedListElement);
//set_selected_element(focusedListElement);
};
var register_event_handlers = function() {
......@@ -176,7 +185,7 @@ inScroll = false;
if (scrollListenersEnabled) {
scrollInProgress = true;
console.log("scrollstart");
$('#expander:visible').slideUp();
$('#expander:visible').slideUp(100);
}
});
......@@ -186,7 +195,10 @@ inScroll = false;
scrollInProgress = true;
console.log("touchmove");
$('#expander:visible').hide();
} else {
console.log("scroll registered, but listener disabled");
}
});
$(window).bind('scrollstop', function(e){
......
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