Use CSS classes to control the visibility

This commit is contained in:
Carsten Grohmann 2018-10-16 19:50:33 +02:00
parent 5d83eeccbb
commit 5a89d46034
2 changed files with 19 additions and 22 deletions

View File

@ -25,6 +25,10 @@
text-align: right; text-align: right;
} }
.js-text--display-none {
display: none;
}
.text__superscript { .text__superscript {
vertical-align: super; vertical-align: super;
font-size: 0.83em; font-size: 0.83em;
@ -59,10 +63,6 @@
word-wrap: break-word; word-wrap: break-word;
} }
.js-table__tr--hide {
display: none;
}
.a--small { .a--small {
font-size: small; font-size: small;
font-weight: unset; font-weight: unset;
@ -90,7 +90,6 @@
.license__text { .license__text {
font-size: small; font-size: small;
display: none;
} }
.notify_box { .notify_box {
@ -133,7 +132,7 @@ function goBack() {
</div> </div>
<p> <p>
<div class="terminal notify_box" id="notify_box"></div> <div class="terminal notify_box js-text--display-none" id="notify_box"></div>
</p> </p>
<div id="analysis"> <div id="analysis">
@ -609,7 +608,7 @@ function goBack() {
<a href="https://github.com/CarstenGrohmann/OOMAnalyser" title="Source code on GitHub">Source Code on GitHub</a> <a href="https://github.com/CarstenGrohmann/OOMAnalyser" title="Source code on GitHub">Source Code on GitHub</a>
</div> </div>
<div class="license__text" id="license"> <div class="license__text js-text--display-none" id="license">
<p> <p>
Copyright (c) 2017-2018 Carsten Grohmann mail &lt;add at here&gt; carsten-grohmann.de Copyright (c) 2017-2018 Carsten Grohmann mail &lt;add at here&gt; carsten-grohmann.de
</p> </p>

View File

@ -16,28 +16,26 @@ VERSION = "0.2.0"
def hide_element(element_id): def hide_element(element_id):
"""Hide the given HTML element""" """Hide the given HTML element"""
document.getElementById(element_id).style.display = 'none' element = document.getElementById(element_id)
element.classList.add('js-text--display-none')
def show_element(element_id): def show_element(element_id):
"""Show the given HTML element""" """Show the given HTML element"""
document.getElementById(element_id).style.display = 'block' element = document.getElementById(element_id)
element.classList.remove('js-text--display-none')
def toggle(element_id): def toggle(element_id):
"""Toggle the visibility of the given HTML element""" """Toggle the visibility of the given HTML element"""
element = document.getElementById(element_id) element = document.getElementById(element_id)
display_prop = element.style.display element.classList.toggle('js-text--display-none')
if display_prop and display_prop == 'block':
element.style.display = 'none'
else:
element.style.display = 'block'
def error(msg): def error(msg):
"""Show the error box and add the error message""" """Show the error box and add the error message"""
show_element('notify_box')
notify_box = document.getElementById('notify_box') notify_box = document.getElementById('notify_box')
notify_box.style.display = 'block'
notification = document.createElement('div') notification = document.createElement('div')
notification.classList.add('js-notify_box__msg--error') notification.classList.add('js-notify_box__msg--error')
notification.innerHTML = 'ERROR: {}<br>'.format(msg) notification.innerHTML = 'ERROR: {}<br>'.format(msg)
@ -46,8 +44,8 @@ def error(msg):
def warning(msg): def warning(msg):
"""Show the error box and add the warning message""" """Show the error box and add the warning message"""
show_element('notify_box')
notify_box = document.getElementById('notify_box') notify_box = document.getElementById('notify_box')
notify_box.style.display = 'block'
notification = document.createElement('div') notification = document.createElement('div')
notification.classList.add('js-notify_box__msg--warning') notification.classList.add('js-notify_box__msg--warning')
notification.innerHTML = 'WARNING: {}<br>'.format(msg) notification.innerHTML = 'WARNING: {}<br>'.format(msg)
@ -746,7 +744,7 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
if content == '<not found>': if content == '<not found>':
row = element.parentNode row = element.parentNode
row.classList.add('js-table__tr--hide') row.classList.add('js-text--display-none')
elif item.endswith('_kb'): elif item.endswith('_kb'):
element.classList.add('text--append-suffix-kbytes') element.classList.add('text--append-suffix-kbytes')
elif item.endswith('_pages'): elif item.endswith('_pages'):
@ -765,8 +763,8 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
show_element('input') show_element('input')
# show hidden rows # show hidden rows
for element in document.getElementsByClassName('js-table__tr--hide'): for element in document.querySelectorAll('table .js-text--display-none'):
element.classList.remove('js-table__tr--hide') element.classList.remove('js-text--display-none')
for item in self.mem_modinfo_entries: for item in self.mem_modinfo_entries:
element = document.getElementById(item) element = document.getElementById(item)
@ -877,11 +875,11 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
row_with_oom = oom_element.parentNode.parentNode row_with_oom = oom_element.parentNode.parentNode
toggle_msg = document.getElementById('oom_toogle_msg') toggle_msg = document.getElementById('oom_toogle_msg')
if show or row_with_oom.classList.contains('js-table__tr--hide'): if show or row_with_oom.classList.contains('js-text--display-none'):
row_with_oom.classList.remove('js-table__tr--hide') row_with_oom.classList.remove('js-text--display-none')
toggle_msg.text = "(click to hide)" toggle_msg.text = "(click to hide)"
else: else:
row_with_oom.classList.add('js-table__tr--hide') row_with_oom.classList.add('js-text--display-none')
toggle_msg.text = "(click to show)" toggle_msg.text = "(click to show)"
def analyse_and_show(self): def analyse_and_show(self):