save settings on the fly

jh-changes
Shin'ya Ueoka 7 years ago
parent 6669f6b6ef
commit 805d1395fc
  1. 6
      src/settings/actions/setting.js
  2. 59
      src/settings/components/index.jsx
  3. 2
      src/settings/components/site.scss
  4. 2
      src/settings/reducers/setting.js
  5. 1
      src/shared/default-settings.js

@ -3,8 +3,7 @@ import messages from 'shared/messages';
import DefaultSettings from 'shared/default-settings'; import DefaultSettings from 'shared/default-settings';
const load = () => { const load = () => {
return browser.storage.local.get('settings').then((value) => { return browser.storage.local.get('settings').then(({ settings }) => {
let settings = value.settings;
if (settings) { if (settings) {
return set(settings); return set(settings);
} }
@ -18,6 +17,8 @@ const save = (settings) => {
}).then(() => { }).then(() => {
return browser.runtime.sendMessage({ return browser.runtime.sendMessage({
type: messages.SETTINGS_RELOAD type: messages.SETTINGS_RELOAD
}).then(() => {
return set(settings);
}); });
}); });
}; };
@ -25,6 +26,7 @@ const save = (settings) => {
const set = (settings) => { const set = (settings) => {
return { return {
type: actions.SETTING_SET_SETTINGS, type: actions.SETTING_SET_SETTINGS,
source: settings.source,
json: settings.json, json: settings.json,
value: JSON.parse(settings.json), value: JSON.parse(settings.json),
}; };

@ -2,7 +2,7 @@ import './site.scss';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import * as settingActions from 'settings/actions/setting'; import * as settingActions from 'settings/actions/setting';
import { validate } from 'shared/validators/setting'; import * as validator from 'shared/validators/setting';
class SettingsComponent extends React.Component { class SettingsComponent extends React.Component {
constructor(props, context) { constructor(props, context) {
@ -22,39 +22,42 @@ class SettingsComponent extends React.Component {
stateChanged() { stateChanged() {
let settings = this.context.store.getState(); let settings = this.context.store.getState();
this.setState({ settings }); this.setState({
settings: {
source: settings.source,
json: settings.json,
}
});
} }
render() { render() {
return ( return (
<div> <div>
<h1>Configure Vim-Vixen</h1> <h1>Configure Vim-Vixen</h1>
<form className='vimvixen-settings-form'>
<p>Load settings from:</p>
<input type='radio' id='setting-source-json'
name='source'
value='json'
onChange={this.bindAndSave.bind(this)}
checked={this.state.settings.source === 'json'} />
<label htmlFor='settings-source-json'>JSON</label>
<form id='vimvixen-settings-form' className='vimvixen-settings-form' <textarea name='json' spellCheck='false'
onSubmit={this.saveSettings.bind(this)}> onInput={this.validate.bind(this)}
<label htmlFor='load-from-json'>Load from JSON:</label>
<textarea name='plain-json' spellCheck='false'
onInput={this.onPlainJsonChanged.bind(this)}
onChange={this.bindValue.bind(this)} onChange={this.bindValue.bind(this)}
onBlur={this.bindAndSave.bind(this)}
value={this.state.settings.json} /> value={this.state.settings.json} />
<button type='submit'>Save</button>
</form> </form>
</div> </div>
); );
} }
saveSettings(e) { validate(e) {
let settings = {
json: e.target.elements['plain-json'].value,
};
this.context.store.dispatch(settingActions.save(settings));
e.preventDefault();
}
onPlainJsonChanged(e) {
try { try {
let settings = JSON.parse(e.target.value); let settings = JSON.parse(e.target.value);
validate(settings); validator.validate(settings);
e.target.setCustomValidity(''); e.target.setCustomValidity('');
} catch (err) { } catch (err) {
e.target.setCustomValidity(err.message); e.target.setCustomValidity(err.message);
@ -62,12 +65,22 @@ class SettingsComponent extends React.Component {
} }
bindValue(e) { bindValue(e) {
let next = Object.assign({}, this.state, { let nextSettings = Object.assign({}, this.state.settings);
settings: { nextSettings[e.target.name] = e.target.value;
'json': e.target.value,
this.setState({ settings: nextSettings });
}
bindAndSave(e) {
this.bindValue(e);
try {
let json = this.state.settings.json;
validator.validate(JSON.parse(json));
this.context.store.dispatch(settingActions.save(this.state.settings));
} catch (err) {
// error already shown
} }
});
this.setState(next);
} }
} }

@ -1,5 +1,5 @@
.vimvixen-settings-form { .vimvixen-settings-form {
textarea[name=plain-json] { textarea[name=json] {
font-family: monospace; font-family: monospace;
width: 100%; width: 100%;
min-height: 64ex; min-height: 64ex;

@ -1,6 +1,7 @@
import actions from 'settings/actions'; import actions from 'settings/actions';
const defaultState = { const defaultState = {
source: '',
json: '', json: '',
value: {} value: {}
}; };
@ -9,6 +10,7 @@ export default function reducer(state = defaultState, action = {}) {
switch (action.type) { switch (action.type) {
case actions.SETTING_SET_SETTINGS: case actions.SETTING_SET_SETTINGS:
return { return {
source: action.source,
json: action.json, json: action.json,
value: action.value, value: action.value,
}; };

@ -1,4 +1,5 @@
export default { export default {
source: 'json',
json: `{ json: `{
"keymaps": { "keymaps": {
"0": { "type": "scroll.home" }, "0": { "type": "scroll.home" },