Use jQuery to show top pagination on scroll down then scroll up

* Some STYLEGUIDE.md conformance * Wrap in IIFE's to keep these things out of the global environment content scope... some packages could use our identifier names and collide. * Faster and concurrent hide of comment reply box with spacer resize Applies to OpenUserJS#531
Martii · Jan 16, 2015 · 1087e0e · 1087e0e
1 parent 090534f
commit 1087e0e
Show file tree

Hide file tree

Showing 15 changed files with 129 additions and 65 deletions.
diff --git a/views/includes/scripts/commentReplyScript.html b/views/includes/scripts/commentReplyScript.html
@@ -1,72 +1,73 @@
 <script type="text/javascript">
- // Show spacer div
- $('#reply-control').on('shown.bs.collapse', function () {
- $('#show-reply-form-when-visible').css({
- height: '210px'
+ (function () {
+ // Show spacer div
+ $('#reply-control').on('show.bs.collapse', function () {
+ $('#show-reply-form-when-visible').css({
+ height: '210px'
+ });
  });
- });
 
- // Hide spacer div
- $('#reply-control').on('hidden.bs.collapse', function () {
- $('#show-reply-form-when-visible').css({
- height: '0'
+ // Hide spacer div
+ $('#reply-control').on('hide.bs.collapse', function () {
+ $('#show-reply-form-when-visible').css({
+ height: '0'
+ });
  });
- });
 
- $('.btn-comment-reply').click(function (aE) {
- $('#reply-control').collapse('show');
+  $('.btn-comment-reply').click(function (aE) {
+  $('#reply-control').collapse('show');
 
- var $comment = $(aE.target).closest('.topic-post');
- var $author = $comment.find('.topic-meta-data .names .username').first();
- var $replyTextarea = $('#reply-control textarea[name="comment-content"]');
+  var $comment = $(aE.target).closest('.topic-post');
+  var $author = $comment.find('.topic-meta-data .names .username').first();
+  var $replyTextarea = $('#reply-control textarea[name="comment-content"]');
 
- document.location.hash = $comment.attr('id');
+  document.location.hash = $comment.attr('id');
 
- var text = $replyTextarea.text();
- if (!/^\s*$/.test(text)) {
- text += '\n\n'; // Add linebreak if reply already started.
- }
- text += '[Re](' + document.location.href.replace(/\(/g, '%28').replace(/\)/g, '%29') + '): ';
- text += '[@' + $author.text() + '](' + $author.attr('href') + '): ';
- text += ' \n';
- $replyTextarea.text(text);
- });
+  var text = $replyTextarea.text();
+  if (!/^\s*$/.test(text)) {
+  text += '\n\n'; // Add linebreak if reply already started.
+  }
+  text += '[Re](' + document.location.href.replace(/\(/g, '%28').replace(/\)/g, '%29') + '): ';
+  text += '[@' + $author.text() + '](' + $author.attr('href') + '): ';
+  text += ' \n';
+  $replyTextarea.text(text);
+  });
 
- function isElementInViewport(aEl) {
- // special bonus for those using jQuery
- if (aEl instanceof jQuery) {
- aEl = aEl[0];
- }
+ function isElementInViewport(aEl) {
+ if (aEl instanceof jQuery) {
+ aEl = aEl[0];
+ }
 
- var rect = aEl.getBoundingClientRect();
+  var rect = aEl.getBoundingClientRect();
 
- return (
- rect.top >= 0 &&
- rect.left >= 0 &&
- rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
- rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
- );
- }
+  return (
+  rect.top >= 0 &&
+  rect.left >= 0 &&
+  rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+  rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+  );
+  }
 
- var hasShownReplyForm = false;
- function callback(aEl) {
- if (!hasShownReplyForm) {
- $('#reply-control').collapse('show');
- hasShownReplyForm = true;
+ var hasShownReplyForm = false;
+ function callback(aEl) {
+ if (!hasShownReplyForm) {
+ $('#reply-control').collapse('show');
+ hasShownReplyForm = true;
+ }
  }
- }
 
- function fireIfElementVisible(aEl, aCallback) {
- return function () {
- if ( isElementInViewport(aEl) ) {
- aCallback(aEl);
+ function fireIfElementVisible(aEl, aCallback) {
+ return function () {
+ if (isElementInViewport(aEl)) {
+ aCallback(aEl);
+ }
  }
  }
- }
 
- var handler = fireIfElementVisible ($('#show-reply-form-when-visible'), callback);
+  var handler = fireIfElementVisible($('#show-reply-form-when-visible'), callback);
 
- // jQuery
- $(window).on('DOMContentLoaded load resize scroll', handler);
+  // jQuery
+  $(window).on('DOMContentLoaded load resize scroll', handler);
 
+ })();
 </script>
diff --git a/views/includes/scripts/showTopPagination.html b/views/includes/scripts/showTopPagination.html
@@ -0,0 +1,50 @@
+<script type="text/javascript">
+ (function () {
+ function isElementInViewport(aEl) {
+ if (aEl instanceof jQuery) {
+ aEl = aEl[0];
+ }
+
+ var rect = aEl.getBoundingClientRect();
+
+ return (
+ rect.top >= 0 &&
+ rect.left >= 0 &&
+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+ rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+ );
+ }
+
+ var hasShownPagination = false;
+ function callback(aEl) {
+ if (!hasShownPagination) {
+ aEl.collapse('show');
+ hasShownPagination = true;
+ }
+ }
+
+ var lastScrollTop = 0;
+ var hasScrolledDown = false;
+
+ function fireIfElementVisible(aEl, aCallback) {
+ return function () {
+ var scrollTop = $(document).scrollTop();
+
+ if (scrollTop > lastScrollTop) {
+ hasScrolledDown = true;
+ } else {
+ if (isElementInViewport(aEl) && hasScrolledDown) {
+ aCallback(aEl);
+ }
+ }
+ lastScrollTop = scrollTop;
+ }
+ }
+
+ var handler = fireIfElementVisible($('.pagination:first').parent(), callback);
+
+ // jQuery
+ $(window).on('scroll', handler);
+
+ })();
+</script>
diff --git a/views/pages/categoryListPage.html b/views/pages/categoryListPage.html
@@ -22,7 +22,7 @@ <h4 class="list-group-item-heading">{{name}}</h4>
  {{/categoryList}}
  </div>
  <div class="panel-group col-sm-offset-0 col-md-offset-2 col-lg-offset-3">
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  <div class="panel panel-default col-sm-12 col-md-12 col-lg-12">
@@ -36,6 +36,7 @@ <h4 class="list-group-item-heading">{{name}}</h4>
  </div>
  </div>
  {{> includes/footer.html }}
+ {{> includes/scripts/showTopPagination.html }}
  {{> includes/scripts/tableTrLinkScript.html }}
 </body>
 </html>
diff --git a/views/pages/discussionListPage.html b/views/pages/discussionListPage.html
@@ -18,7 +18,7 @@
  <i class="fa fa-plus"></i> Create Topic
  </a>
  </div>
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  <div class="panel panel-default">
@@ -31,6 +31,7 @@
  </div>
  </div>
  {{> includes/footer.html }}
+ {{> includes/scripts/showTopPagination.html }}
  {{> includes/scripts/tableTrLinkScript.html }}
 </body>
 </html>
diff --git a/views/pages/discussionPage.html b/views/pages/discussionPage.html
@@ -31,7 +31,7 @@
  <div class="container-fluid comments">
  <div class="row">
  <section class="topic-area list-group">
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  {{#commentList}}
@@ -53,6 +53,7 @@
  <div id="show-reply-form-when-visible"></div>
  {{> includes/commentForm.html }}
  {{> includes/footer.html }}
+ {{> includes/scripts/showTopPagination.html }}
  {{#authedUser}}
  {{> includes/scripts/markdownEditor.html }}
  {{> includes/scripts/commentReplyScript.html }}

diff --git a/views/pages/groupListPage.html b/views/pages/groupListPage.html
@@ -12,7 +12,7 @@
  <h2 class="page-heading">
  Groups
  </h2>
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  <div class="panel panel-default">
@@ -29,6 +29,7 @@ <h2 class="page-heading">
  </div>
  </div>
  {{> includes/footer.html }}
+ {{> includes/scripts/showTopPagination.html }}
  {{> includes/scripts/tableTrLinkScript.html }}
 </body>
 </html>
diff --git a/views/pages/groupScriptListPage.html b/views/pages/groupScriptListPage.html
@@ -12,7 +12,7 @@
  <h2 class="page-heading">
  <a href="{{{group.groupPageUrl}}}" class="script-name">{{group.name}}</a>
  </h2>
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  <div class="panel panel-default">
@@ -31,6 +31,7 @@ <h2 class="page-heading">
  </div>
  {{> includes/footer.html }}
  {{> includes/scripts/tableTrLinkScript.html }}
+ {{> includes/scripts/showTopPagination.html }}
  {{> includes/scripts/lazyIconScript.html }}
 </body>
 </html>
diff --git a/views/pages/removedItemListPage.html b/views/pages/removedItemListPage.html
@@ -12,7 +12,7 @@
  <h2 class="page-heading">
  Removed Items
  </h2>
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  <div class="panel panel-default">
@@ -35,5 +35,6 @@ <h3>Filters</h3>
  </div>
  {{> includes/footer.html }}
  {{> includes/scripts/tableTrLinkScript.html }}
+ {{> includes/scripts/showTopPagination.html }}
 </body>
 </html>
diff --git a/views/pages/scriptIssueListPage.html b/views/pages/scriptIssueListPage.html
@@ -29,7 +29,7 @@
  The script author requests that you use their preferred primary support method when filing an issue. Please consider using that for regular issues.
  </div>
  {{/script.hasSupport}}
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  <div class="panel panel-default">
@@ -54,6 +54,7 @@
  </div>
  {{> includes/footer.html }}
  {{> includes/scripts/tableTrLinkScript.html }}
+ {{> includes/scripts/showTopPagination.html }}
  {{> includes/scripts/lazyIconScript.html }}
 </body>
 </html>
diff --git a/views/pages/scriptIssuePage.html b/views/pages/scriptIssuePage.html
@@ -39,7 +39,7 @@
  <div class="container-fluid comments">
  <div class="row">
  <section class="topic-area list-group">
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  {{#commentList}}
@@ -62,6 +62,7 @@
  <div id="show-reply-form-when-visible"></div>
  {{> includes/commentForm.html }}
  {{> includes/footer.html }}
+ {{> includes/scripts/showTopPagination.html }}
  {{> includes/scripts/lazyIconScript.html }}
  {{#authedUser}}
  {{> includes/scripts/markdownEditor.html }}

diff --git a/views/pages/scriptListPage.html b/views/pages/scriptListPage.html
@@ -12,7 +12,7 @@
  <h2 class="page-heading">
  {{pageHeading}}
  </h2>
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  <div class="panel panel-default">
@@ -30,6 +30,7 @@ <h2 class="page-heading">
  </div>
  </div>
  {{> includes/footer.html }}
+ {{> includes/scripts/showTopPagination.html }}
  {{> includes/scripts/tableTrLinkScript.html }}
  {{> includes/scripts/lazyIconScript.html }}
 </body>

diff --git a/views/pages/userCommentListPage.html b/views/pages/userCommentListPage.html
@@ -15,7 +15,7 @@
  <div class="container-fluid comments">
  <div class="row">
  <section class="topic-area list-group">
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  {{#commentList}}
@@ -51,5 +51,6 @@
  </div>
  </div>
  {{> includes/footer.html }}
+ {{> includes/scripts/showTopPagination.html }}
 </body>
 </html>
diff --git a/views/pages/userGitHubRepoListPage.html b/views/pages/userGitHubRepoListPage.html
@@ -11,7 +11,7 @@
  <div class="row">
  <div class="col-md-8">
  <h2><a href="{{{userGitHubRepoListPageUrl}}}" class="script-author">{{githubUser.login}}</a></h2>
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  <div class="list-group">
@@ -30,5 +30,6 @@ <h4 class="list-group-item-heading"><i class="octicon octicon-fw octicon-repo"><
  </div>
  </div>
  {{> includes/footer.html }}
+ {{> includes/scripts/showTopPagination.html }}
 </body>
 </html>
diff --git a/views/pages/userListPage.html b/views/pages/userListPage.html
@@ -12,7 +12,7 @@
  <h2 class="page-heading">
  {{pageHeading}}
  </h2>
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  <div class="panel panel-default">
@@ -28,6 +28,7 @@ <h2 class="page-heading">
  </div>
  </div>
  {{> includes/footer.html }}
+ {{> includes/scripts/showTopPagination.html }}
  {{> includes/scripts/tableTrLinkScript.html }}
 </body>
 </html>
diff --git a/views/pages/userScriptListPage.html b/views/pages/userScriptListPage.html
@@ -12,7 +12,7 @@
  <div class="row">
  <div class="col-xs-12">
  {{> includes/userPageHeader.html }}
- <div class="text-center">
+ <div class="text-center collapse">
  {{{paginationRendered}}}
  </div>
  <div class="panel panel-default">
@@ -31,6 +31,7 @@
  </div>
  </div>
  {{> includes/footer.html }}
+ {{> includes/scripts/showTopPagination.html }}
  {{> includes/scripts/tableTrLinkScript.html }}
  {{> includes/scripts/lazyIconScript.html }}
 </body>