jab2870
/
Vim-Vixen
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

keymaps form

Browse Source
jh-changes
Shin'ya Ueoka 7 years ago
parent 7b44b65247
commit 2641183a5b
4 changed files with 116 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

95
src/settings/components/form/keymaps-form.jsx
Unescape View 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
Unescape View 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;
}
}

97
src/settings/components/index.jsx
Unescape View File

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

10
src/settings/components/site.scss
Unescape View File

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