add visibility menu
This commit is contained in:
parent
8385103796
commit
8ad34cc221
|
@ -14,6 +14,10 @@ body {
|
|||
opacity: 0.33;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
@ -65,3 +69,13 @@ body {
|
|||
.deadlink {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#visibility_menu_toggle {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#visibility_menu {
|
||||
border: 1px solid darkgray;
|
||||
position: absolute;
|
||||
background-color: #FAFAFA;
|
||||
}
|
||||
|
|
|
@ -46,3 +46,35 @@ function remove_tag(event) {
|
|||
tag.remove();
|
||||
});
|
||||
}
|
||||
|
||||
function toggle_visibility_menu(event) {
|
||||
let menu = document.querySelector('#visibility_menu');
|
||||
if (menu.style.display == 'block') {
|
||||
menu.style.display = 'none';
|
||||
} else if (menu.style.display == 'none') {
|
||||
menu.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function toggle_visibility(event) {
|
||||
console.log(event);
|
||||
let tag = event.target.parentElement.parentElement.cells[0].innerText;
|
||||
let vis_class = ['faded', 'hidden'];
|
||||
if (tag == 'non-qm posts') {
|
||||
for (let post of document.querySelectorAll('.post_container:not(.qm_post)')) {
|
||||
if (event.target.checked) {
|
||||
post.classList.add(vis_class[event.target.parentElement.cellIndex - 1]);
|
||||
} else {
|
||||
post.classList.remove(vis_class[event.target.parentElement.cellIndex - 1]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let post of document.querySelectorAll('.' + tag)) {
|
||||
if (event.target.checked) {
|
||||
post.classList.add(vis_class[event.target.parentElement.cellIndex - 1]);
|
||||
} else {
|
||||
post.classList.remove(vis_class[event.target.parentElement.cellIndex - 1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,6 +11,28 @@
|
|||
<body>
|
||||
<header>
|
||||
<h1>Voyage</h1>
|
||||
<span id="visibility_menu_toggle" onclick="toggle_visibility_menu(event)">Visibility</span>
|
||||
<div id="visibility_menu" style="display: none;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tag</th>
|
||||
<th>Faded</th>
|
||||
<th>Hidden</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>non-qm posts</td><td><input type="checkbox" onchange="toggle_visibility(event)" checked></td><td><input type="checkbox" onchange="toggle_visibility(event)"></td>
|
||||
</tr>
|
||||
{% for tag in tags_vis %}
|
||||
<tr>
|
||||
<td>{{ tag }}</td><td><input type="checkbox" onchange="toggle_visibility(event)"></td><td><input type="checkbox" onchange="toggle_visibility(event)"></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{% for post in posts %}
|
||||
|
|
Loading…
Reference in New Issue
Block a user