| 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 … | } |