Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
L-Y.
driver.js
提交
df9f42fa
D
driver.js
项目概览
L-Y.
/
driver.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
driver.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
df9f42fa
编写于
2月 16, 2019
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Allow displaying buttons on single highlight elements
上级
6d6655e9
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
54 addition
and
24 deletion
+54
-24
.eslintrc.json
.eslintrc.json
+0
-1
src/common/constants.js
src/common/constants.js
+4
-2
src/core/popover.js
src/core/popover.js
+17
-1
src/driver.scss
src/driver.scss
+16
-3
src/index.js
src/index.js
+17
-17
未找到文件。
.eslintrc.json
浏览文件 @
df9f42fa
...
...
@@ -4,7 +4,6 @@
"browser"
:
true
},
"rules"
:
{
"no-console"
:
"off"
,
"no-underscore-dangle"
:
"off"
,
"no-plusplus"
:
"off"
,
"no-cond-assign"
:
"off"
,
...
...
src/common/constants.js
浏览文件 @
df9f42fa
...
...
@@ -27,6 +27,8 @@ export const CLASS_CLOSE_BTN = 'driver-close-btn';
export
const
CLASS_NEXT_STEP_BTN
=
'
driver-next-btn
'
;
export
const
CLASS_PREV_STEP_BTN
=
'
driver-prev-btn
'
;
export
const
CLASS_BTN_DISABLED
=
'
driver-disabled
'
;
export
const
CLASS_CLOSE_ONLY_BTN
=
'
driver-close-only-btn
'
;
export
const
CLASS_NAVIGATION_BTNS
=
'
driver-navigation-btns
'
;
// NOTE: It must match the one set in the animations in CSS file
export
const
ANIMATION_DURATION_MS
=
300
;
...
...
@@ -37,9 +39,9 @@ export const POPOVER_HTML = (className = '') => `
<div class="
${
CLASS_POPOVER_TIP
}
"></div>
<div class="
${
CLASS_POPOVER_TITLE
}
">Popover Title</div>
<div class="
${
CLASS_POPOVER_DESCRIPTION
}
">Popover Description</div>
<div class="
${
CLASS_POPOVER_FOOTER
}
">
<div class="
driver-clearfix
${
CLASS_POPOVER_FOOTER
}
">
<button class="
${
CLASS_CLOSE_BTN
}
">Close</button>
<span class="driver-btn-group">
<span class="driver-btn-group
${
CLASS_NAVIGATION_BTNS
}
">
<button class="
${
CLASS_PREV_STEP_BTN
}
">← Previous</button>
<button class="
${
CLASS_NEXT_STEP_BTN
}
">Next →</button>
</span>
...
...
src/core/popover.js
浏览文件 @
df9f42fa
...
...
@@ -2,6 +2,7 @@ import Element from './element';
import
{
CLASS_BTN_DISABLED
,
CLASS_CLOSE_BTN
,
CLASS_CLOSE_ONLY_BTN
,
CLASS_NEXT_STEP_BTN
,
CLASS_POPOVER_DESCRIPTION
,
CLASS_POPOVER_FOOTER
,
...
...
@@ -190,12 +191,27 @@ export default class Popover extends Element {
this
.
prevBtnNode
.
innerHTML
=
this
.
options
.
prevBtnText
;
this
.
closeBtnNode
.
innerHTML
=
this
.
options
.
closeBtnText
;
const
hasSteps
=
this
.
options
.
totalCount
&&
this
.
options
.
totalCount
!==
1
;
// If there was only one item, hide the buttons
if
(
!
this
.
options
.
showButtons
||
!
this
.
options
.
totalCount
||
this
.
options
.
totalCount
===
1
)
{
if
(
!
this
.
options
.
showButtons
)
{
this
.
footerNode
.
style
.
display
=
'
none
'
;
return
;
}
// If this is just a single highlighted element i.e. there
// are no other steps to go to – just hide the navigation buttons
if
(
!
hasSteps
)
{
this
.
nextBtnNode
.
style
.
display
=
'
none
'
;
this
.
prevBtnNode
.
style
.
display
=
'
none
'
;
this
.
closeBtnNode
.
classList
.
add
(
CLASS_CLOSE_ONLY_BTN
);
}
else
{
// @todo modify CSS to use block
this
.
nextBtnNode
.
style
.
display
=
'
inline-block
'
;
this
.
prevBtnNode
.
style
.
display
=
'
inline-block
'
;
this
.
closeBtnNode
.
classList
.
remove
(
CLASS_CLOSE_ONLY_BTN
);
}
this
.
footerNode
.
style
.
display
=
'
block
'
;
if
(
this
.
options
.
isFirst
)
{
this
.
prevBtnNode
.
classList
.
add
(
CLASS_BTN_DISABLED
);
...
...
src/driver.scss
浏览文件 @
df9f42fa
...
...
@@ -107,8 +107,7 @@ div#driver-popover-item {
.driver-popover-footer
{
display
:
block
;
clear
:
both
;
margin-top
:
5px
;
margin-top
:
10px
;
button
{
display
:
inline-block
;
...
...
@@ -123,7 +122,6 @@ div#driver-popover-item {
background-color
:
$button-bg
;
border-radius
:
2px
;
zoom
:
1
;
margin
:
10px
0
0
;
line-height
:
1
.3
;
}
...
...
@@ -137,6 +135,10 @@ div#driver-popover-item {
float
:
left
;
}
.driver-close-only-btn
{
float
:
right
;
}
.driver-btn-group
{
float
:
right
;
}
...
...
@@ -162,6 +164,17 @@ div#driver-popover-item {
}
}
.driver-clearfix
:before
{
content
:
""
;
display
:
table
;
}
.driver-clearfix
:after
{
clear
:
both
;
content
:
""
;
display
:
table
;
}
.driver-stage-no-animation
{
-webkit-transition
:
none
!
important
;
-moz-transition
:
none
!
important
;
...
...
src/index.js
浏览文件 @
df9f42fa
...
...
@@ -182,15 +182,19 @@ export default class Driver {
return
;
}
// Arrow keys to only perform if it is stepped introduction
if
(
this
.
steps
.
length
!==
0
)
{
// If there is no highlighted element or there is a highlighted element
// without popover or if the popover does not allow buttons - ignore
const
highlightedElement
=
this
.
getHighlightedElement
();
if
(
!
highlightedElement
||
!
highlightedElement
.
popover
||
!
highlightedElement
.
popover
.
options
.
showButtons
)
{
return
;
}
if
(
event
.
keyCode
===
RIGHT_KEY_CODE
)
{
this
.
handleNext
();
}
else
if
(
event
.
keyCode
===
LEFT_KEY_CODE
)
{
this
.
handlePrevious
();
}
}
}
/**
* Moves to the previous step if possible
...
...
@@ -226,7 +230,7 @@ export default class Driver {
// Call the bound `onNext` handler if available
const
currentStep
=
this
.
steps
[
this
.
currentStep
];
if
(
currentStep
.
options
.
onNext
)
{
if
(
currentStep
&&
currentStep
.
options
&&
currentStep
.
options
.
onNext
)
{
currentStep
.
options
.
onNext
(
this
.
overlay
.
highlightedElement
);
}
...
...
@@ -246,7 +250,7 @@ export default class Driver {
// Call the bound `onPrevious` handler if available
const
currentStep
=
this
.
steps
[
this
.
currentStep
];
if
(
currentStep
.
options
.
onPrevious
)
{
if
(
currentStep
&&
currentStep
.
options
&&
currentStep
.
options
.
onPrevious
)
{
currentStep
.
options
.
onPrevious
(
this
.
overlay
.
highlightedElement
);
}
...
...
@@ -357,7 +361,7 @@ export default class Driver {
* @private
*/
prepareElementFromStep
(
currentStep
,
allSteps
=
[],
index
=
0
)
{
let
elementOptions
=
{};
let
elementOptions
=
{
...
this
.
options
};
let
querySelector
=
currentStep
;
// If the `currentStep` is step definition
...
...
@@ -388,23 +392,19 @@ export default class Driver {
].
filter
(
c
=>
c
).
join
(
'
'
);
const
popoverOptions
=
{
...
this
.
o
ptions
,
...
elementO
ptions
,
...
elementOptions
.
popover
,
className
:
mergedClassNames
,
totalCount
:
allSteps
.
length
,
currentIndex
:
index
,
isFirst
:
index
===
0
,
isLast
:
index
===
allSteps
.
length
-
1
,
isLast
:
allSteps
.
length
===
0
||
index
===
allSteps
.
length
-
1
,
// Only one item or last item
};
popover
=
new
Popover
(
popoverOptions
,
this
.
window
,
this
.
document
);
}
const
stageOptions
=
{
...
this
.
options
,
...
elementOptions
,
};
const
stageOptions
=
{
...
elementOptions
};
const
stage
=
new
Stage
(
stageOptions
,
this
.
window
,
this
.
document
);
return
new
Element
({
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录