Extracts scroll position checks into reusable functions50904-update-scroll-utils

With the new Job Log page in Vue, we'll need to reuse the same functions for scrolling
that we're using in the jQuery one.
This page extracts that logic into reusable functions

3 files changed, 35 insertions, 10 deletions

diff --git a/app/assets/javascripts/job.js b/app/assets/javascripts/job.js
index d4f2a3ef7d3..0e71e705c13 100644
--- a/app/assets/javascripts/job.js
+++ b/app/assets/javascripts/job.js
@@ -6,7 +6,7 @@ import { visitUrl } from './lib/utils/url_utility';
 import bp from './breakpoints';
 import { numberToHumanSize } from './lib/utils/number_utils';
 import { setCiStatusFavicon } from './lib/utils/common_utils';
-import { isScrolledToBottom, scrollDown } from './lib/utils/scroll_utils';
+import { isScrolledToBottom, scrollDown, scrollUp } from './lib/utils/scroll_utils';
 import LogOutputBehaviours from './lib/utils/logoutput_behaviours';
 
 export default class Job extends LogOutputBehaviours {
@@ -80,7 +80,7 @@ export default class Job extends LogOutputBehaviours {
   }
 
   scrollToTop() {
-    $(document).scrollTop(0);
+    scrollUp();
     this.hasBeenScrolled = true;
     this.toggleScroll();
   }
diff --git a/app/assets/javascripts/lib/utils/logoutput_behaviours.js b/app/assets/javascripts/lib/utils/logoutput_behaviours.js
index 1bf99d935ef..41b57025cc9 100644
--- a/app/assets/javascripts/lib/utils/logoutput_behaviours.js
+++ b/app/assets/javascripts/lib/utils/logoutput_behaviours.js
@@ -1,5 +1,11 @@
 import $ from 'jquery';
-import { canScroll, isScrolledToBottom, toggleDisableButton } from './scroll_utils';
+import {
+  canScroll,
+  isScrolledToBottom,
+  isScrolledToTop,
+  isScrolledToMiddle,
+  toggleDisableButton,
+} from './scroll_utils';
 
 export default class LogOutputBehaviours {
   constructor() {
@@ -12,18 +18,13 @@ export default class LogOutputBehaviours {
   }
 
   toggleScroll() {
-    const $document = $(document);
-    const currentPosition = $document.scrollTop();
-    const scrollHeight = $document.height();
-
-    const windowHeight = $(window).height();
     if (canScroll()) {
-      if (currentPosition > 0 && scrollHeight - currentPosition !== windowHeight) {
+      if (isScrolledToMiddle()) {
         // User is in the middle of the log
 
         toggleDisableButton(this.$scrollTopBtn, false);
         toggleDisableButton(this.$scrollBottomBtn, false);
-      } else if (currentPosition === 0) {
+      } else if (isScrolledToTop()) {
         // User is at Top of  Log
 
         toggleDisableButton(this.$scrollTopBtn, true);
diff --git a/app/assets/javascripts/lib/utils/scroll_utils.js b/app/assets/javascripts/lib/utils/scroll_utils.js
index 9313b570863..b4da1e16f08 100644
--- a/app/assets/javascripts/lib/utils/scroll_utils.js
+++ b/app/assets/javascripts/lib/utils/scroll_utils.js
@@ -4,6 +4,7 @@ export const canScroll = () => $(document).height() > $(window).height();
 
 /**
  * Checks if the entire page is scrolled down all the way to the bottom
+ *  @returns {Boolean}
  */
 export const isScrolledToBottom = () => {
   const $document = $(document);
@@ -16,11 +17,34 @@ export const isScrolledToBottom = () => {
   return scrollHeight - currentPosition === windowHeight;
 };
 
+/**
+ * Checks if page is scrolled to the top
+ * @returns {Boolean}
+ */
+export const isScrolledToTop = () => $(document).scrollTop() === 0;
+
 export const scrollDown = () => {
   const $document = $(document);
   $document.scrollTop($document.height());
 };
 
+export const scrollUp = () => {
+  $(document).scrollTop(0);
+};
+
+/**
+ * Checks if scroll position is in the middle of the page
+ * @returns {Boolean}
+ */
+export const isScrolledToMiddle = () => {
+  const $document = $(document);
+  const currentPosition = $document.scrollTop();
+  const scrollHeight = $document.height();
+  const windowHeight = $(window).height();
+
+  return currentPosition > 0 && scrollHeight - currentPosition !== windowHeight;
+};
+
 export const toggleDisableButton = ($button, disable) => {
   if (disable && $button.prop('disabled')) return;
   $button.prop('disabled', disable);