Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
L-Y.
driver.js
提交
f6384059
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,体验更适合开发者的 AI 搜索 >>
提交
f6384059
编写于
3月 13, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Refactor and animation fixes
上级
8a46ff73
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
38 addition
and
36 deletion
+38
-36
src/core/overlay.js
src/core/overlay.js
+37
-29
src/driver.scss
src/driver.scss
+1
-7
未找到文件。
src/core/overlay.js
浏览文件 @
f6384059
import
Position
from
'
./position
'
;
import
{
ID_OVERLAY
,
OVERLAY_HTML
}
from
'
../common/constants
'
;
import
{
ANIMATION_DURATION_MS
,
ID_OVERLAY
,
OVERLAY_HTML
}
from
'
../common/constants
'
;
import
{
createNodeFromString
}
from
'
../common/utils
'
;
/**
...
...
@@ -19,8 +19,7 @@ export default class Overlay {
this
.
positionToHighlight
=
new
Position
({});
// position at which layover is to be patched at
this
.
highlightedElement
=
null
;
// currently highlighted dom element (instance of Element)
this
.
lastHighlightedElement
=
null
;
// element that was highlighted before current one
this
.
draw
=
this
.
draw
.
bind
(
this
);
// To pass the context of class, as it is to be used in redraw animation callback
this
.
hideTimer
=
null
;
this
.
window
=
window
;
this
.
document
=
document
;
...
...
@@ -53,6 +52,10 @@ export default class Overlay {
return
;
}
// There might be hide timer from last time
// which might be getting triggered
this
.
window
.
clearTimeout
(
this
.
hideTimer
);
// Trigger the hook for highlight started
element
.
onHighlightStarted
();
...
...
@@ -71,7 +74,34 @@ export default class Overlay {
this
.
highlightedElement
=
element
;
this
.
positionToHighlight
=
position
;
this
.
draw
();
this
.
showOverlay
();
// Show the stage
this
.
stage
.
show
(
this
.
positionToHighlight
);
// Element has been highlighted
this
.
highlightedElement
.
onHighlighted
();
}
showOverlay
()
{
this
.
node
.
style
.
opacity
=
`
${
this
.
options
.
opacity
}
`
;
this
.
node
.
style
.
position
=
'
fixed
'
;
this
.
node
.
style
.
left
=
'
0
'
;
this
.
node
.
style
.
top
=
'
0
'
;
this
.
node
.
style
.
bottom
=
'
0
'
;
this
.
node
.
style
.
right
=
'
0
'
;
}
hideOverlay
()
{
this
.
node
.
style
.
opacity
=
'
0
'
;
this
.
hideTimer
=
window
.
setTimeout
(()
=>
{
this
.
node
.
style
.
position
=
'
absolute
'
;
this
.
node
.
style
.
left
=
''
;
this
.
node
.
style
.
top
=
''
;
this
.
node
.
style
.
bottom
=
''
;
this
.
node
.
style
.
right
=
''
;
},
ANIMATION_DURATION_MS
);
}
/**
...
...
@@ -102,42 +132,20 @@ export default class Overlay {
this
.
highlightedElement
=
null
;
this
.
lastHighlightedElement
=
null
;
this
.
node
.
style
.
opacity
=
'
0
'
;
this
.
hideOverlay
()
;
this
.
stage
.
hide
();
}
/**
* `draw` is called for every frame . Puts back the
* filled overlay on body (i.e. while removing existing highlight if any) and
* Slowly eases towards the item to be selected.
*/
draw
()
{
if
(
!
this
.
highlightedElement
||
!
this
.
positionToHighlight
.
canHighlight
())
{
return
;
}
// Show the overlay
this
.
node
.
style
.
opacity
=
`
${
this
.
options
.
opacity
}
`
;
// Show the stage
this
.
stage
.
show
(
this
.
positionToHighlight
);
// Element has been highlighted
this
.
highlightedElement
.
onHighlighted
();
}
/**
* Refreshes the overlay i.e. sets the size according to current window size
* And moves the highlight around if necessary
*
* @param {boolean} animate
*/
refresh
(
animate
=
true
)
{
refresh
()
{
// If the highlighted element was there Cancel the
// existing animation frame if any and highlight it again
// as its position might have been changed
if
(
this
.
highlightedElement
)
{
this
.
highlight
(
this
.
highlightedElement
,
animate
);
this
.
highlight
(
this
.
highlightedElement
);
this
.
highlightedElement
.
onHighlighted
();
}
}
...
...
src/driver.scss
浏览文件 @
f6384059
...
...
@@ -108,15 +108,9 @@ div#driver-popover-item {
}
div
#driver-page-overlay
{
display
:
block
;
width
:
100%
;
height
:
100%
;
background
:
black
;
top
:
0
;
left
:
0
;
position
:
fixed
;
position
:
absolute
;
opacity
:
0
;
pointer-events
:
none
;
z-index
:
100002
!
important
;
// If you update this duration, make sure to update `ANIMATION_DURATION_MS` constant
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录