From 0739e62cf073974e21ed8c989a2d1229823f678b Mon Sep 17 00:00:00 2001
From: xmcp <xiaoyuanan2000@sina.com>
Date: Sun, 10 Mar 2019 16:22:19 +0800
Subject: [PATCH] add keyboard shortcut and clear flag

---
 src/Common.js     | 15 +++++++++++++--
 src/Title.js      | 11 ++++++++---
 src/UserAction.js | 24 ++++++++++++++++++++----
 src/flows_api.js  |  2 +-
 4 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/Common.js b/src/Common.js
index fe03856..e9f5cc2 100644
--- a/src/Common.js
+++ b/src/Common.js
@@ -70,10 +70,12 @@ export class SafeTextarea extends Component {
             text: window.TEXTAREA_BACKUP[props.id]||'',
         };
         this.on_change_bound=this.on_change.bind(this);
+        this.on_keydown_bound=this.on_keydown.bind(this);
         this.clear=this.clear.bind(this);
         this.area_ref=React.createRef();
-        this.change_callback=props.on_change;
+        this.change_callback=props.on_change||(()=>{});
         this.change_callback(this.state.text);
+        this.submit_callback=props.on_submit||(()=>{});
     }
 
     componentWillUnmount() {
@@ -87,6 +89,12 @@ export class SafeTextarea extends Component {
         });
         this.change_callback(event.target.value);
     }
+    on_keydown(event) {
+        if(event.key==='Enter' && event.ctrlKey && !event.altKey) {
+            event.preventDefault();
+            this.submit_callback();
+        }
+    }
 
     clear() {
         this.setState({
@@ -102,10 +110,13 @@ export class SafeTextarea extends Component {
     get() {
         return this.state.text;
     }
+    focus() {
+        this.area_ref.current.focus();
+    }
 
     render() {
         return (
-            <textarea ref={this.area_ref} onChange={this.on_change_bound} value={this.state.text} />
+            <textarea ref={this.area_ref} onChange={this.on_change_bound} value={this.state.text} onKeyDown={this.on_keydown_bound} />
         )
     }
 }
diff --git a/src/Title.js b/src/Title.js
index cd169d5..dc44916 100644
--- a/src/Title.js
+++ b/src/Title.js
@@ -5,7 +5,7 @@ import {PromotionBar} from './Common';
 
 import './Title.css';
 
-const flag_re=/^\/\/setflag ([a-zA-Z0-9_]+)=(.+)$/;
+const flag_re=/^\/\/setflag ([a-zA-Z0-9_]+)=(.*)$/;
 
 const HELP_TEXT=(
     <div className="box">
@@ -80,8 +80,13 @@ class ControlBar extends PureComponent {
         if(event.key==='Enter') {
             let flag_res=flag_re.exec(this.state.search_text);
             if(flag_res) {
-                localStorage[flag_res[1]]=flag_res[2];
-                alert('Set Flag '+flag_res[1]+'='+flag_res[2]);
+                if(flag_res[2]) {
+                    localStorage[flag_res[1]]=flag_res[2];
+                    alert('Set Flag '+flag_res[1]+'='+flag_res[2]+'\nYou may need to refresh this webpage.');
+                } else {
+                    delete localStorage[flag_res[1]];
+                    alert('Clear Flag '+flag_res[1]+'\nYou may need to refresh this webpage.');
+                }
                 return;
             }
 
diff --git a/src/UserAction.js b/src/UserAction.js
index 75aed49..5304ebf 100644
--- a/src/UserAction.js
+++ b/src/UserAction.js
@@ -183,6 +183,17 @@ export class ReplyForm extends Component {
         this.area_ref=this.props.area_ref||React.createRef();
     }
 
+    componentDidMount() {
+        document.addEventListener('keypress',(e)=>{
+            if(e.code==='Enter' && !e.ctrlKey && !e.altKey && ['input','textarea'].indexOf(e.target.tagName.toLowerCase())===-1) {
+                if(this.area_ref.current) {
+                    e.preventDefault();
+                    this.area_ref.current.focus();
+                }
+            }
+        });
+    }
+
     on_change(value) {
         this.setState({
             text: value,
@@ -190,7 +201,7 @@ export class ReplyForm extends Component {
     }
 
     on_submit(event) {
-        event.preventDefault();
+        if(event) event.preventDefault();
         if(this.state.loading_status==='loading')
             return;
         this.setState({
@@ -234,7 +245,7 @@ export class ReplyForm extends Component {
     render() {
         return (
             <form onSubmit={this.on_submit.bind(this)} className={'reply-form box'+(this.state.text?' reply-sticky':'')}>
-                <SafeTextarea ref={this.area_ref} id={this.props.pid} on_change={this.on_change_bound} />
+                <SafeTextarea ref={this.area_ref} id={this.props.pid} on_change={this.on_change_bound} on_submit={this.on_submit.bind(this)} />
                 {this.state.loading_status==='loading' ?
                     <button disabled="disabled">
                         <span className="icon icon-loading" />
@@ -260,6 +271,11 @@ export class PostForm extends Component {
         this.on_change_bound=this.on_change.bind(this);
     }
 
+    componentDidMount() {
+        if(this.area_ref.current)
+            this.area_ref.current.focus();
+    }
+
     on_change(value) {
         this.setState({
             text: value,
@@ -356,7 +372,7 @@ export class PostForm extends Component {
     }
 
     on_submit(event) {
-        event.preventDefault();
+        if(event) event.preventDefault();
         if(this.state.loading_status==='loading')
             return;
         if(this.img_ref.current.files.length) {
@@ -398,7 +414,7 @@ export class PostForm extends Component {
                         </button>
                     }
                 </div>
-                <SafeTextarea ref={this.area_ref} id="new_post" on_change={this.on_change_bound} />
+                <SafeTextarea ref={this.area_ref} id="new_post" on_change={this.on_change_bound} on_submit={this.on_submit.bind(this)} />
             </form>
         )
     }
diff --git a/src/flows_api.js b/src/flows_api.js
index 6f2c598..3646527 100644
--- a/src/flows_api.js
+++ b/src/flows_api.js
@@ -2,7 +2,7 @@ import {API_BASE} from './Common';
 
 export const API_VERSION_PARAM='&PKUHelperAPI=3.0';
 export const PKUHELPER_ROOT= // don't use :10301 if we are already in the same domain
-    (document.domain==='pkuhelper.com'||document.domain==='www.pkuhelper.com') ? '/' : 'http://pkuhelper.com:10301/';
+    (document.domain==='pkuhelper.com'||document.domain==='www.pkuhelper.com') ? '/' : '//pkuhelper.com/';
 
 function token_param(token) {
     return API_VERSION_PARAM + (token ? ('&user_token='+token) : '');