diff options
author | Phil Hughes <me@iamphill.com> | 2017-07-19 10:36:08 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-07-19 10:36:08 +0100 |
commit | 7505417478011e489e011c3cabf71c11a75e5da2 (patch) | |
tree | b0d1f8493c81f41c9c73aa5240e513ce7b71d926 /app/assets/javascripts/fly_out_nav.js | |
parent | ad633afdec35b4f972706b71e50fad652f65d112 (diff) | |
download | gitlab-ce-7505417478011e489e011c3cabf71c11a75e5da2.tar.gz |
moved JS & only run when new_nav cookie exists
Diffstat (limited to 'app/assets/javascripts/fly_out_nav.js')
-rw-r--r-- | app/assets/javascripts/fly_out_nav.js | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js new file mode 100644 index 00000000000..202a8c18c22 --- /dev/null +++ b/app/assets/javascripts/fly_out_nav.js @@ -0,0 +1,35 @@ +export const calculateTop = (boundingRect, outerHeight) => { + const windowHeight = window.innerHeight; + const bottomOverflow = windowHeight - (boundingRect.top + outerHeight); + + return bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top; +}; + +export const createArrowStyles = (boundingRect, top) => `.sidebar-sub-level-items::before { transform: translate3d(0, ${boundingRect.top - top}px, 0); }`; + +export default () => { + const style = document.createElement('style'); + document.head.appendChild(style); + + $('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => { + const $this = e.currentTarget; + const $subitems = $('.sidebar-sub-level-items', $this).show(); + + if ($subitems.length) { + const boundingRect = $this.getBoundingClientRect(); + const top = calculateTop(boundingRect, $subitems.outerHeight()); + + $subitems.css({ + transform: `translate3d(0, ${top}px, 0)`, + }); + + style.sheet.insertRule(createArrowStyles(boundingRect, top), 0); + } + }).on('mouseout', (e) => { + $('.sidebar-sub-level-items', e.currentTarget).hide(); + + if (style.sheet.rules.length) { + style.sheet.deleteRule(0); + } + }); +}; |