Files: 2cf06eb4b4d0e4ac4b6f5dced90ef5da82a0a8fd / app / page / settings.js
5076 bytesRaw
1 | const nest = require('depnest') |
2 | const { h, computed, when } = require('mutant') |
3 | const electron = require('electron') |
4 | const path = require('path') |
5 | const { version } = require('../../package.json') |
6 | |
7 | exports.gives = nest('app.page.settings') |
8 | |
9 | exports.needs = nest({ |
10 | 'about.html.image': 'first', |
11 | 'about.obs.name': 'first', |
12 | 'about.obs.description': 'first', |
13 | 'history.sync.push': 'first', |
14 | 'history.obs.store': 'first', |
15 | 'keys.sync.id': 'first', |
16 | 'message.html.markdown': 'first', |
17 | 'settings.sync.get': 'first', |
18 | 'settings.sync.set': 'first', |
19 | 'settings.obs.get': 'first', |
20 | 'translations.sync.strings': 'first' |
21 | }) |
22 | |
23 | const LANGUAGES = ['zh', 'en'] |
24 | |
25 | exports.create = (api) => { |
26 | return nest('app.page.settings', settings) |
27 | |
28 | function settings (location) { |
29 | // RESET the app when the settings are changed |
30 | api.settings.obs.get('language')(() => { |
31 | console.log('language changed, resetting view') |
32 | |
33 | // clear history back to start page |
34 | api.history.obs.store().set([ |
35 | { page: 'blogIndex' } |
36 | ]) |
37 | api.history.sync.push({ page: 'settings' }) |
38 | }) |
39 | |
40 | const webSharingMetricsOption = api.settings.obs.get('ticktack.websharemetrics') |
41 | const feed = api.keys.sync.id() |
42 | const strings = api.translations.sync.strings() |
43 | const currentLanguage = api.settings.sync.get('language') |
44 | |
45 | const editProfile = () => api.history.sync.push({ |
46 | page: 'userEdit', |
47 | feed, |
48 | callback: (err, didEdit) => { |
49 | if (err) throw new Error('Error editing profile', err) |
50 | api.history.sync.push({ page: 'settings' }) |
51 | } |
52 | }) |
53 | |
54 | return h('Page -settings', [ |
55 | h('div.content', [ |
56 | h('h1', strings.settingsPage.title), |
57 | h('section -avatar', [ |
58 | h('div.left'), |
59 | h('div.right', api.about.html.image(feed)) |
60 | ]), |
61 | h('section -name', [ |
62 | h('div.left', strings.settingsPage.section.name), |
63 | h('div.right', [ |
64 | api.about.obs.name(feed), |
65 | h('img', { |
66 | src: path.join(__dirname, '../../assets', 'edit.png'), |
67 | 'ev-click': editProfile |
68 | }) |
69 | // h('i.fa.fa-pencil', { 'ev-click': editProfile }) |
70 | ]) |
71 | ]), |
72 | h('section -introduction', [ |
73 | h('div.left', strings.settingsPage.section.introduction), |
74 | h('div.right', computed(api.about.obs.description(feed), d => api.message.html.markdown(d || ''))) |
75 | ]), |
76 | h('section -language', [ |
77 | h('div.left', strings.settingsPage.section.language), |
78 | h('div.right', LANGUAGES.map(Language)) |
79 | ]), |
80 | h('section -zoom', [ |
81 | h('div.left', strings.settingsPage.section.zoom), |
82 | h('div.right', [zoomButton(-0.1, '-'), zoomButton(+0.1, '+')]) |
83 | ]), |
84 | h('section -theme', [ |
85 | h('div.left', strings.settingsPage.section.theme), |
86 | h('div.right', ['light', 'dark'].map(Theme)) |
87 | ]), |
88 | h('section -sharing', [ |
89 | h('div.left', strings.share.settings.caption), |
90 | h('div.right', [].concat( |
91 | webSharingOption('public', strings.share.settings.publicOption), |
92 | webSharingOption('author', strings.share.settings.authorAndYouOption), |
93 | webSharingOption('private', strings.share.settings.justYouOption) |
94 | )) |
95 | ]), |
96 | h('section -version', [ |
97 | h('div.left', strings.settingsPage.section.version), |
98 | h('div.right', version) |
99 | ]) |
100 | ]) |
101 | ]) |
102 | |
103 | function Language (lang) { |
104 | const selectLang = () => api.settings.sync.set({ language: lang }) |
105 | const className = currentLanguage === lang ? '-strong' : '' |
106 | |
107 | return h('Button -language', |
108 | { |
109 | 'ev-click': () => selectLang(lang), |
110 | className |
111 | }, |
112 | strings.languages[lang] |
113 | ) |
114 | } |
115 | |
116 | function Theme (theme) { |
117 | const currentTheme = api.settings.obs.get('ticktack.theme') |
118 | const className = computed(currentTheme, t => t === theme ? '-strong' : '') |
119 | |
120 | return h('Button -language', |
121 | { |
122 | 'ev-click': () => currentTheme.set(theme), |
123 | className |
124 | }, |
125 | strings.themes[theme] |
126 | ) |
127 | } |
128 | |
129 | function zoomButton (increment, symbol) { |
130 | const { getCurrentWebContents } = electron.remote |
131 | return h('Button -zoom', |
132 | { |
133 | 'ev-click': () => { |
134 | var zoomFactor = api.settings.sync.get('ticktack.electron.zoomFactor', 1) |
135 | var newZoomFactor = zoomFactor + increment |
136 | api.settings.sync.set('ticktack.electron.zoomFactor', newZoomFactor) |
137 | getCurrentWebContents().setZoomFactor(newZoomFactor) |
138 | } |
139 | }, |
140 | symbol |
141 | ) |
142 | } |
143 | |
144 | function webSharingOption (v, label) { |
145 | let myOption = computed(webSharingMetricsOption, opt => opt === v) |
146 | |
147 | const selectWebSharingOption = () => { |
148 | webSharingMetricsOption.set(v) |
149 | } |
150 | |
151 | return h('Button -websharingmetrics', |
152 | { |
153 | 'ev-click': () => selectWebSharingOption(v), |
154 | className: when(myOption, '-strong', '') |
155 | }, |
156 | label |
157 | ) |
158 | } |
159 | } |
160 | } |
161 |
Built with git-ssb-web