Browse Source

add keyboard shortcut and clear flag

dev
xmcp 6 years ago
parent
commit
0739e62cf0
  1. 15
      src/Common.js
  2. 9
      src/Title.js
  3. 24
      src/UserAction.js
  4. 2
      src/flows_api.js

15
src/Common.js

@ -70,10 +70,12 @@ export class SafeTextarea extends Component {
text: window.TEXTAREA_BACKUP[props.id]||'', text: window.TEXTAREA_BACKUP[props.id]||'',
}; };
this.on_change_bound=this.on_change.bind(this); 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.clear=this.clear.bind(this);
this.area_ref=React.createRef(); this.area_ref=React.createRef();
this.change_callback=props.on_change; this.change_callback=props.on_change||(()=>{});
this.change_callback(this.state.text); this.change_callback(this.state.text);
this.submit_callback=props.on_submit||(()=>{});
} }
componentWillUnmount() { componentWillUnmount() {
@ -87,6 +89,12 @@ export class SafeTextarea extends Component {
}); });
this.change_callback(event.target.value); this.change_callback(event.target.value);
} }
on_keydown(event) {
if(event.key==='Enter' && event.ctrlKey && !event.altKey) {
event.preventDefault();
this.submit_callback();
}
}
clear() { clear() {
this.setState({ this.setState({
@ -102,10 +110,13 @@ export class SafeTextarea extends Component {
get() { get() {
return this.state.text; return this.state.text;
} }
focus() {
this.area_ref.current.focus();
}
render() { render() {
return ( 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} />
) )
} }
} }

9
src/Title.js

@ -5,7 +5,7 @@ import {PromotionBar} from './Common';
import './Title.css'; import './Title.css';
const flag_re=/^\/\/setflag ([a-zA-Z0-9_]+)=(.+)$/; const flag_re=/^\/\/setflag ([a-zA-Z0-9_]+)=(.*)$/;
const HELP_TEXT=( const HELP_TEXT=(
<div className="box"> <div className="box">
@ -80,8 +80,13 @@ class ControlBar extends PureComponent {
if(event.key==='Enter') { if(event.key==='Enter') {
let flag_res=flag_re.exec(this.state.search_text); let flag_res=flag_re.exec(this.state.search_text);
if(flag_res) { if(flag_res) {
if(flag_res[2]) {
localStorage[flag_res[1]]=flag_res[2]; localStorage[flag_res[1]]=flag_res[2];
alert('Set Flag '+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; return;
} }

24
src/UserAction.js

@ -183,6 +183,17 @@ export class ReplyForm extends Component {
this.area_ref=this.props.area_ref||React.createRef(); 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) { on_change(value) {
this.setState({ this.setState({
text: value, text: value,
@ -190,7 +201,7 @@ export class ReplyForm extends Component {
} }
on_submit(event) { on_submit(event) {
event.preventDefault(); if(event) event.preventDefault();
if(this.state.loading_status==='loading') if(this.state.loading_status==='loading')
return; return;
this.setState({ this.setState({
@ -234,7 +245,7 @@ export class ReplyForm extends Component {
render() { render() {
return ( return (
<form onSubmit={this.on_submit.bind(this)} className={'reply-form box'+(this.state.text?' reply-sticky':'')}> <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' ? {this.state.loading_status==='loading' ?
<button disabled="disabled"> <button disabled="disabled">
<span className="icon icon-loading" /> <span className="icon icon-loading" />
@ -260,6 +271,11 @@ export class PostForm extends Component {
this.on_change_bound=this.on_change.bind(this); this.on_change_bound=this.on_change.bind(this);
} }
componentDidMount() {
if(this.area_ref.current)
this.area_ref.current.focus();
}
on_change(value) { on_change(value) {
this.setState({ this.setState({
text: value, text: value,
@ -356,7 +372,7 @@ export class PostForm extends Component {
} }
on_submit(event) { on_submit(event) {
event.preventDefault(); if(event) event.preventDefault();
if(this.state.loading_status==='loading') if(this.state.loading_status==='loading')
return; return;
if(this.img_ref.current.files.length) { if(this.img_ref.current.files.length) {
@ -398,7 +414,7 @@ export class PostForm extends Component {
</button> </button>
} }
</div> </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> </form>
) )
} }

2
src/flows_api.js

@ -2,7 +2,7 @@ import {API_BASE} from './Common';
export const API_VERSION_PARAM='&PKUHelperAPI=3.0'; export const API_VERSION_PARAM='&PKUHelperAPI=3.0';
export const PKUHELPER_ROOT= // don't use :10301 if we are already in the same domain 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) { function token_param(token) {
return API_VERSION_PARAM + (token ? ('&user_token='+token) : ''); return API_VERSION_PARAM + (token ? ('&user_token='+token) : '');

Loading…
Cancel
Save