Browse Source

add esc alternative for pressure

dev
xmcp 6 years ago
parent
commit
d06ad049df
  1. 4
      README.md
  2. 47
      src/PressureHelper.js
  3. 3
      src/Title.js

4
README.md

@ -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`)

47
src/PressureHelper.js

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

3
src/Title.js

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

Loading…
Cancel
Save