keymaps form
This commit is contained in:
Shin'ya Ueoka
parent
7b44b65247
commit
2641183a5b
4 changed files with 116 additions and 95 deletions
95
src/settings/components/form/keymaps-form.jsx
Normal file
95
src/settings/components/form/keymaps-form.jsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import './keymaps-form.scss';
|
||||
import { h, Component } from 'preact';
|
||||
import Input from '../ui/input';
|
||||
|
||||
const KeyMapFields = [
|
||||
[
|
||||
['scroll.vertically?{count:-1}', 'Scroll down'],
|
||||
['scroll.vertically?{count:1}', 'Scroll up'],
|
||||
['scroll.horizonally?{count:-1}', 'Scroll left'],
|
||||
['scroll.horizonally?{count:1}', 'Scroll right'],
|
||||
['scroll.home', 'Scroll leftmost'],
|
||||
['scroll.end', 'Scroll last'],
|
||||
['scroll.pages?{count:-0.5}', 'Scroll up by half of screen'],
|
||||
['scroll.pages?{count:0.5}', 'Scroll up by half of screen'],
|
||||
['scroll.pages?{count:-1}', 'Scroll up by a screen'],
|
||||
['scroll.pages?{count:1}', 'Scroll up by a screen'],
|
||||
], [
|
||||
['tabs.close', 'Close a tab'],
|
||||
['tabs.reopen', 'Reopen closed tab'],
|
||||
['tabs.next?{count:1}', 'Select next Tab'],
|
||||
['tabs.prev?{count:1}', 'Select prev Tab'],
|
||||
['tabs.first', 'Select first tab'],
|
||||
['tabs.last', 'Select last tab'],
|
||||
['tabs.reload?{cache:true}', 'Reload current tab'],
|
||||
['tabs.pin.toggle', 'Toggle pinned state'],
|
||||
['tabs.duplicate', 'Dupplicate a tab'],
|
||||
], [
|
||||
['follow.start?{newTab:false}', 'Follow a link'],
|
||||
['follow.start?{newTab:true}', 'Follow a link in new tab'],
|
||||
['navigate.histories.prev', 'Go back in histories'],
|
||||
['navigate.histories.next', 'Go forward in histories'],
|
||||
['navigate.link.next', 'Open next link'],
|
||||
['navigate.link.prev', 'Open previous link'],
|
||||
['navigate.parent', 'Go to parent directory'],
|
||||
['navigate.root', 'Go to root directory'],
|
||||
], [
|
||||
['find.start', 'Start find mode'],
|
||||
['find.next', 'Find next word'],
|
||||
['find.prev', 'Find previous word'],
|
||||
], [
|
||||
['command.show', 'Open console'],
|
||||
['command.show.open?{alter:false}', 'Open URL'],
|
||||
['command.show.open?{alter:true}', 'Alter URL'],
|
||||
['command.show.tabopen?{alter:false}', 'Open URL in new Tab'],
|
||||
['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'],
|
||||
['command.show.winopen?{alter:false}', 'Open URL in new window'],
|
||||
['command.show.winopen?{alter:true}', 'Alter URL in new window'],
|
||||
['command.show.buffer', 'Open buffer command'],
|
||||
], [
|
||||
['addon.toggle.enabled', 'Enable or disable'],
|
||||
['urls.yank', 'Copy current URL'],
|
||||
['zoom.in', 'Zoom-in'],
|
||||
['zoom.out', 'Zoom-out'],
|
||||
['zoom.neutral', 'Reset zoom level'],
|
||||
]
|
||||
];
|
||||
|
||||
class KeymapsForm extends Component {
|
||||
|
||||
render() {
|
||||
return <div className='keymap-fields'>
|
||||
{
|
||||
KeyMapFields.map((group, index) => {
|
||||
return <div key={index} className='form-keymaps-form'>
|
||||
{
|
||||
group.map((field) => {
|
||||
let name = field[0];
|
||||
let label = field[1];
|
||||
let value = this.props.value[name];
|
||||
return <Input
|
||||
type='text' id={name} name={name} key={name}
|
||||
label={label} value={value}
|
||||
onChange={this.bindValue.bind(this)}
|
||||
/>;
|
||||
})
|
||||
}
|
||||
</div>;
|
||||
})
|
||||
}
|
||||
</div>;
|
||||
}
|
||||
|
||||
bindValue(e) {
|
||||
if (!this.props.onChange) {
|
||||
return;
|
||||
}
|
||||
|
||||
let next = Object.assign({}, this.props.value);
|
||||
next[e.target.name] = e.target.value;
|
||||
|
||||
this.props.onChange(next);
|
||||
}
|
||||
}
|
||||
|
||||
export default KeymapsForm;
|
||||
9
src/settings/components/form/keymaps-form.scss
Normal file
9
src/settings/components/form/keymaps-form.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.form-keymaps-form {
|
||||
column-count: 2;
|
||||
.keymap-fields-group {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.keymap-fields-group:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,62 +2,10 @@ import './site.scss';
|
|||
import { h, Component } from 'preact';
|
||||
import Input from './ui/input';
|
||||
import SearchEngineForm from './form/search-engine-form';
|
||||
import KeymapsForm from './form/keymaps-form';
|
||||
import * as settingActions from 'settings/actions/setting';
|
||||
import * as validator from 'shared/validators/setting';
|
||||
|
||||
const KeyMapFields = [
|
||||
[
|
||||
['scroll.vertically?{count:-1}', 'Scroll down'],
|
||||
['scroll.vertically?{count:1}', 'Scroll up'],
|
||||
['scroll.horizonally?{count:-1}', 'Scroll left'],
|
||||
['scroll.horizonally?{count:1}', 'Scroll right'],
|
||||
['scroll.home', 'Scroll leftmost'],
|
||||
['scroll.end', 'Scroll last'],
|
||||
['scroll.pages?{count:-0.5}', 'Scroll up by half of screen'],
|
||||
['scroll.pages?{count:0.5}', 'Scroll up by half of screen'],
|
||||
['scroll.pages?{count:-1}', 'Scroll up by a screen'],
|
||||
['scroll.pages?{count:1}', 'Scroll up by a screen'],
|
||||
], [
|
||||
['tabs.close', 'Close a tab'],
|
||||
['tabs.reopen', 'Reopen closed tab'],
|
||||
['tabs.next?{count:1}', 'Select next Tab'],
|
||||
['tabs.prev?{count:1}', 'Select prev Tab'],
|
||||
['tabs.first', 'Select first tab'],
|
||||
['tabs.last', 'Select last tab'],
|
||||
['tabs.reload?{cache:true}', 'Reload current tab'],
|
||||
['tabs.pin.toggle', 'Toggle pinned state'],
|
||||
['tabs.duplicate', 'Dupplicate a tab'],
|
||||
], [
|
||||
['follow.start?{newTab:false}', 'Follow a link'],
|
||||
['follow.start?{newTab:true}', 'Follow a link in new tab'],
|
||||
['navigate.histories.prev', 'Go back in histories'],
|
||||
['navigate.histories.next', 'Go forward in histories'],
|
||||
['navigate.link.next', 'Open next link'],
|
||||
['navigate.link.prev', 'Open previous link'],
|
||||
['navigate.parent', 'Go to parent directory'],
|
||||
['navigate.root', 'Go to root directory'],
|
||||
], [
|
||||
['find.start', 'Start find mode'],
|
||||
['find.next', 'Find next word'],
|
||||
['find.prev', 'Find previous word'],
|
||||
], [
|
||||
['command.show', 'Open console'],
|
||||
['command.show.open?{alter:false}', 'Open URL'],
|
||||
['command.show.open?{alter:true}', 'Alter URL'],
|
||||
['command.show.tabopen?{alter:false}', 'Open URL in new Tab'],
|
||||
['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'],
|
||||
['command.show.winopen?{alter:false}', 'Open URL in new window'],
|
||||
['command.show.winopen?{alter:true}', 'Alter URL in new window'],
|
||||
['command.show.buffer', 'Open buffer command'],
|
||||
], [
|
||||
['addon.toggle.enabled', 'Enable or disable'],
|
||||
['urls.yank', 'Copy current URL'],
|
||||
['zoom.in', 'Zoom-in'],
|
||||
['zoom.out', 'Zoom-out'],
|
||||
['zoom.neutral', 'Reset zoom level'],
|
||||
]
|
||||
];
|
||||
|
||||
class SettingsComponent extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
|
@ -89,33 +37,13 @@ class SettingsComponent extends Component {
|
|||
}
|
||||
|
||||
renderFormFields() {
|
||||
let keymapFields = KeyMapFields.map((group, index) => {
|
||||
return <div key={index} className='keymap-fields-group'>
|
||||
{
|
||||
group.map((field) => {
|
||||
let name = field[0];
|
||||
let label = field[1];
|
||||
let value = this.state.settings.form.keymaps[name];
|
||||
return <Input
|
||||
type='text'
|
||||
id={name}
|
||||
name={name}
|
||||
key={name}
|
||||
label={label}
|
||||
value={value}
|
||||
onChange={this.bindFormKeymapsValue.bind(this)}
|
||||
/>;
|
||||
})
|
||||
}
|
||||
</div>;
|
||||
});
|
||||
|
||||
return <div>
|
||||
<fieldset>
|
||||
<legend>Keybindings</legend>
|
||||
<div className='keymap-fields'>
|
||||
{ keymapFields }
|
||||
</div>
|
||||
<KeymapsForm
|
||||
value={this.state.settings.form.keymaps}
|
||||
onChange={this.bindKeymapsForm.bind(this)}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Search Engines</legend>
|
||||
|
|
@ -189,6 +117,13 @@ class SettingsComponent extends Component {
|
|||
this.context.store.dispatch(settingActions.save(next.settings));
|
||||
}
|
||||
|
||||
bindKeymapsForm(value) {
|
||||
let next = Object.assign({}, this.state);
|
||||
next.settings.form.keymaps = value;
|
||||
this.setState(next);
|
||||
this.context.store.dispatch(settingActions.save(next.settings));
|
||||
}
|
||||
|
||||
bindValue(e) {
|
||||
let next = Object.assign({}, this.state);
|
||||
|
||||
|
|
@ -203,14 +138,6 @@ class SettingsComponent extends Component {
|
|||
this.setState(next);
|
||||
this.context.store.dispatch(settingActions.save(next.settings));
|
||||
}
|
||||
|
||||
bindFormKeymapsValue(e) {
|
||||
let next = Object.assign({}, this.state);
|
||||
|
||||
next.settings.form.keymaps[e.target.name] = e.target.value;
|
||||
|
||||
this.context.store.dispatch(settingActions.save(next.settings));
|
||||
}
|
||||
}
|
||||
|
||||
export default SettingsComponent;
|
||||
|
|
|
|||
|
|
@ -24,14 +24,4 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.keymap-fields{
|
||||
column-count: 2;
|
||||
.keymap-fields-group {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.keymap-fields-group:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue