git ssb

16+

Dominic / patchbay



Tree: 37a6df5a58de74ccdb2f4152cf7272d0eba0d4f9

Files: 37a6df5a58de74ccdb2f4152cf7272d0eba0d4f9 / modules / theme.js

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

Built with git-ssb-web