Commit 6554eabf authored by Kjetil Thuen's avatar Kjetil Thuen

Improved scrolling roboustness.

parent 514d467a
...@@ -5,8 +5,10 @@ ...@@ -5,8 +5,10 @@
<title>ScrollMagnifyer</title> <title>ScrollMagnifyer</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<!--
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
-->
<script src="utils.js"></script> <script src="utils.js"></script>
<script src="studylist.js"></script> <script src="studylist.js"></script>
<script src="listPeek.js"></script> <script src="listPeek.js"></script>
...@@ -48,16 +50,13 @@ ...@@ -48,16 +50,13 @@
<div class="metadata"> <div class="metadata">
<div class="abstract lead"></div> <div class="abstract lead"></div>
<div class="buttons"> <div class="buttons">
<button class="btn btn-info"><i class="icon-info-sign"> </i> Mer metadata</button> <button class="btn btn-info"><i class="icon-info-sign"></i> Mer metadata</button>
<button class="btn btn-success"><i class="icon-ok-sign"> </i> Velg studie</button> <button class="btn btn-success"><i class="icon-ok-sign"></i> Velg studie</button>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
load_data(); load_data();
$(window).resize(function() {
build_list();
});
</script> </script>
</body> </body>
</html> </html>
...@@ -3,13 +3,14 @@ var centerOfHeadline = 0; ...@@ -3,13 +3,14 @@ var centerOfHeadline = 0;
var focusedListElement; var focusedListElement;
var target_top = 0; var target_top = 0;
var scrollVal; var scrollVal;
var currently_selected_element = null;
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($('#studies_list li:first-child').get()); set_selected_element();
}; };
var register_event_handlers = function() { var register_event_handlers = function() {
...@@ -33,9 +34,14 @@ var register_event_handlers = function() { ...@@ -33,9 +34,14 @@ var register_event_handlers = function() {
$('#studies_list li').click(function() { $('#studies_list li').click(function() {
set_selected_element($(this).get()); set_selected_element($(this).get());
}); });
$(window).resize(function() {
set_selected_element(currently_selected_element);
});
}; };
var show_expanded_info = function() { var show_expanded_info = function() {
console.log("expanding");
var listElem = $('#studies_list li.selected'); var listElem = $('#studies_list li.selected');
$('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() {
...@@ -60,17 +66,19 @@ var find_and_select_element = function() { ...@@ -60,17 +66,19 @@ var find_and_select_element = function() {
}; };
var set_selected_element = function (element) { var set_selected_element = function (element) {
if (!element) {
element = $('#studies_list li:first-child').get();
}
$('#expander:visible').slideUp(); $('#expander:visible').slideUp();
$('ul#studies_list li').removeClass("selected"); $('ul#studies_list li').removeClass("selected");
if (element) { if (element) {
var listElem = $(element).closest('li'); var listElem = $(element).closest('li');
currently_selected_element = listElem;
if (listElem.is("LI")) { if (listElem.is("LI")) {
listElem.addClass('selected'); listElem.addClass('selected');
scrollVal = listElem.offset().top - $('#studies_list').position().top; scrollVal = listElem.offset().top - $('#studies_list').position().top;
//debounce(show_expanded_info, 500, false)(); debounce(show_expanded_info, 500, false)();
show_expanded_info();
} }
} else { } else {
$('#expander').hide(); $('#expander').hide();
......
...@@ -39,7 +39,7 @@ inScroll = false; ...@@ -39,7 +39,7 @@ inScroll = false;
} else { } else {
inScroll = true; inScroll = true;
evt.type = 'scrollstart'; evt.type = 'scrollstart';
jQuery.event.handle.apply(_self, _args); $(this).trigger(evt.type, _args);
} }
timer = setTimeout( function(){ timer = setTimeout( function(){
...@@ -78,11 +78,10 @@ inScroll = false; ...@@ -78,11 +78,10 @@ inScroll = false;
inScroll = false; inScroll = false;
timer = null; timer = null;
evt.type = 'scrollstop'; evt.type = 'scrollstop';
jQuery.event.handle.apply(_self, _args); $(this).trigger(evt.type, _args);
}, special.scrollstop.latency); }, special.scrollstop.latency);
} }
}; };
jQuery(this).bind('scroll', handler).data(uid2, handler); jQuery(this).bind('scroll', handler).data(uid2, handler);
...@@ -92,6 +91,4 @@ inScroll = false; ...@@ -92,6 +91,4 @@ inScroll = false;
jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) ); jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
} }
}; };
})(); })();
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