improved infinite scrollling

diff --git a/include/text.php b/include/text.php
index 43b321e98a01f503ce960e8ae91e32b0eb3310c3..535c36d235f0fe81ac87c03def37bf9b937df46d 100644 (file)
--- a/include/text.php
+++ b/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')) {
 /**

diff --git a/index.php b/index.php
index 5dcb9a54a0da070f7e606c3c3b3862cf7a034c78..295db01da2138b42d4ae0caee25e1a7a544eec32 100644 (file)
--- a/index.php
+++ b/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) {
-               $(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 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();
        }
 });

diff --git a/mod/network.php b/mod/network.php
index f9d4b59ad693d102ef1048d0d2e0cecb0de67844..a28840dae2e247bab9c6cdaeb7384f98026e9521 100644 (file)
--- a/mod/network.php
+++ b/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);

diff --git a/view/templates/scroll_loader.tpl b/view/templates/scroll_loader.tpl
new file mode 100644 (file)
index 0000000..4adaa96
--- /dev/null
+++ b/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>

diff --git a/view/theme/duepuntozero/deriv/darkzero.css b/view/theme/duepuntozero/deriv/darkzero.css
index d2b7a67d4d5b3ba0b6dd2f321b8b68030b205668..fe2ad73cf2e84f8dac86a197bf50bb7434a1012d 100644 (file)
--- a/view/theme/duepuntozero/deriv/darkzero.css
+++ b/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;
 }
 

diff --git a/view/theme/duepuntozero/style.css b/view/theme/duepuntozero/style.css
index 26e949dfd6c50c0b92ea9345801ac5257d5080cb..1b20042a5dbea2ba06c2187e12d8f0438887ee1f 100644 (file)
--- a/view/theme/duepuntozero/style.css
+++ b/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;

diff --git a/view/theme/frost-mobile/style.css b/view/theme/frost-mobile/style.css
index dc90c76236c5d989dbdac90a22ff0e7ebb6c0fb7..f4b46fed84519e42135f58c62c9c9c4e4e66b98f 100644 (file)
--- a/view/theme/frost-mobile/style.css
+++ b/view/theme/frost-mobile/style.css
@@ -1886,7 +1886,8 @@ input#profile-jot-email {
 }*/\r
 \r
 .pager_prev a,\r
-.pager_next a {\r
+.pager_next a,\r
+.scroll_loader_text {\r
        font-size: 1.5em;\r
        padding: 0.2em 1em;\r
        border: 1px solid #aaa;\r

diff --git a/view/theme/frost/style.css b/view/theme/frost/style.css
index 333f43c5651c6e0d697e05ed80b1e595602ddfab..aed0dc0ab1e2fc302d897e030d239efe24a6823e 100644 (file)
--- a/view/theme/frost/style.css
+++ b/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;*/
 }
 

diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index 1d39d95e8b1110a47a08a36e1e7b5cdea9913c87..479fd348e2e6e01c3b52a865775665869e6ad647 100644 (file)
--- a/view/theme/vier/style.css
+++ b/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;
 }