moved JS & only run when new_nav cookie exists
This commit is contained in:
parent
ad633afdec
commit
7505417478
|
@ -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);
|
||||
}
|
||||
});
|
||||
};
|
|
@ -1,5 +1,7 @@
|
|||
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */
|
||||
import Cookies from 'js-cookie';
|
||||
import _ from 'underscore';
|
||||
import initFlyOutNav from './fly_out_nav';
|
||||
|
||||
(function() {
|
||||
var hideEndFade;
|
||||
|
@ -54,5 +56,9 @@ import _ from 'underscore';
|
|||
|
||||
$(() => {
|
||||
$(window).on('scroll', _.throttle(applyScrollNavClass, 100));
|
||||
|
||||
if (Cookies.get('new_nav') === 'true') {
|
||||
initFlyOutNav();
|
||||
}
|
||||
});
|
||||
}).call(window);
|
||||
|
|
|
@ -347,31 +347,4 @@ $(function () {
|
|||
gl.utils.renderTimeago();
|
||||
|
||||
$(document).trigger('init.scrolling-tabs');
|
||||
|
||||
const style = document.createElement("style");
|
||||
document.head.appendChild(style);
|
||||
|
||||
$('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => {
|
||||
const windowHeight = window.innerHeight;
|
||||
const $this = e.currentTarget;
|
||||
const $subitems = $('.sidebar-sub-level-items', $this).show();
|
||||
|
||||
if ($subitems.length) {
|
||||
const boundingRect = $this.getBoundingClientRect();
|
||||
const bottomOverflow = windowHeight - (boundingRect.top + $subitems.outerHeight());
|
||||
const top = bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top;
|
||||
|
||||
$subitems.css({
|
||||
transform: `translate3d(0, ${top}px, 0)`,
|
||||
});
|
||||
|
||||
style.sheet.insertRule(`.sidebar-sub-level-items::before { transform: translate3d(0, ${boundingRect.top - top}px, 0); }`, 0);
|
||||
}
|
||||
}).on('mouseout', (e) => {
|
||||
$('.sidebar-sub-level-items', e.currentTarget).hide();
|
||||
|
||||
if (style.sheet.rules.length) {
|
||||
style.sheet.deleteRule(0);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
import { calculateTop, createArrowStyles } from '~/fly_out_nav';
|
||||
|
||||
describe('Fly out sidebar navigation', () => {
|
||||
describe('calculateTop', () => {
|
||||
it('returns boundingRect top', () => {
|
||||
const boundingRect = {
|
||||
top: 100,
|
||||
};
|
||||
|
||||
expect(
|
||||
calculateTop(boundingRect, 100),
|
||||
).toBe(100);
|
||||
});
|
||||
|
||||
it('returns boundingRect - bottomOverflow', () => {
|
||||
const boundingRect = {
|
||||
top: window.innerHeight,
|
||||
};
|
||||
|
||||
expect(
|
||||
calculateTop(boundingRect, 100),
|
||||
).toBe(window.innerHeight - 100);
|
||||
});
|
||||
});
|
||||
|
||||
describe('createArrowStyles', () => {
|
||||
it('returns translate3d styles', () => {
|
||||
const boundingRect = {
|
||||
top: 100,
|
||||
};
|
||||
|
||||
expect(
|
||||
createArrowStyles(boundingRect, 50),
|
||||
).toContain('translate3d(0, 50px, 0)');
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue