add esc alternative for pressure
This commit is contained in:
@@ -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