Extracts scroll position checks into reusable functions

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

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();
   }

app/assets/javascripts/lib/utils/logoutput_behaviours.js

 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);

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);

changelogs/unreleased/50904-update-scroll-utils.yml

+---
+title: Extracts scroll position check into reusable functions
+merge_request:
+author:
+type: other