aboutsummaryrefslogtreecommitdiff
path: root/src/settings
diff options
context:
space:
mode:
Diffstat (limited to 'src/settings')
-rw-r--r--src/settings/components/form/keymaps-form.jsx95
-rw-r--r--src/settings/components/form/keymaps-form.scss9
-rw-r--r--src/settings/components/index.jsx97
-rw-r--r--src/settings/components/site.scss10
4 files changed, 116 insertions, 95 deletions
diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx
new file mode 100644
index 0000000..a112979
--- /dev/null
+++ b/src/settings/components/form/keymaps-form.jsx
@@ -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;
diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss
new file mode 100644
index 0000000..8b86c80
--- /dev/null
+++ b/src/settings/components/form/keymaps-form.scss
@@ -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;
+ }
+}
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 8fe7d4d..e5b46ad 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -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;
diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
index dcc52ce..c8dd422 100644
--- a/src/settings/components/site.scss
+++ b/src/settings/components/site.scss
@@ -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;
- }
- }
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-16 11:11:36 +0000