Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
大大大太阳yt
driver.js
提交
5d08a612
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,发现更多精彩内容 >>
提交
5d08a612
编写于
3月 10, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Make popover optional on elements
上级
6a7ee1e2
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
63 addition
and
38 deletion
+63
-38
assets/scripts/src/element.js
assets/scripts/src/element.js
+21
-5
assets/scripts/src/overlay.js
assets/scripts/src/overlay.js
+18
-23
assets/scripts/src/sholo.js
assets/scripts/src/sholo.js
+8
-5
index.html
index.html
+16
-5
未找到文件。
assets/scripts/src/element.js
浏览文件 @
5d08a612
...
...
@@ -102,19 +102,35 @@ export default class Element {
return
position
;
}
/**
* Is called when element is about to be deselected
* i.e. when moving the focus to next element of closing
*/
onDeselected
()
{
// Will be called when element is about to be deselected
if
(
!
this
.
popover
)
{
return
;
}
this
.
popover
.
hide
();
}
/**
* Is called when the element is about to be highlighted
* i.e. either if overlay has started moving the highlight towards
* this element of has just decided to highlight it
*/
onHighlightStarted
()
{
// Will be triggered when the element is about to be highlighted
// i.e. overlay has started transitioning towards this element
if
(
!
this
.
popover
)
{
return
;
}
this
.
showPopover
();
}
onHighlighted
()
{
if
(
this
.
popover
)
{
this
.
showPopover
();
}
const
highlightedElement
=
this
;
const
lastHighlightedElement
=
this
.
overlay
.
getLastHighlightedElement
();
...
...
@@ -130,7 +146,7 @@ export default class Element {
highlightedElement
.
bringInView
();
}
if
(
!
popoverElement
.
isInView
())
{
if
(
popoverElement
&&
!
popoverElement
.
isInView
())
{
popoverElement
.
bringInView
();
}
}
...
...
assets/scripts/src/overlay.js
浏览文件 @
5d08a612
import
Position
from
'
./position
'
;
import
{
ID_OVERLAY
,
OVERLAY_
ANIMATE
,
OVERLAY_OPACITY
,
OVERLAY_PADDING
,
OVERLAY_
ZINDEX
}
from
'
./constants
'
;
import
{
ID_OVERLAY
,
OVERLAY_ZINDEX
}
from
'
./constants
'
;
/**
* Responsible for overlay creation and manipulation i.e.
...
...
@@ -7,20 +7,12 @@ import { ID_OVERLAY, OVERLAY_ANIMATE, OVERLAY_OPACITY, OVERLAY_PADDING, OVERLAY_
*/
export
default
class
Overlay
{
/**
* @param opacity number
* @param padding number
* @param animate bool
* @param options
* @param window
* @param document
*/
constructor
({
opacity
=
OVERLAY_OPACITY
,
padding
=
OVERLAY_PADDING
,
animate
=
OVERLAY_ANIMATE
,
},
window
,
document
)
{
this
.
opacity
=
opacity
;
// Fixed opacity for the layover
this
.
padding
=
padding
;
// Padding around the highlighted item
this
.
animate
=
animate
;
// Should animate between the transitions
constructor
(
options
,
window
,
document
)
{
this
.
options
=
options
;
this
.
overlayAlpha
=
0
;
// Is used to animate the layover
this
.
positionToHighlight
=
new
Position
({});
// position at which layover is to be patched at
...
...
@@ -93,7 +85,7 @@ export default class Overlay {
// If animation is not required then set the last path to be same
// as the current path so that there is no easing towards it
if
(
!
this
.
animate
||
!
animate
)
{
if
(
!
this
.
options
.
animate
||
!
animate
)
{
this
.
highlightedPosition
=
this
.
positionToHighlight
;
}
...
...
@@ -121,7 +113,10 @@ export default class Overlay {
*/
clear
()
{
this
.
positionToHighlight
=
new
Position
();
if
(
this
.
highlightedElement
)
{
this
.
highlightedElement
.
onDeselected
();
}
this
.
highlightedElement
=
null
;
this
.
lastHighlightedElement
=
null
;
...
...
@@ -160,18 +155,18 @@ export default class Overlay {
// Cut the chunk of overlay that is over the highlighted item
this
.
removeCloak
({
posX
:
this
.
highlightedPosition
.
left
-
this
.
window
.
scrollX
-
this
.
padding
,
posY
:
this
.
highlightedPosition
.
top
-
this
.
window
.
scrollY
-
this
.
padding
,
width
:
(
this
.
highlightedPosition
.
right
-
this
.
highlightedPosition
.
left
)
+
(
this
.
padding
*
2
),
height
:
(
this
.
highlightedPosition
.
bottom
-
this
.
highlightedPosition
.
top
)
+
(
this
.
padding
*
2
),
posX
:
this
.
highlightedPosition
.
left
-
this
.
window
.
scrollX
-
this
.
options
.
padding
,
posY
:
this
.
highlightedPosition
.
top
-
this
.
window
.
scrollY
-
this
.
options
.
padding
,
width
:
(
this
.
highlightedPosition
.
right
-
this
.
highlightedPosition
.
left
)
+
(
this
.
options
.
padding
*
2
),
height
:
(
this
.
highlightedPosition
.
bottom
-
this
.
highlightedPosition
.
top
)
+
(
this
.
options
.
padding
*
2
),
});
// Fade the overlay in if we can highlight
if
(
canHighlight
)
{
if
(
!
this
.
animate
)
{
this
.
overlayAlpha
=
this
.
opacity
;
if
(
!
this
.
options
.
animate
)
{
this
.
overlayAlpha
=
this
.
op
tions
.
op
acity
;
}
else
{
this
.
overlayAlpha
+=
(
this
.
opacity
-
this
.
overlayAlpha
)
*
0.08
;
this
.
overlayAlpha
+=
(
this
.
op
tions
.
op
acity
-
this
.
overlayAlpha
)
*
0.08
;
}
}
else
{
// otherwise fade out
...
...
@@ -193,7 +188,7 @@ export default class Overlay {
// or the alpha has not yet fully reached fully required opacity
if
(
!
this
.
hasPositionHighlighted
())
{
this
.
redrawAnimation
=
this
.
window
.
requestAnimationFrame
(
this
.
draw
);
}
else
if
(
!
this
.
animate
&&
isFadingIn
)
{
}
else
if
(
!
this
.
options
.
animate
&&
isFadingIn
)
{
this
.
redrawAnimation
=
this
.
window
.
requestAnimationFrame
(
this
.
draw
);
}
else
{
// Element has been highlighted
...
...
@@ -207,7 +202,7 @@ export default class Overlay {
hasPositionHighlighted
()
{
return
this
.
positionToHighlight
.
equals
(
this
.
highlightedPosition
)
&&
this
.
overlayAlpha
>
(
this
.
opacity
-
0.05
);
this
.
overlayAlpha
>
(
this
.
op
tions
.
op
acity
-
0.05
);
}
/**
...
...
assets/scripts/src/sholo.js
浏览文件 @
5d08a612
...
...
@@ -8,6 +8,9 @@ import {
CLASS_PREV_STEP_BTN
,
ESC_KEY_CODE
,
ID_POPOVER
,
OVERLAY_ANIMATE
,
OVERLAY_OPACITY
,
OVERLAY_PADDING
,
}
from
'
./constants
'
;
/**
...
...
@@ -19,9 +22,9 @@ export default class Sholo {
*/
constructor
(
options
=
{})
{
this
.
options
=
Object
.
assign
({
padding
:
10
,
animate
:
true
,
opacity
:
0.75
,
animate
:
OVERLAY_ANIMATE
,
// Whether to animate or not
opacity
:
OVERLAY_OPACITY
,
// Overlay opacity
padding
:
OVERLAY_PADDING
,
// Spacing around the element from the overlay
},
options
);
this
.
document
=
document
;
...
...
@@ -173,6 +176,7 @@ export default class Sholo {
}
const
elementOptions
=
Object
.
assign
({},
this
.
options
,
step
);
const
popoverOptions
=
Object
.
assign
({},
this
.
options
,
elementOptions
.
popover
||
{});
const
domElement
=
this
.
document
.
querySelector
(
step
.
element
);
if
(
!
domElement
)
{
...
...
@@ -180,8 +184,7 @@ export default class Sholo {
return
;
}
// @todo pass the options such as position, button text etc
const
popover
=
new
Popover
(
elementOptions
,
this
.
window
,
this
.
document
);
const
popover
=
elementOptions
.
popover
?
new
Popover
(
popoverOptions
,
this
.
window
,
this
.
document
)
:
null
;
const
element
=
new
Element
(
domElement
,
elementOptions
,
popover
,
this
.
overlay
,
this
.
window
,
this
.
document
);
this
.
steps
.
push
(
element
);
...
...
index.html
浏览文件 @
5d08a612
...
...
@@ -64,11 +64,22 @@
});
sholo
.
defineSteps
([
{
element
:
'
.section__header
'
},
{
element
:
'
.section__how
'
},
{
element
:
'
.section__purpose
'
},
{
element
:
'
.section__examples
'
},
{
element
:
'
.section__contributing
'
},
{
element
:
'
.section__header
'
},
{
element
:
'
.section__how
'
,
popover
:
{}
},
{
element
:
'
.section__purpose
'
,
},
{
element
:
'
.section__examples
'
,
},
{
element
:
'
.section__contributing
'
,
},
]);
document
.
querySelector
(
'
.btn__example
'
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录