Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
bbf7ea24
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,发现更多精彩内容 >>
未验证
提交
bbf7ea24
编写于
10月 04, 2017
作者:
P
Phil Hughes
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
flash tests
added back in documentation comment to flash file
上级
d668294f
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
282 addition
and
11 deletion
+282
-11
app/assets/javascripts/flash.js
app/assets/javascripts/flash.js
+34
-11
spec/javascripts/flash_spec.js
spec/javascripts/flash_spec.js
+248
-0
未找到文件。
app/assets/javascripts/flash.js
浏览文件 @
bbf7ea24
import
_
from
'
underscore
'
;
const
hideFlash
=
(
flashEl
)
=>
{
Object
.
assign
(
flashEl
.
style
,
{
transition
:
'
opacity .3s
'
,
opacity
:
'
0
'
,
});
const
hideFlash
=
(
flashEl
,
fadeTransition
=
true
)
=>
{
if
(
fadeTransition
)
{
Object
.
assign
(
flashEl
.
style
,
{
transition
:
'
opacity .3s
'
,
opacity
:
'
0
'
,
});
}
flashEl
.
addEventListener
(
'
transitionend
'
,
()
=>
{
flashEl
.
remove
();
},
{
once
:
true
,
});
if
(
!
fadeTransition
)
flashEl
.
dispatchEvent
(
new
Event
(
'
transitionend
'
));
};
const
createAction
=
config
=>
`
<a
href="
${
config
.
href
||
'
#
'
}
"
class="flash-action"
${
config
.
href
?
'
role="button"
'
:
'
'
}
${
config
.
href
?
'
'
:
'
role="button"
'
}
>
${
_
.
escape
(
config
.
title
)}
</a>
...
...
@@ -35,7 +39,27 @@ const createFlashEl = (message, type) => `
</div>
`
;
const
createFlash
=
function
createFlash
(
message
,
type
=
'
alert
'
,
parent
=
document
,
actionConfig
=
null
)
{
/*
* Flash banner supports different types of Flash configurations
* along with ability to provide actionConfig which can be used to show
* additional action or link on banner next to message
*
* @param {String} message Flash message text
* @param {String} type Type of Flash, it can be `notice` or `alert` (default)
* @param {Object} parent Reference to parent element under which Flash needs to appear
* @param {Object} actonConfig Map of config to show action on banner
* @param {String} href URL to which action config should point to (default: '#')
* @param {String} title Title of action
* @param {Function} clickHandler Method to call when action is clicked on
* @param {Boolean} fadeTransition Boolean to determine whether to fade the alert out
*/
const
createFlash
=
function
createFlash
(
message
,
type
=
'
alert
'
,
parent
=
document
,
actionConfig
=
null
,
fadeTransition
=
true
,
)
{
const
flashContainer
=
parent
.
querySelector
(
'
.flash-container
'
);
if
(
!
flashContainer
)
return
null
;
...
...
@@ -43,7 +67,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
flashContainer
.
innerHTML
=
createFlashEl
(
message
,
type
);
const
flashEl
=
flashContainer
.
querySelector
(
`.flash-
${
type
}
`
);
flashEl
.
addEventListener
(
'
click
'
,
()
=>
hideFlash
(
flashEl
));
flashEl
.
addEventListener
(
'
click
'
,
()
=>
hideFlash
(
flashEl
,
fadeTransition
));
if
(
actionConfig
)
{
flashEl
.
innerHTML
+=
createAction
(
actionConfig
);
...
...
@@ -55,9 +79,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
if
(
flashContainer
.
parentNode
.
classList
.
contains
(
'
content-wrapper
'
))
{
const
flashText
=
flashEl
.
querySelector
(
'
.flash-text
'
);
flashText
.
classList
.
add
(
'
container-fluid
'
);
flashText
.
classList
.
add
(
'
container-limited
'
);
flashText
.
className
=
`
${
flashText
.
className
}
container-fluid container-limited`
;
}
flashContainer
.
style
.
display
=
'
block
'
;
...
...
@@ -68,6 +90,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
export
{
createFlash
as
default
,
createFlashEl
,
createAction
,
hideFlash
,
};
window
.
Flash
=
createFlash
;
spec/javascripts/flash_spec.js
0 → 100644
浏览文件 @
bbf7ea24
import
flash
,
{
createFlashEl
,
createAction
,
hideFlash
,
}
from
'
~/flash
'
;
describe
(
'
Flash
'
,
()
=>
{
describe
(
'
createFlashEl
'
,
()
=>
{
let
el
;
beforeEach
(()
=>
{
el
=
document
.
createElement
(
'
div
'
);
});
afterEach
(()
=>
{
el
.
innerHTML
=
''
;
});
it
(
'
creates flash element with type
'
,
()
=>
{
el
.
innerHTML
=
createFlashEl
(
'
testing
'
,
'
alert
'
);
expect
(
el
.
querySelector
(
'
.flash-alert
'
),
).
not
.
toBeNull
();
});
it
(
'
escapes text
'
,
()
=>
{
el
.
innerHTML
=
createFlashEl
(
'
<script>alert("a");</script>
'
,
'
alert
'
);
expect
(
el
.
querySelector
(
'
.flash-text
'
).
textContent
.
trim
(),
).
toBe
(
'
<script>alert("a");</script>
'
);
});
});
describe
(
'
hideFlash
'
,
()
=>
{
let
el
;
beforeEach
(()
=>
{
el
=
document
.
createElement
(
'
div
'
);
el
.
className
=
'
js-testing
'
;
});
it
(
'
sets transition style
'
,
()
=>
{
hideFlash
(
el
);
expect
(
el
.
style
.
transition
,
).
toBe
(
'
opacity 0.3s
'
);
});
it
(
'
sets opacity style
'
,
()
=>
{
hideFlash
(
el
);
expect
(
el
.
style
.
opacity
,
).
toBe
(
'
0
'
);
});
it
(
'
removes element after transitionend
'
,
()
=>
{
document
.
body
.
appendChild
(
el
);
hideFlash
(
el
);
el
.
dispatchEvent
(
new
Event
(
'
transitionend
'
));
expect
(
document
.
querySelector
(
'
.js-testing
'
),
).
toBeNull
();
});
it
(
'
calls event listener callback once
'
,
()
=>
{
spyOn
(
el
,
'
remove
'
).
and
.
callThrough
();
document
.
body
.
appendChild
(
el
);
hideFlash
(
el
);
el
.
dispatchEvent
(
new
Event
(
'
transitionend
'
));
el
.
dispatchEvent
(
new
Event
(
'
transitionend
'
));
expect
(
el
.
remove
.
calls
.
count
(),
).
toBe
(
1
);
});
});
describe
(
'
createAction
'
,
()
=>
{
let
el
;
beforeEach
(()
=>
{
el
=
document
.
createElement
(
'
div
'
);
});
it
(
'
creates link with href
'
,
()
=>
{
el
.
innerHTML
=
createAction
({
href
:
'
testing
'
,
title
:
'
test
'
,
});
expect
(
el
.
querySelector
(
'
.flash-action
'
).
href
,
).
toContain
(
'
testing
'
);
});
it
(
'
uses hash as href when no href is present
'
,
()
=>
{
el
.
innerHTML
=
createAction
({
title
:
'
test
'
,
});
expect
(
el
.
querySelector
(
'
.flash-action
'
).
href
,
).
toContain
(
'
#
'
);
});
it
(
'
adds role when no href is present
'
,
()
=>
{
el
.
innerHTML
=
createAction
({
title
:
'
test
'
,
});
expect
(
el
.
querySelector
(
'
.flash-action
'
).
getAttribute
(
'
role
'
),
).
toBe
(
'
button
'
);
});
it
(
'
escapes the title text
'
,
()
=>
{
el
.
innerHTML
=
createAction
({
title
:
'
<script>alert("a")</script>
'
,
});
expect
(
el
.
querySelector
(
'
.flash-action
'
).
textContent
.
trim
(),
).
toBe
(
'
<script>alert("a")</script>
'
);
});
});
describe
(
'
createFlash
'
,
()
=>
{
describe
(
'
no flash-container
'
,
()
=>
{
it
(
'
does not add to the DOM
'
,
()
=>
{
const
el
=
flash
(
'
test
'
);
const
flashEl
=
flash
(
'
testing
'
);
expect
(
flashEl
,
).
toBeNull
();
expect
(
document
.
querySelector
(
'
.flash-alert
'
),
).
toBeNull
();
});
});
describe
(
'
with flash-container
'
,
()
=>
{
beforeEach
(()
=>
{
document
.
body
.
innerHTML
+=
`
<div class="content-wrapper js-content-wrapper">
<div class="flash-container"></div>
</div>
`
;
});
afterEach
(()
=>
{
document
.
querySelector
(
'
.js-content-wrapper
'
).
remove
();
});
it
(
'
adds flash element into container
'
,
()
=>
{
flash
(
'
test
'
);
expect
(
document
.
querySelector
(
'
.flash-alert
'
),
).
not
.
toBeNull
();
});
it
(
'
adds flash into specified parent
'
,
()
=>
{
flash
(
'
test
'
,
'
alert
'
,
document
.
querySelector
(
'
.content-wrapper
'
),
);
expect
(
document
.
querySelector
(
'
.content-wrapper .flash-alert
'
),
).
not
.
toBeNull
();
});
it
(
'
adds container classes when inside content-wrapper
'
,
()
=>
{
flash
(
'
test
'
);
expect
(
document
.
querySelector
(
'
.flash-text
'
).
className
,
).
toBe
(
'
flash-text container-fluid container-limited
'
)
});
it
(
'
does not add container when outside of content-wrapper
'
,
()
=>
{
document
.
querySelector
(
'
.content-wrapper
'
).
className
=
'
js-content-wrapper
'
;
flash
(
'
test
'
);
expect
(
document
.
querySelector
(
'
.flash-text
'
).
className
,
).
toBe
(
'
flash-text
'
)
});
it
(
'
removes element after clicking
'
,
()
=>
{
flash
(
'
test
'
,
'
alert
'
,
document
,
null
,
false
);
document
.
querySelector
(
'
.flash-alert
'
).
click
();
expect
(
document
.
querySelector
(
'
.flash-alert
'
),
).
toBeNull
();
});
describe
(
'
with actionConfig
'
,
()
=>
{
it
(
'
adds action link
'
,
()
=>
{
flash
(
'
test
'
,
'
alert
'
,
document
,
{
title
:
'
test
'
,
},
);
expect
(
document
.
querySelector
(
'
.flash-action
'
),
).
not
.
toBeNull
();
});
it
(
'
calls actionConfig clickHandler on click
'
,
()
=>
{
const
actionConfig
=
{
title
:
'
test
'
,
clickHandler
:
jasmine
.
createSpy
(
'
actionConfig
'
),
};
flash
(
'
test
'
,
'
alert
'
,
document
,
actionConfig
,
);
document
.
querySelector
(
'
.flash-action
'
).
click
();
expect
(
actionConfig
.
clickHandler
,
).
toHaveBeenCalled
();
});
});
});
});
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录