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

moved JS & only run when new_nav cookie exists

This commit is contained in:
Phil Hughes 2017-07-19 10:36:08 +01:00
parent ad633afdec
commit 7505417478
4 changed files with 78 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/assets/javascripts/fly_out_nav.js Normal file
View File

@ -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);
}
});
};

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

@ -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);

27
app/assets/javascripts/main.js
View File

@ -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);
}
});
});

37
spec/javascripts/fly_out_nav_spec.js Normal file
View File

@ -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)');
});
});
});