app/page/settings.jsView |
---|
24 | 24 … | }, '/settings') |
25 | 25 … | } |
26 | 26 … | |
27 | 27 … | function settingsPage (location) { |
28 | | - const groups = groupSettings(api.app.html.settings()) |
29 | | - const groupNames = Object.keys(groups) |
30 | | - .sort((a, b) => { |
31 | | - if (a === 'general') return -1 |
32 | | - else if (b === 'general') return 1 |
33 | | - else return a < b ? -1 : +1 |
34 | | - }) |
35 | | - const activeGroup = Value('general') |
| 28 … | + const state = { |
| 29 … | + groups: groupSettings(api.app.html.settings()), |
| 30 … | + activeGroup: Value(0) |
| 31 … | + } |
36 | 32 … | |
37 | 33 … | var page = h('SettingsPage', { title: '/settings' }, [ |
38 | | - h('div.container', computed(activeGroup, _activeGroup => { |
| 34 … | + h('div.container', computed(state.activeGroup, activeGroup => { |
39 | 35 … | return [ |
40 | | - h('section.groups', groupNames.map(group => { |
| 36 … | + h('section.groups', state.groups.map((group, i) => { |
41 | 37 … | return h('div.group', |
42 | 38 … | { |
43 | | - 'className': group === _activeGroup ? '-active' : '', |
44 | | - 'ev-click': () => activeGroup.set(group) |
| 39 … | + 'className': i === activeGroup ? '-active' : '', |
| 40 … | + 'ev-click': () => state.activeGroup.set(i) |
45 | 41 … | }, |
46 | | - group |
| 42 … | + group.name |
47 | 43 … | ) |
48 | 44 … | })), |
49 | | - h('section.group-settings', groups[_activeGroup].map(Setting)) |
| 45 … | + h('section.group-settings', state.groups[activeGroup].subgroups.map(Setting)) |
50 | 46 … | ] |
|
51 | 47 … | })) |
52 | 48 … | ]) |
53 | 49 … | |
59 | 55 … | } |
60 | 56 … | |
61 | 57 … | var { container } = api.app.html.scroller({ prepend: page }) |
62 | 58 … | container.title = '/settings' |
| 59 … | + container.keyboardScroll = function (n) { |
| 60 … | + if (isNaN(n)) return |
| 61 … | + |
| 62 … | + state.activeGroup.set((state.activeGroup() + n) % state.groups.length) |
| 63 … | + } |
63 | 64 … | return container |
64 | 65 … | } |
65 | 66 … | } |
66 | 67 … | |
67 | 68 … | function groupSettings (settings) { |
68 | | - return settings |
| 69 … | + const groupedByGroup = settings |
69 | 70 … | .reduce((acc, setting) => { |
70 | 71 … | if (!setting.title || !setting.body) throw new Error('setting sections require title, body') |
71 | 72 … | |
72 | 73 … | const group = (setting.group || setting.title).toLowerCase() |
74 | 75 … | else acc[group] = [setting] |
75 | 76 … | |
76 | 77 … | return acc |
77 | 78 … | }, {}) |
| 79 … | + |
| 80 … | + return Object.keys(groupedByGroup) |
| 81 … | + .map(name => { |
| 82 … | + return { |
| 83 … | + name, |
| 84 … | + subgroups: groupedByGroup[name] |
| 85 … | + } |
| 86 … | + }) |
| 87 … | + .sort((a, b) => { |
| 88 … | + if (a === 'general') return -1 |
| 89 … | + else if (b === 'general') return 1 |
| 90 … | + else return a < b ? -1 : +1 |
| 91 … | + }) |
78 | 92 … | } |