diff options
Diffstat (limited to 'src/settings')
-rw-r--r-- | src/settings/actions/index.js | 4 | ||||
-rw-r--r-- | src/settings/actions/setting.js | 31 | ||||
-rw-r--r-- | src/settings/components/setting.js | 45 | ||||
-rw-r--r-- | src/settings/index.html | 18 | ||||
-rw-r--r-- | src/settings/index.js | 15 | ||||
-rw-r--r-- | src/settings/reducers/setting.js | 17 | ||||
-rw-r--r-- | src/settings/site.scss | 8 |
7 files changed, 138 insertions, 0 deletions
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 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + </head> + <body> + <h1>Configure</h1> + + <h2>Home page</h2> + <form id='vimvixen-settings-form' class='vimvixen-settings-form'> + <label for='load-from-json'>Load from JSON:</label> + <textarea name='plain-json' spellcheck='false'></textarea> + + <button type='submit'>Save</button> + </form> + <script src='settings.js'></script> + </body> +</html> diff --git a/src/settings/index.js b/src/settings/index.js new file mode 100644 index 0000000..c8d6cc4 --- /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 'shared/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; + } +} |