Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wjy_0214
driver.js
提交
783018d3
D
driver.js
项目概览
wjy_0214
/
driver.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
1
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 搜索 >>
提交
783018d3
编写于
4月 15, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Non-animated driver to use shadows
上级
6bd2494f
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
29 addition
and
17 deletion
+29
-17
src/common/constants.js
src/common/constants.js
+1
-1
src/core/overlay.js
src/core/overlay.js
+10
-4
src/core/stage.js
src/core/stage.js
+3
-3
src/driver.scss
src/driver.scss
+15
-9
未找到文件。
src/common/constants.js
浏览文件 @
783018d3
...
...
@@ -17,7 +17,7 @@ export const CLASS_DRIVER_HIGHLIGHTED_ELEMENT = 'driver-highlighted-element';
export
const
CLASS_POSITION_RELATIVE
=
'
driver-position-relative
'
;
export
const
CLASS_FIX_STACKING_CONTEXT
=
'
driver-fix-stacking
'
;
export
const
CLASS_
NO_ANIMATION
=
'
driver
-no-animation
'
;
export
const
CLASS_
STAGE_NO_ANIMATION
=
'
driver-stage
-no-animation
'
;
export
const
CLASS_POPOVER_TIP
=
'
driver-popover-tip
'
;
export
const
CLASS_POPOVER_TITLE
=
'
driver-popover-title
'
;
export
const
CLASS_POPOVER_DESCRIPTION
=
'
driver-popover-description
'
;
...
...
src/core/overlay.js
浏览文件 @
783018d3
import
{
ANIMATION_DURATION_MS
,
CLASS_NO_ANIMATION
,
ID_OVERLAY
,
OVERLAY_HTML
}
from
'
../common/constants
'
;
import
{
ANIMATION_DURATION_MS
,
ID_OVERLAY
,
OVERLAY_HTML
}
from
'
../common/constants
'
;
import
{
createNodeFromString
}
from
'
../common/utils
'
;
/**
...
...
@@ -39,9 +39,15 @@ export default class Overlay {
this
.
node
.
style
.
opacity
=
'
0
'
;
if
(
!
this
.
options
.
animate
)
{
this
.
node
.
classList
.
add
(
CLASS_NO_ANIMATION
);
}
else
{
this
.
node
.
classList
.
remove
(
CLASS_NO_ANIMATION
);
// For non-animation cases remove the overlay because we achieve this overlay by having
// a higher box-shadow on the stage. Why are we doing it that way? Because the stage that
// is shown "behind" the highlighted element to make it pop out of the screen, it introduces
// some stacking contexts issues. To avoid those issues we just make the stage background
// transparent and achieve the overlay using the shadow so to make the element below it visible
// through the stage even if there are stacking issues.
if
(
this
.
node
.
parentElement
)
{
this
.
node
.
parentElement
.
removeChild
(
this
.
node
);
}
}
}
...
...
src/core/stage.js
浏览文件 @
783018d3
import
{
CLASS_NO_ANIMATION
,
ID_STAGE
,
STAGE_HTML
}
from
'
../common/constants
'
;
import
{
CLASS_
STAGE_
NO_ANIMATION
,
ID_STAGE
,
STAGE_HTML
}
from
'
../common/constants
'
;
import
{
createNodeFromString
}
from
'
../common/utils
'
;
import
Element
from
'
./element
'
;
...
...
@@ -34,9 +34,9 @@ export default class Stage extends Element {
this
.
node
=
stage
;
if
(
!
this
.
options
.
animate
)
{
this
.
node
.
classList
.
add
(
CLASS_NO_ANIMATION
);
this
.
node
.
classList
.
add
(
CLASS_
STAGE_
NO_ANIMATION
);
}
else
{
this
.
node
.
classList
.
remove
(
CLASS_NO_ANIMATION
);
this
.
node
.
classList
.
remove
(
CLASS_
STAGE_
NO_ANIMATION
);
}
}
...
...
src/driver.scss
浏览文件 @
783018d3
...
...
@@ -4,10 +4,10 @@ $stage-bg: #ffffff;
$button-bg
:
#f1f1f1
;
$disabled-btn-color
:
#808080
;
$popover-zindex
:
1000000000
;
$overlay-zindex
:
100002
;
$stage-zindex
:
100003
;
$highlighted-element-zindex
:
100004
;
$popover-z
-
index
:
1000000000
;
$overlay-z
-
index
:
100002
;
$stage-z
-
index
:
100003
;
$highlighted-element-z
-
index
:
100004
;
// If you update this duration, make sure to
// update `ANIMATION_DURATION_MS` constant
...
...
@@ -25,7 +25,7 @@ div#driver-popover-item {
min-width
:
250px
;
max-width
:
300px
;
box-shadow
:
0
1px
10px
rgba
(
0
,
0
,
0
,
0
.4
);
z-index
:
$popover-zindex
;
z-index
:
$popover-z
-
index
;
.driver-popover-tip
{
border
:
5px
solid
$popover-bg
;
...
...
@@ -124,12 +124,17 @@ div#driver-popover-item {
}
}
.driver-no-animation
{
.driver-
stage-
no-animation
{
-webkit-transition
:
none
!
important
;
-moz-transition
:
none
!
important
;
-ms-transition
:
none
!
important
;
-o-transition
:
none
!
important
;
transition
:
none
!
important
;
background
:
transparent
!
important
;
-webkit-appearance
:
none
;
-webkit-box-shadow
:
0
0
0
50px
rgba
(
0
,
0
,
0
,
0
.75
);
box-shadow
:
0
0
0
50px
rgba
(
0
,
0
,
0
,
0
.75
);
}
div
#driver-page-overlay
{
...
...
@@ -145,7 +150,7 @@ div#driver-page-overlay {
zoom
:
1
;
filter
:
alpha
(
opacity
=
75
);
opacity
:
0
.75
;
z-index
:
$overlay-zindex
!
important
;
z-index
:
$overlay-z
-
index
!
important
;
-webkit-transition
:
all
$animation-sec
;
-moz-transition
:
all
$animation-sec
;
...
...
@@ -161,8 +166,9 @@ div#driver-highlighted-element-stage {
height
:
50px
;
width
:
300px
;
background
:
$stage-bg
;
z-index
:
$stage-zindex
!
important
;
z-index
:
$stage-z
-
index
!
important
;
display
:
none
;
border-radius
:
2px
;
-webkit-transition
:
all
$animation-sec
;
-moz-transition
:
all
$animation-sec
;
...
...
@@ -172,7 +178,7 @@ div#driver-highlighted-element-stage {
}
.driver-highlighted-element
{
z-index
:
$highlighted-element-zindex
!
important
;
z-index
:
$highlighted-element-z
-
index
!
important
;
}
.driver-position-relative
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录