src/components/setting.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import * as settingActions from '../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;
  }
}