git ssb

1
const nest = require('depnest')
2
const compileCss = require('micro-css')
3
const { h, computed } = require('mutant')
4
const get = require('lodash/get')
5
6
exports.gives = nest('app.sync.initialise')
7
8
exports.needs = nest({
9
  'styles.css': 'reduce',
10
  'settings.obs.get': 'first'
11
})
12
13
exports.create = function (api) {
14
  return nest('app.sync.initialise', styles)
15
16
  function styles () {
17
    const css = values(api.styles.css()).join('\n')
18
    const custom = api.settings.obs.get('patchbay.customStyles')
19
    const accessibility = api.settings.obs.get('patchbay.accessibility')
20
21
    document.head.appendChild(
22
      h('style', { innerHTML: css })
23
    )
24
25
    document.head.appendChild(
26
      h('style', { innerHTML: computed(custom, compileCss) })
27
    )
28
    document.head.appendChild(
29
      h('style', {
30
        innerHTML: computed(accessibility, a11y => {
31
          return compileCss(accessibilityMcss(a11y))
32
        })
33
      })
34
    )
35
  }
36
}
37
38
// ////////////////////////////
39
// The parts that feed into this are in app/html/settings/accessibility.js
40
41
function accessibilityMcss (settings) {
42
  const invert = get(settings, 'invert')
43
  const saturation = get(settings, 'saturation', 100)
44
  const brightness = get(settings, 'brightness', 100)
45
  const contrast = get(settings, 'contrast', 100)
46
47
  const css = `
48
body {
49
  filter: ${invert ? 'invert()' : ''} saturate(${saturation}%) brightness(${brightness}%) contrast(${contrast}%)
50
51
  (img) {
52
    filter: ${invert ? 'invert()' : ''}
53
  }
54
  (video) {
55
    filter: ${invert ? 'invert()' : ''}
56
  }
57
  (button) {
58
    filter: ${invert ? 'invert()' : ''}
59
  }
60
}
61
`
62
  return css
63
}
64
// ////////////////////////////
65
66
function values (object) {
67
  const keys = Object.keys(object)
68
  return keys.map(k => object[k])
69
}
70