git ssb

1
const nest = require('depnest')
2
const compileCss = require('micro-css')
3
const { h, computed, when } = 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
    const openDyslexicEnabled = api.settings.obs.get('patchbay.accessibility.openDyslexicEnabled')
21
22
    document.head.appendChild(
23
      h('style', { innerHTML: css })
24
    )
25
26
    document.head.appendChild(
27
      h('style', { innerHTML: computed(custom, compileCss) })
28
    )
29
    document.head.appendChild(
30
      h('style', {
31
        innerHTML: computed(accessibility, a11y => {
32
          return compileCss(accessibilityMcss(a11y))
33
        })
34
      })
35
    )
36
    document.head.appendChild(
37
      h('style', {
38
        innerHTML: when(openDyslexicEnabled, '.App { font-family: OpenDyslexicRegular, arial, sans-serif, NotoColorEmoji; }', '')
39
      })
40
    )
41
  }
42
}
43
44
// ////////////////////////////
45
// The parts that feed into this are in app/html/settings/accessibility.js
46
47
function accessibilityMcss (settings) {
48
  const invert = get(settings, 'invert')
49
  const saturation = get(settings, 'saturation', 100)
50
  const brightness = get(settings, 'brightness', 100)
51
  const contrast = get(settings, 'contrast', 100)
52
53
  const css = `
54
body {
55
  filter: ${invert ? 'invert(1)' : ''} saturate(${saturation}%) brightness(${brightness}%) contrast(${contrast}%)
56
57
  (img) {
58
    filter: ${invert ? 'invert(1)' : ''}
59
  }
60
  (video) {
61
    filter: ${invert ? 'invert(1)' : ''}
62
  }
63
  (button) {
64
    filter: ${invert ? 'invert(1)' : ''}
65
  }
66
}
67
`
68
  return css
69
}
70
// ////////////////////////////
71
72
function values (object) {
73
  const keys = Object.keys(object)
74
  return keys.map(k => object[k])
75
}
76