eslint-formatter-html-extended
Version:
🌹 Beautiful ESLint HTML formatter extended from ESLint's official HTML formatter by JulianLaval combined with Stylish by Sindre Sorhus
264 lines (251 loc) • 8.94 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>ESLint HTML Report Extended</title>
<link rel="icon" href="https://eslint.org/img/favicon.512x512.png">
<style>
body {
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
margin:0;
padding:0;
color:#333
}
#overview {
padding:20px 30px
}
td{
padding:5px 10px
}
h1, h2, h3, h4, h5 {
margin:0
}
.content{
margin: 0 auto;
width: 90%;
max-width: 98.2em;
}
table {
margin:30px 0;
width:100%;
border-radius:5px;
border:1px solid #ddd;
border-spacing:0px;
}
th {
font-weight:400;
font-size:medium;
text-align:left;
cursor:pointer;
padding:10px
}
td.clr-1, td.clr-2, .summary-title {
font-weight:700
}
.summary-title {
float:right;
margin-left:20px
}
.summary-title:after {
content:"";
clear:both;
display:block
}
tr:last-child td {
border-bottom:none
}
tr td:first-child, tr td:last-child {
color:#9da0a4
}
#overview.bg-0, tr.bg-0 th {
color:#468847;
background:#dff0d8;
border-bottom:1px solid #d6e9c6
}
#overview.bg-1, tr.bg-1 th {
color:#f0ad4e;
background:#fcf8e3;
border-bottom:1px solid #fbeed5
}
#overview.bg-2, tr.bg-2 th {
color:#b94a48;
background:#f2dede;
border-bottom:1px solid #eed3d7
}
td {
border-bottom:1px solid #ddd
}
td.clr-1 {
color:#f0ad4e
}
td.clr-2 {
color:#b94a48
}
a {
color:#3a33d1;
text-decoration:none
}
a:hover {
color:#272296;
text-decoration:underline
}
.icon {
width: 20px;
height: 20px;
margin-bottom: -5px;
}
.icon--success{
fill:#468847;
}
.icon--warning{
fill:#f0ad4e;
}
.icon--error{
fill:#b94a48;
}
.toggle{
transition: all 0.3s;
}
.toggle.expand svg{
transform: rotate(180deg);
}
.filter{
margin-top: 30px;
}
.filter-btn{
padding: 8px 0;
width: 100px;
font-size: 14px;
font-weight: bold;
outline: none;
border: 0;
}
.bg--success{
background:#bed4f1;
}
.bg--warning{
background:#fcf8e3;
}
.bg--error{
background:#f2dede;
}
.footer{
margin: 0 auto;
width: 50%;
text-align: center;
color: #333;
font-size: 12px;
}
</style>
</head>
<body>
<div id="overview" class="bg-<%= reportColor %>">
<h1>ESLint Report</h1>
<div>
<h3><%= reportSummary %></h3>
<small>Generated on <%= date %></small>
</div>
</div>
<div class="content">
<div class="filter">
<button class="filter-btn bg--success" id="filter-all">All</button>
<button class="filter-btn bg--warning" id="filter-warning">Warning</button>
<button class="filter-btn bg--error" id="filter-error">Error</button>
</div>
<table>
<tbody>
<%= results %>
</tbody>
</table>
</div>
<footer class="footer">
<p>
Copyright © 2019 by <a href="https://github.com/mazipan" target="_blank" rel="noopener">Irfan Maulana</a>
<br>
Based on ESLint's Official HTML formatter by <a href="https://github.com/JulianLaval" target="_blank" rel="noopener">JulianLaval</a>
</p>
<p>
<a href="https://github.com/mazipan/eslint-formatter-html-extended" target="_blank" rel="noopener"><img src="https://img.shields.io/github/stars/mazipan/eslint-formatter-html-extended.svg?style=social&label=Stars"></a>
<a href="https://www.npmjs.com/package/eslint-formatter-html-extended" target="_blank" rel="noopener"><img src="https://img.shields.io/npm/v/eslint-formatter-html-extended.svg?maxAge=60"></a>
</p>
</footer>
<script type="text/javascript">
var groups = document.querySelectorAll("tr[data-group]");
var attachListener = function (element) {
element.addEventListener("click", function() {
var inGroup = document.getElementsByClassName(this.getAttribute("data-group"));
var toggle = this.querySelector('.toggle');
if (toggle.classList.contains('expand')) {
toggle.classList.remove('expand')
} else {
toggle.classList.add('expand')
}
for (var j = 0; j < inGroup.length; j++) {
inGroup[j].style.display = (inGroup[j].style.display !== "none") ? "none" : "table-row";
}
});
}
for (var i = 0; i < groups.length; i++) {
attachListener(groups[i])
}
var btnFilterAll = document.getElementById('filter-all');
var btnFilterWarning = document.getElementById('filter-warning');
var btnFilterError = document.getElementById('filter-error');
var otherGroupSeverity = {
0: [0, 1, 2],
1: [0, 2],
2: [0, 1]
}
function hideAllMessage () {
var allMessage = document.querySelectorAll('.message');
for (var x = 0; x < allMessage.length; x++) {
allMessage[x].style.display = "none";
}
var allExpanded = document.querySelectorAll('.toggle.expand');
for (var x = 0; x < allExpanded.length; x++) {
allExpanded[x].classList.remove('expand');
}
}
function hideBySeverity (severity) {
var selectorGroup = "tr.bg-" + severity;
var allGroup = document.querySelectorAll(selectorGroup);
for (var x = 0; x < allGroup.length; x++) {
allGroup[x].style.display = "none";
}
}
function showBySeverity(severity) {
var selectorGroup = "tr.bg-" + severity;
var allGroup = document.querySelectorAll(selectorGroup);
for (var x = 0; x < allGroup.length; x++) {
allGroup[x].style.display = "table-row";
}
}
function filterBySeverity(severity) {
hideAllMessage()
if (severity) {
showBySeverity(severity);
var other = otherGroupSeverity[severity];
for (var x = 0; x < other.length; x++) {
hideBySeverity(other[x])
}
} else {
var other = otherGroupSeverity[0];
for (var x = 0; x < other.length; x++) {
showBySeverity(other[x])
}
}
}
btnFilterAll.addEventListener('click', function () {
filterBySeverity(null)
})
btnFilterWarning.addEventListener('click', function () {
filterBySeverity(1)
})
btnFilterError.addEventListener('click', function () {
filterBySeverity(2)
})
</script>
</body>
</html>