client-overlay.js
1.78 KB
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
/*eslint-env browser*/
var clientOverlay = document.createElement('div');
clientOverlay.id = 'webpack-hot-middleware-clientOverlay';
var styles = {
background: 'rgba(0,0,0,0.85)',
color: '#E8E8E8',
lineHeight: '1.2',
whiteSpace: 'pre',
fontFamily: 'Menlo, Consolas, monospace',
fontSize: '13px',
position: 'fixed',
zIndex: 9999,
padding: '10px',
left: 0,
right: 0,
top: 0,
bottom: 0,
overflow: 'auto',
dir: 'ltr',
textAlign: 'left'
};
for (var key in styles) {
clientOverlay.style[key] = styles[key];
}
var ansiHTML = require('ansi-html');
var colors = {
reset: ['transparent', 'transparent'],
black: '181818',
red: 'E36049',
green: 'B3CB74',
yellow: 'FFD080',
blue: '7CAFC2',
magenta: '7FACCA',
cyan: 'C3C2EF',
lightgrey: 'EBE7E3',
darkgrey: '6D7891'
};
ansiHTML.setColors(colors);
var Entities = require('html-entities').AllHtmlEntities;
var entities = new Entities();
exports.showProblems =
function showProblems(type, lines) {
clientOverlay.innerHTML = '';
lines.forEach(function(msg) {
msg = ansiHTML(entities.encode(msg));
var div = document.createElement('div');
div.style.marginBottom = '26px';
div.innerHTML = problemType(type) + ' in ' + msg;
clientOverlay.appendChild(div);
});
if (document.body) {
document.body.appendChild(clientOverlay);
}
};
exports.clear =
function clear() {
if (document.body && clientOverlay.parentNode) {
document.body.removeChild(clientOverlay);
}
};
var problemColors = {
errors: colors.red,
warnings: colors.yellow
};
function problemType (type) {
var color = problemColors[type] || colors.red;
return (
'<span style="background-color:#' + color + '; color:#fff; padding:2px 4px; border-radius: 2px">' +
type.slice(0, -1).toUpperCase() +
'</span>'
);
}