Merge pull request #2510 from rabuzarus/1005_js_pageload

infinite_scroll: move js from index.php to main.js

boot.php

@@ -862,6 +862,9 @@ class App {
 		if ($touch_icon == "")
 			$touch_icon = "images/friendica-128.png";
 
+		// get data wich is needed for infinite scroll on the network page
+		$invinite_scroll = infinite_scroll_data($this->module);
+
 		$tpl = get_markup_template('head.tpl');
 		$this->page['htmlhead'] = replace_macros($tpl,array(
 			'$baseurl' => $this->get_baseurl(), // FIXME for z_path!!!!
@@ -874,7 +877,8 @@ class App {
 			'$update_interval' => $interval,
 			'$shortcut_icon' => $shortcut_icon,
 			'$touch_icon' => $touch_icon,
-			'$stylesheet' => $stylesheet
+			'$stylesheet' => $stylesheet,
+			'$infinite_scroll' => $invinite_scroll,
 		)) . $this->page['htmlhead'];
 	}
 
@@ -2201,3 +2205,43 @@ function argv($x) {
 
 	return '';
 }
+
+/**
+ * @brief Get the data which is needed for infinite scroll
+ * 
+ * For invinite scroll we need the page number of the actual page
+ * and the the URI where the content of the next page comes from.
+ * This data is needed for the js part in main.js.
+ * Note: infinite scroll does only work for the network page (module)
+ * 
+ * @param string $module The name of the module (e.g. "network")
+ * @return array Of infinite scroll data
+ *	'pageno' => $pageno The number of the actual page
+ *	'reload_uri' => $reload_uri The URI of the content we have to load
+ */
+function infinite_scroll_data($module) {
+
+	if (get_pconfig(local_user(),'system','infinite_scroll')
+		AND ($module == "network") AND ($_GET["mode"] != "minimal")) {
+
+		// get the page number
+		if (is_string($_GET["page"]))
+			$pageno = $_GET["page"];
+		else
+			$pageno = 1;
+
+		$reload_uri = "";
+
+		// try to get the uri from which we load the content
+		foreach ($_GET AS $param => $value)
+			if (($param != "page") AND ($param != "q"))
+				$reload_uri .= "&".$param."=".urlencode($value);
+
+		if (($a->page_offset != "") AND !strstr($reload_uri, "&offset="))
+			$reload_uri .= "&offset=".urlencode($a->page_offset);
+
+		$arr = array("pageno" => $pageno, "reload_uri" => $reload_uri);
+
+		return $arr;
+	}
+}

index.php

@@ -491,70 +491,6 @@ if (isset($_GET["mode"]) AND ($_GET["mode"] == "raw")) {
 	session_write_close();
 	exit;
 
-} elseif (get_pconfig(local_user(),'system','infinite_scroll')
-          AND ($a->module == "network") AND ($_GET["mode"] != "minimal")) {
-	if (is_string($_GET["page"]))
-		$pageno = $_GET["page"];
-	else
-		$pageno = 1;
-
-	$reload_uri = "";
-
-	foreach ($_GET AS $param => $value)
-		if (($param != "page") AND ($param != "q"))
-			$reload_uri .= "&".$param."=".urlencode($value);
-
-	if (($a->page_offset != "") AND !strstr($reload_uri, "&offset="))
-		$reload_uri .= "&offset=".urlencode($a->page_offset);
-
-
-$a->page['htmlhead'] .= <<< EOT
-<script type="text/javascript">
-
-$(document).ready(function() {
-    num = $pageno;
-});
-
-function loadcontent() {
-	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');
-		}
-	});
-}
-
-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() * 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() * 1.5))
-			loadcontent();
-	}
-});
-</script>
-
-EOT;
-
 }
 
 $page    = $a->page;

js/main.js

@@ -51,6 +51,7 @@
 	var commentBusy = false;
 	var last_popup_menu = null;
 	var last_popup_button = null;
+	var lockLoadContent = false;
 
 	$(function() {
 		$.ajaxSetup({cache: false});
@@ -349,6 +350,21 @@
 			}
 		});
 
+		// Set an event listener for infinite scroll
+		if(typeof infinite_scroll !== 'undefined') {
+			$(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() * 1.5))
+						loadScrollContent();
+				} 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() * 1.5))
+						loadScrollContent();
+				}
+			});
+		}
+
 
 	});
 
@@ -709,6 +725,31 @@
 		$('#pause').html('');
 	}
 
+	// load more network content (used for infinite scroll)
+	function loadScrollContent() {
+		if (lockLoadContent) return;
+		lockLoadContent = true;
+
+		$("#scroll-loader").fadeIn('normal');
+
+		// the page number to load is one higher than the actual
+		// page number
+		infinite_scroll.pageno+=1;
+
+		console.log('Loading page ' + infinite_scroll.pageno);
+
+		// get the raw content from the next page and insert this content
+		// right before "#conversation-end"
+		$.get('network?mode=raw' + infinite_scroll.reload_uri + '&page=' + infinite_scroll.pageno, function(data) {
+			$("#scroll-loader").hide();
+			if ($(data).length > 0) {
+				$(data).insertBefore('#conversation-end');
+				lockLoadContent = false;
+			} else {
+				$("#scroll-end").fadeIn('normal');
+			}
+		});
+	}
 
     function bin2hex(s){
         // Converts the binary representation of data to hex

view/templates/head.tpl

@@ -48,6 +48,15 @@
 	var updateInterval = {{$update_interval}};
 	var localUser = {{if $local_user}}{{$local_user}}{{else}}false{{/if}};
 
+	{{* Create an object with the data which is needed for infinite scroll.
+	For the relevant js part look at function loadContent() in main.js. *}}
+	{{if $infinite_scroll}}
+	var infinite_scroll = {
+				'pageno'	: {{$infinite_scroll.pageno}},
+				'reload_uri'	: "{{$infinite_scroll.reload_uri}}"
+				}
+	{{/if}}
+
 	function confirmDelete() { return confirm("{{$delitem}}"); }
 	function commentExpand(id) {
 		$("#comment-edit-text-" + id).value = '';