Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
大大大太阳yt
driver.js
提交
b1c5f8c8
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,发现更多精彩内容 >>
提交
b1c5f8c8
编写于
3月 04, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add trigger for when element has highlighted
上级
6b491183
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
27 addition
and
12 deletion
+27
-12
assets/scripts/src/element.js
assets/scripts/src/element.js
+5
-0
assets/scripts/src/overlay.js
assets/scripts/src/overlay.js
+14
-7
assets/scripts/src/position.js
assets/scripts/src/position.js
+4
-4
index.html
index.html
+4
-1
未找到文件。
assets/scripts/src/element.js
浏览文件 @
b1c5f8c8
...
...
@@ -54,4 +54,9 @@ export default class Element {
return
position
;
}
onHighlighted
()
{
console
.
log
(
'
on highlighted
'
);
console
.
log
(
this
.
getScreenCoordinates
());
}
}
assets/scripts/src/overlay.js
浏览文件 @
b1c5f8c8
...
...
@@ -104,9 +104,9 @@ export default class Overlay {
// Add the overlay on top of the whole body
this
.
addCloak
();
if
(
canHighlight
)
{
const
isFadingIn
=
this
.
overlayAlpha
<
0.1
;
const
isFadingIn
=
this
.
overlayAlpha
<
0.1
;
if
(
canHighlight
)
{
if
(
isFadingIn
)
{
// Ignore the animation, just highlight the item at its current position
this
.
highlightedPosition
=
this
.
positionToHighlight
;
...
...
@@ -151,12 +151,14 @@ export default class Overlay {
}
// Stage a new animation frame only if the position has not been reached
// of the alpha has not yet fully reached fully required opacity
if
(
!
this
.
positionToHighlight
.
equals
(
this
.
highlightedPosition
)
||
this
.
overlayAlpha
.
toFixed
(
2
)
!==
this
.
opacity
.
toFixed
(
2
)
)
{
// 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
)
{
this
.
redrawAnimation
=
this
.
window
.
requestAnimationFrame
(
this
.
draw
);
}
else
{
// Element has been highlighted
this
.
highlightedElement
.
onHighlighted
();
}
}
else
if
(
this
.
overlay
.
parentNode
)
{
// Otherwise if the overlay is there, remove it
...
...
@@ -164,6 +166,11 @@ export default class Overlay {
}
}
hasPositionHighlighted
()
{
return
this
.
positionToHighlight
.
equals
(
this
.
highlightedPosition
)
&&
this
.
overlayAlpha
>
(
this
.
opacity
-
0.05
);
}
/**
* Removes the cloak from the given position
* i.e. cuts the chunk of layout which is over the element
...
...
assets/scripts/src/position.js
浏览文件 @
b1c5f8c8
...
...
@@ -35,9 +35,9 @@ export default class Position {
* @returns {boolean}
*/
equals
(
position
)
{
return
this
.
left
.
toFixed
(
3
)
===
position
.
left
.
toFixed
(
3
)
&&
this
.
right
.
toFixed
(
3
)
===
position
.
right
.
toFixed
(
3
)
&&
this
.
top
.
toFixed
(
3
)
===
position
.
top
.
toFixed
(
3
)
&&
this
.
bottom
.
toFixed
(
3
)
===
position
.
bottom
.
toFixed
(
3
);
return
Math
.
round
(
this
.
left
)
===
Math
.
round
(
position
.
left
)
&&
Math
.
round
(
this
.
right
)
===
Math
.
round
(
position
.
right
)
&&
Math
.
round
(
this
.
top
)
===
Math
.
round
(
position
.
top
)
&&
Math
.
round
(
this
.
bottom
)
===
Math
.
round
(
position
.
bottom
);
}
}
index.html
浏览文件 @
b1c5f8c8
...
...
@@ -44,7 +44,10 @@
<script
src=
"./assets/scripts/dist/sholo.js"
></script>
<script>
const
sholo
=
new
Sholo
();
const
sholo
=
new
Sholo
({
animate
:
false
,
opacity
:
0.8
});
sholo
.
highlight
(
'
.section__header
'
);
</script>
</body>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录