Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
大大大太阳yt
driver.js
提交
6a7ee1e2
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,发现更多精彩内容 >>
提交
6a7ee1e2
编写于
3月 10, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Dynamically add the popover if not there
上级
438fea86
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
51 addition
and
26 deletion
+51
-26
assets/scripts/src/constants.js
assets/scripts/src/constants.js
+20
-2
assets/scripts/src/popover.js
assets/scripts/src/popover.js
+30
-12
assets/styles/scss/demo.scss
assets/styles/scss/demo.scss
+1
-0
index.html
index.html
+0
-12
未找到文件。
assets/scripts/src/constants.js
浏览文件 @
6a7ee1e2
...
...
@@ -5,10 +5,28 @@ export const OVERLAY_ZINDEX = '999999999';
export
const
ESC_KEY_CODE
=
27
;
export
const
ID_POPOVER
=
'
sholo-popover-item
'
;
export
const
ID_OVERLAY
=
'
sholo-canvas-overlay
'
;
export
const
ID_POPOVER
=
'
sholo-popover-item
'
;
export
const
CLASS_POPOVER_TIP
=
'
sholo-popover-tip
'
;
export
const
CLASS_POPOVER_TITLE
=
'
sholo-popover-title
'
;
export
const
CLASS_POPOVER_DESCRIPTION
=
'
sholo-popover-description
'
;
export
const
CLASS_POPOVER_FOOTER
=
'
sholo-popover-footer
'
;
export
const
CLASS_CLOSE_BTN
=
'
sholo-close-btn
'
;
export
const
CLASS_NEXT_STEP_BTN
=
'
sholo-next-btn
'
;
export
const
CLASS_PREV_STEP_BTN
=
'
sholo-prev-btn
'
;
export
const
CLASS_CLOSE_BTN
=
'
sholo-close-btn
'
;
// language=HTML
export
const
POPOVER_HTML
=
`
<div id="
${
ID_POPOVER
}
">
<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
}
">
<a href="javascript:void(0)" class="
${
CLASS_CLOSE_BTN
}
">Close</a>
<span class="sholo-btn-group">
<a class="
${
CLASS_PREV_STEP_BTN
}
" href="javascript:void(0)">← Previous</a>
<a class="
${
CLASS_NEXT_STEP_BTN
}
" href="javascript:void(0)">Next →</a>
</span>
</div>
</div>`
;
assets/scripts/src/popover.js
浏览文件 @
6a7ee1e2
import
Element
from
'
./element
'
;
import
{
CLASS_POPOVER_TIP
,
ID_POPOVER
}
from
'
./constants
'
;
import
{
CLASS_POPOVER_TIP
,
ID_POPOVER
,
OVERLAY_PADDING
,
POPOVER_HTML
}
from
'
./constants
'
;
/**
* Popover that is displayed on top of the highlighted element
*/
export
default
class
Popover
extends
Element
{
constructor
(
options
=
{
padding
:
10
,
padding
:
OVERLAY_PADDING
,
},
window
,
document
)
{
super
();
...
...
@@ -14,17 +14,35 @@ export default class Popover extends Element {
this
.
window
=
window
;
this
.
document
=
document
;
this
.
node
=
this
.
getPopover
();
this
.
node
=
this
.
preparePopover
();
this
.
hide
();
}
getPopover
()
{
// @todo: Create if not there
const
popover
=
this
.
document
.
getElementById
(
ID_POPOVER
);
popover
.
style
.
position
=
'
absolute
'
;
preparePopover
()
{
let
popover
=
this
.
document
.
getElementById
(
ID_POPOVER
);
if
(
popover
)
{
return
popover
;
}
popover
=
Popover
.
createFromString
(
POPOVER_HTML
);
document
.
body
.
appendChild
(
popover
);
return
popover
;
}
/**
* Turn a string into a node
* @param {String} htmlString to convert
* @return {Node} Converted node element
*/
static
createFromString
(
htmlString
)
{
const
div
=
document
.
createElement
(
'
div
'
);
div
.
innerHTML
=
htmlString
.
trim
();
// Change this to div.childNodes to support multiple top-level nodes
return
div
.
firstChild
;
}
getHeight
()
{
return
Math
.
max
(
this
.
node
.
scrollHeight
,
this
.
node
.
offsetHeight
);
}
...
...
@@ -35,8 +53,8 @@ export default class Popover extends Element {
reset
()
{
this
.
node
.
style
.
display
=
'
block
'
;
this
.
node
.
style
.
left
=
''
;
this
.
node
.
style
.
top
=
''
;
this
.
node
.
style
.
left
=
'
0
'
;
this
.
node
.
style
.
top
=
'
0
'
;
this
.
node
.
style
.
bottom
=
''
;
this
.
node
.
style
.
right
=
''
;
...
...
@@ -49,11 +67,11 @@ export default class Popover extends Element {
show
(
position
)
{
this
.
reset
();
const
popoverTip
=
this
.
node
.
querySelector
(
`.
${
CLASS_POPOVER_TIP
}
`
);
const
pageHeight
=
this
.
getFullPageSize
().
height
;
const
popoverHeight
=
this
.
getHeight
();
const
popoverTip
=
this
.
node
.
querySelector
(
`.
${
CLASS_POPOVER_TIP
}
`
);
const
popoverMargin
=
this
.
options
.
padding
+
10
;
const
popoverHeight
=
this
.
getHeight
();
this
.
node
.
style
.
left
=
`
${
position
.
left
-
this
.
options
.
padding
}
px`
;
...
...
assets/styles/scss/demo.scss
浏览文件 @
6a7ee1e2
...
...
@@ -48,6 +48,7 @@ section {
/////////////////////////////////////////
div
#sholo-popover-item
{
display
:
none
;
position
:
absolute
;
background
:
white
;
margin
:
0
;
padding
:
15px
;
...
...
index.html
浏览文件 @
6a7ee1e2
...
...
@@ -9,18 +9,6 @@
<link
rel=
"stylesheet"
href=
"./assets/styles/css/demo.css"
>
</head>
<body>
<div
id=
"sholo-popover-item"
>
<div
class=
"sholo-popover-tip"
></div>
<div
class=
"sholo-popover-title"
>
Did you know?
</div>
<div
class=
"sholo-popover-description"
>
You can make step by step introductions with sholo!
</div>
<div
class=
"sholo-popover-footer"
>
<a
href=
"javascript:void(0)"
class=
"sholo-close-btn"
>
Close
</a>
<span
class=
"sholo-btn-group"
>
<a
class=
"sholo-prev-btn"
href=
"javascript:void(0)"
>
←
Previous
</a>
<a
class=
"sholo-next-btn"
href=
"javascript:void(0)"
>
Next
→
</a>
</span>
</div>
</div>
<div
class=
"page-wrap"
>
<section
class=
"section__header"
data-sholo=
"Hey welcome to presenter!"
>
<h1>
Sholo
</h1>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录