Merge pull request #1392 from ddorian1/scrolling

Improved infinite scrolling

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')) {
 /**

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) {
+		$("#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();
 	}
 });

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);

view/templates/scroll_loader.tpl

@@ -0,0 +1,8 @@
+<div id="scroll-loader" class="pager" style="display: none;">
+	<img class="scroll_loader_image" src="images/rotator.gif" />
+	<span class="scroll_loader_text">{{$wait}}</span>
+</div>
+
+<div id="scroll-end" class="pager" style="display: none;">
+	<span class="scroll_loader_text">{{$end}}</span>
+</div>

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;
 }
 

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;

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;

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;*/
 }
 

view/theme/frost/templates/head.tpl

@@ -8,6 +8,8 @@
 
 <link rel="stylesheet" type="text/css" href="{{$stylesheet}}" media="all" />
 
+<script type="text/javascript" src="{{$baseurl}}/js/jquery.js" ></script>
+
 <link rel="shortcut icon" href="{{$baseurl}}/images/friendica-32.png" />
 <link rel="search"
          href="{{$baseurl}}/opensearch" 

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;
 }