Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
L-Y.
driver.js
提交
a2f68832
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,发现更多精彩内容 >>
提交
a2f68832
编写于
3月 10, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Dynamic title and descriptions
上级
5d08a612
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
32 addition
and
10 deletion
+32
-10
assets/scripts/src/popover.js
assets/scripts/src/popover.js
+17
-5
assets/scripts/src/sholo.js
assets/scripts/src/sholo.js
+6
-3
index.html
index.html
+9
-2
未找到文件。
assets/scripts/src/popover.js
浏览文件 @
a2f68832
import
Element
from
'
./element
'
;
import
Element
from
'
./element
'
;
import
{
CLASS_POPOVER_TIP
,
ID_POPOVER
,
OVERLAY_PADDING
,
POPOVER_HTML
}
from
'
./constants
'
;
import
{
CLASS_POPOVER_DESCRIPTION
,
CLASS_POPOVER_TIP
,
CLASS_POPOVER_TITLE
,
ID_POPOVER
,
OVERLAY_PADDING
,
POPOVER_HTML
,
}
from
'
./constants
'
;
/**
/**
* Popover that is displayed on top of the highlighted element
* Popover that is displayed on top of the highlighted element
...
@@ -14,11 +21,11 @@ export default class Popover extends Element {
...
@@ -14,11 +21,11 @@ export default class Popover extends Element {
this
.
window
=
window
;
this
.
window
=
window
;
this
.
document
=
document
;
this
.
document
=
document
;
this
.
node
=
this
.
preparePopover
();
this
.
node
=
this
.
makeNode
();
this
.
hide
();
this
.
hide
();
}
}
preparePopover
()
{
makeNode
()
{
let
popover
=
this
.
document
.
getElementById
(
ID_POPOVER
);
let
popover
=
this
.
document
.
getElementById
(
ID_POPOVER
);
if
(
popover
)
{
if
(
popover
)
{
return
popover
;
return
popover
;
...
@@ -67,9 +74,14 @@ export default class Popover extends Element {
...
@@ -67,9 +74,14 @@ export default class Popover extends Element {
show
(
position
)
{
show
(
position
)
{
this
.
reset
();
this
.
reset
();
const
pageHeight
=
this
.
getFullPageSize
().
height
;
const
popoverTip
=
this
.
node
.
querySelector
(
`.
${
CLASS_POPOVER_TIP
}
`
);
const
popoverTip
=
this
.
node
.
querySelector
(
`.
${
CLASS_POPOVER_TIP
}
`
);
const
popoverTitle
=
this
.
node
.
querySelector
(
`.
${
CLASS_POPOVER_TITLE
}
`
);
const
popoverDescription
=
this
.
node
.
querySelector
(
`.
${
CLASS_POPOVER_DESCRIPTION
}
`
);
popoverTitle
.
innerText
=
this
.
options
.
title
;
popoverDescription
.
innerText
=
this
.
options
.
description
;
const
pageHeight
=
this
.
getFullPageSize
().
height
;
const
popoverMargin
=
this
.
options
.
padding
+
10
;
const
popoverMargin
=
this
.
options
.
padding
+
10
;
const
popoverHeight
=
this
.
getHeight
();
const
popoverHeight
=
this
.
getHeight
();
...
...
assets/scripts/src/sholo.js
浏览文件 @
a2f68832
...
@@ -176,15 +176,18 @@ export default class Sholo {
...
@@ -176,15 +176,18 @@ export default class Sholo {
}
}
const
elementOptions
=
Object
.
assign
({},
this
.
options
,
step
);
const
elementOptions
=
Object
.
assign
({},
this
.
options
,
step
);
const
popoverOptions
=
Object
.
assign
({},
this
.
options
,
elementOptions
.
popover
||
{});
const
domElement
=
this
.
document
.
querySelector
(
step
.
element
);
const
domElement
=
this
.
document
.
querySelector
(
step
.
element
);
if
(
!
domElement
)
{
if
(
!
domElement
)
{
console
.
warn
(
`Element to highlight
${
step
.
element
}
not found`
);
console
.
warn
(
`Element to highlight
${
step
.
element
}
not found`
);
return
;
return
;
}
}
const
popover
=
elementOptions
.
popover
?
new
Popover
(
popoverOptions
,
this
.
window
,
this
.
document
)
:
null
;
let
popover
=
null
;
const
popoverOptions
=
Object
.
assign
({},
this
.
options
,
elementOptions
.
popover
||
{});
if
(
elementOptions
.
popover
&&
elementOptions
.
popover
.
description
)
{
popover
=
new
Popover
(
popoverOptions
,
this
.
window
,
this
.
document
);
}
const
element
=
new
Element
(
domElement
,
elementOptions
,
popover
,
this
.
overlay
,
this
.
window
,
this
.
document
);
const
element
=
new
Element
(
domElement
,
elementOptions
,
popover
,
this
.
overlay
,
this
.
window
,
this
.
document
);
this
.
steps
.
push
(
element
);
this
.
steps
.
push
(
element
);
...
...
index.html
浏览文件 @
a2f68832
...
@@ -65,11 +65,18 @@
...
@@ -65,11 +65,18 @@
sholo
.
defineSteps
([
sholo
.
defineSteps
([
{
{
element
:
'
.section__header
'
element
:
'
.section__header
'
,
popover
:
{
title
:
'
Adding Introductions
'
,
description
:
'
You can use it to add popovers on top of the website
'
},
},
},
{
{
element
:
'
.section__how
'
,
element
:
'
.section__how
'
,
popover
:
{}
popover
:
{
title
:
'
Just Specify the Item
'
,
description
:
'
All you have to do is provide the query selector of element to highlight
'
},
},
},
{
{
element
:
'
.section__purpose
'
,
element
:
'
.section__purpose
'
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录