add pagination input box

refactor paginations

3 files changed, 77 insertions, 18 deletions

diff --git a/public/application/views/_navbar_center.php b/public/application/views/_navbar_center.php
index 34bd990..f874632 100644
--- a/public/application/views/_navbar_center.php
+++ b/public/application/views/_navbar_center.php
@@ -18,6 +18,15 @@
       <input type="text" class="form-control search" placeholder="Search for...">
       <div class="input-group-btn pager-simple">
         <button type="button" class="btn btn-default prev">&laquo;</button>
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
+        </button>
+        <ul class="dropdown-menu dropdown-menu-right">
+          <li><nav id='rssactive-pager-top-wrap'>
+            <form id="gotoPage" class="input-with-button">
+            <input id="rssactive-pager2" type="number" min="1" max="1" value="1" class="form-control js-total-pages-value" placeholder="Goto Page ..." ></form>
+          </nav></li>
+        </ul>
         <button type="button" class="btn btn-default next">&raquo;</button>
       </div>
     </div><!-- /.input-group -->
diff --git a/public/lib/newsbeuter/js/nbreader.bootstrap.js b/public/lib/newsbeuter/js/nbreader.bootstrap.js
index f7d1ffa..92ded2d 100644
--- a/public/lib/newsbeuter/js/nbreader.bootstrap.js
+++ b/public/lib/newsbeuter/js/nbreader.bootstrap.js
@@ -542,8 +542,9 @@
     init: function(NBR) {
       this.Active = document.getElementById(NBR.config.rssactive); //list of 10 rss items
       this.feedoffset = 0;
-      this.rsspager = document.getElementById('rssactive-pager');
+      //this.rsspager = document.getElementById('rssactive-pager'); //remove ?
       this.rsspagerwrap = document.getElementById('rssactive-pager-wrap');
+      this.rsspagerwrap2 = document.getElementById('rssactive-pager-top-wrap');
       this.rsspgrsm = $("#rss div.pager-simple");
       this.rsspgrsm[0].NBR = NBR;
       this.rsspgrsm[0].onclick = this.pagersm;
@@ -579,12 +580,55 @@
     },
     pagersm: function(e) {
       e.preventDefault();
-      var obj = e.target; var rss = this.NBR.UI.Rss;
+      if(e.target) { var obj = e.target; } else { var obj = e; }
+      var rss = this.NBR.UI.Rss;
       var li = $(rss.rsspager).children('li');
       if(li.length < 3) { return; }
       if( $(obj).hasClass('prev') ) { return rss.pgrPrev(); }
       if( $(obj).hasClass('next') ) { return rss.pgrNext(); }
     },
+    pagerFeedUpdate: function(NBR, num) {
+      NBR.UI.Rss.feedoffset = (parseInt(num)-1)*10;
+      NBR.UI.RssList.getXml(NBR);
+      return this;
+    },
+    pagerSearchUpdate: function(opts, s) {
+      opts.startPage = s;
+      search2 = $("#rss input.search");
+      $(search2).attr( "placeholder", 'Search for...    Pgs: '+s+'/'+opts.totalPages );
+      return this;
+    },
+    pagerSetTwbs: function(pager, opts, NBR) {
+      $(pager).twbsPagination($.extend({}, opts, { // 3rd-party
+         onPageClick: function(event, page) {
+           NBR.UI.Rss.pagerFeedUpdate(NBR, page)
+           NBR.UI.Rss.pagerSearchUpdate(opts, page);
+         }
+      }));
+    },
+    pagerTopSubmit: function(e) {
+      e.preventDefault(); var obj = e.target;
+      if(obj.tagName != 'FORM') { return; }
+      var pgr2 = $(obj).children('input');
+      var num = parseInt($(pgr2)[0].value);
+      num = num >= 1 ? num : 1;
+      this.num = num;
+      var NBR = this.NBR;
+      pgr = $('#rssactive-pager');
+      defaultOpts = pgr.data('opts');
+      NBR.UI.Rss.pagerFeedUpdate(NBR, num);
+      NBR.UI.Rss.pagerSearchUpdate(defaultOpts, num);
+      $(pgr).twbsPagination('destroy');
+      NBR.UI.Rss.pagerSetTwbs(pgr, defaultOpts, NBR); // call 3rd party
+    },
+    pagerTopSet: function(pgs, NBR) {
+      var form = $(this.rsspagerwrap2).children('form');
+      var pgr2 = $(form).children('input');
+      $(pgr2)[0].max = pgs;
+      $(form)[0].NBR = NBR;
+      $(form)[0].onsubmit = this.pagerTopSubmit;
+      return this;
+    },
     list: function(data, NBR) {
       var items = []; var uD = NBR.UI.Data;
       $.each( data.query, function( key ) {
@@ -613,27 +657,22 @@
       // data.count = full count (unread+read)
       var m = (data.count%10) > 0 ? 1 : 0;
       var pgs = parseInt(data.count/10)+m; //pager data
-
       // make pagination and redo on new list
-      var pgr = this.rsspager;
-      li = $(pgr).children('li');
-      search2 = $("#rss input.search");
+      var pgr = this.rsspager; li = $(pgr).children('li');
       if(li.length < 3 || this.feedoffset === 0) {
-        $(pgr).remove();
         this.rsspagerwrap.innerHTML = NBR.UI.Data.rsspgr();
         pgr = this.rsspager = $('#rssactive-pager');
+        this.pagerTopSet(pgs, NBR);
+        var defaultOpts = {
+          totalPages: pgs, visiblePages: 4,
+          startPage: 1,
+          prev: '&lt;',      next: '&gt;',
+          first: '&lt;&lt;', last: '&gt;&gt;',
+        };
+        this.rsspager.data('opts', defaultOpts);
         setTimeout(function() {
-          $(search2).attr( "placeholder", 'Search for...      Pgs: 1/'+pgs );
-          $(pgr).twbsPagination({
-            totalPages: pgs,   visiblePages: 4,
-            prev: '&lt;',      next: '&gt;',
-            first: '&lt;&lt;', last: '&gt;&gt;',
-            onPageClick: function(event, page) {
-              NBR.UI.Rss.feedoffset = (parseInt(page)-1)*10;
-              NBR.UI.RssList.getXml(NBR);
-              $(search2).attr( "placeholder", 'Search for...      Pgs: '+page+'/'+pgs );
-            }
-          });
+          NBR.UI.Rss.pagerSearchUpdate(defaultOpts, 1);
+          NBR.UI.Rss.pagerSetTwbs(pgr, defaultOpts, NBR); // call 3rd party
         }, 100);
       }
       return this;
diff --git a/public/theme/default/css/default.css b/public/theme/default/css/default.css
index 4891106..2200444 100644
--- a/public/theme/default/css/default.css
+++ b/public/theme/default/css/default.css
@@ -100,6 +100,17 @@ code {
 #rsscol2 { margin: 0px; padding: 0px; }
 #rss { margin-bottom: 4px; padding: 0px 2px 2px 2px; }
 
+/* rss articles list pager */
+#rssactive-pager-top-wrap { margin: 0px; padding: 0px; }
+#rssactive-pager2 {
+  margin: 0px 0px 0px 4px;
+  width: 150px; max-height: 400px;
+  overflow: auto;
+  padding: 0px;
+}
+#rssactive-pager2 li { margin: 0px; padding: 0px; } 
+#rssactive-pager2 li a { margin: 2px 2px 2px 2px; } 
+
 /* rss articles list */
 #rssactive { font-size: 90%; }
 #rssactive .rss-items { margin-bottom: 4px; }