From cf78b7433007dc3c00432d9f795a54d1de4c57f5 Mon Sep 17 00:00:00 2001 From: xmcp Date: Fri, 24 Aug 2018 21:57:18 +0800 Subject: [PATCH] add pressure --- package-lock.json | 5 +++ package.json | 1 + src/App.js | 51 +++++++++++++++++------------ src/PressureHelper.css | 17 ++++++++++ src/PressureHelper.js | 73 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 127 insertions(+), 20 deletions(-) create mode 100644 src/PressureHelper.css create mode 100644 src/PressureHelper.js diff --git a/package-lock.json b/package-lock.json index 0acafcd..dcb6e40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 6872436..607cf68 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.js b/src/App.js index 0ffab40..3d465ff 100644 --- a/src/App.js +++ b/src/App.js @@ -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 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> ); } diff --git a/src/PressureHelper.css b/src/PressureHelper.css new file mode 100644 index 0000000..e9ad3d8 --- /dev/null +++ b/src/PressureHelper.css @@ -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; +} \ No newline at end of file diff --git a/src/PressureHelper.js b/src/PressureHelper.js new file mode 100644 index 0000000..d139da3 --- /dev/null +++ b/src/PressureHelper.js @@ -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, + }} /> + ) + } +} \ No newline at end of file