Skip to content

Commit 4884ddb

Browse files
EfniliteEfnilite
committed
add exact filter
1 parent 0986e0d commit 4884ddb

File tree

2 files changed

+106
-54
lines changed

2 files changed

+106
-54
lines changed

‎src/components/docs/DocsFilters.astro‎

Lines changed: 101 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -48,32 +48,64 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
4848

4949
export interface Filter {
5050
types: string[];
51-
version: string;
51+
supported: string;
52+
changed: string;
5253
}
5354

54-
let filter: Filter = {types: [], version: ""};
55+
let filter: Filter = {
56+
types: [],
57+
supported: "",
58+
changed: "",
59+
};
5560

5661
function handleClick(button: HTMLButtonElement) {
5762
const text = button.textContent!!.trim();
58-
const isType = button.getAttribute("data-type") === "type";
59-
if (isType) {
60-
toggle(filter.types, text);
61-
} else {
62-
if (text === filter.version) {
63-
filter.version = "";
64-
} else {
65-
filter.version = text;
66-
}
63+
const attribute = button.getAttribute("data-type")!!;
64+
65+
switch (attribute) {
66+
case "type":
67+
toggle(filter.types, text);
68+
break;
69+
case "supported":
70+
if (text === filter.supported) {
71+
filter.supported = "";
72+
filter.changed = "";
73+
} else {
74+
filter.supported = text;
75+
filter.changed = "";
76+
}
77+
break;
78+
case "changed":
79+
if (text === filter.changed) {
80+
filter.changed = "";
81+
filter.supported = "";
82+
} else {
83+
filter.changed = text;
84+
filter.supported = "";
85+
}
86+
break;
87+
default:
88+
console.warn(`Unknown filter type: ${button.getAttribute("data-type")}`);
89+
return;
6790
}
6891

6992
// update rest of buttons
7093
const buttons = document.querySelectorAll("#filters button");
7194
buttons.forEach(button => {
7295
let match = false;
73-
if (button.getAttribute("data-type") === "type") {
74-
match = filter.types.includes(button.textContent!!.trim());
75-
} else {
76-
match = filter.version === button.textContent!!.trim();
96+
97+
switch (button.getAttribute("data-type")) {
98+
case "type":
99+
match = filter.types.includes(button.textContent!!.trim());
100+
break;
101+
case "supported":
102+
match = filter.supported === button.textContent!!.trim();
103+
break;
104+
case "changed":
105+
match = filter.changed === button.textContent!!.trim();
106+
break;
107+
default:
108+
return;
77109
}
78110

79111
if (match) {
@@ -92,46 +124,56 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
92124
return;
93125
}
94126

95-
if (isType) {
96-
if (filter.types.length === 0) {
97-
element.classList.remove("hidden-by-type");
98-
return;
99-
}
127+
element.classList.remove("hidden-by-type", "hidden-by-changed", "hidden-by-supported");
100128

101-
for (const t of filter.types) {
102-
if (element.getAttribute("data-type")?.includes(types[t])) {
103-
element.classList.remove("hidden-by-type");
129+
switch (attribute) {
130+
case "type":
131+
if (filter.types.length === 0) {
104132
return;
105133
}
106-
}
107134

108-
element.classList.add("hidden-by-type");
109-
} else {
110-
if (filter.version === "") {
111-
element.classList.remove("hidden-by-version");
112-
return;
113-
}
135+
for (const t of filter.types) {
136+
if (element.getAttribute("data-type")?.includes(types[t])) {
137+
return;
138+
}
139+
}
114140

115-
if (filter.version.includes("New") && element.getAttribute("data-new") === "true") {
116-
element.classList.remove("hidden-by-version");
117-
return;
118-
}
141+
element.classList.add("hidden-by-type");
142+
break;
143+
case "supported":
144+
if (filter.supported === "") {
145+
return;
146+
}
119147

120-
const since = element.getAttribute("data-since");
121-
if (since === null) {
122-
element.classList.remove("hidden-by-version");
123-
return;
124-
}
148+
const since1 = element.getAttribute("data-since");
149+
if (since1 === null) {
150+
return;
151+
}
125152

126-
const minor = parseInt(filter.version.match(/\d+\.(\d+)/)!![1], 10);
127-
since.matchAll(/\d+\.(\d+)/g).forEach((match) => {
128-
const otherMinor = parseInt(match[1], 10);
129-
130-
if (otherMinor > minor) {
131-
element.classList.add("hidden-by-version");
153+
const minor1 = parseInt(filter.supported.match(/\d+\.(\d+)/)!![1], 10);
154+
since1.matchAll(/\d+\.(\d+)/g).forEach((match) => {
155+
const otherMinor = parseInt(match[1], 10);
156+
157+
if (otherMinor > minor1) {
158+
element.classList.add("hidden-by-supported");
159+
return;
160+
}
161+
});
162+
break;
163+
case "changed":
164+
const since = element.getAttribute("data-since");
165+
if (since === null) {
132166
return;
133167
}
134-
});
168+
169+
if (!since.includes(filter.changed)) {
170+
element.classList.add("hidden-by-changed");
171+
return;
172+
}
173+
break;
174+
default:
175+
console.warn(`Unknown filter type: ${button.getAttribute("data-type")}`);
176+
return;
135177
}
136178
});
137179
}
@@ -213,7 +255,7 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
213255
</button>
214256
</div>
215257
<div id="filter-expand-area" class="hidden flex-col gap-2 transition">
216-
<h3>Type</h3>
258+
<h3>Syntax type</h3>
217259

218260
<div class="w-fit flex flex-row flex-wrap gap-2">
219261
{rtTypes.map(x =>
@@ -225,15 +267,21 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
225267
)}
226268
</div>
227269

228-
<h3>Supported in</h3>
270+
<h3>Syntax is supported in</h3>
229271
<div class="flex flex-wrap gap-2">
230-
<button data-type="version" class="filter-button p-2 rounded-md text-center
231-
bg-skript text-white font-bold
272+
{versions.map(x =>
273+
<button data-type="supported" class="filter-button p-2 rounded-md text-center
274+
bg-l-bg-secondary dark:bg-d-bg-secondary
232275
hover:cursor-pointer hover:opacity-80 transition">
233-
{versions[0]}
276+
{x}
234277
</button>
235-
{versions.slice(1).map(x =>
236-
<button data-type="version" class="filter-button p-2 rounded-md text-center
278+
)}
279+
</div>
280+
281+
<h3>Syntax was changed in</h3>
282+
<div class="flex flex-wrap gap-2">
283+
{versions.map(x =>
284+
<button data-type="changed" class="filter-button p-2 rounded-md text-center
237285
bg-l-bg-secondary dark:bg-d-bg-secondary
238286
hover:cursor-pointer hover:opacity-80 transition">
239287
{x}

‎src/style.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,11 @@ pre {
9494
display: none !important;
9595
}
9696

97-
.hidden-by-version {
97+
.hidden-by-supported {
98+
display: none !important;
99+
}
100+
101+
.hidden-by-changed {
98102
display: none !important;
99103
}
100104

0 commit comments

Comments
 (0)