diff options
author | Paul Slaughter <pslaughter@gitlab.com> | 2018-06-01 19:24:56 +0300 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2018-06-01 19:24:56 +0300 |
commit | 399e1e83c038685f15bf3049382a16c6ccb8fa37 (patch) | |
tree | 7160803a6e1d554f9f3a9eac5643b9bda322376c /app | |
parent | eeb73247aaf7002e81a3863bcbf376bbb7e692a4 (diff) |
Update position sticky polyfill
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/init_changes_dropdown.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/job.js | 7 | ||||
-rw-r--r-- | app/assets/javascripts/lib/utils/sticky.js | 39 |
3 files changed, 3 insertions, 49 deletions
diff --git a/app/assets/javascripts/init_changes_dropdown.js b/app/assets/javascripts/init_changes_dropdown.js index 09cca1dc7d9..a9f4829f980 100644 --- a/app/assets/javascripts/init_changes_dropdown.js +++ b/app/assets/javascripts/init_changes_dropdown.js @@ -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, diff --git a/app/assets/javascripts/job.js b/app/assets/javascripts/job.js index 611e8200b4d..8dfe8aae5b5 100644 --- a/app/assets/javascripts/job.js +++ b/app/assets/javascripts/job.js @@ -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); } diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js deleted file mode 100644 index 098afcfa1b4..00000000000 --- a/app/assets/javascripts/lib/utils/sticky.js +++ /dev/null @@ -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, - }); -}; |