Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
大大大太阳yt
driver.js
提交
ede8cb95
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,发现更多精彩内容 >>
提交
ede8cb95
编写于
3月 07, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add popover functionality
上级
2b7567f6
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
66 addition
and
18 deletion
+66
-18
.eslintrc.json
.eslintrc.json
+1
-0
assets/scripts/src/element.js
assets/scripts/src/element.js
+33
-2
assets/scripts/src/overlay.js
assets/scripts/src/overlay.js
+10
-0
assets/scripts/src/sholo.js
assets/scripts/src/sholo.js
+9
-1
assets/styles/scss/demo.scss
assets/styles/scss/demo.scss
+1
-7
index.html
index.html
+12
-8
未找到文件。
.eslintrc.json
浏览文件 @
ede8cb95
...
...
@@ -10,6 +10,7 @@
"no-cond-assign"
:
"off"
,
"func-names"
:
"off"
,
"no-bitwise"
:
"off"
,
"class-methods-use-this"
:
"off"
,
"no-param-reassign"
:
[
"off"
],
...
...
assets/scripts/src/element.js
浏览文件 @
ede8cb95
...
...
@@ -11,6 +11,7 @@ export default class Element {
this
.
document
=
document
;
this
.
window
=
window
;
this
.
options
=
options
;
this
.
popover
=
this
.
getPopover
();
}
/**
...
...
@@ -58,8 +59,38 @@ export default class Element {
return
position
;
}
onDeselected
()
{
// Will be called when element is about to be deselected
this
.
hidePopover
();
}
onHighlightStarted
()
{
// Will be triggered when the element is about to be highlighted
// i.e. overlay has started transitioning towards this element
this
.
showPopover
();
}
onHighlighted
()
{
console
.
log
(
'
on highlighted
'
);
console
.
log
(
this
.
getScreenCoordinates
());
this
.
showPopover
();
}
showPopover
()
{
const
position
=
this
.
getCalculatedPosition
();
this
.
popover
.
style
.
left
=
`
${
position
.
left
}
px`
;
this
.
popover
.
style
.
top
=
`
${
position
.
bottom
+
10
}
px`
;
this
.
popover
.
style
.
display
=
'
block
'
;
}
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
'
;
}
}
assets/scripts/src/overlay.js
浏览文件 @
ede8cb95
...
...
@@ -61,6 +61,14 @@ export default class Overlay {
return
;
}
// Trigger the hook for highlight started
element
.
onHighlightStarted
();
// Old element has been deselected
if
(
this
.
highlightedElement
)
{
this
.
highlightedElement
.
onDeselected
();
}
// get the position of element around which we need to draw
const
position
=
element
.
getCalculatedPosition
();
if
(
!
position
.
canHighlight
())
{
...
...
@@ -92,6 +100,7 @@ export default class Overlay {
*/
clear
()
{
this
.
positionToHighlight
=
new
Position
();
this
.
highlightedElement
.
onDeselected
();
this
.
highlightedElement
=
null
;
this
.
draw
();
...
...
@@ -245,6 +254,7 @@ export default class Overlay {
if
(
this
.
highlightedElement
)
{
this
.
window
.
cancelAnimationFrame
(
this
.
redrawAnimation
);
this
.
highlight
(
this
.
highlightedElement
,
animate
);
this
.
highlightedElement
.
onHighlighted
();
}
}
}
assets/scripts/src/sholo.js
浏览文件 @
ede8cb95
...
...
@@ -42,6 +42,11 @@ export default class Sholo {
this
.
window
.
addEventListener
(
'
mouseup
'
,
this
.
onMouseUp
,
false
);
}
/**
* Removes the popover if clicked outside the highlighted element
* or outside the
* @param e
*/
onMouseUp
(
e
)
{
const
highlightedElement
=
this
.
overlay
.
getHighlightedElement
();
const
popover
=
document
.
getElementById
(
'
sholo-popover-item
'
);
...
...
@@ -50,8 +55,11 @@ export default class Sholo {
return
;
}
const
clickedHighlightedElement
=
highlightedElement
.
node
.
contains
(
e
.
target
);
const
clickedPopover
=
popover
&&
popover
.
contains
(
e
.
target
);
// Remove the overlay If clicked outside the highlighted element
if
(
!
highlightedElement
.
node
.
contains
(
e
.
target
)
&&
(
!
popover
||
!
popover
.
contains
(
e
.
target
))
)
{
if
(
!
clickedHighlightedElement
&&
!
clickedPopover
)
{
this
.
overlay
.
clear
();
}
}
...
...
assets/styles/scss/demo.scss
浏览文件 @
ede8cb95
...
...
@@ -48,13 +48,7 @@ section {
/////////////////////////////////////////
div
#sholo-popover-item
{
//////// Temp style
position
:
absolute
;
top
:
285px
;
left
:
710px
;
//////////////////
display
:
block
;
display
:
none
;
background
:
white
;
margin
:
0
;
padding
:
15px
;
...
...
index.html
浏览文件 @
ede8cb95
...
...
@@ -19,8 +19,8 @@
<h1>
Sholo
</h1>
<p
class=
"text-muted"
>
A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in
spotlight
</p>
<a
href=
"
#"
class=
"btn
btn__dark"
>
Show an Example
</a>
<a
href=
"
#
"
class=
"btn btn__light"
>
Learn More
</a>
<a
href=
"
javascript:void(0)"
class=
"btn btn__example
btn__dark"
>
Show an Example
</a>
<a
href=
"
javascript:void(0)
"
class=
"btn btn__light"
>
Learn More
</a>
</section>
<section
class=
"section__purpose"
>
<h1>
Whats does it do?
</h1>
...
...
@@ -62,12 +62,16 @@
<script
src=
"./assets/scripts/dist/sholo.js"
></script>
<script>
const
sholo
=
new
Sholo
({
animate
:
true
,
opacity
:
0.8
,
padding
:
0
});
sholo
.
highlight
(
'
.section__header
'
);
const
sholo
=
new
Sholo
({
animate
:
true
,
opacity
:
0.8
,
padding
:
0
});
document
.
querySelector
(
'
.btn__example
'
)
.
addEventListener
(
'
click
'
,
function
()
{
sholo
.
highlight
(
'
.section__header
'
);
});
</script>
</body>
</html>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录