Commit 399e1e83 authored by Paul Slaughter's avatar Paul Slaughter Committed by Clement Ho

Update position sticky polyfill

parent eeb73247
import $ from 'jquery'; import $ from 'jquery';
import stickyMonitor from './lib/utils/sticky'; import StickyFill from 'stickyfilljs';
export default (stickyTop) => { export default () => {
stickyMonitor(document.querySelector('.js-diff-files-changed'), stickyTop); StickyFill.add(document.querySelector('.js-diff-files-changed'));
$('.js-diff-stats-dropdown').glDropdown({ $('.js-diff-stats-dropdown').glDropdown({
filterable: true, filterable: true,
......
...@@ -80,13 +80,6 @@ export default class Job { ...@@ -80,13 +80,6 @@ export default class Job {
} }
initAffixTopArea() { initAffixTopArea() {
/**
If the browser does not support position sticky, it returns the position as static.
If the browser does support sticky, then we allow the browser to handle it, if not
then we use a polyfill
*/
if (this.$topBar.css('position') !== 'static') return;
StickyFill.add(this.$topBar); StickyFill.add(this.$topBar);
} }
......
export const createPlaceholder = () => {
const placeholder = document.createElement('div');
placeholder.classList.add('sticky-placeholder');
return placeholder;
};
export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
const top = Math.floor(el.offsetTop - scrollY);
if (top <= stickyTop && !el.classList.contains('is-stuck')) {
const placeholder = insertPlaceholder ? createPlaceholder() : null;
const heightBefore = el.offsetHeight;
el.classList.add('is-stuck');
if (insertPlaceholder) {
el.parentNode.insertBefore(placeholder, el.nextElementSibling);
placeholder.style.height = `${heightBefore - el.offsetHeight}px`;
}
} else if (top > stickyTop && el.classList.contains('is-stuck')) {
el.classList.remove('is-stuck');
if (insertPlaceholder && el.nextElementSibling && el.nextElementSibling.classList.contains('sticky-placeholder')) {
el.nextElementSibling.remove();
}
}
};
export default (el, stickyTop, insertPlaceholder = true) => {
if (!el) return;
if (typeof CSS === 'undefined' || !(CSS.supports('(position: -webkit-sticky) or (position: sticky)'))) return;
document.addEventListener('scroll', () => isSticky(el, window.scrollY, stickyTop, insertPlaceholder), {
passive: true,
});
};
import { isSticky } from '~/lib/utils/sticky';
describe('sticky', () => {
let el;
beforeEach(() => {
document.body.innerHTML += `
<div class="parent">
<div id="js-sticky"></div>
</div>
`;
el = document.getElementById('js-sticky');
});
afterEach(() => {
el.parentNode.remove();
});
describe('when stuck', () => {
it('does not remove is-stuck class', () => {
isSticky(el, 0, el.offsetTop);
isSticky(el, 0, el.offsetTop);
expect(
el.classList.contains('is-stuck'),
).toBeTruthy();
});
it('adds is-stuck class', () => {
isSticky(el, 0, el.offsetTop);
expect(
el.classList.contains('is-stuck'),
).toBeTruthy();
});
it('inserts placeholder element', () => {
isSticky(el, 0, el.offsetTop, true);
expect(
document.querySelector('.sticky-placeholder'),
).not.toBeNull();
});
});
describe('when not stuck', () => {
it('removes is-stuck class', () => {
spyOn(el.classList, 'remove').and.callThrough();
isSticky(el, 0, el.offsetTop);
isSticky(el, 0, 0);
expect(
el.classList.remove,
).toHaveBeenCalledWith('is-stuck');
expect(
el.classList.contains('is-stuck'),
).toBeFalsy();
});
it('does not add is-stuck class', () => {
isSticky(el, 0, 0);
expect(
el.classList.contains('is-stuck'),
).toBeFalsy();
});
it('removes placeholder', () => {
isSticky(el, 0, el.offsetTop, true);
isSticky(el, 0, 0, true);
expect(
document.querySelector('.sticky-placeholder'),
).toBeNull();
});
});
});
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