1 | 'use strict';
|
2 |
|
3 |
|
4 | var ansiHTML = require('ansi-html');
|
5 |
|
6 | var _require = require('html-entities'),
|
7 | AllHtmlEntities = _require.AllHtmlEntities;
|
8 |
|
9 | var entities = new AllHtmlEntities();
|
10 | var colors = {
|
11 | reset: ['transparent', 'transparent'],
|
12 | black: '181818',
|
13 | red: 'E36049',
|
14 | green: 'B3CB74',
|
15 | yellow: 'FFD080',
|
16 | blue: '7CAFC2',
|
17 | magenta: '7FACCA',
|
18 | cyan: 'C3C2EF',
|
19 | lightgrey: 'EBE7E3',
|
20 | darkgrey: '6D7891'
|
21 | };
|
22 | var overlayIframe = null;
|
23 | var overlayDiv = null;
|
24 | var lastOnOverlayDivReady = null;
|
25 | ansiHTML.setColors(colors);
|
26 |
|
27 | function createOverlayIframe(onIframeLoad) {
|
28 | var iframe = document.createElement('iframe');
|
29 | iframe.id = 'webpack-dev-server-client-overlay';
|
30 | iframe.src = 'about:blank';
|
31 | iframe.style.position = 'fixed';
|
32 | iframe.style.left = 0;
|
33 | iframe.style.top = 0;
|
34 | iframe.style.right = 0;
|
35 | iframe.style.bottom = 0;
|
36 | iframe.style.width = '100vw';
|
37 | iframe.style.height = '100vh';
|
38 | iframe.style.border = 'none';
|
39 | iframe.style.zIndex = 9999999999;
|
40 | iframe.onload = onIframeLoad;
|
41 | return iframe;
|
42 | }
|
43 |
|
44 | function addOverlayDivTo(iframe) {
|
45 | var div = iframe.contentDocument.createElement('div');
|
46 | div.id = 'webpack-dev-server-client-overlay-div';
|
47 | div.style.position = 'fixed';
|
48 | div.style.boxSizing = 'border-box';
|
49 | div.style.left = 0;
|
50 | div.style.top = 0;
|
51 | div.style.right = 0;
|
52 | div.style.bottom = 0;
|
53 | div.style.width = '100vw';
|
54 | div.style.height = '100vh';
|
55 | div.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
|
56 | div.style.color = '#E8E8E8';
|
57 | div.style.fontFamily = 'Menlo, Consolas, monospace';
|
58 | div.style.fontSize = 'large';
|
59 | div.style.padding = '2rem';
|
60 | div.style.lineHeight = '1.2';
|
61 | div.style.whiteSpace = 'pre-wrap';
|
62 | div.style.overflow = 'auto';
|
63 | iframe.contentDocument.body.appendChild(div);
|
64 | return div;
|
65 | }
|
66 |
|
67 | function ensureOverlayDivExists(onOverlayDivReady) {
|
68 | if (overlayDiv) {
|
69 |
|
70 | onOverlayDivReady(overlayDiv);
|
71 | return;
|
72 | }
|
73 |
|
74 |
|
75 |
|
76 | lastOnOverlayDivReady = onOverlayDivReady;
|
77 |
|
78 | if (overlayIframe) {
|
79 |
|
80 | return;
|
81 | }
|
82 |
|
83 |
|
84 | overlayIframe = createOverlayIframe(function () {
|
85 | overlayDiv = addOverlayDivTo(overlayIframe);
|
86 |
|
87 | lastOnOverlayDivReady(overlayDiv);
|
88 | });
|
89 |
|
90 |
|
91 |
|
92 | document.body.appendChild(overlayIframe);
|
93 | }
|
94 |
|
95 |
|
96 | function clear() {
|
97 | if (!overlayDiv) {
|
98 |
|
99 | return;
|
100 | }
|
101 |
|
102 |
|
103 | document.body.removeChild(overlayIframe);
|
104 | overlayDiv = null;
|
105 | overlayIframe = null;
|
106 | lastOnOverlayDivReady = null;
|
107 | }
|
108 |
|
109 |
|
110 | function showMessage(messages) {
|
111 | ensureOverlayDivExists(function (div) {
|
112 |
|
113 | div.innerHTML = "<span style=\"color: #".concat(colors.red, "\">Failed to compile.</span><br><br>").concat(ansiHTML(entities.encode(messages[0])));
|
114 | });
|
115 | }
|
116 |
|
117 | module.exports = {
|
118 | clear: clear,
|
119 | showMessage: showMessage
|
120 | }; |
\ | No newline at end of file |