Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
阡陌心情
driver.js
提交
e492ddce
D
driver.js
项目概览
阡陌心情
/
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 搜索 >>
提交
e492ddce
编写于
4月 10, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Allow step element to be a HTMLElement
上级
4c1e8d65
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
26 addition
and
16 deletion
+26
-16
demo/scripts/demo.js
demo/scripts/demo.js
+1
-1
index.html
index.html
+3
-3
readme.md
readme.md
+1
-1
src/common/utils.js
src/common/utils.js
+8
-0
src/index.js
src/index.js
+12
-10
types/index.d.ts
types/index.d.ts
+1
-1
未找到文件。
demo/scripts/demo.js
浏览文件 @
e492ddce
...
...
@@ -3,7 +3,7 @@ document.addEventListener("DOMContentLoaded", function () {
const
tourSteps
=
[
{
element
:
'
#driver-demo-head
'
,
element
:
document
.
getElementById
(
'
driver-demo-head
'
)
,
popover
:
{
title
:
'
Before we start
'
,
description
:
'
This is just one use-case, make sure to check out the rest of the docs below.
'
,
...
...
index.html
浏览文件 @
e492ddce
...
...
@@ -292,9 +292,9 @@ driver.highlight({
<p>
Here are the set of options that you can pass in each step i.e. an item in array of steps or the object that
you pass to
<code>
highlight
</code>
method
</p>
<pre><code
class=
"javascript"
>
const stepDefinition = {
element: '#some-item',
// Query selector for the item
to be highlighted
popover: { // There will be no popover if empty or not given
title: 'Title', // Title on the popover
element: '#some-item',
// Query selector string or Node
to be highlighted
popover: {
// There will be no popover if empty or not given
title: 'Title',
// Title on the popover
description: 'Description', // Body of the popover
showButtons: false, // Do not show control buttons in footer
closeBtnText: 'Close', // Text on the close button for this step
...
...
readme.md
浏览文件 @
e492ddce
...
...
@@ -182,7 +182,7 @@ Here are the set of options that you can pass while defining steps `defineSteps`
```
javascript
const
stepDefinition
=
{
element
:
'
#some-item
'
,
// Query selector
for the item
to be highlighted
element
:
'
#some-item
'
,
// Query selector
string or Node
to be highlighted
stageBackground
:
'
#ffffff
'
,
// This will override the one set in driver
popover
:
{
// There will be no popover if empty or not given
title
:
'
Title
'
,
// Title on the popover
...
...
src/common/utils.js
浏览文件 @
e492ddce
...
...
@@ -47,3 +47,11 @@ export const getStyleProperty = (element, propertyName, prefixVendor = false) =>
return
propertyValue
&&
propertyValue
.
toLowerCase
?
propertyValue
.
toLowerCase
()
:
propertyValue
;
};
/**
* Checks if the passed element is dom object or not
* @param element
* @returns {boolean}
*/
export
const
isDomElement
=
function
(
element
)
{
return
element
&&
typeof
element
===
'
object
'
&&
'
nodeType
'
in
element
;
};
src/index.js
浏览文件 @
e492ddce
...
...
@@ -17,6 +17,7 @@ import {
SHOULD_OUTSIDE_CLICK_NEXT
,
}
from
'
./common/constants
'
;
import
Stage
from
'
./core/stage
'
;
import
{
isDomElement
}
from
'
./common/utils
'
;
/**
* Plugin class that drives the plugin
...
...
@@ -248,10 +249,6 @@ export default class Driver {
this
.
steps
=
[];
steps
.
forEach
((
step
,
index
)
=>
{
if
(
!
step
.
element
||
typeof
step
.
element
!==
'
string
'
)
{
throw
new
Error
(
`Element (query selector string) missing in step
${
index
}
`
);
}
const
element
=
this
.
prepareElementFromStep
(
step
,
steps
,
index
);
if
(
!
element
)
{
return
;
...
...
@@ -272,13 +269,18 @@ export default class Driver {
* @private
*/
prepareElementFromStep
(
currentStep
,
allSteps
=
[],
index
=
0
)
{
let
querySelector
=
''
;
let
elementOptions
=
{};
let
querySelector
=
currentStep
;
// If it is just a query selector string
if
(
typeof
currentStep
===
'
string
'
)
{
querySelector
=
currentStep
;
}
else
{
// If the `currentStep` is step definition
// then grab the options and element from the definition
const
isStepDefinition
=
typeof
currentStep
!==
'
string
'
&&
!
isDomElement
(
currentStep
);
if
(
!
currentStep
||
(
isStepDefinition
&&
!
currentStep
.
element
))
{
throw
new
Error
(
`Element is required in step
${
index
}
`
);
}
if
(
isStepDefinition
)
{
querySelector
=
currentStep
.
element
;
elementOptions
=
{
...
this
.
options
,
...
...
@@ -286,7 +288,7 @@ export default class Driver {
};
}
const
domElement
=
this
.
document
.
querySelector
(
querySelector
);
const
domElement
=
isDomElement
(
querySelector
)
?
querySelector
:
this
.
document
.
querySelector
(
querySelector
);
if
(
!
domElement
)
{
console
.
warn
(
`Element to highlight
${
querySelector
}
not found`
);
return
null
;
...
...
types/index.d.ts
浏览文件 @
e492ddce
...
...
@@ -138,7 +138,7 @@ declare module 'driver.js' {
/**
* Query selector representing the DOM Element
*/
element
:
string
;
element
:
string
|
HTMLElement
|
Node
;
/**
* Color of stage when this step is active
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录