Merge pull request #2510 from rabuzarus/1005_js_pageload
infinite_scroll: move js from index.php to main.js
This commit is contained in:
commit
6a0a30ab75
4 changed files with 95 additions and 65 deletions
46
boot.php
46
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
64
index.php
64
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;
|
||||
|
|
|
|||
41
js/main.js
41
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
|
||||
|
|
|
|||
|
|
@ -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 = '';
|
||||
|
|
|
|||
Loading…
Reference in a new issue