a11y: entry stream pagination

public/css/style.css

@@ -776,6 +776,14 @@ input {
             display:none;
         }
 
+#stream-pagination {
+    text-align: center;
+}
+
+#stream-pagination li {
+    display: inline;
+}
+
 #fullscreen-entry {
     display:none;
 }

public/js/selfoss-db.js

@@ -559,19 +559,29 @@ selfoss.dbOffline = {
                 var isMore = false;
                 var alwaysInDb = selfoss.filter.type === 'starred'
                              || selfoss.filter.type === 'unread';
+                var offset = selfoss.filter.offset;
 
                 entries.filter(function(entry) {
+                    var keepEntry = false;
+
                     if (selfoss.filter.extraIds.indexOf(entry.id) > -1) {
                         return true;
                     }
 
                     if (selfoss.filter.type == 'starred') {
-                        return entry.starred;
+                        keepEntry = entry.starred;
                     } else if (selfoss.filter.type == 'unread') {
-                        return entry.unread;
+                        keepEntry = entry.unread;
+                    } else if (selfoss.filter.type == 'lastread') {
+                        keepEntry = !entry.unread && !entry.skipped;
+                    }
+
+                    if (keepEntry && offset > 0) {
+                        offset = offset - 1;
+                        return false;
                     }
 
-                    return true;
+                    return keepEntry;
                 }).until(function(entry) {
                     // stop iteration if enough entries have been shown
                     // go one further to assess if has more

public/js/selfoss-events-entries.js

@@ -169,6 +169,13 @@ selfoss.events.entries = function() {
         });
     }
 
+    // stream pagination buttons
+    $('#stream-pagination button').unbind('click').click(function() {
+        var pageNumber = parseInt($(this).html());
+        selfoss.filter.offset = (pageNumber - 1) * selfoss.filter.itemsPerPage;
+        selfoss.db.reloadList();
+    });
+
     // click a tag
     if (selfoss.isSmartphone() == false) {
         $('.entry-tags-tag').unbind('click').click(function() {

public/js/selfoss-ui.js

@@ -138,6 +138,21 @@ selfoss.ui = {
                 if (hasMore) {
                     $('.stream-more').show();
                 }
+
+                var streamPagination = $('#stream-pagination').empty();
+                var count = parseInt($('.nav-filter-' + selfoss.filter.type +
+                                       ' span.count').html());
+                for (var pageNumber = 1;
+                    pageNumber < count / selfoss.filter.itemsPerPage + 1;
+                    pageNumber++) {
+                    var currentAttr = '';
+                    var current = '';
+                    if (selfoss.filter.offset == selfoss.filter.itemsPerPage * (pageNumber - 1)) {
+                        currentAttr = ' aria-current="true"';
+                        current = ' (current)';
+                    }
+                    streamPagination.append('<li><button aria-label="Goto Page ' + pageNumber + '"' + currentAttr + '>' + pageNumber + current + '</button></li>');
+                }
             } else {
                 $('.stream-empty').show();
                 if (selfoss.isSmartphone()) {

templates/home.phtml

@@ -204,6 +204,9 @@
             <button class="stream-button stream-more"><span><?= trim(\F3::get('lang_more')); ?></span></button>
             <button class="stream-button mark-these-read"><span><?= trim(\F3::get('lang_markread')); ?></span></button>
             <button class="stream-button stream-error"><?= trim(\F3::get('lang_streamerror')); ?></button>
+            <nav role="navigation" aria-label="Pagination Navigation">
+                <ul id="stream-pagination" />
+            </nav>
         </div>
 
         <!-- fullscreen popup -->