Commit bcc9492c authored by Filipa Lacerda's avatar Filipa Lacerda

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
parent 779169d3
...@@ -6,7 +6,7 @@ import { visitUrl } from './lib/utils/url_utility'; ...@@ -6,7 +6,7 @@ import { visitUrl } from './lib/utils/url_utility';
import bp from './breakpoints'; import bp from './breakpoints';
import { numberToHumanSize } from './lib/utils/number_utils'; import { numberToHumanSize } from './lib/utils/number_utils';
import { setCiStatusFavicon } from './lib/utils/common_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'; import LogOutputBehaviours from './lib/utils/logoutput_behaviours';
export default class Job extends LogOutputBehaviours { export default class Job extends LogOutputBehaviours {
...@@ -80,7 +80,7 @@ export default class Job extends LogOutputBehaviours { ...@@ -80,7 +80,7 @@ export default class Job extends LogOutputBehaviours {
} }
scrollToTop() { scrollToTop() {
$(document).scrollTop(0); scrollUp();
this.hasBeenScrolled = true; this.hasBeenScrolled = true;
this.toggleScroll(); this.toggleScroll();
} }
......
import $ from 'jquery'; import $ from 'jquery';
import { canScroll, isScrolledToBottom, toggleDisableButton } from './scroll_utils'; import {
canScroll,
isScrolledToBottom,
isScrolledToTop,
isScrolledToMiddle,
toggleDisableButton,
} from './scroll_utils';
export default class LogOutputBehaviours { export default class LogOutputBehaviours {
constructor() { constructor() {
...@@ -12,18 +18,13 @@ export default class LogOutputBehaviours { ...@@ -12,18 +18,13 @@ export default class LogOutputBehaviours {
} }
toggleScroll() { toggleScroll() {
const $document = $(document);
const currentPosition = $document.scrollTop();
const scrollHeight = $document.height();
const windowHeight = $(window).height();
if (canScroll()) { if (canScroll()) {
if (currentPosition > 0 && scrollHeight - currentPosition !== windowHeight) { if (isScrolledToMiddle()) {
// User is in the middle of the log // User is in the middle of the log
toggleDisableButton(this.$scrollTopBtn, false); toggleDisableButton(this.$scrollTopBtn, false);
toggleDisableButton(this.$scrollBottomBtn, false); toggleDisableButton(this.$scrollBottomBtn, false);
} else if (currentPosition === 0) { } else if (isScrolledToTop()) {
// User is at Top of Log // User is at Top of Log
toggleDisableButton(this.$scrollTopBtn, true); toggleDisableButton(this.$scrollTopBtn, true);
......
...@@ -4,6 +4,7 @@ export const canScroll = () => $(document).height() > $(window).height(); ...@@ -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 * Checks if the entire page is scrolled down all the way to the bottom
* @returns {Boolean}
*/ */
export const isScrolledToBottom = () => { export const isScrolledToBottom = () => {
const $document = $(document); const $document = $(document);
...@@ -16,11 +17,34 @@ export const isScrolledToBottom = () => { ...@@ -16,11 +17,34 @@ export const isScrolledToBottom = () => {
return scrollHeight - currentPosition === windowHeight; return scrollHeight - currentPosition === windowHeight;
}; };
/**
* Checks if page is scrolled to the top
* @returns {Boolean}
*/
export const isScrolledToTop = () => $(document).scrollTop() === 0;
export const scrollDown = () => { export const scrollDown = () => {
const $document = $(document); const $document = $(document);
$document.scrollTop($document.height()); $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) => { export const toggleDisableButton = ($button, disable) => {
if (disable && $button.prop('disabled')) return; if (disable && $button.prop('disabled')) return;
$button.prop('disabled', disable); $button.prop('disabled', disable);
......
---
title: Extracts scroll position check into reusable functions
merge_request:
author:
type: other
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment