Commit f5bc75c5 authored by Markus Willman's avatar Markus Willman

add line numbers and display toggles to log viewer

parent 67c970c7
......@@ -64,14 +64,14 @@ class DCLogParser implements ParserInterface
$line = rtrim($line, "\n\r\0") . $this->line_separator;
$parsed_line = preg_replace_callback('#^'. static::TIMESTAMP_REGEX .'<([^>]+)> ?(.*?)$#u', function($matches) use ($line_num) {
return "<span class=\"timestamp\" id=\"m{$line_num}\"><a href=\"#m{$line_num}\">{$matches[1]}</a></span>".
return "<span class=\"timestamp d-none d-print-inline\" id=\"m{$line_num}\"><a href=\"#m{$line_num}\">{$matches[1]}</a></span>".
'&lt;<span class="nick">'. htmlspecialchars($matches[2]) .'</span>&gt; '. htmlspecialchars($matches[3]);
}, $line, 1);
if ($parsed_line === $line)
{
$parsed_line = preg_replace_callback('#^'. static::TIMESTAMP_REGEX .'\* ([^ ]+) (.*?)$#u', function($matches) use ($line_num) {
return "<span class=\"timestamp\" id=\"m{$line_num}\"><a href=\"#m{$line_num}\">{$matches[1]}</a></span>".
return "<span class=\"timestamp d-none d-print-inline\" id=\"m{$line_num}\"><a href=\"#m{$line_num}\">{$matches[1]}</a></span>".
'* <span class="nick">'. htmlspecialchars($matches[2]) .'</span> '. htmlspecialchars($matches[3]);
}, $line, 1);
}
......@@ -81,7 +81,7 @@ class DCLogParser implements ParserInterface
$parsed_line = htmlspecialchars($line);
}
$line = $parsed_line;
$line = "<span class=\"ln\" id=\"l{$line_num}\"></span>{$parsed_line}";
$content .= LinkifyText::convert($line, true);
}
......
......@@ -29,7 +29,7 @@
<!-- log styles -->
<style>
.dclog { white-space:pre-wrap !important }
.dclog { white-space:pre-wrap !important; border:.05rem solid #e5e5e5; border-radius: .25rem; padding: .25rem; }
.dclog > .nick { font-weight:bold }
.bs-dark .dclog > .nick { font-weight:bolder; color:#CCC }
.dclog > .timestamp { color:#CCC }
......@@ -39,10 +39,16 @@
@media print {
.dclog { border:none !important; page-break-inside:auto !important; page-break-before:avoid !important }
.dclog span.ln { display:none !important }
}
@media screen {
.dclog { max-height: calc(100vh - 18rem); overflow-y: scroll; }
@counter-style counter-ln { system:extends decimal; pad:3 '0' }
.dclog { counter-reset:ln }
.dclog span.ln:before { counter-increment:ln; content:counter(ln, counter-ln) " "; display:inline-block; color:#888 !important; text-decoration:none !important }
.bs-dark .dclog span.ln:before { color:#616161 !important }
}
</style>
{% endblock %}
......@@ -58,20 +64,37 @@
content.html(twemoji.parse(content.html(), {
size: 16
}));
var displayToggle = function(selector) {
var ln = $(selector);
if (ln.hasClass('d-none')) {
ln.removeClass('d-none');
} else {
ln.addClass('d-none');
}
};
$('button.ln-toggle').removeClass('d-none').click(function () { displayToggle('.dclog span.ln'); });
$('button.ts-toggle').removeClass('d-none').click(function () { displayToggle('.dclog span.timestamp'); });
});
</script>
{% endblock %}
{% block content -%}
<h4 class="float-left d-print-none">{{ page_subtitle }}</h4>
<div class="text-right d-print-none">
<div class="text-right pb-3 d-print-none">
<button type="button" class="ts-toggle btn btn-primary d-none" data-toggle="button" aria-pressed="true" autocomplete="off" title="Toggle timestamps">
<i class="fas fa-clock" aria-hidden="true"></i>
</button>
<button type="button" class="ln-toggle btn btn-primary active d-none" data-toggle="button" aria-pressed="true" autocomplete="off" title="Toggle line numbers">
<i class="fas fa-list-ol" aria-hidden="true"></i>
</button>
<a class="btn btn-primary" role="button" href="{{ util.sanitize_url(page_url, 'source=raw') }}">
<i class="fas fa-file-alt" aria-hidden="true"></i> Raw Log
</a>
<a class="btn btn-primary" role="button" href="{{ util.sanitize_url(page_url, 'download=1') }}">
<i class="fas fa-download" aria-hidden="true"></i> Download
</a>
<hr>
</div>
<div>
......
......@@ -48,7 +48,7 @@
}
$(function () {
$('button.wordwrap-toggle').click(function () {
$('button.wordwrap-toggle').removeClass('d-none').click(function () {
if ($('div.source-container').hasClass('wordwrap')) {
$('div.source-container').removeClass('wordwrap');
} else {
......@@ -71,10 +71,10 @@
<h4 class="float-left">Source of: {{ source_file }}</h4>
<p class="text-right">
<button type="button" class="wordwrap-toggle d-none btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Word Wrap</button>
{% if git_info and git_base_url and is_root_domain -%}
<a href="{{ make_url(git_base_url ~ '/blob/master' ~ git_info.file) }}" class="btn btn-primary" rel="nofollow">View in Git</a>
{%- endif %}
<button type="button" class="wordwrap-toggle btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Word Wrap</button>
</p>
<div class="card bg-light shadow-sm">
<div class="card-body p-0 source-container">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment