Use a CSS variable for redaction.

This commit is contained in:
Herbert Wolverson 2024-07-17 10:06:31 -05:00
parent e247231de0
commit 1ea75039ee
2 changed files with 10 additions and 22 deletions

View File

@ -19,11 +19,11 @@ export function redactCell(cell) {
function cssRedact() {
if (isRedacted()) {
let css = css_getclass(".redactable");
css.style.filter = "blur(4px)";
let r = document.querySelector(':root');
r.style.setProperty('--redact', 'blur(4px)');
} else {
let css = css_getclass(".redactable");
css.style.filter = "";
let r = document.querySelector(':root');
r.style.setProperty('--redact', 'none');
}
}
@ -40,20 +40,3 @@ function isRedacted() {
return true;
}
}
function cssrules() {
var rules = {};
for (var i = 0; i < document.styleSheets.length; ++i) {
var cssRules = document.styleSheets[i].cssRules;
for (var j = 0; j < cssRules.length; ++j)
rules[cssRules[j].selectorText] = cssRules[j];
}
return rules;
}
function css_getclass(name) {
var rules = cssrules();
if (!rules.hasOwnProperty(name))
throw 'TODO: deal_with_notfound_case';
return rules[name];
}

View File

@ -1,3 +1,6 @@
:root {
--redact: none;
}
body {
margin: 0;
font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
@ -79,7 +82,9 @@ body.dark-mode {
min-height: 500px;
}
.dashEditButton { }
.redactable { }
.redactable {
filter: var(--redact);
}
.small { font-size: 8pt; }
/* Funky tricks for the tree view */