Files: 56cb52d74a5a9b11c319182d03631bd5c99b3cb8 / modules / page / html / render / settings.js
4277 bytesRaw
1 | var { h } = require('mutant') |
2 | var nest = require('depnest') |
3 | var packageInfo = require('../../../../package.json') |
4 | |
5 | var themeNames = Object.keys(require('../../../../styles')) |
6 | |
7 | exports.needs = nest({ |
8 | 'settings.obs.get': 'first', |
9 | 'settings.sync.set': 'first', |
10 | 'intl.sync.locales': 'first', |
11 | 'intl.sync.i18n': 'first', |
12 | 'intl.sync.localeNames': 'first' |
13 | }) |
14 | |
15 | exports.gives = nest('page.html.render') |
16 | |
17 | exports.create = function (api) { |
18 | return nest('page.html.render', function channel (path) { |
19 | if (path !== '/settings') return |
20 | const i18n = api.intl.sync.i18n |
21 | |
22 | const locales = api.intl.sync.locales() |
23 | const localeNameLookup = api.intl.sync.localeNames() |
24 | const fontSizes = ['8px', '10px', '12px', '14px', '16px', '18px', '20px'] |
25 | |
26 | const theme = api.settings.obs.get('patchwork.theme', 'light') |
27 | const lang = api.settings.obs.get('patchwork.lang', '') |
28 | const fontSize = api.settings.obs.get('patchwork.fontSize', '') |
29 | const filterFollowing = api.settings.obs.get('filters.following') |
30 | const filterSubscriptions = api.settings.obs.get('filters.subscriptions') |
31 | const onlySubscribed = api.settings.obs.get('filters.onlySubscribed') |
32 | const filterChannelViewSubscriptions = api.settings.obs.get('filters.channelView.subscriptions') |
33 | |
34 | var prepend = [ |
35 | h('PageHeading', [ |
36 | h('h1', [ |
37 | h('strong', i18n('Settings')) |
38 | ]) |
39 | ]) |
40 | ] |
41 | |
42 | return h('Scroller', { style: { overflow: 'auto' } }, [ |
43 | h('div.wrapper', [ |
44 | h('section.prepend', prepend), |
45 | h('section.content', [ |
46 | |
47 | h('section', [ |
48 | h('h2', i18n('Theme')), |
49 | h('select', { |
50 | style: { 'font-size': '120%' }, |
51 | value: theme, |
52 | 'ev-change': (ev) => theme.set(ev.target.value) |
53 | }, [ |
54 | themeNames.map(name => h('option', {value: name}, [name])) |
55 | ]) |
56 | ]), |
57 | |
58 | h('section', [ |
59 | h('h2', i18n('Language')), |
60 | h('select', { |
61 | style: { 'font-size': '120%' }, |
62 | value: lang, |
63 | 'ev-change': (ev) => lang.set(ev.target.value) |
64 | }, [ |
65 | h('option', {value: ''}, i18n('Default')), |
66 | locales.map(code => h('option', {value: code}, [ |
67 | '[', code, '] ', getLocaleName(code) |
68 | ])) |
69 | ]) |
70 | ]), |
71 | |
72 | h('section', [ |
73 | h('h2', i18n('Font Size')), |
74 | h('select', { |
75 | style: { 'font-size': '120%' }, |
76 | value: fontSize, |
77 | 'ev-change': (ev) => fontSize.set(ev.target.value) |
78 | }, [ |
79 | h('option', {value: ''}, i18n('Default')), |
80 | fontSizes.map(size => h('option', {value: size}, size)) |
81 | ]) |
82 | ]), |
83 | |
84 | h('section', [ |
85 | h('h2', i18n('Public Feed Options')), |
86 | |
87 | h('div', [ |
88 | checkbox(filterFollowing, { |
89 | label: i18n('Hide following messages') |
90 | }) |
91 | ]), |
92 | |
93 | h('div', [ |
94 | checkbox(filterSubscriptions, { |
95 | label: i18n('Hide channel (un)subcribe messages') |
96 | }) |
97 | ]), |
98 | |
99 | h('div', [ |
100 | checkbox(onlySubscribed, { |
101 | label: i18n(`Hide posts in channels that are not subscribed`) |
102 | }) |
103 | ]) |
104 | ]), |
105 | |
106 | h('section', [ |
107 | h('h2', i18n('Channel Feed Options')), |
108 | |
109 | h('div', [ |
110 | checkbox(filterChannelViewSubscriptions, { |
111 | label: i18n('Hide channel (un)subcribe messages') |
112 | }) |
113 | ]) |
114 | ]), |
115 | |
116 | h('section', [ |
117 | h('h2', i18n('Information')), |
118 | |
119 | h('p', `${packageInfo.productName} ${packageInfo.version}`) |
120 | ]) |
121 | ]) |
122 | ]) |
123 | ]) |
124 | |
125 | function getLocaleName (code) { |
126 | var translated = i18n(code) |
127 | var name = localeNameLookup[code] |
128 | |
129 | if (name !== translated && code !== translated) { |
130 | return `${name} (${translated})` |
131 | } else { |
132 | return name |
133 | } |
134 | } |
135 | }) |
136 | } |
137 | |
138 | function checkbox (param, {label}) { |
139 | return h('label', [ |
140 | h('input', { |
141 | type: 'checkbox', |
142 | checked: param, |
143 | 'ev-change': (ev) => param.set(ev.target.checked) |
144 | }), ' ', label |
145 | ]) |
146 | } |
147 |
Built with git-ssb-web