Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
大大大太阳yt
driver.js
提交
19ca78d2
D
driver.js
项目概览
大大大太阳yt
/
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,体验更适合开发者的 AI 搜索 >>
提交
19ca78d2
编写于
6月 29, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Document the asyncronous usage
上级
ccd3758c
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
61 addition
and
14 deletion
+61
-14
index.html
index.html
+4
-0
readme.md
readme.md
+57
-14
未找到文件。
index.html
浏览文件 @
19ca78d2
...
...
@@ -324,6 +324,10 @@ driver.hasHighlightedElement(); // Checks if there is any highlighted element
driver.hasNextStep(); // Checks if there is next step to move to
driver.hasPreviousStep(); // Checks if there is previous step to move to
// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// perform some asynchronous task and manually move to next step
driver.preventMove();
// Gets the currently highlighted element on screen
const activeElement = driver.getHighlightedElement();
const lastActiveElement = driver.getLastHighlightedElement();
...
...
readme.md
浏览文件 @
19ca78d2
...
...
@@ -148,6 +148,57 @@ You can also hide the buttons and control the introductions programmatically by
![](
./demo/images/split.png
)
### Asynchronous Actions – [Demo](http://kamranahmed.info/driver)
During the feature introductions, to delay the move to next step, you may handle that in
`onNext`
or
`onPrevious`
callbacks
```
javascript
const
driver
=
new
Driver
();
// Define the steps for introduction
driver
.
defineSteps
([
{
element
:
'
#first-element-introduction
'
,
popover
:
{
title
:
'
Title on Popover
'
,
description
:
'
Body of the popover
'
,
position
:
'
left
'
}
},
{
element
:
'
#second-element-introduction
'
,
popover
:
{
title
:
'
Title on Popover
'
,
description
:
'
Body of the popover
'
,
position
:
'
top
'
},
onNext
:
()
=>
{
// Do not move to the next step yet
driver
.
preventMove
();
// Perform some action and manually call `moveNext`
someAction
()
.
then
(()
=>
{
driver
.
moveNext
();
});
}
},
{
element
:
'
#third-element-introduction
'
,
popover
:
{
title
:
'
Title on Popover
'
,
description
:
'
Body of the popover
'
,
position
:
'
right
'
}
},
]);
// Start the introduction
driver
.
start
();
```
You can also hide the buttons and control the introductions programmatically by using the API methods listed below.
![](
./demo/images/split.png
)
## API
Driver comes with several options that you can manipulate to make Driver behave as you like
...
...
@@ -175,8 +226,8 @@ const driver = new Driver({
onHighlighted
:
(
Element
)
=>
{},
// Called when element is fully highlighted
onDeselected
:
(
Element
)
=>
{},
// Called when element has been deselected
onReset
:
(
Element
)
=>
{},
// Called when overlay is about to be cleared
onNext
:
()
=>
{},
// Called when moving to next step on any step
onPrevious
:
()
=>
{},
// Called when moving to next step on any step
onNext
:
(
Element
)
=>
{},
// Called when moving to next step on any step
onPrevious
:
(
Element
)
=>
{},
// Called when moving to next step on any step
});
```
Note that all the button options that you provide in the driver definition can be overridden for a specific step by giving them in the step definition
...
...
@@ -242,6 +293,10 @@ driver.movePrevious(); // Moves to previous step in the steps list
driver
.
hasNextStep
();
// Checks if there is next step to move to
driver
.
hasPreviousStep
();
// Checks if there is previous step to move to
// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// perform some asynchronous task and manually move to next step
driver
.
preventMove
();
// Highlights the element using query selector or the step definition
driver
.
highlight
(
string
|
stepDefinition
);
...
...
@@ -276,18 +331,6 @@ activeElement.getNode(); // Gets the DOM Element behind this element
![](
./demo/images/split.png
)
## Todo
-
[X] Single element highlighting
-
[X] Popovers on the highlighted elements
-
[X] Add smooth transition on changing highlighted elements
-
[X] Multi-step Journey Definitions
-
[X] Make it controllable by keyboard
-
[X] Bring highlighted element to viewport
-
[X] Add type definitions
-
[ ] Create wrappers for Angular, Vue and React
-
[ ] Write tests
## Contributions
Feel free to submit pull requests, create issues or spread the word.
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录