Skip to content

Commit 126cf15

Browse files
AlexDawsonUKAlexDawsonUK
authored
Merge pull request #120 from AlexDawsonUK:main
Filter Fixes
2 parents f8238d6 + 3a1d95e commit 126cf15

File tree

1 file changed

+17
-14
lines changed

1 file changed

+17
-14
lines changed

‎tagFilter.md‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# ReSpec Tag and Filter
22

3-
- **Version:** 0.2
3+
- **Version:** 0.2.1
44
- **Creator:** Alexander Dawson
55

66
## Features
@@ -42,30 +42,30 @@ The below must be included within the `<head>` element:
4242
/* Role-based Labeling & Filter System: https://github.com/w3c/sustainableweb-wsg/issues/14 */
4343
legend { font-weight: bold; width: fit-content; }
4444
.switch form { display: flex; margin-bottom: 1.5em; margin-top: 1.5em; }
45-
.switch label { box-sizing: border-box; border: medium solid var(--toclink-visited-underline); display: inline-block; min-width: 170px; padding: 0.5em 1em; text-align: center; }
46-
.switch label:has(input:checked) { background-color: #d9d9d9; font-weight: bold; }
47-
.switch label:first-child { border-right: 0; border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
48-
.switch label:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
45+
.switch label { box-sizing: border-box; border: medium solid var(--toclink-visited-text); display: inline-block; padding: 0.5em; text-align: center; }
46+
.switch label:has(input:checked) { background-color: #d9d9d9; color: #000000; font-weight: bold; }
47+
.switch label:first-child { border-right: 0; border-top-left-radius: 15px; border-bottom-left-radius: 15px; min-width: 100px; }
48+
.switch label:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; min-width: 100px; }
4949
.filter h2 { position: static !important; }
5050
.filter input { margin-bottom: 0.75em; margin-top: 0.75em; }
5151
.filter label { margin-right: 0.5em; white-space: nowrap; }
5252
.filter fieldset { border: medium solid #d9d9d9; margin-bottom: 1em; }
53-
.filter fieldset:has(:checked) ~ .c .reset { border-color: var(--toclink-visited-underline); color: var(--toclink-text); }
53+
.filter fieldset:has(:checked) ~ .c .reset { border-color: var(--toclink-visited-text); color: var(--toclink-text); }
5454
.filter .c, .switch { max-width: fit-content; margin-left: auto; margin-right: auto; }
5555
.filter .c .reset { background-color: var(--tocsidebar-bg); border: medium solid #d9d9d9; border-radius: 15px; color: #d9d9d9; font-size: 1em; font-weight: bold; margin-bottom: 2em; padding: 1.2em 3em; }
5656
/* Hide All Non-SC Related Content Upon Filter Activation */
57-
.hidden, .switch input, body:has(#filter :checked) #abstract, body:has(#filter :checked) #sotd, #toc:has(.filter :checked) ~ #introduction, #toc:has(.filter :checked) ~ #considerations, #toc:has(.filter :checked) ~ #acknowledgments, #toc:has(.filter :checked) ~ #changelog, #toc:has(.filter :checked) ~ section > p ~ section, #toc:has(.filter :checked) ~ section > p ~ section > section, #toc:has(.filter :checked) ~ section > div, #toc:has(.filter :checked) ~ section > p, #toc:has(.filter :checked) ~ section > ul, .switch:has(#contents:checked) ~ .filter, .switch:has(#filters:checked) ~ #table-of-contents, .switch:has(#filters:checked) ~ .toc
58-
{ content-visibility: hidden; height: 1px; overflow: hidden; position: absolute; width: 1px; }
57+
.hidden, .switch input, .switch:has(#contents:checked) ~ .filter, .switch:has(#filters:checked) ~ #table-of-contents, .switch:has(#filters:checked) ~ .toc, body:has(#filter :checked) #abstract, body:has(#filter :checked) #sotd, #toc:has(.filter :checked) ~ #introduction, #toc:has(.filter :checked) ~ #considerations, #toc:has(.filter :checked) ~ #acknowledgments, #toc:has(.filter :checked) ~ #changelog, #toc:has(.filter :checked) ~ section > p ~ section, #toc:has(.filter :checked) ~ section > p, #toc:has(.filter :checked) ~ section > ul, #toc:has(.filter :checked) ~ section > div, #toc:has(.filter :checked) ~ section > p ~ section > section
58+
{ clip: rect(0,0,0,0) !important; content-visibility: hidden; height: 1px; overflow: hidden; position: absolute; width: 1px; }
5959
/* Show Filtered Content */
6060
#toc:has(.filter :checked) ~ section section:has(.mt), #toc:has(.filter :checked) ~ section section:has(.ht),
6161
#toc:has(.filter :checked) ~ section section:has(.mh), #toc:has(.filter :checked) ~ section section:has(.mm), #toc:has(.filter :checked) ~ section section:has(.ml),
6262
#toc:has(.filter :checked) ~ section section:has(.eh), #toc:has(.filter :checked) ~ section section:has(.em), #toc:has(.filter :checked) ~ section section:has(.el),
6363
#toc:has(.filter :checked) ~ section section:has(.wh), #toc:has(.filter :checked) ~ section section:has(.wm), #toc:has(.filter :checked) ~ section section:has(.wl),
6464
#toc:has(.filter :checked) ~ section section:has(.ch), #toc:has(.filter :checked) ~ section section:has(.cm), #toc:has(.filter :checked) ~ section section:has(.cl),
6565
#toc:has(.filter :checked) ~ section section:has(.afnor), #toc:has(.filter :checked) ~ section section:has(.aws), #toc:has(.filter :checked) ~ section section:has(.azure), #toc:has(.filter :checked) ~ section section:has(.gpf), #toc:has(.filter :checked) ~ section section:has(.gr491), #toc:has(.filter :checked) ~ section section:has(.greenit), #toc:has(.filter :checked) ~ section section:has(.opquast), #toc:has(.filter :checked) ~ section section:has(.sdgs), #toc:has(.filter :checked) ~ section section:has(.ca), #toc:has(.filter :checked) ~ section section:has(.cp), #toc:has(.filter :checked) ~ section section:has(.cs), #toc:has(.filter :checked) ~ section section:has(.ai), #toc:has(.filter :checked) ~ section section:has(.assets), #toc:has(.filter :checked) ~ section section:has(.compatibility), #toc:has(.filter :checked) ~ section section:has(.content), #toc:has(.filter :checked) ~ section section:has(.css), #toc:has(.filter :checked) ~ section section:has(.e-waste), #toc:has(.filter :checked) ~ section section:has(.education), #toc:has(.filter :checked) ~ section section:has(.governance), #toc:has(.filter :checked) ~ section section:has(.hardware), #toc:has(.filter :checked) ~ section section:has(.html), #toc:has(.filter :checked) ~ section section:has(.ideation), #toc:has(.filter :checked) ~ section section:has(.javascript), #toc:has(.filter :checked) ~ section section:has(.kpis), #toc:has(.filter :checked) ~ section section:has(.marketing), #toc:has(.filter :checked) ~ section section:has(.networking), #toc:has(.filter :checked) ~ section section:has(.patterns), #toc:has(.filter :checked) ~ section section:has(.performance), #toc:has(.filter :checked) ~ section section:has(.report), #toc:has(.filter :checked) ~ section section:has(.research), #toc:has(.filter :checked) ~ section section:has(.equity), #toc:has(.filter :checked) ~ section section:has(.software), #toc:has(.filter :checked) ~ section section:has(.strategy), #toc:has(.filter :checked) ~ section section:has(.ui), #toc:has(.filter :checked) ~ section section:has(.usability),
66-
.summary ul, .mt, .ht, .mh, .mm, .ml, .eh, .em, .el, .wh, .wm, .wl, .ch, .cm, .cl, .afnor, .aws, .azure, .gpf, .gr491, .greenit, .opquast, .sdgs, .ca, .cp, .cs, .ai, .assets, .compatibility, .content, .css, .e-waste, .education, .governance, .hardware, .html, .ideation, .javascript, .kpis, .marketing, .networking, .patterns, .performance, .report, .research, .equity, .software, .strategy, .ui, .usability,
66+
.mt, .ht, .mh, .mm, .ml, .eh, .em, .el, .wh, .wm, .wl, .ch, .cm, .cl, .afnor, .aws, .azure, .gpf, .gr491, .greenit, .opquast, .sdgs, .ca, .cp, .cs, .ai, .assets, .compatibility, .content, .css, .e-waste, .education, .governance, .hardware, .html, .ideation, .javascript, .kpis, .marketing, .networking, .patterns, .performance, .report, .research, .equity, .software, .strategy, .ui, .usability,
6767
.mt ~ section:last-child, .ht ~ section:last-child, .mh ~ section:last-child, .mm ~ section:last-child, .ml ~ section:last-child, .eh ~ section:last-child, .em ~ section:last-child, .el ~ section:last-child, .wh ~ section:last-child, .wm ~ section:last-child, .wl ~ section:last-child, .ch ~ section:last-child, .cm ~ section:last-child, .cl ~ section:last-child , .afnor ~ section:last-child, .aws ~ section:last-child, .azure ~ section:last-child, .gpf ~ section:last-child, .gr491 ~ section:last-child, .greenit ~ section:last-child, .opquast ~ section:last-child, .sdgs ~ section:last-child, .ca ~ section:last-child, .cp ~ section:last-child, .cs ~ section:last-child, .ai ~ section:last-child, .assets ~ section:last-child, .compatibility ~ section:last-child, .content ~ section:last-child, .css ~ section:last-child, .e-waste ~ section:last-child, .education ~ section:last-child, .governance ~ section:last-child, .hardware ~ section:last-child, .html ~ section:last-child, .ideation ~ section:last-child, .javascript ~ section:last-child, .kpis ~ section:last-child, .marketing ~ section:last-child, .networking ~ section:last-child, .patterns ~ section:last-child, .performance ~ section:last-child, .report ~ section:last-child, .research ~ section:last-child, .equity ~ section:last-child, .software ~ section:last-child, .strategy ~ section:last-child, .ui ~ section:last-child, .usability ~ section:last-child
68-
{ content-visibility: visible !important; height: auto !important; overflow: unset !important; position: static !important; width: auto !important; }
68+
{ clip: auto; content-visibility: visible !important; height: auto !important; overflow: unset !important; position: static !important; width: auto !important; }
6969
@media (scripting: none) { .filter { display: none; } }
7070
```
7171

@@ -87,8 +87,8 @@ The below must be included within the `<head>` element:
8787
const newItems = `
8888
<section id="switch" class="switch">
8989
<form>
90-
<label for="contents"><input type="radio" id="contents" name="switcher" checked>Table of Contents</label>
91-
<label for="filters"><input type="radio" id="filters" name="switcher">Content Filters</label>
90+
<label for="contents"><input type="radio" id="contents" name="switcher" checked>Contents</label>
91+
<label for="filters"><input type="radio" id="filters" name="switcher">Filters</label>
9292
</form>
9393
</section>
9494
<section id="filter" class="filter">
@@ -236,8 +236,11 @@ The below must be included within the `<head>` element:
236236
toc.querySelectorAll('a').forEach(link => {
237237
const str = link.href;
238238
const result = str.split('#')[1];
239-
if (section.id === result) {
240-
link.classList.add('hidden'); } }); } } }); }
239+
if (section.id === result || result === "abstract" || result === "sotd" || result === "considerations" || result === "acknowledgments" || result === "changelog") {
240+
link.classList.add('hidden'); } else if (
241+
result === "introduction") {
242+
link.parentElement.classList.add('hidden');
243+
} }); } } }); }
241244
function filterNote(name, attr) {
242245
let countTotal = " (" + document.querySelectorAll(attr).length + ")";
243246
if (document.getElementById(name).parentElement.innerHTML.includes(countTotal)) { } else {

0 commit comments

Comments
 (0)