From: Johannes Schwab Date: Thu, 5 Feb 2015 10:29:14 +0000 (+0100) Subject: improved infinite scrollling X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=12d7ca9b84cfbdae25144770d48092c58f46d783;p=friendica.git improved infinite scrollling --- diff --git a/include/text.php b/include/text.php index 43b321e98a..535c36d235 100644 --- a/include/text.php +++ b/include/text.php @@ -385,6 +385,18 @@ function alt_pager(&$a, $i) { }} +if(! function_exists('scroll_loader')) { +/** + * Loader for infinite scrolling + * @return string html for loader + */ +function scroll_loader() { + $tpl = get_markup_template("scroll_loader.tpl"); + return replace_macros($tpl, array( + 'wait' => t('Loading more entries...'), + 'end' => t('The end') + )); +}} if(! function_exists('expand_acl')) { /** diff --git a/index.php b/index.php index 5dcb9a54a0..295db01da2 100644 --- a/index.php +++ b/index.php @@ -498,30 +498,38 @@ $(document).ready(function() { }); function loadcontent() { - //$("div.loader").show(); + if (lockLoadContent) return; + lockLoadContent = true; + + $("#scroll-loader").fadeIn('normal'); num+=1; console.log('Loading page ' + num); $.get('/network?mode=raw$reload_uri&page=' + num, function(data) { - $(data).insertBefore('#conversation-end'); + $("#scroll-loader").hide(); + if ($(data).length > 0) { + $(data).insertBefore('#conversation-end'); + lockLoadContent = false; + } else { + $("#scroll-end").fadeIn('normal'); + } }); - - //$("div.loader").fadeOut('normal'); } var num = $pageno; +var lockLoadContent = false; $(window).scroll(function(e){ if ($(document).height() != $(window).height()) { // First method that is expected to work - but has problems with Chrome - if ($(window).scrollTop() == $(document).height() - $(window).height()) + if ($(window).scrollTop() > ($(document).height() - $(window).height() * 1.5)) loadcontent(); } else { // This method works with Chrome - but seems to be much slower in Firefox - if ($(window).scrollTop() > (($("section").height() + $("header").height() + $("footer").height()) - $(window).height())) + if ($(window).scrollTop() > (($("section").height() + $("header").height() + $("footer").height()) - $(window).height() * 1.5)) loadcontent(); } }); diff --git a/mod/network.php b/mod/network.php index f9d4b59ad6..a28840dae2 100644 --- a/mod/network.php +++ b/mod/network.php @@ -815,7 +815,9 @@ die("ss"); $o .= conversation($a,$items,$mode,$update); if(!$update) { - if(!get_config('system', 'old_pager')) { + if(get_pconfig(local_user(),'system','infinite_scroll')) { + $o .= scroll_loader(); + } elseif(!get_config('system', 'old_pager')) { $o .= alt_pager($a,count($items)); } else { $o .= paginate($a); diff --git a/view/templates/scroll_loader.tpl b/view/templates/scroll_loader.tpl new file mode 100644 index 0000000000..4adaa965b2 --- /dev/null +++ b/view/templates/scroll_loader.tpl @@ -0,0 +1,8 @@ + + + diff --git a/view/theme/duepuntozero/deriv/darkzero.css b/view/theme/duepuntozero/deriv/darkzero.css index d2b7a67d4d..fe2ad73cf2 100644 --- a/view/theme/duepuntozero/deriv/darkzero.css +++ b/view/theme/duepuntozero/deriv/darkzero.css @@ -95,7 +95,7 @@ input#dfrn-url { background-color: #222222; color: #FFFFFF !important; } -.pager_first a, .pager_last a, .pager_prev a, .pager_next a, .pager_n a, .pager_current { +.pager_first a, .pager_last a, .pager_prev a, .pager_next a, .pager_n a, .pager_current, .scroll_loader_text { color: #000088; } diff --git a/view/theme/duepuntozero/style.css b/view/theme/duepuntozero/style.css index 26e949dfd6..1b20042a5d 100644 --- a/view/theme/duepuntozero/style.css +++ b/view/theme/duepuntozero/style.css @@ -1476,7 +1476,8 @@ blockquote.shared_content { .pager_last, .pager_prev, .pager_next, -.pager_n { +.pager_n, +.scroll_loader_text { border: 1px solid black; background: #EEE; padding: 4px; diff --git a/view/theme/frost-mobile/style.css b/view/theme/frost-mobile/style.css index dc90c76236..f4b46fed84 100644 --- a/view/theme/frost-mobile/style.css +++ b/view/theme/frost-mobile/style.css @@ -1886,7 +1886,8 @@ input#profile-jot-email { }*/ .pager_prev a, -.pager_next a { +.pager_next a, +.scroll_loader_text { font-size: 1.5em; padding: 0.2em 1em; border: 1px solid #aaa; diff --git a/view/theme/frost/style.css b/view/theme/frost/style.css index 333f43c565..aed0dc0ab1 100644 --- a/view/theme/frost/style.css +++ b/view/theme/frost/style.css @@ -1782,7 +1782,8 @@ input#dfrn-url { .pager_last, .pager_prev, .pager_next, -.pager_n { +.pager_n, +.scroll_loader_text { /* background: #EEE;*/ } diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css index 1d39d95e8b..479fd348e2 100644 --- a/view/theme/vier/style.css +++ b/view/theme/vier/style.css @@ -203,7 +203,8 @@ div.pager a { } span.pager_first a, span.pager_n a, -span.pager_last a, span.pager_prev a, span.pager_next a { +span.pager_last a, span.pager_prev a, span.pager_next a, +span.scroll_loader_text { color: darkgray; }