add pressure

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

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

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_title: '',
-            sidebar_content: null,
+            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>
+                <PressureHelper callback={this.on_pressure_bound} />
-                    <div className="bg-img" style={{
+                <div className="bg-img" style={{
-                        backgroundImage: 'url('+(localStorage['REPLACE_ERIRI_WITH_URL'] || 'static/eriri_bg.jpg')+')'
+                    backgroundImage: 'url('+(localStorage['REPLACE_ERIRI_WITH_URL'] || 'static/eriri_bg.jpg')+')'
-                    }} />
+                }} />
-                    <Title show_sidebar={this.show_sidebar_bound} set_mode={this.set_mode_bound} />
+                <Title show_sidebar={this.show_sidebar_bound} set_mode={this.set_mode_bound} />
-                    <div className="left-container">
+                <div className="left-container">
-                        <TokenCtx.Consumer>{(token)=>(
+                    <TokenCtx.Consumer>{(token)=>(
-                            <Flow key={this.state.flow_render_key} show_sidebar={this.show_sidebar_bound}
+                        <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}
+                              mode={this.state.mode} search_text={this.state.search_text} token={token.value}
-                            />
+                        />
-                        )}</TokenCtx.Consumer>
+                    )}</TokenCtx.Consumer>
-                        <br />
+                    <br />
-                    </div>
-                    <Sidebar do_close={()=>{
-                        this.setState({
-                            sidebar_content: null,
-                        });
-                    }} content={this.state.sidebar_content} title={this.state.sidebar_title} />
                 </div>
+                <Sidebar do_close={()=>{
+                    this.setState({
+                        sidebar_content: null,
+                    });
+                }} content={this.state.sidebar_content} title={this.state.sidebar_title} />
             </TokenCtx.Provider>
         );
     }

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;
+}

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,
+            }} />
+        )
+    }
+}