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
Boxiang Sun
gitlab-ce
Commits
150e8b30
Commit
150e8b30
authored
Aug 19, 2017
by
Phil Hughes
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fixes for sidebar jumping
parent
5a12fa15
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
24 additions
and
33 deletions
+24
-33
app/assets/javascripts/fly_out_nav.js
app/assets/javascripts/fly_out_nav.js
+14
-10
spec/javascripts/fly_out_nav_spec.js
spec/javascripts/fly_out_nav_spec.js
+10
-23
No files found.
app/assets/javascripts/fly_out_nav.js
View file @
150e8b30
import
Cookies
from
'
js-cookie
'
;
import
bp
from
'
./breakpoints
'
;
let
headerHeight
=
50
;
let
sidebar
;
export
const
setSidebar
=
(
el
)
=>
{
sidebar
=
el
;
};
export
const
getHeaderHeight
=
()
=>
headerHeight
;
export
const
canShowActiveSubItems
=
(
el
)
=>
{
const
isHiddenByMedia
=
bp
.
getBreakpointSize
()
===
'
sm
'
||
bp
.
getBreakpointSize
()
===
'
md
'
;
if
(
el
.
classList
.
contains
(
'
active
'
)
&&
!
isHiddenByMedia
)
{
return
Cookies
.
get
(
'
sidebar_collapsed
'
)
===
'
true
'
;
if
(
el
.
classList
.
contains
(
'
active
'
)
&&
(
sidebar
&&
!
sidebar
.
classList
.
contains
(
'
sidebar-icons-only
'
)))
{
return
false
;
}
return
true
;
...
...
@@ -61,10 +61,14 @@ export default () => {
const
items
=
[...
document
.
querySelectorAll
(
'
.sidebar-top-level-items > li
'
)]
.
filter
(
el
=>
el
.
querySelector
(
'
.sidebar-sub-level-items
'
));
headerHeight
=
document
.
querySelector
(
'
.nav-sidebar
'
).
offsetTop
;
sidebar
=
document
.
querySelector
(
'
.nav-sidebar
'
)
;
items
.
forEach
((
el
)
=>
{
el
.
addEventListener
(
'
mouseenter
'
,
e
=>
showSubLevelItems
(
e
.
currentTarget
));
el
.
addEventListener
(
'
mouseleave
'
,
e
=>
hideSubLevelItems
(
e
.
currentTarget
));
});
if
(
sidebar
)
{
headerHeight
=
sidebar
.
offsetTop
;
items
.
forEach
((
el
)
=>
{
el
.
addEventListener
(
'
mouseenter
'
,
e
=>
showSubLevelItems
(
e
.
currentTarget
));
el
.
addEventListener
(
'
mouseleave
'
,
e
=>
hideSubLevelItems
(
e
.
currentTarget
));
});
}
};
spec/javascripts/fly_out_nav_spec.js
View file @
150e8b30
import
Cookies
from
'
js-cookie
'
;
import
{
calculateTop
,
hideSubLevelItems
,
...
...
@@ -6,6 +5,7 @@ import {
canShowSubItems
,
canShowActiveSubItems
,
getHeaderHeight
,
setSidebar
,
}
from
'
~/fly_out_nav
'
;
import
bp
from
'
~/breakpoints
'
;
...
...
@@ -183,7 +183,7 @@ describe('Fly out sidebar navigation', () => {
describe
(
'
canShowActiveSubItems
'
,
()
=>
{
afterEach
(()
=>
{
Cookies
.
remove
(
'
sidebar_collapsed
'
);
setSidebar
(
null
);
});
it
(
'
returns true by default
'
,
()
=>
{
...
...
@@ -192,36 +192,23 @@ describe('Fly out sidebar navigation', () => {
).
toBeTruthy
();
});
it
(
'
returns false when
cookie is false & element is active
'
,
()
=>
{
Cookies
.
set
(
'
sidebar_collapsed
'
,
'
false
'
);
it
(
'
returns false when
active & expanded sidebar
'
,
()
=>
{
const
sidebar
=
document
.
createElement
(
'
div
'
);
el
.
classList
.
add
(
'
active
'
);
expect
(
canShowActiveSubItems
(
el
),
).
toBeFalsy
();
});
it
(
'
returns true when cookie is false & element is active
'
,
()
=>
{
Cookies
.
set
(
'
sidebar_collapsed
'
,
'
true
'
);
el
.
classList
.
add
(
'
active
'
);
setSidebar
(
sidebar
);
expect
(
canShowActiveSubItems
(
el
),
).
toBe
Truth
y
();
).
toBe
Fals
y
();
});
it
(
'
returns true when element is active & breakpoint is sm
'
,
()
=>
{
breakpointSize
=
'
sm
'
;
it
(
'
returns true when active & collapsed sidebar
'
,
()
=>
{
const
sidebar
=
document
.
createElement
(
'
div
'
);
sidebar
.
classList
.
add
(
'
sidebar-icons-only
'
);
el
.
classList
.
add
(
'
active
'
);
expect
(
canShowActiveSubItems
(
el
),
).
toBeTruthy
();
});
it
(
'
returns true when element is active & breakpoint is md
'
,
()
=>
{
breakpointSize
=
'
md
'
;
el
.
classList
.
add
(
'
active
'
);
setSidebar
(
sidebar
);
expect
(
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