Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Léo-Paul Géneau
gitlab-ce
Commits
90eb9e2b
Commit
90eb9e2b
authored
Aug 31, 2017
by
Tim Zallmann
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'fly-out-nav-jump-fix' into 'master'
Fixed fly-out nav jumping Closes #36699 See merge request !13690
parents
ff5918d3
9a93fd9e
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
16 additions
and
31 deletions
+16
-31
app/assets/javascripts/fly_out_nav.js
app/assets/javascripts/fly_out_nav.js
+6
-7
spec/javascripts/fly_out_nav_spec.js
spec/javascripts/fly_out_nav_spec.js
+10
-24
No files found.
app/assets/javascripts/fly_out_nav.js
View file @
90eb9e2b
import
Cookies
from
'
js-cookie
'
;
import
bp
from
'
./breakpoints
'
;
import
bp
from
'
./breakpoints
'
;
const
HIDE_INTERVAL_TIMEOUT
=
300
;
const
HIDE_INTERVAL_TIMEOUT
=
300
;
...
@@ -8,9 +7,11 @@ const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
...
@@ -8,9 +7,11 @@ const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
let
currentOpenMenu
=
null
;
let
currentOpenMenu
=
null
;
let
menuCornerLocs
;
let
menuCornerLocs
;
let
timeoutId
;
let
timeoutId
;
let
sidebar
;
export
const
mousePos
=
[];
export
const
mousePos
=
[];
export
const
setSidebar
=
(
el
)
=>
{
sidebar
=
el
;
};
export
const
setOpenMenu
=
(
menu
=
null
)
=>
{
currentOpenMenu
=
menu
;
};
export
const
setOpenMenu
=
(
menu
=
null
)
=>
{
currentOpenMenu
=
menu
;
};
export
const
slope
=
(
a
,
b
)
=>
(
b
.
y
-
a
.
y
)
/
(
b
.
x
-
a
.
x
);
export
const
slope
=
(
a
,
b
)
=>
(
b
.
y
-
a
.
y
)
/
(
b
.
x
-
a
.
x
);
...
@@ -20,10 +21,8 @@ let headerHeight = 50;
...
@@ -20,10 +21,8 @@ let headerHeight = 50;
export
const
getHeaderHeight
=
()
=>
headerHeight
;
export
const
getHeaderHeight
=
()
=>
headerHeight
;
export
const
canShowActiveSubItems
=
(
el
)
=>
{
export
const
canShowActiveSubItems
=
(
el
)
=>
{
const
isHiddenByMedia
=
bp
.
getBreakpointSize
()
===
'
sm
'
||
bp
.
getBreakpointSize
()
===
'
md
'
;
if
(
el
.
classList
.
contains
(
'
active
'
)
&&
(
sidebar
&&
!
sidebar
.
classList
.
contains
(
'
sidebar-icons-only
'
)))
{
return
false
;
if
(
el
.
classList
.
contains
(
'
active
'
)
&&
!
isHiddenByMedia
)
{
return
Cookies
.
get
(
'
sidebar_collapsed
'
)
===
'
true
'
;
}
}
return
true
;
return
true
;
...
@@ -143,13 +142,13 @@ export const documentMouseMove = (e) => {
...
@@ -143,13 +142,13 @@ export const documentMouseMove = (e) => {
};
};
export
default
()
=>
{
export
default
()
=>
{
const
sidebar
=
document
.
querySelector
(
'
.sidebar-top-level-items
'
);
sidebar
=
document
.
querySelector
(
'
.nav-sidebar
'
);
if
(
!
sidebar
)
return
;
if
(
!
sidebar
)
return
;
const
items
=
[...
sidebar
.
querySelectorAll
(
'
.sidebar-top-level-items > li
'
)];
const
items
=
[...
sidebar
.
querySelectorAll
(
'
.sidebar-top-level-items > li
'
)];
sidebar
.
addEventListener
(
'
mouseleave
'
,
()
=>
{
sidebar
.
querySelector
(
'
.sidebar-top-level-items
'
).
addEventListener
(
'
mouseleave
'
,
()
=>
{
clearTimeout
(
timeoutId
);
clearTimeout
(
timeoutId
);
timeoutId
=
setTimeout
(()
=>
{
timeoutId
=
setTimeout
(()
=>
{
...
...
spec/javascripts/fly_out_nav_spec.js
View file @
90eb9e2b
import
Cookies
from
'
js-cookie
'
;
import
{
import
{
calculateTop
,
calculateTop
,
showSubLevelItems
,
showSubLevelItems
,
...
@@ -11,6 +10,7 @@ import {
...
@@ -11,6 +10,7 @@ import {
getHideSubItemsInterval
,
getHideSubItemsInterval
,
documentMouseMove
,
documentMouseMove
,
getHeaderHeight
,
getHeaderHeight
,
setSidebar
,
}
from
'
~/fly_out_nav
'
;
}
from
'
~/fly_out_nav
'
;
import
bp
from
'
~/breakpoints
'
;
import
bp
from
'
~/breakpoints
'
;
...
@@ -113,7 +113,6 @@ describe('Fly out sidebar navigation', () => {
...
@@ -113,7 +113,6 @@ describe('Fly out sidebar navigation', () => {
clientX
:
el
.
getBoundingClientRect
().
left
+
20
,
clientX
:
el
.
getBoundingClientRect
().
left
+
20
,
clientY
:
el
.
getBoundingClientRect
().
top
+
10
,
clientY
:
el
.
getBoundingClientRect
().
top
+
10
,
});
});
console
.
log
(
el
);
expect
(
expect
(
getHideSubItemsInterval
(),
getHideSubItemsInterval
(),
...
@@ -283,7 +282,7 @@ describe('Fly out sidebar navigation', () => {
...
@@ -283,7 +282,7 @@ describe('Fly out sidebar navigation', () => {
describe
(
'
canShowActiveSubItems
'
,
()
=>
{
describe
(
'
canShowActiveSubItems
'
,
()
=>
{
afterEach
(()
=>
{
afterEach
(()
=>
{
Cookies
.
remove
(
'
sidebar_collapsed
'
);
setSidebar
(
null
);
});
});
it
(
'
returns true by default
'
,
()
=>
{
it
(
'
returns true by default
'
,
()
=>
{
...
@@ -292,36 +291,23 @@ describe('Fly out sidebar navigation', () => {
...
@@ -292,36 +291,23 @@ describe('Fly out sidebar navigation', () => {
).
toBeTruthy
();
).
toBeTruthy
();
});
});
it
(
'
returns false when
cookie is false & element is active
'
,
()
=>
{
it
(
'
returns false when
active & expanded sidebar
'
,
()
=>
{
Cookies
.
set
(
'
sidebar_collapsed
'
,
'
false
'
);
const
sidebar
=
document
.
createElement
(
'
div
'
);
el
.
classList
.
add
(
'
active
'
);
el
.
classList
.
add
(
'
active
'
);
expect
(
setSidebar
(
sidebar
);
canShowActiveSubItems
(
el
),
).
toBeFalsy
();
});
it
(
'
returns true when cookie is false & element is active
'
,
()
=>
{
Cookies
.
set
(
'
sidebar_collapsed
'
,
'
true
'
);
el
.
classList
.
add
(
'
active
'
);
expect
(
expect
(
canShowActiveSubItems
(
el
),
canShowActiveSubItems
(
el
),
).
toBe
Truth
y
();
).
toBe
Fals
y
();
});
});
it
(
'
returns true when element is active & breakpoint is sm
'
,
()
=>
{
it
(
'
returns true when active & collapsed sidebar
'
,
()
=>
{
breakpointSize
=
'
sm
'
;
const
sidebar
=
document
.
createElement
(
'
div
'
);
sidebar
.
classList
.
add
(
'
sidebar-icons-only
'
);
el
.
classList
.
add
(
'
active
'
);
el
.
classList
.
add
(
'
active
'
);
expect
(
setSidebar
(
sidebar
);
canShowActiveSubItems
(
el
),
).
toBeTruthy
();
});
it
(
'
returns true when element is active & breakpoint is md
'
,
()
=>
{
breakpointSize
=
'
md
'
;
el
.
classList
.
add
(
'
active
'
);
expect
(
expect
(
canShowActiveSubItems
(
el
),
canShowActiveSubItems
(
el
),
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment