newthuhole/hole_thu_frontend
4
6
Fork 2
Code Issues 8 Pull Requests Projects Releases Wiki Activity

add pressure

Browse Source
This commit is contained in:
xmcp
2018-08-24 21:57:18 +08:00
parent 9b5154ea4d
commit cf78b74330
5 changed files with 127 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@@ -8505,6 +8505,11 @@
"resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
"integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
},
"pressure": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/pressure/-/pressure-2.1.2.tgz",
"integrity": "sha512-ZSargPrrtyDGsWKFQvk3e5i/JM24pRTlb7Wu6RNtQiSzSAwdNw7hmB4+tQ/V2AhC3u4YGx3q2kMYEgtr/6ctXQ=="
},
"pretty-bytes": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",

1
package.json
View File

@@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"load-script": "^1.0.0",
"pressure": "^2.1.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-lazyload": "latest",

51
src/App.js
View File

@@ -2,14 +2,15 @@ import React, {Component} from 'react';
import {Flow} from './Flows';
import {Title} from './Title';
import {Sidebar} from './Sidebar';
import {PressureHelper} from './PressureHelper';
import {TokenCtx} from './UserAction';
class App extends Component {
constructor(props) {
super(props);
this.state={
sidebar_title: null,
sidebar_content: null,
sidebar_title: '',
sidebar_content: null, // determine status of sidebar
mode: 'list', // list, single, search, attention
search_text: null,
flow_render_key: +new Date(),
@@ -17,6 +18,17 @@ class App extends Component {
};
this.show_sidebar_bound=this.show_sidebar.bind(this);
this.set_mode_bound=this.set_mode.bind(this);
this.on_pressure_bound=this.on_pressure.bind(this);
}
on_pressure() {
if(this.state.sidebar_content)
this.setState({
sidebar_title: '',
sidebar_content: null,
});
else
this.set_mode('list',null);
}
show_sidebar(title,content) {
@@ -45,25 +57,24 @@ class App extends Component {
});
},
}}>
<div>
<div className="bg-img" style={{
backgroundImage: 'url('+(localStorage['REPLACE_ERIRI_WITH_URL'] || 'static/eriri_bg.jpg')+')'
}} />
<Title show_sidebar={this.show_sidebar_bound} set_mode={this.set_mode_bound} />
<div className="left-container">
<TokenCtx.Consumer>{(token)=>(
<Flow key={this.state.flow_render_key} show_sidebar={this.show_sidebar_bound}
mode={this.state.mode} search_text={this.state.search_text} token={token.value}
/>
)}</TokenCtx.Consumer>
<br />
</div>
<Sidebar do_close={()=>{
this.setState({
sidebar_content: null,
});
}} content={this.state.sidebar_content} title={this.state.sidebar_title} />
<PressureHelper callback={this.on_pressure_bound} />
<div className="bg-img" style={{
backgroundImage: 'url('+(localStorage['REPLACE_ERIRI_WITH_URL'] || 'static/eriri_bg.jpg')+')'
}} />
<Title show_sidebar={this.show_sidebar_bound} set_mode={this.set_mode_bound} />
<div className="left-container">
<TokenCtx.Consumer>{(token)=>(
<Flow key={this.state.flow_render_key} show_sidebar={this.show_sidebar_bound}
mode={this.state.mode} search_text={this.state.search_text} token={token.value}
/>
)}</TokenCtx.Consumer>
<br />
</div>
<Sidebar do_close={()=>{
this.setState({
sidebar_content: null,
});
}} content={this.state.sidebar_content} title={this.state.sidebar_title} />
</TokenCtx.Provider>
);
}

17
src/PressureHelper.css Normal file
View File

@@ -0,0 +1,17 @@
.pressure-box {
border: 500px /* also change js! */ solid orange;
position: fixed;
margin: auto;
z-index: 100;
pointer-events: none;
transition:
top 100ms linear,
bottom 100ms linear,
left 100ms linear,
right 100ms linear;
}
.pressure-box-fired {
border-color: orangered;
pointer-events: initial !important;
}

73
src/PressureHelper.js Normal file
View File

@@ -0,0 +1,73 @@
import React, {Component} from 'react';
import Pressure from 'pressure';
import './PressureHelper.css';
const THRESHOLD=.4;
const MULTIPLIER=25;
const BORDER_WIDTH=500; // also change css!
export class PressureHelper extends Component {
constructor(props) {
super(props);
this.state={
level: 0,
fired: false,
};
this.callback=props.callback;
}
do_fire() {
this.setState({
level: 1,
fired: true,
});
this.callback();
window.setTimeout(()=>{
this.setState({
level: 0,
fired: false,
});
},300);
}
componentDidMount() {
Pressure.set(document.body, {
change: (force)=>{
if(!this.state.fired) {
this.setState({
level: force,
});
if(force===1)
this.do_fire();
}
},
end: ()=>{
this.setState({
level: 0,
fired: false,
});
},
}, {
polyfill: false,
only: 'touch',
preventSelect: false,
});
document.body.addEventListener('selectstart',(event)=>{
if(this.state.level>THRESHOLD)
event.preventDefault();
});
}
render() {
const pad=MULTIPLIER*(this.state.level-THRESHOLD)-BORDER_WIDTH;
return (
<div className={'pressure-box '+(this.state.fired ? 'pressure-box-fired' : '')} style={{
left: pad,
right: pad,
top: pad,
bottom: pad,
}} />
)
}
}