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

Merge branch '46833-sticky-polyfill' into 'master' 

Update sticky utils with polyfill

Closes #46833 and #47130

See merge request gitlab-org/gitlab-ce!19324
This commit is contained in:
Clement Ho 2018-06-06 19:15:37 +00:00
parent 4f526a334b bc56f1f5c6
commit dd6aade3bf
3 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import $ from 'jquery';
import stickyMonitor from './lib/utils/sticky';
import { stickyMonitor } from './lib/utils/sticky';
export default (stickyTop) => {
stickyMonitor(document.querySelector('.js-diff-files-changed'), stickyTop);

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

@ -1,6 +1,6 @@
import $ from 'jquery';
import _ from 'underscore';
import StickyFill from 'stickyfilljs';
import { polyfillSticky } from './lib/utils/sticky';
import axios from './lib/utils/axios_utils';
import { visitUrl } from './lib/utils/url_utility';
import bp from './breakpoints';
@ -70,14 +70,7 @@ export default class Job extends LogOutputBehaviours {
}
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);
polyfillSticky(this.$topBar);
}
scrollToBottom() {

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

@ -1,3 +1,5 @@
import StickyFill from 'stickyfilljs';
export const createPlaceholder = () => {
const placeholder = document.createElement('div');
placeholder.classList.add('sticky-placeholder');
@ -28,7 +30,16 @@ export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
}
};
export default (el, stickyTop, insertPlaceholder = true) => {
/**
* Create a listener that will toggle a 'is-stuck' class, based on the current scroll position.
*
* - If the current environment does not support `position: sticky`, do nothing.
*
* @param {HTMLElement} el The `position: sticky` element.
* @param {Number} stickyTop Used to determine when an element is stuck.
* @param {Boolean} insertPlaceholder Should a placeholder element be created when element is stuck?
*/
export const stickyMonitor = (el, stickyTop, insertPlaceholder = true) => {
if (!el) return;
if (typeof CSS === 'undefined' || !(CSS.supports('(position: -webkit-sticky) or (position: sticky)'))) return;
@ -37,3 +48,13 @@ export default (el, stickyTop, insertPlaceholder = true) => {
passive: true,
});
};
/**
* Polyfill the `position: sticky` behavior.
*
* - If the current environment supports `position: sticky`, do nothing.
* - Can receive an iterable element list (NodeList, jQuery collection, etc.) or single HTMLElement.
*/
export const polyfillSticky = (el) => {
StickyFill.add(el);
};