aboutsummaryrefslogtreecommitdiff
path: root/src/settings
diff options
context:
space:
mode:
Diffstat (limited to 'src/settings')
-rw-r--r--src/settings/actions/setting.js18
-rw-r--r--src/settings/components/form/keymaps-form.jsx23
-rw-r--r--src/settings/components/form/keymaps-form.scss8
-rw-r--r--src/settings/components/form/properties-form.jsx60
-rw-r--r--src/settings/components/form/properties-form.scss12
-rw-r--r--src/settings/components/index.jsx79
6 files changed, 164 insertions, 36 deletions
diff --git a/src/settings/actions/setting.js b/src/settings/actions/setting.js
index 1d01fda..92c9f8a 100644
--- a/src/settings/actions/setting.js
+++ b/src/settings/actions/setting.js
@@ -1,26 +1,22 @@
import actions from 'settings/actions';
import messages from 'shared/messages';
import DefaultSettings from 'shared/settings/default';
+import * as settingsStorage from 'shared/settings/storage';
import * as settingsValues from 'shared/settings/values';
const load = () => {
- return browser.storage.local.get('settings').then(({ settings }) => {
- if (!settings) {
- return set(DefaultSettings);
- }
- return set(Object.assign({}, DefaultSettings, settings));
- }, console.error);
+ return settingsStorage.loadRaw().then((settings) => {
+ return set(settings);
+ });
};
const save = (settings) => {
- return browser.storage.local.set({
- settings,
- }).then(() => {
+ return settingsStorage.save(settings).then(() => {
return browser.runtime.sendMessage({
type: messages.SETTINGS_RELOAD
- }).then(() => {
- return set(settings);
});
+ }).then(() => {
+ return set(settings);
});
};
diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx
index f64320c..eb77e52 100644
--- a/src/settings/components/form/keymaps-form.jsx
+++ b/src/settings/components/form/keymaps-form.jsx
@@ -8,12 +8,14 @@ const KeyMapFields = [
['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.home', 'Scroll to leftmost'],
+ ['scroll.end', 'Scroll to rightmost'],
+ ['scroll.top', 'Scroll to top'],
+ ['scroll.bottom', 'Scroll to bottom'],
['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":0.5}', 'Scroll down by half of screen'],
['scroll.pages?{"count":-1}', 'Scroll up by a screen'],
- ['scroll.pages?{"count":1}', 'Scroll up by a screen'],
+ ['scroll.pages?{"count":1}', 'Scroll down by a screen'],
], [
['tabs.close', 'Close a tab'],
['tabs.reopen', 'Reopen closed tab'],
@@ -21,7 +23,8 @@ const KeyMapFields = [
['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.reload?{"cache":false}', 'Reload current tab'],
+ ['tabs.reload?{"cache":true}', 'Reload with no caches'],
['tabs.pin.toggle', 'Toggle pinned state'],
['tabs.duplicate', 'Dupplicate a tab'],
], [
@@ -49,12 +52,16 @@ const KeyMapFields = [
], [
['addon.toggle.enabled', 'Enable or disable'],
['urls.yank', 'Copy current URL'],
+ ['urls.paste?{"newTab":false}', 'Open clipboard\'s URL in current tab'],
+ ['urls.paste?{"newTab":true}', 'Open clipboard\'s URL in new tab'],
['zoom.in', 'Zoom-in'],
['zoom.out', 'Zoom-out'],
['zoom.neutral', 'Reset zoom level'],
]
];
+const AllowdOps = [].concat(...KeyMapFields.map(group => group.map(e => e[0])));
+
class KeymapsForm extends Component {
render() {
@@ -62,10 +69,10 @@ class KeymapsForm extends Component {
if (!values) {
values = {};
}
- return <div className='keymap-fields'>
+ return <div className='form-keymaps-form'>
{
KeyMapFields.map((group, index) => {
- return <div key={index} className='form-keymaps-form'>
+ return <div key={index} className='form-keymaps-form-field-group'>
{
group.map((field) => {
let name = field[0];
@@ -96,4 +103,6 @@ class KeymapsForm extends Component {
}
}
+KeymapsForm.AllowdOps = AllowdOps;
+
export default KeymapsForm;
diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss
index 3a83910..1a4e5cd 100644
--- a/src/settings/components/form/keymaps-form.scss
+++ b/src/settings/components/form/keymaps-form.scss
@@ -1,9 +1,11 @@
.form-keymaps-form {
column-count: 3;
- .keymap-fields-group {
+
+ &-field-group {
margin-top: 24px;
}
- .keymap-fields-group:first-of-type {
- margin-top: 0;
+
+ &-field-group:first-of-type {
+ margin-top: 24px;
}
}
diff --git a/src/settings/components/form/properties-form.jsx b/src/settings/components/form/properties-form.jsx
new file mode 100644
index 0000000..55c8512
--- /dev/null
+++ b/src/settings/components/form/properties-form.jsx
@@ -0,0 +1,60 @@
+import './properties-form.scss';
+import { h, Component } from 'preact';
+
+class PropertiesForm extends Component {
+
+ render() {
+ let types = this.props.types;
+ let value = this.props.value;
+ if (!value) {
+ value = {};
+ }
+
+ return <div className='form-properties-form'>
+ {
+ Object.keys(types).map((name) => {
+ let type = types[name];
+ let inputType = null;
+ if (type === 'string') {
+ inputType = 'text';
+ } else if (type === 'number') {
+ inputType = 'number';
+ } else if (type === 'boolean') {
+ inputType = 'checkbox';
+ }
+ return <div key={name} className='form-properties-form-row'>
+ <label>
+ <span className='column-name'>{name}</span>
+ <input type={inputType} name={name}
+ className='column-input'
+ value={value[name] ? value[name] : ''}
+ onChange={this.bindValue.bind(this)}
+ checked={value[name]}
+ />
+ </label>
+ </div>;
+ })
+ }
+ </div>;
+ }
+
+ bindValue(e) {
+ if (!this.props.onChange) {
+ return;
+ }
+
+ let name = e.target.name;
+ let next = Object.assign({}, this.props.value);
+ if (e.target.type.toLowerCase() === 'checkbox') {
+ next[name] = e.target.checked;
+ } else if (e.target.type.toLowerCase() === 'number') {
+ next[name] = Number(e.target.value);
+ } else {
+ next[name] = e.target.value;
+ }
+
+ this.props.onChange(next);
+ }
+}
+
+export default PropertiesForm;
diff --git a/src/settings/components/form/properties-form.scss b/src/settings/components/form/properties-form.scss
new file mode 100644
index 0000000..7c9e167
--- /dev/null
+++ b/src/settings/components/form/properties-form.scss
@@ -0,0 +1,12 @@
+.form-properties-form {
+ &-row {
+ .column-name {
+ display: inline-block;
+ min-width: 5rem;
+ font-weight: bold;
+ }
+ .column-input {
+ line-height: 2.2rem;
+ }
+ }
+}
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 3961982..d7696a1 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -4,8 +4,10 @@ import Input from './ui/input';
import SearchForm from './form/search-form';
import KeymapsForm from './form/keymaps-form';
import BlacklistForm from './form/blacklist-form';
+import PropertiesForm from './form/properties-form';
+import * as properties from 'shared/settings/properties';
import * as settingActions from 'settings/actions/setting';
-import * as validator from 'shared/validators/setting';
+import * as validator from 'shared/settings/validator';
import * as settingsValues from 'shared/settings/values';
const DO_YOU_WANT_TO_CONTINUE =
@@ -65,6 +67,14 @@ class SettingsComponent extends Component {
onChange={value => this.bindForm('blacklist', value)}
/>
</fieldset>
+ <fieldset>
+ <legend>Properties</legend>
+ <PropertiesForm
+ types={properties.types}
+ value={this.state.settings.form.properties}
+ onChange={value => this.bindForm('properties', value)}
+ />
+ </fieldset>
</div>;
}
@@ -123,6 +133,18 @@ class SettingsComponent extends Component {
}
}
+ validateValue(e) {
+ let next = Object.assign({}, this.state);
+
+ next.errors.json = '';
+ try {
+ this.validate(e.target);
+ } catch (err) {
+ next.errors.json = err.message;
+ }
+ next.settings[e.target.name] = e.target.value;
+ }
+
bindForm(name, value) {
let next = Object.assign({}, this.state, {
settings: Object.assign({}, this.state.settings, {
@@ -136,15 +158,54 @@ class SettingsComponent extends Component {
bindValue(e) {
let next = Object.assign({}, this.state);
+ let error = false;
next.errors.json = '';
try {
this.validate(e.target);
} catch (err) {
next.errors.json = err.message;
+ error = true;
}
next.settings[e.target.name] = e.target.value;
+ this.setState(this.state);
+ if (!error) {
+ this.context.store.dispatch(settingActions.save(next.settings));
+ }
+ }
+
+ migrateToForm() {
+ let b = window.confirm(DO_YOU_WANT_TO_CONTINUE);
+ if (!b) {
+ this.setState(this.state);
+ return;
+ }
+ try {
+ validator.validate(JSON.parse(this.state.settings.json));
+ } catch (err) {
+ this.setState(this.state);
+ return;
+ }
+
+ let form = settingsValues.formFromJson(
+ this.state.settings.json, KeymapsForm.AllowdOps);
+ let next = Object.assign({}, this.state);
+ next.settings.form = form;
+ next.settings.source = 'form';
+ next.errors.json = '';
+
+ this.setState(next);
+ this.context.store.dispatch(settingActions.save(next.settings));
+ }
+
+ migrateToJson() {
+ let json = settingsValues.jsonFromForm(this.state.settings.form);
+ let next = Object.assign({}, this.state);
+ next.settings.json = json;
+ next.settings.source = 'json';
+ next.errors.json = '';
+
this.setState(next);
this.context.store.dispatch(settingActions.save(next.settings));
}
@@ -153,23 +214,11 @@ class SettingsComponent extends Component {
let from = this.state.settings.source;
let to = e.target.value;
- let next = Object.assign({}, this.state);
if (from === 'form' && to === 'json') {
- next.settings.json =
- settingsValues.jsonFromForm(this.state.settings.form);
+ this.migrateToJson();
} else if (from === 'json' && to === 'form') {
- let b = window.confirm(DO_YOU_WANT_TO_CONTINUE);
- if (!b) {
- this.setState(this.state);
- return;
- }
- next.settings.form =
- settingsValues.formFromJson(this.state.settings.json);
+ this.migrateToForm();
}
- next.settings.source = to;
-
- this.setState(next);
- this.context.store.dispatch(settingActions.save(next.settings));
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-15 19:40:17 +0000