keymaps form

jh-changes
Shin'ya Ueoka 7 years ago
parent 7b44b65247
commit 2641183a5b
  1. 95
      src/settings/components/form/keymaps-form.jsx
  2. 9
      src/settings/components/form/keymaps-form.scss
  3. 97
      src/settings/components/index.jsx
  4. 10
      src/settings/components/site.scss

@ -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;

@ -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 { h, Component } from 'preact';
import Input from './ui/input'; import Input from './ui/input';
import SearchEngineForm from './form/search-engine-form'; import SearchEngineForm from './form/search-engine-form';
import KeymapsForm from './form/keymaps-form';
import * as settingActions from 'settings/actions/setting'; import * as settingActions from 'settings/actions/setting';
import * as validator from 'shared/validators/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 { class SettingsComponent extends Component {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
@ -89,33 +37,13 @@ class SettingsComponent extends Component {
} }
renderFormFields() { 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> return <div>
<fieldset> <fieldset>
<legend>Keybindings</legend> <legend>Keybindings</legend>
<div className='keymap-fields'> <KeymapsForm
{ keymapFields } value={this.state.settings.form.keymaps}
</div> onChange={this.bindKeymapsForm.bind(this)}
/>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Search Engines</legend> <legend>Search Engines</legend>
@ -189,6 +117,13 @@ class SettingsComponent extends Component {
this.context.store.dispatch(settingActions.save(next.settings)); 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) { bindValue(e) {
let next = Object.assign({}, this.state); let next = Object.assign({}, this.state);
@ -203,14 +138,6 @@ class SettingsComponent extends Component {
this.setState(next); this.setState(next);
this.context.store.dispatch(settingActions.save(next.settings)); 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; export default SettingsComponent;

@ -24,14 +24,4 @@
font-weight: bold; font-weight: bold;
} }
} }
.keymap-fields{
column-count: 2;
.keymap-fields-group {
margin-top: 24px;
}
.keymap-fields-group:first-of-type {
margin-top: 0;
}
}
} }