From 61806a4e7ff01e8b5fdfdcef0308a2c41fc98778 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 1 Oct 2017 10:59:47 +0900 Subject: setting as redux --- src/actions/index.js | 5 ++++- src/actions/setting.js | 27 +++++++++++++++++++++++++++ src/components/setting.js | 31 +++++++++++++++++++++++++++++++ src/pages/settings.js | 29 +++++++++++------------------ src/reducers/setting.js | 17 +++++++++++++++++ 5 files changed, 90 insertions(+), 19 deletions(-) create mode 100644 src/actions/setting.js create mode 100644 src/components/setting.js create mode 100644 src/reducers/setting.js (limited to 'src') diff --git a/src/actions/index.js b/src/actions/index.js index 2aa28fa..63c36d2 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -13,5 +13,8 @@ export default { // Completion COMPLETION_SET_ITEMS: 'completion.set.items', COMPLETION_SELECT_NEXT: 'completions.select.next', - COMPLETION_SELECT_PREV: 'completions.select.prev' + COMPLETION_SELECT_PREV: 'completions.select.prev', + + // Settings + SETTING_SET_SETTINGS: 'setting.set.settings', }; diff --git a/src/actions/setting.js b/src/actions/setting.js new file mode 100644 index 0000000..d8e889e --- /dev/null +++ b/src/actions/setting.js @@ -0,0 +1,27 @@ +import actions from '../actions'; +import messages from '../content/messages'; + +const load = () => { + return browser.storage.local.get('settings').then((value) => { + return set(value.settings); + }, console.error); +}; + +const save = (settings) => { + return browser.storage.local.set({ + settings + }).then(() => { + return browser.runtime.sendMessage({ + type: messages.SETTINGS_RELOAD + }); + }); +}; + +const set = (settings) => { + return { + type: actions.SETTING_SET_SETTINGS, + settings, + }; +}; + +export { load, save, set }; diff --git a/src/components/setting.js b/src/components/setting.js new file mode 100644 index 0000000..afbd56c --- /dev/null +++ b/src/components/setting.js @@ -0,0 +1,31 @@ +import * as settingActions from '../actions/setting'; + +export default class SettingComponent { + constructor(wrapper, store) { + this.wrapper = wrapper; + this.store = store; + + let doc = wrapper.ownerDocument; + let form = doc.getElementById('vimvixen-settings-form'); + form.addEventListener('submit', this.onSubmit.bind(this)); + + store.dispatch(settingActions.load()); + } + + onSubmit(e) { + let settings = { + json: e.target.elements['plain-json'].value, + }; + this.store.dispatch(settingActions.save(settings)); + e.preventDefault(); + } + + update() { + let { settings } = this.store.getState(); + + let doc = this.wrapper.ownerDocument; + let form = doc.getElementById('vimvixen-settings-form'); + let plainJsonInput = form.elements['plain-json']; + plainJsonInput.value = settings.json; + } +} diff --git a/src/pages/settings.js b/src/pages/settings.js index 6e00ed3..9bad967 100644 --- a/src/pages/settings.js +++ b/src/pages/settings.js @@ -1,22 +1,15 @@ import './settings.scss'; -import messages from '../content/messages'; +import SettingComponent from '../components/setting'; +import settingReducer from '../reducers/setting'; +import * as store from '../store'; -document.addEventListener('DOMContentLoaded', () => { - let form = document.getElementById('vimvixen-settings-form'); - form.addEventListener('submit', (e) => { - e.preventDefault(); - browser.storage.local.set({ - settings: { - json: e.target.elements['plain-json'].value - } - }).then(() => { - return browser.runtime.sendMessage({ - type: messages.SETTINGS_RELOAD - }); - }); - }); +const settingStore = store.createStore(settingReducer); +let settingComponent = null; + +settingStore.subscribe(() => { + settingComponent.update(); +}); - browser.storage.local.get('settings').then((value) => { - form.elements['plain-json'].value = value.settings.json; - }, console.error); +document.addEventListener('DOMContentLoaded', () => { + settingComponent = new SettingComponent(document.body, settingStore); }); diff --git a/src/reducers/setting.js b/src/reducers/setting.js new file mode 100644 index 0000000..735d4fb --- /dev/null +++ b/src/reducers/setting.js @@ -0,0 +1,17 @@ +import actions from '../actions'; + +const defaultState = { + settings: {} +}; + +export default function reducer(state = defaultState, action = {}) { + switch (action.type) { + case actions.SETTING_SET_SETTINGS: + return Object.assign({}, state, { + settings: action.settings, + }); + default: + return state; + } +} + -- cgit v1.2.3 From 2d0968a70b78710e854075d96a8e643e2cd2b3a7 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 1 Oct 2017 11:58:34 +0900 Subject: add setting validator --- src/shared/validators/setting.js | 33 +++++++++++++++++++++++++++++++++ test/shared/validators/setting.test.js | 25 +++++++++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 src/shared/validators/setting.js create mode 100644 test/shared/validators/setting.test.js (limited to 'src') diff --git a/src/shared/validators/setting.js b/src/shared/validators/setting.js new file mode 100644 index 0000000..df04e50 --- /dev/null +++ b/src/shared/validators/setting.js @@ -0,0 +1,33 @@ +import operations from '../../operations'; + +const VALID_TOP_KEYS = ['keymaps']; +const VALID_OPERATION_VALUES = Object.keys(operations).map((key) => { + return operations[key]; +}); + +const validateInvalidTopKeys = (settings) => { + let invalidKey = Object.keys(settings).find((key) => { + return !VALID_TOP_KEYS.includes(key); + }); + if (invalidKey) { + throw Error(`Unknown key: "${invalidKey}"`); + } +}; + +const validateKeymaps = (keymaps) => { + for (let key of Object.keys(keymaps)) { + let value = keymaps[key]; + if (!VALID_OPERATION_VALUES.includes(value.type)) { + throw Error(`Unknown operation: "${value.type}"`); + } + } +}; + +const validate = (settings) => { + validateInvalidTopKeys(settings); + if (settings.keymaps) { + validateKeymaps(settings.keymaps); + } +}; + +export { validate }; diff --git a/test/shared/validators/setting.test.js b/test/shared/validators/setting.test.js new file mode 100644 index 0000000..8bf0cbe --- /dev/null +++ b/test/shared/validators/setting.test.js @@ -0,0 +1,25 @@ +import { expect } from "chai"; +import { validate } from '../../../src/shared/validators/setting'; + +describe("setting validator", () => { + describe("unknown top keys", () => { + it('throws an error for unknown settings', () => { + let settings = { keymaps: {}, poison: 123 }; + let fn = validate.bind(undefined, settings) + expect(fn).to.throw(Error, 'poison'); + }) + }); + + describe("keymaps settings", () => { + it('throws an error for unknown operation', () => { + let settings = { + keymaps: { + a: { 'type': 'scroll.home' }, + b: { 'type': 'poison.dressing' }, + } + }; + let fn = validate.bind(undefined, settings) + expect(fn).to.throw(Error, 'poison.dressing'); + }); + }); +}); -- cgit v1.2.3 From 8c9051076f7782b898ab2f848b9afe4a694c3065 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 1 Oct 2017 12:15:35 +0900 Subject: use validation on settings --- src/components/setting.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'src') diff --git a/src/components/setting.js b/src/components/setting.js index afbd56c..1f3b3fe 100644 --- a/src/components/setting.js +++ b/src/components/setting.js @@ -1,4 +1,5 @@ import * as settingActions from '../actions/setting'; +import { validate } from '../shared/validators/setting'; export default class SettingComponent { constructor(wrapper, store) { @@ -9,6 +10,9 @@ export default class SettingComponent { let form = doc.getElementById('vimvixen-settings-form'); form.addEventListener('submit', this.onSubmit.bind(this)); + let plainJson = form.elements['plain-json']; + plainJson.addEventListener('input', this.onPlainJsonChanged.bind(this)); + store.dispatch(settingActions.load()); } @@ -20,6 +24,16 @@ export default class SettingComponent { e.preventDefault(); } + onPlainJsonChanged(e) { + try { + let settings = JSON.parse(e.target.value); + validate(settings); + e.target.setCustomValidity(''); + } catch (err) { + e.target.setCustomValidity(err.message); + } + } + update() { let { settings } = this.store.getState(); -- cgit v1.2.3