Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
大大大太阳yt
driver.js
提交
76763d78
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,发现更多精彩内容 >>
提交
76763d78
编写于
3月 10, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Move popover logic to separate class
上级
27c03dbe
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
89 addition
and
56 deletion
+89
-56
assets/scripts/src/element.js
assets/scripts/src/element.js
+9
-54
assets/scripts/src/popover.js
assets/scripts/src/popover.js
+71
-0
assets/scripts/src/sholo.js
assets/scripts/src/sholo.js
+9
-2
未找到文件。
assets/scripts/src/element.js
浏览文件 @
76763d78
import
Position
from
'
./position
'
;
/**
* Wrapper around DOMElements to enrich them
* with the functionality necessary
*/
export
default
class
Element
{
/**
* DOM element object
* @param node
* @param options
* @param popover
* @param overlay
* @param window
* @param document
*/
constructor
(
node
,
options
,
overlay
,
window
,
document
)
{
constructor
(
node
,
options
,
popover
,
overlay
,
window
,
document
)
{
this
.
node
=
node
;
this
.
document
=
document
;
this
.
window
=
window
;
this
.
options
=
options
;
this
.
overlay
=
overlay
;
this
.
popover
=
this
.
getPopover
()
;
this
.
popover
=
popover
;
}
/**
...
...
@@ -99,7 +104,7 @@ export default class Element {
onDeselected
()
{
// Will be called when element is about to be deselected
this
.
hidePopover
();
this
.
popover
.
hide
();
}
onHighlightStarted
()
{
...
...
@@ -125,42 +130,9 @@ export default class Element {
}
showPopover
()
{
this
.
resetPopover
();
// Position at which the element is
const
position
=
this
.
getCalculatedPosition
();
const
popoverTip
=
this
.
popover
.
querySelector
(
'
.sholo-popover-tip
'
);
const
pageHeight
=
this
.
getFullPageSize
().
height
;
const
popoverHeight
=
this
.
getPopoverHeight
();
const
popoverMargin
=
this
.
options
.
padding
+
10
;
this
.
popover
.
style
.
left
=
`
${
position
.
left
-
this
.
options
.
padding
}
px`
;
// Calculate different dimensions after attaching popover
const
pageHeightAfterPopOver
=
position
.
bottom
+
popoverHeight
+
popoverMargin
;
// If adding popover would go out of the window height, then show it to the top
if
(
pageHeightAfterPopOver
>=
pageHeight
)
{
this
.
popover
.
style
.
top
=
`
${
position
.
top
-
popoverHeight
-
popoverMargin
}
px`
;
popoverTip
.
classList
.
add
(
'
bottom
'
);
}
else
{
this
.
popover
.
style
.
top
=
`
${
position
.
bottom
+
popoverMargin
}
px`
;
popoverTip
.
classList
.
add
(
'
top
'
);
}
}
getPopover
()
{
// @todo: Create if not there
const
popover
=
this
.
document
.
getElementById
(
'
sholo-popover-item
'
);
popover
.
style
.
position
=
'
absolute
'
;
return
popover
;
}
hidePopover
()
{
this
.
popover
.
style
.
display
=
'
none
'
;
this
.
popover
.
show
(
position
);
}
getFullPageSize
()
{
...
...
@@ -173,21 +145,4 @@ export default class Element {
width
:
Math
.
max
(
body
.
scrollWidth
,
body
.
offsetWidth
,
html
.
scrollWidth
,
html
.
offsetWidth
),
};
}
getPopoverHeight
()
{
return
Math
.
max
(
this
.
popover
.
scrollHeight
,
this
.
popover
.
offsetHeight
);
}
resetPopover
()
{
this
.
popover
.
style
.
display
=
'
block
'
;
this
.
popover
.
style
.
left
=
''
;
this
.
popover
.
style
.
top
=
''
;
this
.
popover
.
style
.
bottom
=
''
;
this
.
popover
.
style
.
right
=
''
;
// Remove the positional classes from tip
this
.
popover
.
querySelector
(
'
.sholo-popover-tip
'
)
.
className
=
'
sholo-popover-tip
'
;
}
}
assets/scripts/src/popover.js
0 → 100644
浏览文件 @
76763d78
/**
* Popover that is displayed on top of the highlighted element
*/
import
Element
from
'
./element
'
;
export
default
class
Popover
extends
Element
{
constructor
(
options
=
{
padding
:
10
,
},
window
,
document
)
{
super
();
this
.
options
=
options
;
this
.
window
=
window
;
this
.
document
=
document
;
this
.
node
=
this
.
getPopover
();
}
getPopover
()
{
// @todo: Create if not there
const
popover
=
this
.
document
.
getElementById
(
'
sholo-popover-item
'
);
popover
.
style
.
position
=
'
absolute
'
;
return
popover
;
}
getHeight
()
{
return
Math
.
max
(
this
.
node
.
scrollHeight
,
this
.
node
.
offsetHeight
);
}
hide
()
{
this
.
node
.
style
.
display
=
'
none
'
;
}
reset
()
{
this
.
node
.
style
.
display
=
'
block
'
;
this
.
node
.
style
.
left
=
''
;
this
.
node
.
style
.
top
=
''
;
this
.
node
.
style
.
bottom
=
''
;
this
.
node
.
style
.
right
=
''
;
// Remove the positional classes from tip
this
.
node
.
querySelector
(
'
.sholo-popover-tip
'
)
.
className
=
'
sholo-popover-tip
'
;
}
show
(
position
)
{
this
.
reset
();
const
popoverTip
=
this
.
node
.
querySelector
(
'
.sholo-popover-tip
'
);
const
pageHeight
=
this
.
getFullPageSize
().
height
;
const
popoverHeight
=
this
.
getHeight
();
const
popoverMargin
=
this
.
options
.
padding
+
10
;
this
.
node
.
style
.
left
=
`
${
position
.
left
-
this
.
options
.
padding
}
px`
;
// Calculate different dimensions after attaching popover
const
pageHeightAfterPopOver
=
position
.
bottom
+
popoverHeight
+
popoverMargin
;
// If adding popover would go out of the window height, then show it to the top
if
(
pageHeightAfterPopOver
>=
pageHeight
)
{
this
.
node
.
style
.
top
=
`
${
position
.
top
-
popoverHeight
-
popoverMargin
}
px`
;
popoverTip
.
classList
.
add
(
'
bottom
'
);
}
else
{
this
.
node
.
style
.
top
=
`
${
position
.
bottom
+
popoverMargin
}
px`
;
popoverTip
.
classList
.
add
(
'
top
'
);
}
}
}
assets/scripts/src/sholo.js
浏览文件 @
76763d78
import
Overlay
from
'
./overlay
'
;
import
Element
from
'
./element
'
;
import
'
./polyfill
'
;
import
Popover
from
'
./popover
'
;
/**
* Plugin class that drives the plugin
...
...
@@ -172,7 +173,11 @@ export default class Sholo {
return
;
}
const
element
=
new
Element
(
domElement
,
elementOptions
,
this
.
overlay
,
this
.
window
,
this
.
document
);
// @todo pass the options such as position, button text etc
const
popover
=
new
Popover
({
padding
:
this
.
options
.
padding
,
},
this
.
window
,
this
.
document
);
const
element
=
new
Element
(
domElement
,
elementOptions
,
popover
,
this
.
overlay
,
this
.
window
,
this
.
document
);
this
.
steps
.
push
(
element
);
});
...
...
@@ -199,7 +204,9 @@ export default class Sholo {
return
;
}
const
element
=
new
Element
(
domElement
,
this
.
options
,
this
.
overlay
,
this
.
window
,
this
.
document
);
// @todo add options such as position, button texts, additional classes etc
const
popover
=
new
Popover
({},
this
.
window
,
this
.
document
);
const
element
=
new
Element
(
domElement
,
this
.
options
,
popover
,
this
.
overlay
,
this
.
window
,
this
.
document
);
this
.
overlay
.
highlight
(
element
);
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录