forked from newthuhole/hole_thu_frontend
add esc alternative for pressure
This commit is contained in:
@@ -27,7 +27,7 @@ React 版 P大树洞,[pkuhelper.pku.edu.cn/hole](http://pkuhelper.pku.edu.cn/h
|
||||
- 突出显示未读树洞
|
||||
- 精确显示发帖时间
|
||||
- 复制树洞链接和全文
|
||||
- 3D Touch 支持
|
||||
- 快捷键和 3D Touch 支持
|
||||
- 自定义背景图片
|
||||
- 检测树洞和回复被删除(默认不开启)
|
||||
- 用 Token 登录
|
||||
@@ -46,5 +46,5 @@ React 版 P大树洞,[pkuhelper.pku.edu.cn/hole](http://pkuhelper.pku.edu.cn/h
|
||||
|
||||
- 检测瀑布流中被删除的树洞和树洞被删除的评论(`//setflag DELETION_DETECT=on`)
|
||||
- 自定义背景图片(`//setflag REPLACE_ERIRI_WITH_URL=http://...`)
|
||||
- 禁用 3D Touch 功能(`//setflag DISABLE_PRESSURE=on`)
|
||||
- 禁用重压屏幕(3D Touch)或按住 Esc 键返回(`//setflag DISABLE_PRESSURE=on`)
|
||||
- 禁用自动显示引用树洞功能(`//setflag DISABLE_QUOTE=on`)
|
||||
@@ -15,9 +15,14 @@ export class PressureHelper extends Component {
|
||||
fired: false,
|
||||
};
|
||||
this.callback=props.callback;
|
||||
this.esc_interval=null;
|
||||
}
|
||||
|
||||
do_fire() {
|
||||
if(this.esc_interval) {
|
||||
clearInterval(this.esc_interval);
|
||||
this.esc_interval=null;
|
||||
}
|
||||
this.setState({
|
||||
level: 1,
|
||||
fired: true,
|
||||
@@ -36,11 +41,12 @@ export class PressureHelper extends Component {
|
||||
Pressure.set(document.body, {
|
||||
change: (force)=>{
|
||||
if(!this.state.fired) {
|
||||
this.setState({
|
||||
level: force,
|
||||
});
|
||||
if(force===1)
|
||||
if(force>=.999)
|
||||
this.do_fire();
|
||||
else
|
||||
this.setState({
|
||||
level: force,
|
||||
});
|
||||
}
|
||||
},
|
||||
end: ()=>{
|
||||
@@ -58,11 +64,42 @@ export class PressureHelper extends Component {
|
||||
if(this.state.level>THRESHOLD)
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown',(e)=>{
|
||||
if(!e.repeat && e.key==='Escape') {
|
||||
if(this.esc_interval)
|
||||
clearInterval(this.esc_interval);
|
||||
this.setState({
|
||||
level: THRESHOLD,
|
||||
},()=>{
|
||||
this.esc_interval=setInterval(()=>{
|
||||
let new_level=this.state.level+.1;
|
||||
if(new_level>=.999)
|
||||
this.do_fire();
|
||||
else
|
||||
this.setState({
|
||||
level: new_level,
|
||||
});
|
||||
},50);
|
||||
});
|
||||
}
|
||||
});
|
||||
document.addEventListener('keyup',(e)=>{
|
||||
if(e.key==='Escape') {
|
||||
if(this.esc_interval) {
|
||||
clearInterval(this.esc_interval);
|
||||
this.esc_interval=null;
|
||||
}
|
||||
this.setState({
|
||||
level: 0,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const pad=MULTIPLIER*(this.state.level-THRESHOLD)-BORDER_WIDTH;
|
||||
const pad=this.state.level===0 ? -BORDER_WIDTH-500 : MULTIPLIER*(this.state.level-THRESHOLD)-BORDER_WIDTH;
|
||||
return (
|
||||
<div className={'pressure-box '+(this.state.fired ? 'pressure-box-fired' : '')} style={{
|
||||
left: pad,
|
||||
|
||||
@@ -14,8 +14,7 @@ const HELP_TEXT=(
|
||||
<li>为保证使用体验,请使用 Chrome 或 Mobile Safari 浏览器最新版</li>
|
||||
<li>在列表中左右滑动可以预览回复,点击展开侧边栏进行操作</li>
|
||||
<li>新出现的帖子会在左上角显示一个圆点</li>
|
||||
<li>点击树洞编号可以复制分享链接和树洞全文(包括回复)</li>
|
||||
<li>本网站支持 3D Touch,重压屏幕可以快速返回 / 刷新树洞</li>
|
||||
<li>本网站支持 3D Touch,重压屏幕或者短暂按住 Esc 键可以快速返回 / 刷新树洞</li>
|
||||
</ul>
|
||||
<p>
|
||||
在
|
||||
|
||||
Reference in New Issue
Block a user