From: rabuzarus <> Date: Tue, 10 May 2016 23:52:05 +0000 (+0200) Subject: infinite_scroll: move js from index.php to main.js X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=d454905d3c6bcffa975f1a51e379ebabad6f7ff9;p=friendica.git infinite_scroll: move js from index.php to main.js --- diff --git a/boot.php b/boot.php index 13cc2aaf5b..891d2a61a1 100644 --- a/boot.php +++ b/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; + } +} diff --git a/index.php b/index.php index c6a9a88fe1..73f46cfbef 100644 --- a/index.php +++ b/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 - - -EOT; - } $page = $a->page; diff --git a/js/main.js b/js/main.js index 7e1c22ecfc..9914c3801f 100644 --- a/js/main.js +++ b/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 diff --git a/view/templates/head.tpl b/view/templates/head.tpl index 412323f329..b4f82aca48 100644 --- a/view/templates/head.tpl +++ b/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 = '';