Make Per Page a Select

adsabs · Oct 22, 2018 · edc495b · edc495b
1 parent a24db7d
commit edc495b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/js/widgets/list_of_things/paginated_view.js b/src/js/widgets/list_of_things/paginated_view.js
@@ -136,7 +136,7 @@ function (
       'click .toggle-make-space': 'toggleMakeSpace',
       'click a.page-control': 'changePageWithButton',
       'keyup input.page-control': 'tabOrEnterChangePageWithInput',
-      'click .per-page': 'changePerPage'
+      'change #per-page-select': 'changePerPage'
     },
 
     toggleHighlights: function () {
@@ -232,9 +232,8 @@ function (
 
     changePerPage: function (e) {
       e.preventDefault();
-      var val = parseInt($(e.target).text().trim());
-      if (val === this.model.get('perPage')) return;
-      this.trigger('pagination:changePerPage', val);
+      var val = parseInt(e.currentTarget ? e.currentTarget.value : 25);
+      val !== this.model.get('perPage') && this.trigger('pagination:changePerPage', val);
     }
   });
 

diff --git a/src/js/widgets/list_of_things/templates/pagination-partial.html b/src/js/widgets/list_of_things/templates/pagination-partial.html
@@ -12,12 +12,18 @@
     <div class="col-sm-12 pagination-controls s-pagination-controls">
         <div class="col-xs-5 per-page-container">
             {{#if pageData}}
-            Per Page:
-            <a href="#" class="btn btn-sm {{#compare pageData.perPage 25}} per-page--active {{else}} btn-link {{/compare}} per-page">25</a>
-            <a href="#" class="btn btn-sm  {{#compare pageData.perPage 50}} per-page--active {{else}} btn-link {{/compare}} per-page">50</a>
-            <a href="#" class="btn btn-sm {{#compare pageData.perPage 100}} per-page--active {{else}} btn-link {{/compare}} per-page">100</a>
-            <a href="#" class="btn btn-sm {{#compare pageData.perPage 200}} per-page--active {{else}} btn-link {{/compare}} per-page">200</a>
-            <a href="#" class="btn btn-sm {{#compare pageData.perPage 500}} per-page--active {{else}} btn-link {{/compare}} per-page">500</a>
+            <div class="form-group">
+              <label for="per-page-select" class="col-xs-4 control-label" style="line-height: 32px;">Per Page</label>
+              <div class="col-xs-8 col-sm-5">
+                <select name="per-page-select" id="per-page-select" class="form-control">
+                  <option value="25" {{#compare pageData.perPage 25}}selected{{/compare}}>25</option>
+                  <option value="50" {{#compare pageData.perPage 50}}selected{{/compare}}>50</option>
+                  <option value="100" {{#compare pageData.perPage 100}}selected{{/compare}}>100</option>
+                  <option value="200" {{#compare pageData.perPage 200}}selected{{/compare}}>200</option>
+                  <option value="500" {{#compare pageData.perPage 500}}selected{{/compare}}>500</option>
+                </select>
+              </div>
+            </div>
             {{/if}}
         </div>
         <div class="col-xs-6">