paint 0.1.0

A sublime-like syntax highlighter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

/* eslint-disable */

var overlay = document.querySelector('.bg-overlay');
var container = document.querySelector('.container');
var style_span = document.querySelector('#style-name');
var ext_span = document.querySelector('#ext');
var lines_span = document.querySelector('#lines');
var highlighted = document.querySelector('#highlighted');
var style_select = document.querySelector('#style');
var filetype_select = document.querySelector('#filetype');
var highlight_label = document.querySelector('#highlight+label');

var highlighted_lines = {
  js:   '11-20',
  jsx:  '1,22-33',
  html: '3-10',
  rs:   '8,19-23',
  py:   '8,15-17',
  c:    '8-11',
  go:   '7-15',
};

var style = 'github';
var filetype = 'rs';

function isLight(color) {
  var rgb = color.match(/\d+/g);
  var r = parseInt(rgb[0], 10);
  var g = parseInt(rgb[1], 10);
  var b = parseInt(rgb[2], 10);

  var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

  return (luma > 170);
}

function alpha(color, a) {
  return color.replace('rgb', 'rgba').replace(')', `, ${a})`);
}

document.getElementById('style').onchange = function(e) {
  style = e.target.value;

  var selector = `.P--${style}`;
  var styles = window.getComputedStyle(document.querySelector(selector));
  var fg = styles.color;
  var bg = styles.backgroundColor;

  if (isLight(bg)) {
    document.body.classList.remove('dark');
  } else {
    document.body.classList.add('dark');
  }

  container.style.color = fg;
  overlay.style.backgroundColor = bg;

  style_select.style.backgroundColor = bg;
  style_select.style.borderColor = alpha(fg, 0.25);
  filetype_select.style.backgroundColor = bg;
  filetype_select.style.borderColor = alpha(fg, 0.25);
  highlight_label.style.backgroundColor = bg;
  highlight_label.style.borderColor = alpha(fg, 0.25);

  highlighted.dataset.style = `${style}--${filetype}`;
  style_span.innerHTML = style.replace(/_/g, ' ');

  updateCheckbox(document.getElementById('highlight').checked);
};

document.getElementById('filetype').onchange = function(e) {
  filetype = e.target.value;
  highlighted.dataset.style = `${style}--${filetype}`;
  highlighted.dataset.filetype = filetype;
  ext_span.innerHTML = filetype;

  updateCheckbox(document.getElementById('highlight').checked);
};

document.getElementById('highlight').onchange = function(e) {
  updateCheckbox(e.target.checked);
};

function updateCheckbox(isChecked) {
  if (isChecked) {
    highlighted.className = '';

    var sel = `.P--${style} .hi`;
    var bg = window.getComputedStyle(document.querySelector(sel)).backgroundColor;
    var lines = highlighted_lines[highlighted.dataset.filetype];

    highlight_label.style.backgroundColor = bg;
    lines_span.innerHTML = `--highlight=${lines}`;
  } else {
    var sel = `.P--${style}`;
    var bg = window.getComputedStyle(document.querySelector(sel)).backgroundColor;

    highlighted.className = 'no-hi';
    highlight_label.style.backgroundColor = bg;
    lines_span.innerHTML = '';
  }
}