Add to the right an automatically generated TOC

This commit is contained in:
Carsten Grohmann 2019-11-16 10:53:07 +01:00
parent 9e35bf8596
commit 9d9e1d9d6e
2 changed files with 70 additions and 17 deletions

View File

@ -39,6 +39,24 @@
/* empty just used to show elements in the default view */
}
a {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
.a--small {
font-size: small;
font-weight: unset;
padding: unset;
}
.a__footnote {
vertical-align: super;
font-size: 0.83em;
}
svg {
display: block;
max-height: 200px;
@ -63,22 +81,15 @@
word-wrap: break-word;
}
.a--small {
font-size: small;
font-weight: unset;
padding: unset;
}
.a__footnote {
vertical-align: super;
font-size: 0.83em;
}
/* Zebra-Layout */
tr:nth-child(odd) td:nth-child(2), tr:nth-child(odd) td:nth-child(3) {
background-color: #f2f2f2;
}
.js-flag-hide-from-toc {
/* empty just used to hide h2 headings from TOCS */
}
.js-notify_box__msg--warning {
color: #9F6000;
background-color: #FEEFB3;
@ -103,6 +114,21 @@
font-family: monospace;
overflow: auto;
}
.table-of-contents {
float: right;
width: 40%;
background: #eee;
font-size: 0.8em;
padding: 1em 2em;
margin: 0 0 0.5em 0.5em;
}
.table-of-contents ul {
padding: 0;
}
.table-of-contents li {
margin: 0 0 0.25em 0;
}
</style>
<script>
function goBack() {
@ -115,6 +141,12 @@ function goBack() {
<h1>Analyse and visualise Linux OOM output</h1>
<nav class="table-of-contents" id="table_of_contents" role="navigation">
<h2 class="js-flag-hide-from-toc">On this page</h2>
<ul>
</ul>
</nav>
<p>
This web page analyses Linux Out Of Memory (OOM) messages and shows these
information in a human friendly presentation.
@ -128,7 +160,7 @@ function goBack() {
<div class="terminal notify_box text--default-hide js-text--display-none" id="notify_box"></div>
<div class="text--default-show" id="input">
<h2>Step 1 - Enter your OOM message</h2>
<h2 id="step1">Step 1 - Enter your OOM message</h2>
<textarea autocomplete="off" cols="100" id="textarea_oom" onfocusin="OOMAnalyser.OOMDisplayInstance.empty_textarea_oom()" rows="20" title="OOM input field">Add your OOMhere</textarea>
<br/>
<button onclick="OOMAnalyser.OOMDisplayInstance.analyse_and_show()" title="Analyse the OOM from the input area and show it">Analyse</button>
@ -138,7 +170,7 @@ function goBack() {
<div class="text--default-hide js-text--display-none" id="analysis">
<h2>Step 2 - Results</h2>
<h2 id="step2">Step 2 - Results</h2>
<p>
Go back to
<a href="javascript:void(0);" onclick="OOMAnalyser.OOMDisplayInstance.reset_form()" title="Run a new analysis">&quot;Step 1 - Enter your OOM message&quot;</a>
@ -577,7 +609,7 @@ function goBack() {
to run a new analysis.
</p>
<h2>Footnotes</h2>
<h2 id="h2-footnotes">Footnotes</h2>
<ol>
<li id="footnote-proc5"><cite><a href="http://man7.org/linux/man-pages/man5/proc.5.html" target="_blank">
proc(5) - process information pseudo-filesystem</a></cite> (<a href="#" onclick="goBack()">Go Back</a>)
@ -585,7 +617,7 @@ function goBack() {
</ol>
</div>
<h2>Further Information</h2>
<h2 id="infos">Further Information</h2>
<ol>
<li>
<a href="https://man7.org/">Linux man pages online</a>
@ -600,7 +632,7 @@ function goBack() {
</li>
</ol>
<h2>
<h2 id="changes">
Changelog
<a class="a--small" href="javascript:void(0);" onclick="OOMAnalyser.toggle('changelog')"
title="Show / hide news">(click to show / hide)</a>
@ -632,7 +664,7 @@ function goBack() {
</ol>
</div>
<h2>
<h2 id="install">
Local Installation
<a class="a--small" href="javascript:void(0);" onclick="OOMAnalyser.toggle('installation')"
title="Show / hide installation guide">(click to show / hide)</a>

View File

@ -22,6 +22,10 @@ class OOMEntityState(object):
complete = 4
def is_visible(element):
return element.offsetWidth > 0 and element.offsetHeight > 0
def hide_element(element_id):
"""Hide the given HTML element"""
element = document.getElementById(element_id)
@ -813,6 +817,7 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
def __init__(self):
self.set_HTML_defaults()
self.update_toc()
element = document.getElementById('version')
element.textContent = "v{}".format(VERSION)
@ -840,6 +845,20 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
if DEBUG:
show_element('notify_box')
def update_toc(self):
"""Update the TOC to show current and visible headlines only"""
new_toc = ''
toc_content = document.querySelectorAll('nav > ul')[0]
for element in document.querySelectorAll('h2'):
if not is_visible(element) or element.classList.contains('js-flag-hide-from-toc'):
continue
new_toc +='<li><a href="#{}">{}</a></li>'.format(element.id, element.textContent)
toc_content.innerHTML = new_toc
def set_HTML_defaults(self, clean_oom=True):
"""Reset the whole HTML document"""
if clean_oom:
@ -968,6 +987,7 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
def reset_form(self):
self.set_HTML_defaults()
self.update_toc()
def toggle_oom(self, show=False):
"""Toggle the visibility of the full OOM message"""
@ -999,6 +1019,7 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
# display results
self.show()
self.update_toc()
def load_from_form(self):
element = document.getElementById('textarea_oom')