kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Update position sticky polyfill

This commit is contained in:
Paul Slaughter 2018-06-01 16:24:56 +00:00 committed by Clement Ho
parent eeb73247aa
commit 399e1e83c0
4 changed files with 3 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/init_changes_dropdown.js
View File

@ -1,8 +1,8 @@
import $ from 'jquery';
import stickyMonitor from './lib/utils/sticky';
import StickyFill from 'stickyfilljs';
export default (stickyTop) => {
stickyMonitor(document.querySelector('.js-diff-files-changed'), stickyTop);
export default () => {
StickyFill.add(document.querySelector('.js-diff-files-changed'));
$('.js-diff-stats-dropdown').glDropdown({
filterable: true,

7
app/assets/javascripts/job.js
View File

@ -80,13 +80,6 @@ export default class Job {
}
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);
}

39
app/assets/javascripts/lib/utils/sticky.js
View File

@ -1,39 +0,0 @@
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,
});
};

79
spec/javascripts/lib/utils/sticky_spec.js
View File

@ -1,79 +0,0 @@
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();
});
});
});