improved infinite scrollling
This commit is contained in:
parent
18a297805c
commit
12d7ca9b84
9 changed files with 46 additions and 12 deletions
|
@ -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')) {
|
if(! function_exists('expand_acl')) {
|
||||||
/**
|
/**
|
||||||
|
|
20
index.php
20
index.php
|
@ -498,30 +498,38 @@ $(document).ready(function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
function loadcontent() {
|
function loadcontent() {
|
||||||
//$("div.loader").show();
|
if (lockLoadContent) return;
|
||||||
|
lockLoadContent = true;
|
||||||
|
|
||||||
|
$("#scroll-loader").fadeIn('normal');
|
||||||
|
|
||||||
num+=1;
|
num+=1;
|
||||||
|
|
||||||
console.log('Loading page ' + num);
|
console.log('Loading page ' + num);
|
||||||
|
|
||||||
$.get('/network?mode=raw$reload_uri&page=' + num, function(data) {
|
$.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 num = $pageno;
|
||||||
|
var lockLoadContent = false;
|
||||||
|
|
||||||
$(window).scroll(function(e){
|
$(window).scroll(function(e){
|
||||||
|
|
||||||
if ($(document).height() != $(window).height()) {
|
if ($(document).height() != $(window).height()) {
|
||||||
// First method that is expected to work - but has problems with Chrome
|
// 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();
|
loadcontent();
|
||||||
} else {
|
} else {
|
||||||
// This method works with Chrome - but seems to be much slower in Firefox
|
// 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();
|
loadcontent();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -815,7 +815,9 @@ die("ss");
|
||||||
$o .= conversation($a,$items,$mode,$update);
|
$o .= conversation($a,$items,$mode,$update);
|
||||||
|
|
||||||
if(!$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));
|
$o .= alt_pager($a,count($items));
|
||||||
} else {
|
} else {
|
||||||
$o .= paginate($a);
|
$o .= paginate($a);
|
||||||
|
|
8
view/templates/scroll_loader.tpl
Normal file
8
view/templates/scroll_loader.tpl
Normal file
|
@ -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>
|
|
@ -95,7 +95,7 @@ input#dfrn-url {
|
||||||
background-color: #222222;
|
background-color: #222222;
|
||||||
color: #FFFFFF !important;
|
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;
|
color: #000088;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1476,7 +1476,8 @@ blockquote.shared_content {
|
||||||
.pager_last,
|
.pager_last,
|
||||||
.pager_prev,
|
.pager_prev,
|
||||||
.pager_next,
|
.pager_next,
|
||||||
.pager_n {
|
.pager_n,
|
||||||
|
.scroll_loader_text {
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: #EEE;
|
background: #EEE;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
|
@ -1886,7 +1886,8 @@ input#profile-jot-email {
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
.pager_prev a,
|
.pager_prev a,
|
||||||
.pager_next a {
|
.pager_next a,
|
||||||
|
.scroll_loader_text {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
padding: 0.2em 1em;
|
padding: 0.2em 1em;
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #aaa;
|
||||||
|
|
|
@ -1782,7 +1782,8 @@ input#dfrn-url {
|
||||||
.pager_last,
|
.pager_last,
|
||||||
.pager_prev,
|
.pager_prev,
|
||||||
.pager_next,
|
.pager_next,
|
||||||
.pager_n {
|
.pager_n,
|
||||||
|
.scroll_loader_text {
|
||||||
/* background: #EEE;*/
|
/* background: #EEE;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -203,7 +203,8 @@ div.pager a {
|
||||||
}
|
}
|
||||||
|
|
||||||
span.pager_first a, span.pager_n 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;
|
color: darkgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue