Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
48ec7025
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
48ec7025
编写于
8月 01, 2017
作者:
P
Phil Hughes
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
reverted the JS timeout code
improved specs so that they pass
上级
20bfc4f6
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
16 addition
and
73 deletion
+16
-73
app/assets/javascripts/fly_out_nav.js
app/assets/javascripts/fly_out_nav.js
+8
-44
app/assets/stylesheets/new_sidebar.scss
app/assets/stylesheets/new_sidebar.scss
+3
-3
spec/javascripts/fly_out_nav_spec.js
spec/javascripts/fly_out_nav_spec.js
+5
-26
未找到文件。
app/assets/javascripts/fly_out_nav.js
浏览文件 @
48ec7025
let
hideTimeoutInterval
=
0
;
let
hideTimeout
;
let
subitems
;
export
const
getHideTimeoutInterval
=
()
=>
hideTimeoutInterval
;
export
const
hideAllSubItems
=
()
=>
{
subitems
.
forEach
((
el
)
=>
{
el
.
parentNode
.
classList
.
remove
(
'
is-over
'
);
el
.
style
.
display
=
'
none
'
;
// eslint-disable-line no-param-reassign
});
};
export
const
calculateTop
=
(
boundingRect
,
outerHeight
)
=>
{
const
windowHeight
=
window
.
innerHeight
;
const
bottomOverflow
=
windowHeight
-
(
boundingRect
.
top
+
outerHeight
);
...
...
@@ -24,14 +11,8 @@ export const showSubLevelItems = (el) => {
if
(
!
$subitems
)
return
;
hideAllSubItems
();
if
(
el
.
classList
.
contains
(
'
is-over
'
))
{
clearTimeout
(
hideTimeout
);
}
else
{
$subitems
.
style
.
display
=
'
block
'
;
el
.
classList
.
add
(
'
is-over
'
);
}
$subitems
.
style
.
display
=
'
block
'
;
el
.
classList
.
add
(
'
is-over
'
);
const
boundingRect
=
el
.
getBoundingClientRect
();
const
top
=
calculateTop
(
boundingRect
,
$subitems
.
offsetHeight
);
...
...
@@ -46,37 +27,20 @@ export const showSubLevelItems = (el) => {
export
const
hideSubLevelItems
=
(
el
)
=>
{
const
$subitems
=
el
.
querySelector
(
'
.sidebar-sub-level-items
'
);
const
hideFn
=
()
=>
{
el
.
classList
.
remove
(
'
is-over
'
);
$subitems
.
style
.
display
=
'
none
'
;
$subitems
.
classList
.
remove
(
'
is-above
'
);
hideTimeoutInterval
=
0
;
};
if
(
$subitems
&&
hideTimeoutInterval
)
{
hideTimeout
=
setTimeout
(
hideFn
,
hideTimeoutInterval
);
}
else
if
(
$subitems
)
{
hideFn
();
}
};
if
(
!
$subitems
)
return
;
export
const
setMouseOutTimeout
=
(
el
)
=>
{
if
(
el
.
closest
(
'
.sidebar-sub-level-items
'
))
{
hideTimeoutInterval
=
250
;
}
else
{
hideTimeoutInterval
=
0
;
}
el
.
classList
.
remove
(
'
is-over
'
);
$subitems
.
style
.
display
=
'
none
'
;
$subitems
.
classList
.
remove
(
'
is-above
'
);
};
export
default
()
=>
{
const
items
=
[...
document
.
querySelectorAll
(
'
.sidebar-top-level-items > li:not(.active)
'
)]
;
subitems
=
[...
document
.
querySelectorAll
(
'
.sidebar-top-level-items > li:not(.active) .sidebar-sub-level-items
'
)]
;
const
items
=
[...
document
.
querySelectorAll
(
'
.sidebar-top-level-items > li:not(.active)
'
)]
.
filter
(
el
=>
el
.
querySelector
(
'
.sidebar-sub-level-items
'
))
;
items
.
forEach
((
el
)
=>
{
el
.
addEventListener
(
'
mouseenter
'
,
e
=>
showSubLevelItems
(
e
.
currentTarget
));
el
.
addEventListener
(
'
mouseleave
'
,
e
=>
hideSubLevelItems
(
e
.
currentTarget
));
});
subitems
.
forEach
(
el
=>
el
.
addEventListener
(
'
mouseleave
'
,
e
=>
setMouseOutTimeout
(
e
.
target
)));
};
app/assets/stylesheets/new_sidebar.scss
浏览文件 @
48ec7025
...
...
@@ -226,10 +226,10 @@ $new-sidebar-width: 220px;
&
::before
{
content
:
""
;
position
:
absolute
;
top
:
-
2
0px
;
bottom
:
-
2
0px
;
top
:
-
3
0px
;
bottom
:
-
3
0px
;
left
:
0
;
right
:
-
2
0px
;
right
:
-
3
0px
;
z-index
:
-1
;
}
...
...
spec/javascripts/fly_out_nav_spec.js
浏览文件 @
48ec7025
import
{
calculateTop
,
setMouseOutTimeout
,
getHideTimeoutInterval
,
hideSubLevelItems
,
showSubLevelItems
,
}
from
'
~/fly_out_nav
'
;
...
...
@@ -41,26 +39,6 @@ describe('Fly out sidebar navigation', () => {
});
});
describe
(
'
setMouseOutTimeout
'
,
()
=>
{
it
(
'
sets hideTimeoutInterval to 150 when inside sub items
'
,
()
=>
{
el
.
innerHTML
=
'
<div class="sidebar-sub-level-items"><div class="js-test"></div></div>
'
;
setMouseOutTimeout
(
el
.
querySelector
(
'
.js-test
'
));
expect
(
getHideTimeoutInterval
(),
).
toBe
(
150
);
});
it
(
'
resets hideTimeoutInterval when not inside sub items
'
,
()
=>
{
setMouseOutTimeout
(
el
);
expect
(
getHideTimeoutInterval
(),
).
toBe
(
0
);
});
});
describe
(
'
hideSubLevelItems
'
,
()
=>
{
beforeEach
(()
=>
{
el
.
innerHTML
=
'
<div class="sidebar-sub-level-items"></div>
'
;
...
...
@@ -142,16 +120,17 @@ describe('Fly out sidebar navigation', () => {
it
(
'
sets is-above when element is above
'
,
()
=>
{
const
subItems
=
el
.
querySelector
(
'
.sidebar-sub-level-items
'
);
subItems
.
style
.
height
=
'
5000px
'
;
subItems
.
style
.
height
=
`
${
window
.
innerHeight
+
el
.
offsetHeight
}
px`
;
subItems
.
style
.
position
=
'
absolute
'
;
el
.
style
.
position
=
'
relative
'
;
el
.
style
.
top
=
'
1000px
'
;
el
.
style
.
top
=
`
${
window
.
innerHeight
-
el
.
offsetHeight
}
px`
;
spyOn
(
el
.
classList
,
'
add
'
);
spyOn
(
subItems
.
classList
,
'
add
'
);
showSubLevelItems
(
el
);
expect
(
el
.
classList
.
add
,
subItems
.
classList
.
add
,
).
toHaveBeenCalledWith
(
'
is-above
'
);
});
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录