git ssb

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
var link = document.head.appendChild(h('link', {rel: 'stylesheet'}))
18
var activeTheme
19
20
function 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
32
function useSavedTheme() {
33
  useTheme(localStorage.themeId || defaultTheme.id)
34
}
35
36
next(useSavedTheme)
37
38
function 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
65
function onRadioClick(e) {
66
  if (this.checked) useTheme(this.value)
67
}
68
69
function 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
77
function 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
88
function insertAfter(parentNode, newNode, referenceNode) {
89
  var nextSibling = referenceNode && referenceNode.nextSibling
90
  if (nextSibling) parentNode.insertBefore(newNode, nextSibling)
91
  else parentNode.appendChild(newNode)
92
}
93
94
function theme_view() {
95
  var themeInput
96
  var themesList = h('form.themes__list')
97
  var themesPerFeed = {/* feedid: {blobid||name: theme} */}
98
99
  pull(
100
    themes(),
101
    pull.drain(function (theme) {
102
      var map = themesPerFeed[theme.feed] || (themesPerFeed[theme.feed] = {})
103
      // replace old theme
104
      var prevByName = map[theme.name]
105
      var prevById = map[theme.id]
106
      theme.el = renderTheme(theme)
107
      map[theme.name] = theme
108
      map[theme.id] = theme
109
      if (prevById) {
110
        // remove theme which is having its id reused
111
        themesList.removeChild(prevById.el)
112
        // prevById.el.appendChild(document.createTextNode(' (renamed)'))
113
        if (prevById === prevByName) {
114
          prevByName = null
115
        }
116
      }
117
      if (prevByName) {
118
        // update theme
119
        if (prevByName.id === localStorage.themeId
120
         || prevByName.id === activeTheme) {
121
          // keep old version because the user is still using it
122
          prevByName.el.appendChild(document.createTextNode(' (old)'))
123
          insertAfter(themesList, theme.el, prevByName.el)
124
        } else {
125
          // replace old version
126
          themesList.replaceChild(theme.el, prevByName.el)
127
        }
128
      } else {
129
        // show new theme
130
        themesList.appendChild(theme.el)
131
      }
132
    }, function (err) {
133
      if (err) console.error(err)
134
    })
135
  )
136
137
  return h('div.column.scroll-y', h('div',
138
    updateForm(h('form.themes__form', {onsubmit: onsubmit, onreset: onreset},
139
      themeInput = h('input.themes__id', {placeholder: 'theme id',
140
        value: link.href}), ' ',
141
      h('input.themes__reset', {type: 'reset'}), ' ',
142
      h('input.themes__submit', {type: 'submit', value: 'Save'}))),
143
      themesList
144
  ))
145
146
  function onsubmit(e) {
147
    e.preventDefault()
148
    useTheme(localStorage.themeId = themeInput.value)
149
  }
150
151
  function onreset(e) {
152
    e.preventDefault()
153
    useSavedTheme()
154
  }
155
}
156
157
exports.menu_items = function () {
158
  return h('a', {href:'#/theme'}, '/theme')
159
}
160
161
exports.screen_view = function (path) {
162
  if(path === '/theme') return theme_view()
163
}
164