templetes/paginator: new

2 files changed, 104 insertions, 2 deletions

diff --git a/templates/home.html b/templates/home.html
index 25c3032..a8dc282 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -24,6 +24,7 @@
         </div>
     </article>
     {% endfor %}
-{{ paginator.next }}
+{# {{ paginator.next }} #}
 </section>
-{% endblock %}
+{% include "paginator.html" %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/paginator.html b/templates/paginator.html
new file mode 100644
index 0000000..4b091f7
--- /dev/null
+++ b/templates/paginator.html
@@ -0,0 +1,101 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+{% if paginator.total_pages > 1 %}
+    <script>
+        var Home = location.href,
+        xhr,
+        xhrUrl = '';
+    
+        var Diaspora = {
+            L: function(url, f, err) {
+                if (url == xhrUrl) {
+                    return false;
+                }
+                xhrUrl = url;
+                if (xhr) {
+                    xhr.abort();
+                }
+                xhr = $.ajax({
+                    type: 'GET',
+                    url: url,
+                    timeout: 10000,
+                    success: function(data) {
+                        f(data);
+                        xhrUrl = '';
+                    },
+                    error: function(a, b, c) {
+                        if (b == 'abort') {
+                            err && err()
+                        } else {
+                            window.location.href = url;
+                        }
+                        xhrUrl = '';
+                    }
+                });
+            },
+            loading: function() {
+                var w = window.innerWidth;
+                var css = '<style class="loaderstyle" id="loaderstyle'+ w +'">'+
+                    '@-moz-keyframes loader'+ w +'{100%{background-position:'+ w +'px 0}}'+
+                    '@-webkit-keyframes loader'+ w +'{100%{background-position:'+ w +'px 0}}'+
+                    '.loader'+ w +'{-webkit-animation:loader'+ w +' 3s linear infinite;-moz-animation:loader'+ w +' 3s linear infinite;}'+
+                    '</style>';
+                $('.loaderstyle').remove()
+                $('head').append(css)
+                $('#loader').removeClass().addClass('loader'+ w).show()
+            },
+            loaded: function() {
+                $('#loader').removeClass().hide()
+            }
+        };
+    
+        $(function() {
+            $('body').on('click', function(e) {
+                var tag = $(e.target).attr('class') || '',
+                    rel = $(e.target).attr('rel') || '';
+                if (!tag && !rel) return;
+                switch (true) {
+                    // next page
+                    case (tag.indexOf('more') != -1):
+                        tag = $('.more');
+                        if (tag.data('status') == 'loading') {
+                            return false
+                        }
+                        var num = parseInt(tag.data('page')) || 1;
+                        if (num == 1) {
+                            tag.data('page', 1)
+                        }
+                        tag.html("{{ trans(key='olderArticle') }}").data('status', 'loading')
+                        Diaspora.loading()
+                        Diaspora.L(tag.attr('href'), function(data) {
+                            tag.hide();
+                            $('.license').hide();
+                            var link = $(data).find('.more').attr('href');
+                            if (link) {
+                                tag.attr('href', link).html("{{ trans(key='olderArticle') }}").data('status', 'loaded')
+                                tag.data('page', parseInt(tag.data('page')) + 1)
+                            }
+                            var tempScrollTop = $(window).scrollTop();
+                            $('body').append($(data).find('.posts'))
+                            $(window).scrollTop(tempScrollTop + 100);
+                            Diaspora.loaded()
+                            //$('html,body').animate({ scrollTop: tempScrollTop + 400 }, 500);
+                            if (link !== '/' && link != '') {
+                                $('body').append($(data).find('.page-nav'))
+                            }
+                        }, function() {
+                            tag.html("{{ trans(key='olderArticle') }}").data('status', 'loaded')
+                        })
+                        return false;
+                        break;
+                    default:
+                        return true;
+                        break;
+                }
+            });
+        })
+    </script>
+    
+    <nav class="page-nav">
+      <a href="{{ paginator.next }}" class="more">{{ trans(key='olderArticle') }}</a>
+    </nav>
+{% endif %}
\ No newline at end of file