From 58123210ab4cdd4a1f2b4720a0abbd88908baa06 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 8 Oct 2017 14:44:21 +0900 Subject: separate settings --- src/settings/actions/index.js | 4 ++++ src/settings/actions/setting.js | 31 ++++++++++++++++++++++++++ src/settings/components/setting.js | 45 ++++++++++++++++++++++++++++++++++++++ src/settings/index.html | 18 +++++++++++++++ src/settings/index.js | 15 +++++++++++++ src/settings/reducers/setting.js | 17 ++++++++++++++ src/settings/site.scss | 8 +++++++ 7 files changed, 138 insertions(+) create mode 100644 src/settings/actions/index.js create mode 100644 src/settings/actions/setting.js create mode 100644 src/settings/components/setting.js create mode 100644 src/settings/index.html create mode 100644 src/settings/index.js create mode 100644 src/settings/reducers/setting.js create mode 100644 src/settings/site.scss (limited to 'src/settings') diff --git a/src/settings/actions/index.js b/src/settings/actions/index.js new file mode 100644 index 0000000..8c212c2 --- /dev/null +++ b/src/settings/actions/index.js @@ -0,0 +1,4 @@ +export default { + // Settings + SETTING_SET_SETTINGS: 'setting.set.settings', +}; diff --git a/src/settings/actions/setting.js b/src/settings/actions/setting.js new file mode 100644 index 0000000..697bcf0 --- /dev/null +++ b/src/settings/actions/setting.js @@ -0,0 +1,31 @@ +import actions from 'settings/actions'; +import messages from 'shared/messages'; +import DefaultSettings from 'shared/default-settings'; + +const load = () => { + return browser.storage.local.get('settings').then((value) => { + if (value.settings) { + return set(value.settings); + } + return set(DefaultSettings); + }, 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/settings/components/setting.js b/src/settings/components/setting.js new file mode 100644 index 0000000..14482a3 --- /dev/null +++ b/src/settings/components/setting.js @@ -0,0 +1,45 @@ +import * as settingActions from 'settings/actions/setting'; +import { validate } from 'shared/validators/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)); + + let plainJson = form.elements['plain-json']; + plainJson.addEventListener('input', this.onPlainJsonChanged.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(); + } + + 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(); + + 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/settings/index.html b/src/settings/index.html new file mode 100644 index 0000000..99d6c6b --- /dev/null +++ b/src/settings/index.html @@ -0,0 +1,18 @@ + + + + + + +

Configure

+ +

Home page

+ + + + diff --git a/src/settings/index.js b/src/settings/index.js new file mode 100644 index 0000000..8c60f80 --- /dev/null +++ b/src/settings/index.js @@ -0,0 +1,15 @@ +import './site.scss'; +import SettingComponent from 'settings/components/setting'; +import settingReducer from 'settings/reducers/setting'; +import { createStore } from 'store'; + +const store = createStore(settingReducer); +let settingComponent = null; + +store.subscribe(() => { + settingComponent.update(); +}); + +document.addEventListener('DOMContentLoaded', () => { + settingComponent = new SettingComponent(document.body, store); +}); diff --git a/src/settings/reducers/setting.js b/src/settings/reducers/setting.js new file mode 100644 index 0000000..f7d9242 --- /dev/null +++ b/src/settings/reducers/setting.js @@ -0,0 +1,17 @@ +import actions from 'settings/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; + } +} + diff --git a/src/settings/site.scss b/src/settings/site.scss new file mode 100644 index 0000000..5707c8a --- /dev/null +++ b/src/settings/site.scss @@ -0,0 +1,8 @@ +.vimvixen-settings-form { + textarea[name=plain-json] { + font-family: monospace; + width: 100%; + min-height: 64ex; + resize: vertical; + } +} -- cgit v1.2.3 From 2faf44af7443b3f858e15d63295a490afba83b4e Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 8 Oct 2017 15:11:09 +0900 Subject: move store to shared --- src/background/index.js | 2 +- src/console/index.js | 2 +- src/content/index.js | 2 +- src/settings/index.js | 2 +- src/shared/store/index.js | 53 +++++++++++++++++++ src/store/index.js | 53 ------------------- test/shared/store/index.test.js | 111 ++++++++++++++++++++++++++++++++++++++++ test/store/index.test.js | 111 ---------------------------------------- 8 files changed, 168 insertions(+), 168 deletions(-) create mode 100644 src/shared/store/index.js delete mode 100644 src/store/index.js create mode 100644 test/shared/store/index.test.js delete mode 100644 test/store/index.test.js (limited to 'src/settings') diff --git a/src/background/index.js b/src/background/index.js index 587cc0b..6ba37eb 100644 --- a/src/background/index.js +++ b/src/background/index.js @@ -2,7 +2,7 @@ import * as settingsActions from 'settings/actions/setting'; import messages from 'shared/messages'; import BackgroundComponent from 'background/components/background'; import reducers from 'settings/reducers/setting'; -import { createStore } from 'store'; +import { createStore } from 'shared/store'; const store = createStore(reducers, (e, sender) => { console.error('Vim-Vixen:', e); diff --git a/src/console/index.js b/src/console/index.js index 1bcf8bc..7396a96 100644 --- a/src/console/index.js +++ b/src/console/index.js @@ -3,7 +3,7 @@ import messages from 'shared/messages'; import CompletionComponent from 'console/components/completion'; import ConsoleComponent from 'console/components/console'; import reducers from 'console/reducers'; -import { createStore } from 'store'; +import { createStore } from 'shared/store'; import * as consoleActions from 'console/actions/console'; const store = createStore(reducers); diff --git a/src/content/index.js b/src/content/index.js index 00873cc..adea871 100644 --- a/src/content/index.js +++ b/src/content/index.js @@ -1,7 +1,7 @@ import './console-frame.scss'; import * as consoleFrames from './console-frames'; import * as settingActions from 'settings/actions/setting'; -import { createStore } from 'store'; +import { createStore } from 'shared/store'; import ContentInputComponent from 'content/components/content-input'; import KeymapperComponent from 'content/components/keymapper'; import FollowComponent from 'content/components/follow'; diff --git a/src/settings/index.js b/src/settings/index.js index 8c60f80..c8d6cc4 100644 --- a/src/settings/index.js +++ b/src/settings/index.js @@ -1,7 +1,7 @@ import './site.scss'; import SettingComponent from 'settings/components/setting'; import settingReducer from 'settings/reducers/setting'; -import { createStore } from 'store'; +import { createStore } from 'shared/store'; const store = createStore(settingReducer); let settingComponent = null; diff --git a/src/shared/store/index.js b/src/shared/store/index.js new file mode 100644 index 0000000..2fafdf1 --- /dev/null +++ b/src/shared/store/index.js @@ -0,0 +1,53 @@ +class Store { + constructor(reducer, catcher) { + this.reducer = reducer; + this.catcher = catcher; + this.subscribers = []; + try { + this.state = this.reducer(undefined, {}); + } catch (e) { + catcher(e); + } + } + + dispatch(action, sender) { + if (action instanceof Promise) { + action.then((a) => { + this.transitNext(a, sender); + }).catch((e) => { + this.catcher(e, sender); + }); + } else { + try { + this.transitNext(action, sender); + } catch (e) { + this.catcher(e, sender); + } + } + return action; + } + + getState() { + return this.state; + } + + subscribe(callback) { + this.subscribers.push(callback); + } + + transitNext(action, sender) { + let newState = this.reducer(this.state, action); + if (JSON.stringify(this.state) !== JSON.stringify(newState)) { + this.state = newState; + this.subscribers.forEach(f => f(sender)); + } + } +} + +const empty = () => {}; + +const createStore = (reducer, catcher = empty) => { + return new Store(reducer, catcher); +}; + +export { createStore }; diff --git a/src/store/index.js b/src/store/index.js deleted file mode 100644 index 2fafdf1..0000000 --- a/src/store/index.js +++ /dev/null @@ -1,53 +0,0 @@ -class Store { - constructor(reducer, catcher) { - this.reducer = reducer; - this.catcher = catcher; - this.subscribers = []; - try { - this.state = this.reducer(undefined, {}); - } catch (e) { - catcher(e); - } - } - - dispatch(action, sender) { - if (action instanceof Promise) { - action.then((a) => { - this.transitNext(a, sender); - }).catch((e) => { - this.catcher(e, sender); - }); - } else { - try { - this.transitNext(action, sender); - } catch (e) { - this.catcher(e, sender); - } - } - return action; - } - - getState() { - return this.state; - } - - subscribe(callback) { - this.subscribers.push(callback); - } - - transitNext(action, sender) { - let newState = this.reducer(this.state, action); - if (JSON.stringify(this.state) !== JSON.stringify(newState)) { - this.state = newState; - this.subscribers.forEach(f => f(sender)); - } - } -} - -const empty = () => {}; - -const createStore = (reducer, catcher = empty) => { - return new Store(reducer, catcher); -}; - -export { createStore }; diff --git a/test/shared/store/index.test.js b/test/shared/store/index.test.js new file mode 100644 index 0000000..133033b --- /dev/null +++ b/test/shared/store/index.test.js @@ -0,0 +1,111 @@ +import { expect } from "chai"; +import { createStore } from 'shared/store'; + +describe("Store class", () => { + const reducer = (state, action) => { + if (state == undefined) { + return 0; + } + return state + action; + }; + + describe("#dispatch", () => { + it('transit status by immediate action', () => { + let store = createStore(reducer); + store.dispatch(10); + expect(store.getState()).to.equal(10); + + store.dispatch(-20); + expect(store.getState()).to.equal(-10); + }); + + it('returns next state by immediate action', () => { + let store = createStore(reducer); + let dispatchedAction = store.dispatch(11); + expect(dispatchedAction).to.equal(11); + }); + + it('transit status by Promise action', () => { + let store = createStore(reducer); + let p1 = Promise.resolve(10); + + return store.dispatch(p1).then(() => { + expect(store.getState()).to.equal(10); + }).then(() => { + store.dispatch(Promise.resolve(-20)); + }).then(() => { + expect(store.getState()).to.equal(-10); + }); + }); + + it('returns next state by promise action', () => { + let store = createStore(reducer); + let dispatchedAction = store.dispatch(Promise.resolve(11)); + return dispatchedAction.then((value) => { + expect(value).to.equal(11); + }); + }); + }); + + describe("#subscribe", () => { + it('invoke callback', (done) => { + let store = createStore(reducer); + store.subscribe(() => { + expect(store.getState()).to.equal(15); + done(); + }); + store.dispatch(15); + }); + + it('propagate sender object', (done) => { + let store = createStore(reducer); + store.subscribe((sender) => { + expect(sender).to.equal('sender'); + done(); + }); + store.dispatch(15, 'sender'); + }); + }) + + describe("catcher", () => { + it('catch an error in reducer on initializing by immediate action', (done) => { + let store = createStore(() => { + throw new Error(); + }, (e) => { + expect(e).to.be.an('error'); + done(); + }); + }); + + it('catch an error in reducer on initializing by immediate action', (done) => { + let store = createStore((state, action) => { + if (state === undefined) return 0; + throw new Error(); + }, (e) => { + expect(e).to.be.an('error'); + done(); + }); + store.dispatch(20); + }); + + it('catch an error in reducer on initializing by promise action', (done) => { + let store = createStore((state, action) => { + if (state === undefined) return 0; + throw new Error(); + }, (e) => { + expect(e).to.be.an('error'); + done(); + }); + store.dispatch(Promise.resolve(20)); + }); + + it('catch an error in promise action', (done) => { + let store = createStore((state, action) => 0, (e) => { + expect(e).to.be.an('error'); + done(); + }); + store.dispatch(new Promise(() => { throw new Error() })); + }); + }) +}); + diff --git a/test/store/index.test.js b/test/store/index.test.js deleted file mode 100644 index 5dce715..0000000 --- a/test/store/index.test.js +++ /dev/null @@ -1,111 +0,0 @@ -import { expect } from "chai"; -import { createStore } from 'store'; - -describe("Store class", () => { - const reducer = (state, action) => { - if (state == undefined) { - return 0; - } - return state + action; - }; - - describe("#dispatch", () => { - it('transit status by immediate action', () => { - let store = createStore(reducer); - store.dispatch(10); - expect(store.getState()).to.equal(10); - - store.dispatch(-20); - expect(store.getState()).to.equal(-10); - }); - - it('returns next state by immediate action', () => { - let store = createStore(reducer); - let dispatchedAction = store.dispatch(11); - expect(dispatchedAction).to.equal(11); - }); - - it('transit status by Promise action', () => { - let store = createStore(reducer); - let p1 = Promise.resolve(10); - - return store.dispatch(p1).then(() => { - expect(store.getState()).to.equal(10); - }).then(() => { - store.dispatch(Promise.resolve(-20)); - }).then(() => { - expect(store.getState()).to.equal(-10); - }); - }); - - it('returns next state by promise action', () => { - let store = createStore(reducer); - let dispatchedAction = store.dispatch(Promise.resolve(11)); - return dispatchedAction.then((value) => { - expect(value).to.equal(11); - }); - }); - }); - - describe("#subscribe", () => { - it('invoke callback', (done) => { - let store = createStore(reducer); - store.subscribe(() => { - expect(store.getState()).to.equal(15); - done(); - }); - store.dispatch(15); - }); - - it('propagate sender object', (done) => { - let store = createStore(reducer); - store.subscribe((sender) => { - expect(sender).to.equal('sender'); - done(); - }); - store.dispatch(15, 'sender'); - }); - }) - - describe("catcher", () => { - it('catch an error in reducer on initializing by immediate action', (done) => { - let store = createStore(() => { - throw new Error(); - }, (e) => { - expect(e).to.be.an('error'); - done(); - }); - }); - - it('catch an error in reducer on initializing by immediate action', (done) => { - let store = createStore((state, action) => { - if (state === undefined) return 0; - throw new Error(); - }, (e) => { - expect(e).to.be.an('error'); - done(); - }); - store.dispatch(20); - }); - - it('catch an error in reducer on initializing by promise action', (done) => { - let store = createStore((state, action) => { - if (state === undefined) return 0; - throw new Error(); - }, (e) => { - expect(e).to.be.an('error'); - done(); - }); - store.dispatch(Promise.resolve(20)); - }); - - it('catch an error in promise action', (done) => { - let store = createStore((state, action) => 0, (e) => { - expect(e).to.be.an('error'); - done(); - }); - store.dispatch(new Promise(() => { throw new Error() })); - }); - }) -}); - -- cgit v1.2.3