Files: 741ac0a148c2a18f2bc5d54ad7582e7c82430d2b / modules / tag / html / tag.js
1250 bytesRaw
1 | const nest = require('depnest') |
2 | const { h, computed } = require('mutant') |
3 | const hexrgb = require('hex-rgb') |
4 | |
5 | exports.gives = nest('tag.html.tag') |
6 | |
7 | exports.needs = nest({ |
8 | 'about.obs.color': 'first' |
9 | }) |
10 | |
11 | exports.create = function(api) { |
12 | return nest({ 'tag.html.tag': function({ tagName, tagId }, handleRemove) { |
13 | var removeTag |
14 | if (handleRemove) { |
15 | removeTag = h('a', { |
16 | 'ev-click': handleRemove |
17 | }, 'x') |
18 | } else { |
19 | removeTag = ''; |
20 | } |
21 | |
22 | const backgroundColor = api.about.obs.color(tagId) |
23 | const fontColor = computed(backgroundColor, contrast) |
24 | |
25 | return h( |
26 | 'Tag', |
27 | { |
28 | style: { |
29 | 'background-color': backgroundColor, |
30 | 'color': fontColor |
31 | } |
32 | }, |
33 | [ |
34 | h('span', tagName), |
35 | removeTag |
36 | ] |
37 | ) |
38 | }}) |
39 | } |
40 | |
41 | function contrast(backgroundColor) { |
42 | const { red, green, blue } = hexrgb(backgroundColor) |
43 | const C = [ red/255, green/255, blue/255 ] |
44 | for ( var i = 0; i < C.length; ++i ) { |
45 | if ( C[i] <= 0.03928 ) { |
46 | C[i] = C[i] / 12.92 |
47 | } else { |
48 | C[i] = Math.pow( ( C[i] + 0.055 ) / 1.055, 2.4); |
49 | } |
50 | } |
51 | const L = 0.2126 * C[0] + 0.7152 * C[1] + 0.0722 * C[2] |
52 | if (L > 0.179) { |
53 | return '#000' |
54 | } else { |
55 | return '#fff' |
56 | } |
57 | } |
58 |
Built with git-ssb-web