Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
8871dc90
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,发现更多精彩内容 >>
提交
8871dc90
编写于
1月 15, 2019
作者:
T
Tim Zallmann
提交者:
Phil Hughes
1月 15, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Optimization of setup of Main Nav Layout, Contextual Sidebar and Fly Out Nav
上级
8b4b7cae
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
56 addition
and
38 deletion
+56
-38
app/assets/javascripts/contextual_sidebar.js
app/assets/javascripts/contextual_sidebar.js
+17
-7
app/assets/javascripts/fly_out_nav.js
app/assets/javascripts/fly_out_nav.js
+4
-1
app/assets/javascripts/layout_nav.js
app/assets/javascripts/layout_nav.js
+35
-30
未找到文件。
app/assets/javascripts/contextual_sidebar.js
浏览文件 @
8871dc90
...
...
@@ -13,6 +13,9 @@ export default class ContextualSidebar {
initDomElements
()
{
this
.
$page
=
$
(
'
.layout-page
'
);
this
.
$sidebar
=
$
(
'
.nav-sidebar
'
);
if
(
!
this
.
$sidebar
.
length
)
return
;
this
.
$innerScroll
=
$
(
'
.nav-sidebar-inner-scroll
'
,
this
.
$sidebar
);
this
.
$overlay
=
$
(
'
.mobile-overlay
'
);
this
.
$openSidebar
=
$
(
'
.toggle-mobile-nav
'
);
...
...
@@ -21,12 +24,14 @@ export default class ContextualSidebar {
}
bindEvents
()
{
if
(
!
this
.
$sidebar
.
length
)
return
;
document
.
addEventListener
(
'
click
'
,
e
=>
{
if
(
!
e
.
target
.
closest
(
'
.nav-sidebar
'
)
&&
(
bp
.
getBreakpointSize
()
===
'
sm
'
||
bp
.
getBreakpointSize
()
===
'
md
'
)
)
{
this
.
toggleCollapsedSidebar
(
true
);
this
.
toggleCollapsedSidebar
(
true
,
true
);
}
});
this
.
$openSidebar
.
on
(
'
click
'
,
()
=>
this
.
toggleSidebarNav
(
true
));
...
...
@@ -34,7 +39,7 @@ export default class ContextualSidebar {
this
.
$overlay
.
on
(
'
click
'
,
()
=>
this
.
toggleSidebarNav
(
false
));
this
.
$sidebarToggle
.
on
(
'
click
'
,
()
=>
{
const
value
=
!
this
.
$sidebar
.
hasClass
(
'
sidebar-collapsed-desktop
'
);
this
.
toggleCollapsedSidebar
(
value
);
this
.
toggleCollapsedSidebar
(
value
,
true
);
});
$
(
window
).
on
(
'
resize
'
,
()
=>
_
.
debounce
(
this
.
render
(),
100
));
...
...
@@ -53,16 +58,19 @@ export default class ContextualSidebar {
this
.
$sidebar
.
removeClass
(
'
sidebar-collapsed-desktop
'
);
}
toggleCollapsedSidebar
(
collapsed
)
{
toggleCollapsedSidebar
(
collapsed
,
saveCookie
)
{
const
breakpoint
=
bp
.
getBreakpointSize
();
if
(
this
.
$sidebar
.
length
)
{
this
.
$sidebar
.
toggleClass
(
'
sidebar-collapsed-desktop
'
,
collapsed
);
this
.
$page
.
toggleClass
(
'
page-with-icon-sidebar
'
,
breakpoint
===
'
sm
'
?
true
:
collapsed
);
}
ContextualSidebar
.
setCollapsedCookie
(
collapsed
);
this
.
toggleSidebarOverflow
();
if
(
saveCookie
)
{
ContextualSidebar
.
setCollapsedCookie
(
collapsed
);
}
requestIdleCallback
(
this
.
toggleSidebarOverflow
);
}
toggleSidebarOverflow
()
{
...
...
@@ -74,13 +82,15 @@ export default class ContextualSidebar {
}
render
()
{
if
(
!
this
.
$sidebar
.
length
)
return
;
const
breakpoint
=
bp
.
getBreakpointSize
();
if
(
breakpoint
===
'
sm
'
||
breakpoint
===
'
md
'
)
{
this
.
toggleCollapsedSidebar
(
true
);
this
.
toggleCollapsedSidebar
(
true
,
false
);
}
else
if
(
breakpoint
===
'
lg
'
)
{
const
collapse
=
parseBoolean
(
Cookies
.
get
(
'
sidebar_collapsed
'
));
this
.
toggleCollapsedSidebar
(
collapse
);
this
.
toggleCollapsedSidebar
(
collapse
,
false
);
}
}
}
app/assets/javascripts/fly_out_nav.js
浏览文件 @
8871dc90
...
...
@@ -24,6 +24,9 @@ export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
let
headerHeight
=
50
;
export
const
getHeaderHeight
=
()
=>
headerHeight
;
const
setHeaderHeight
=
()
=>
{
headerHeight
=
sidebar
.
offsetTop
;
};
export
const
isSidebarCollapsed
=
()
=>
sidebar
&&
sidebar
.
classList
.
contains
(
'
sidebar-collapsed-desktop
'
);
...
...
@@ -186,7 +189,7 @@ export default () => {
});
}
headerHeight
=
document
.
querySelector
(
'
.nav-sidebar
'
).
offsetTop
;
requestIdleCallback
(
setHeaderHeight
)
;
items
.
forEach
(
el
=>
{
const
subItems
=
el
.
querySelector
(
'
.sidebar-sub-level-items
'
);
...
...
app/assets/javascripts/layout_nav.js
浏览文件 @
8871dc90
...
...
@@ -11,48 +11,53 @@ function hideEndFade($scrollingTabs) {
});
}
function
initDeferred
()
{
$
(
document
).
trigger
(
'
init.scrolling-tabs
'
);
}
export
default
function
initLayoutNav
()
{
const
contextualSidebar
=
new
ContextualSidebar
();
contextualSidebar
.
bindEvents
();
initFlyOutNav
();
$
(
document
)
.
on
(
'
init.scrolling-tabs
'
,
()
=>
{
const
$scrollingTabs
=
$
(
'
.scrolling-tabs
'
).
not
(
'
.is-initialized
'
);
$scrollingTabs
.
addClass
(
'
is-initialized
'
);
// We need to init it on DomContentLoaded as others could also call it
$
(
document
)
.
on
(
'
init.scrolling-tabs
'
,
()
=>
{
const
$scrollingTabs
=
$
(
'
.scrolling-tabs
'
).
not
(
'
.is-initialized
'
);
$scrollingTabs
.
addClass
(
'
is-initialized
'
);
$
(
window
)
.
on
(
'
resize.nav
'
,
()
=>
{
hideEndFade
(
$scrollingTabs
);
})
.
trigger
(
'
resize.nav
'
);
$
(
window
)
.
on
(
'
resize.nav
'
,
()
=>
{
hideEndFade
(
$scrollingTabs
);
})
.
trigger
(
'
resize.nav
'
);
$scrollingTabs
.
on
(
'
scroll
'
,
function
tabsScrollEvent
()
{
const
$this
=
$
(
this
);
const
currentPosition
=
$this
.
scrollLeft
();
const
maxPosition
=
$this
.
prop
(
'
scrollWidth
'
)
-
$this
.
outerWidth
();
$scrollingTabs
.
on
(
'
scroll
'
,
function
tabsScrollEvent
()
{
const
$this
=
$
(
this
);
const
currentPosition
=
$this
.
scrollLeft
();
const
maxPosition
=
$this
.
prop
(
'
scrollWidth
'
)
-
$this
.
outerWidth
();
$this
.
siblings
(
'
.fade-left
'
).
toggleClass
(
'
scrolling
'
,
currentPosition
>
0
);
$this
.
siblings
(
'
.fade-right
'
).
toggleClass
(
'
scrolling
'
,
currentPosition
<
maxPosition
-
1
);
});
$this
.
siblings
(
'
.fade-left
'
).
toggleClass
(
'
scrolling
'
,
currentPosition
>
0
);
$this
.
siblings
(
'
.fade-right
'
).
toggleClass
(
'
scrolling
'
,
currentPosition
<
maxPosition
-
1
);
});
$scrollingTabs
.
each
(
function
scrollTabsEachLoop
()
{
const
$this
=
$
(
this
);
const
scrollingTabWidth
=
$this
.
width
();
const
$active
=
$this
.
find
(
'
.active
'
);
const
activeWidth
=
$active
.
width
();
$scrollingTabs
.
each
(
function
scrollTabsEachLoop
()
{
const
$this
=
$
(
this
);
const
scrollingTabWidth
=
$this
.
width
();
const
$active
=
$this
.
find
(
'
.active
'
);
const
activeWidth
=
$active
.
width
();
if
(
$active
.
length
)
{
const
offset
=
$active
.
offset
().
left
+
activeWidth
;
if
(
$active
.
length
)
{
const
offset
=
$active
.
offset
().
left
+
activeWidth
;
if
(
offset
>
scrollingTabWidth
-
30
)
{
const
scrollLeft
=
offset
-
scrollingTabWidth
/
2
-
activeWidth
/
2
;
if
(
offset
>
scrollingTabWidth
-
30
)
{
const
scrollLeft
=
offset
-
scrollingTabWidth
/
2
-
activeWidth
/
2
;
$this
.
scrollLeft
(
scrollLeft
);
}
$this
.
scrollLeft
(
scrollLeft
);
}
});
})
.
trigger
(
'
init.scrolling-tabs
'
);
}
});
});
requestIdleCallback
(
initDeferred
);
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录