diff options
| -rw-r--r-- | app/assets/javascripts/job.js | 4 | ||||
| -rw-r--r-- | app/assets/javascripts/lib/utils/logoutput_behaviours.js | 17 | ||||
| -rw-r--r-- | app/assets/javascripts/lib/utils/scroll_utils.js | 24 | ||||
| -rw-r--r-- | changelogs/unreleased/50904-update-scroll-utils.yml | 5 |
4 files changed, 40 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); diff --git a/changelogs/unreleased/50904-update-scroll-utils.yml b/changelogs/unreleased/50904-update-scroll-utils.yml new file mode 100644 index 00000000000..e301de1a40b --- /dev/null +++ b/changelogs/unreleased/50904-update-scroll-utils.yml @@ -0,0 +1,5 @@ +--- +title: Extracts scroll position check into reusable functions +merge_request: +author: +type: other |