lib/depject/page/html/render/settings.jsView |
---|
1 | | -const { h } = require('mutant') |
| 1 … | +const { computed, h, map, Value, watch } = require('mutant') |
2 | 2 … | const nest = require('depnest') |
3 | 3 … | const packageInfo = require('../../../../../package.json') |
| 4 … | +const ExpanderHook = require('../../../../expander-hook') |
4 | 5 … | |
5 | 6 … | const themeNames = Object.keys(require('../../../../../styles')) |
| 7 … | +const electron = require('electron') |
6 | 8 … | |
7 | 9 … | exports.needs = nest({ |
8 | 10 … | 'settings.obs.get': 'first', |
9 | 11 … | 'intl.sync.locales': 'first', |
12 | 14 … | }) |
13 | 15 … | |
14 | 16 … | exports.gives = nest('page.html.render') |
15 | 17 … | |
| 18 … | +let availableDictionaries = Value([]) |
| 19 … | + |
| 20 … | +electron.ipcRenderer.on('setAvailableDictionaries', (ev, langs) => { |
| 21 … | + availableDictionaries.set(langs) |
| 22 … | +}) |
| 23 … | + |
16 | 24 … | exports.create = function (api) { |
17 | 25 … | return nest('page.html.render', function channel (path) { |
18 | 26 … | if (path !== '/settings') return |
19 | 27 … | const i18n = api.intl.sync.i18n |
30 | 38 … | ] |
31 | 39 … | |
32 | 40 … | const theme = api.settings.obs.get('patchwork.theme', 'light') |
33 | 41 … | const lang = api.settings.obs.get('patchwork.lang', '') |
| 42 … | + const spellcheckLangs = api.settings.obs.get('patchwork.spellcheckLangs', ['en-GB']) |
| 43 … | + const enableSpellCheck = api.settings.obs.get('patchwork.enableSpellCheck', true) |
| 44 … | + const spellcheckParams = computed([spellcheckLangs, enableSpellCheck], (langs, enabled) => ({ langs, enabled })) |
| 45 … | + watch(spellcheckParams, (params) => { |
| 46 … | + electron.ipcRenderer.invoke('setSpellcheckLangs', params) |
| 47 … | + }) |
34 | 48 … | const fontSize = api.settings.obs.get('patchwork.fontSize', '') |
35 | 49 … | const fontFamily = api.settings.obs.get('patchwork.fontFamily', '') |
36 | 50 … | const includeParticipating = api.settings.obs.get('patchwork.includeParticipating', false) |
37 | 51 … | const autoDeleteBlocked = api.settings.obs.get('patchwork.autoDeleteBlocked', false) |
65 | 79 … | ]) |
66 | 80 … | ]), |
67 | 81 … | |
68 | 82 … | h('section', [ |
69 | | - h('h2', i18n('Language')), |
| 83 … | + h('h2', i18n('Interface Language')), |
70 | 84 … | h('select', { |
71 | 85 … | style: { 'font-size': '120%' }, |
72 | 86 … | value: lang, |
73 | 87 … | 'ev-change': (ev) => lang.set(ev.target.value) |
79 | 93 … | ]) |
80 | 94 … | ]), |
81 | 95 … | |
82 | 96 … | h('section', [ |
| 97 … | + h('h2', i18n('Spellchecking')), |
| 98 … | + h('div', [ |
| 99 … | + checkbox(enableSpellCheck, { |
| 100 … | + label: i18n('Enable Spellchecking') |
| 101 … | + }) |
| 102 … | + ]), |
| 103 … | + h('h3', i18n('Languages to check for (select multiple)')), |
| 104 … | + h('select', { |
| 105 … | + disabled: computed(enableSpellCheck, (b) => !b), |
| 106 … | + multiple: true, |
| 107 … | + size: 10, |
| 108 … | + style: { 'font-size': '120%' }, |
| 109 … | + hooks: [SpellcheckChangeHook(spellcheckLangs)] |
| 110 … | + }, [ |
| 111 … | + map(availableDictionaries, (code) => h('option', { |
| 112 … | + value: code, |
| 113 … | + selected: spellcheckLangs().indexOf(code) !== -1, |
| 114 … | + }, [ |
| 115 … | + '[', code, '] ', getLocaleName(code) |
| 116 … | + ])) |
| 117 … | + ]) |
| 118 … | + ]), |
| 119 … | + |
| 120 … | + h('section', [ |
83 | 121 … | h('h2', i18n('Font Size')), |
84 | 122 … | h('select', { |
85 | 123 … | style: { 'font-size': '120%' }, |
86 | 124 … | value: fontSize, |
98 | 136 … | value: fontFamily, |
99 | 137 … | 'ev-change': (ev) => fontFamily.set(ev.target.value) |
100 | 138 … | }, [ |
101 | 139 … | h('option', { value: '' }, i18n('Default')), |
102 | | - fontFamilies.map(family => h('option', { value: family }, family)) |
| 140 … | + fontFamilies.map(family => h('option', { value: family, }, family)) |
103 | 141 … | ]) |
104 | 142 … | ]), |
105 | 143 … | h('h2', i18n('Notification Options')), |
106 | 144 … | |
158 | 196 … | 'ev-change': (ev) => param.set(ev.target.checked) |
159 | 197 … | }), ' ', label |
160 | 198 … | ]) |
161 | 199 … | } |
| 200 … | + |
| 201 … | +function SpellcheckChangeHook (spellcheckLangs) { |
| 202 … | + return function (element) { |
| 203 … | + element.addEventListener('change', (ev) => { |
| 204 … | + const newLangs = [] |
| 205 … | + for (const c of ev.target.children) { |
| 206 … | + if (c.selected) { |
| 207 … | + newLangs.push(c.value) |
| 208 … | + } |
| 209 … | + } |
| 210 … | + spellcheckLangs.set(newLangs) |
| 211 … | + }) |
| 212 … | + } |
| 213 … | +} |