Files: b8b3160361f94ba38bb14788f0aee273b4d1bc99 / modules_extra / theme.js
4119 bytesRaw
1 | var h = require('hyperscript') |
2 | var pull = require('pull-stream') |
3 | var plugs = require('../plugs') |
4 | var cat = require('pull-cat') |
5 | |
6 | var sbot_links2 = plugs.first(exports.sbot_links2 = []) |
7 | var avatar_name = plugs.first(exports.avatar_name = []) |
8 | var blob_url = require('../plugs').first(exports.blob_url = []) |
9 | |
10 | var defaultTheme = { |
11 | id: '&JFa42U6HtPm9k+s+AmpDIAoTJJI/PzoRC/J/WCfduDY=.sha256', |
12 | name: 'patchbay-minimal.css' |
13 | } |
14 | |
15 | var next = 'undefined' === typeof setImmediate ? setTimeout : setImmediate |
16 | |
17 | if('undefined' !== typeof document) |
18 | var link = document.head.appendChild(h('link', {rel: 'stylesheet'})) |
19 | |
20 | var activeTheme |
21 | |
22 | function useTheme(id) { |
23 | activeTheme = id |
24 | link.href = id ? blob_url(id) : '' |
25 | var forms = [].slice.call(document.querySelectorAll('.themes__form')) |
26 | forms.forEach(updateForm) |
27 | |
28 | var radios = [].slice.call(document.querySelectorAll('input[type=radio]')) |
29 | radios.forEach(function (radio) { |
30 | radio.checked = (radio.value === activeTheme) |
31 | }) |
32 | } |
33 | |
34 | function useSavedTheme() { |
35 | useTheme(localStorage.themeId || defaultTheme.id) |
36 | } |
37 | |
38 | next(useSavedTheme) |
39 | |
40 | function themes() { |
41 | return cat([ |
42 | pull.values([ |
43 | { |
44 | id: '', |
45 | name: 'none', |
46 | feed: '' |
47 | }, |
48 | defaultTheme, |
49 | ]), |
50 | pull( |
51 | sbot_links2({ |
52 | query: [ |
53 | {$filter: {rel: ['mentions', {$prefix: 'patchbay-'}]}}, |
54 | {$filter: {dest: {$prefix: '&'}}}, |
55 | {$map: {id: 'dest', feed: 'source', name: ['rel', 1]}} |
56 | ], |
57 | live: true, |
58 | sync: false, |
59 | }), |
60 | pull.filter(function (link) { |
61 | return /\.css$/.test(link.name) |
62 | }) |
63 | ) |
64 | ]) |
65 | } |
66 | |
67 | function onRadioClick(e) { |
68 | if (this.checked) useTheme(this.value) |
69 | } |
70 | |
71 | function updateForm(form) { |
72 | var same = localStorage.themeId === activeTheme |
73 | form.querySelector('.themes__id').value = activeTheme |
74 | form.querySelector('.themes__reset').disabled = same |
75 | form.querySelector('.themes__submit').disabled = same |
76 | return form |
77 | } |
78 | |
79 | function renderTheme(link) { |
80 | return h('div.theme', |
81 | h('input', {type: 'radio', name: 'theme', |
82 | value: link.id, onclick: onRadioClick, |
83 | checked: link.id === activeTheme |
84 | }), |
85 | link.id ? h('a', {href: '#'+link.id}, link.name) : link.name, ' ', |
86 | link.feed ? h('a', {href: '#'+link.feed}, avatar_name(link.feed)) : '' |
87 | ) |
88 | } |
89 | |
90 | function insertAfter(parentNode, newNode, referenceNode) { |
91 | var nextSibling = referenceNode && referenceNode.nextSibling |
92 | if (nextSibling) parentNode.insertBefore(newNode, nextSibling) |
93 | else parentNode.appendChild(newNode) |
94 | } |
95 | |
96 | function theme_view() { |
97 | var themeInput |
98 | var themesList = h('form.themes__list') |
99 | var themesByKey = {} |
100 | |
101 | pull( |
102 | themes(), |
103 | pull.unique('id'), |
104 | pull.drain(function (theme) { |
105 | // don't show old versions of theme |
106 | var key = theme.feed + theme.name |
107 | var newerTheme = themesByKey[key] |
108 | theme.el = renderTheme(theme) |
109 | themesByKey[key] = theme |
110 | if (!newerTheme) { |
111 | // show latest theme |
112 | themesList.appendChild(theme.el) |
113 | } else if (theme.id === localStorage.themeId |
114 | || theme.id === activeTheme) { |
115 | // show old version because the user is still using it |
116 | theme.el.appendChild(document.createTextNode(' (old)')) |
117 | insertAfter(themesList, theme.el, newerTheme.el) |
118 | } else { |
119 | // ignore old version of theme |
120 | } |
121 | }, function (err) { |
122 | if (err) console.error(err) |
123 | }) |
124 | ) |
125 | |
126 | return h('div.column.scroll-y', h('div', |
127 | updateForm(h('form.themes__form', {onsubmit: onsubmit, onreset: onreset}, |
128 | themeInput = h('input.themes__id', {placeholder: 'theme id', |
129 | value: link.href}), ' ', |
130 | h('input.themes__reset', {type: 'reset'}), ' ', |
131 | h('input.themes__submit', {type: 'submit', value: 'Save'}))), |
132 | themesList |
133 | )) |
134 | |
135 | function onsubmit(e) { |
136 | e.preventDefault() |
137 | useTheme(localStorage.themeId = themeInput.value) |
138 | } |
139 | |
140 | function onreset(e) { |
141 | e.preventDefault() |
142 | useSavedTheme() |
143 | } |
144 | } |
145 | |
146 | exports.menu_items = function () { |
147 | return h('a', {href:'#/theme'}, '/theme') |
148 | } |
149 | |
150 | exports.screen_view = function (path) { |
151 | if(path === '/theme') return theme_view() |
152 | } |
153 | |
154 |
Built with git-ssb-web