From 35a82e94e85c5b4f068e6e4d3d807dfc3c05379d Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Thu, 11 Apr 2024 10:04:56 -0700
Subject: Change record sheet visibility with JavaScript instead of CSS
since the CSS way doesn't work on my version of Firefox
---
index.js | 15 +++++++++------
style.css | 12 ------------
2 files changed, 9 insertions(+), 18 deletions(-)
diff --git a/index.js b/index.js
index ee2d3ad..2b13004 100644
--- a/index.js
+++ b/index.js
@@ -282,16 +282,11 @@ const FIRING_ARC_SIZE = {
}
let prevVb = localStorage.getItem('viewBox');
-let recVis = localStorage.getItem('recordsVisibility');
if (prevVb) {
svg.setAttributeNS(null, 'viewBox', prevVb);
}
-if (recVis == 'false') {
- recordSheetVisibility.checked = false;
-}
-
let info = document.getElementById('status');
Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
@@ -1110,7 +1105,15 @@ svg.addEventListener('pointerdown', e => {
});
recordSheetVisibility.addEventListener('input', e => {
- localStorage.setItem('recordsVisibility', recordSheetVisibility.checked);
+ let divs = document.querySelectorAll('#content div');
+
+ divs.forEach(d => {
+ if (recordSheetVisibility.checked) {
+ d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';
+ } else {
+ d.style.display = 'none';
+ }
+ });
});
document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => {
diff --git a/style.css b/style.css
index 9aeeb55..088cde4 100644
--- a/style.css
+++ b/style.css
@@ -68,23 +68,11 @@ div#content {
line-height: 1.5em;
}
-#content > div {
- display: none;
-}
-
#content input[type="checkbox"].visible {
position: absolute;
right: 0;
}
-#content:has(input[type="checkbox"].visible:checked) > div {
- display: block;
-}
-
-#content:has(input[type="checkbox"].visible:checked) div#record-sheet {
- display: flex;
-}
-
#record-sheet {
/* max-height: 100%; */
overflow-y: auto;
--
cgit v1.2.3