add esc alternative for pressure

This commit is contained in:
xmcp
2019-04-17 14:21:25 +08:00
parent fa5e328827
commit d06ad049df
3 changed files with 45 additions and 9 deletions

View File

@@ -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,

View File

@@ -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>
&nbsp;