Merge pull request #1592 from thostetler/feature/bbb-1586-changing-pa…

…gination-does-not-refresh-results

Adds New Pagination Options

src/js/page_managers/master.js

@@ -91,6 +91,7 @@ define([
 
       // scroll to top
       document.body.scrollTop = document.documentElement.scrollTop = 0;
+      $('#app-container').scrollTop(0);
       // and fix the search bar back in its default spot
       $('.s-search-bar-full-width-container').removeClass('s-search-bar-motion');
       $('.s-quick-add').removeClass('hidden');
@@ -179,6 +180,19 @@ define([
       }
 
       this.getPubSub().publish(this.getPubSub().ARIA_ANNOUNCEMENT, pageManagerName);
+
+      var $backToTopBtn = $('#backToTopBtn');
+      var $appContainer = $('#app-container');
+      $appContainer.scroll(function () {
+        if ($appContainer.scrollTop() > 100) {
+          $backToTopBtn.css('display', 'block');
+        } else {
+          $backToTopBtn.css('display', 'none');
+        }
+      });
+      $backToTopBtn.click(function () {
+        $appContainer.scrollTop(0);
+      });
     },
 
     // used by discovery mediator

src/js/page_managers/templates/master-page-manager.html

@@ -13,3 +13,7 @@
 <div id="footer-container">
   <div data-widget="FooterWidget"/>
 </div>
+
+<button id="backToTopBtn" title="Go to top">
+  <i class="fa fa-caret-up" aria-hidden="true"></i> Top
+</button>

src/js/widgets/list_of_things/templates/pagination-partial.html

@@ -12,10 +12,12 @@
     <div class="col-sm-12 pagination-controls s-pagination-controls">
         <div class="col-xs-5 per-page-container">
             {{#if pageData}}
-            per page:
+            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>
             {{/if}}
         </div>
         <div class="col-xs-6">

src/js/widgets/list_of_things/templates/results-container-template.html

@@ -55,4 +55,4 @@ <h2 class="s-article-title">{{{title}}}</h2>
          {{> js/widgets/list_of_things/templates/pagination-partial}}
     {{/if}}
 
-</div>
+</div>

src/js/widgets/list_of_things/widget.js

@@ -275,7 +275,7 @@ define([
 
     updateLocalStorage: function (options) {
       // if someone has selected perPage, save it in to localStorage
-      if (options.hasOwnProperty('perPage') && _.contains([25, 50, 100], options.perPage)) {
+      if (options.hasOwnProperty('perPage') && _.contains([25, 50, 100, 200, 500], options.perPage)) {
         this.getBeeHive().getObject('User').setLocalStorage({ perPage: options.perPage });
         console.log('set user\'s page preferences in localStorage: ' + options.perPage);
       }

src/styles/sass/ads-sass/any-page.scss

@@ -82,3 +82,24 @@ div[data-widget="AlertsWidget"] {
   }
 
 }
+
+#backToTopBtn {
+  display: none; /* Hidden by default */
+  position: fixed; /* Fixed/sticky position */
+  bottom: 20px; /* Place the button at the bottom of the page */
+  right: 30px; /* Place the button 30px from the right */
+  z-index: 99; /* Make sure it does not overlap */
+  border: solid 1px $brand-primary; /* Remove borders */
+  outline: none; /* Remove outline */
+  background-color: #FFFFFF; /* Set a background color */
+  color: black; /* Text color */
+  cursor: pointer; /* Add a mouse pointer on hover */
+  padding: 10px; /* Some padding */
+  border-radius: 10px; /* Rounded corners */
+  font-size: 18px; /* Increase font size */
+
+  &:hover {
+    background-color: darken(white, 25%); /* Add a dark-grey background on hover */
+    color: white;
+  }
+}

src/styles/sass/ads-sass/results-list.scss

@@ -361,7 +361,8 @@ li.article-author {
 
 
 .per-page-container {
-  margin: 23px 0 0 6.3%
+  margin: 23px 0 0 6.3%;
+  padding-left: 0px;
 }
 
 .per-page--active {