1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- /*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.6',
- 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',
- };
- var ansiHTML = require('ansi-html-community');
- var colors = {
- reset: ['transparent', 'transparent'],
- black: '181818',
- red: 'ff3348',
- green: '3fff4f',
- yellow: 'ffd30e',
- blue: '169be0',
- magenta: 'f840b7',
- cyan: '0ad8e9',
- lightgrey: 'ebe7e3',
- darkgrey: '6d7891',
- };
- var htmlEntities = require('html-entities');
- function showProblems(type, lines) {
- clientOverlay.innerHTML = '';
- lines.forEach(function (msg) {
- msg = ansiHTML(htmlEntities.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);
- }
- }
- function clear() {
- if (document.body && clientOverlay.parentNode) {
- document.body.removeChild(clientOverlay);
- }
- }
- function problemType(type) {
- var problemColors = {
- errors: colors.red,
- warnings: colors.yellow,
- };
- var color = problemColors[type] || colors.red;
- return (
- '<span style="background-color:#' +
- color +
- '; color:#000000; padding:3px 6px; border-radius: 4px;">' +
- type.slice(0, -1).toUpperCase() +
- '</span>'
- );
- }
- module.exports = function (options) {
- for (var color in options.ansiColors) {
- if (color in colors) {
- colors[color] = options.ansiColors[color];
- }
- ansiHTML.setColors(colors);
- }
- for (var style in options.overlayStyles) {
- styles[style] = options.overlayStyles[style];
- }
- for (var key in styles) {
- clientOverlay.style[key] = styles[key];
- }
- return {
- showProblems: showProblems,
- clear: clear,
- };
- };
- module.exports.clear = clear;
- module.exports.showProblems = showProblems;
|