Merge branch '50904-update-scroll-utils' into 'master'

Extracts scroll position checks into reusable functions

See merge request gitlab-org/gitlab-ce!21931

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