Skip to content

Commit 1473b20

Browse files
siri404siri404
authored
feat: enables table search and url syncing in collections page (#672)
Co-authored-by: Siri 404 <8502281+siri404-gh@users.noreply.github.com>
1 parent 8ffd0c0 commit 1473b20

File tree

5 files changed

+58
-107
lines changed

5 files changed

+58
-107
lines changed

‎_includes/js_files.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,5 @@
1212
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
1313
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
1414
<script async defer src="https://buttons.github.io/buttons.js"></script>
15-
<script src="{{ site.baseurl }}/js/page.js"></script>
15+
<script src="{{ site.baseurl }}/js/page.js"></script>
16+
<script src="{{ site.baseurl }}/js/table-search.js"></script>

‎collections.html‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -40,26 +40,4 @@ <h1 style="margin-left: auto;margin-right: auto;">Collections</h1>
4040
</td>
4141
</tr>
4242
{% endfor %}
43-
</table>
44-
45-
<script>
46-
const searchInput = document.getElementById('searchInput');
47-
const collectionTable = document.getElementById('collectionTable');
48-
const rows = collectionTable.getElementsByTagName('tr');
49-
50-
searchInput.addEventListener('input', function () {
51-
const searchValue = searchInput.value.toLowerCase();
52-
53-
for (let i = 1; i < rows.length; i++) {
54-
const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
55-
const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
56-
const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();
57-
58-
if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
59-
rows[i].style.display = '';
60-
} else {
61-
rows[i].style.display = 'none';
62-
}
63-
}
64-
});
65-
</script>
43+
</table>

‎features.html‎

Lines changed: 1 addition & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -50,45 +50,4 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Featur
5050
{% endfor %}
5151

5252
{% endfor %}
53-
</table>
54-
55-
<script>
56-
const searchInput = document.getElementById('searchInput');
57-
const collectionTable = document.getElementById('collectionTable');
58-
const rows = collectionTable.getElementsByTagName('tr');
59-
60-
function performSearch() {
61-
const searchValue = searchInput.value.toLowerCase();
62-
63-
for (let i = 1; i < rows.length; i++) {
64-
const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
65-
const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
66-
const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();
67-
68-
if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
69-
rows[i].style.display = '';
70-
} else {
71-
rows[i].style.display = 'none';
72-
}
73-
}
74-
}
75-
76-
searchInput.addEventListener('input', function () {
77-
performSearch();
78-
const url = new URL(window.location);
79-
if (searchInput.value) {
80-
url.searchParams.set('search', searchInput.value);
81-
} else {
82-
url.searchParams.delete('search');
83-
}
84-
window.history.replaceState({}, '', url);
85-
});
86-
87-
// Read search parameter from URL on page load
88-
const urlParams = new URLSearchParams(window.location.search);
89-
const searchParam = urlParams.get('search');
90-
if (searchParam) {
91-
searchInput.value = searchParam;
92-
performSearch();
93-
}
94-
</script>
53+
</table>

‎js/table-search.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
(function () {
2+
const searchInput = document.getElementById('searchInput');
3+
const collectionTable = document.getElementById('collectionTable');
4+
5+
if (!searchInput || !collectionTable) {
6+
return;
7+
}
8+
9+
const rows = collectionTable.getElementsByTagName('tr');
10+
11+
function performSearch() {
12+
const searchValue = searchInput.value.toLowerCase();
13+
14+
for (let i = 1; i < rows.length; i++) {
15+
const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
16+
const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
17+
const repository = rows[i].getElementsByTagName('td')[2] ? rows[i].getElementsByTagName('td')[2].textContent.toLowerCase() : '';
18+
19+
if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
20+
rows[i].style.display = '';
21+
} else {
22+
rows[i].style.display = 'none';
23+
}
24+
}
25+
}
26+
27+
function updateURL() {
28+
const url = new URL(window.location);
29+
if (searchInput.value) {
30+
url.searchParams.set('search', searchInput.value);
31+
} else {
32+
url.searchParams.delete('search');
33+
}
34+
window.history.replaceState({}, '', url);
35+
}
36+
37+
function loadSearchFromURL() {
38+
const urlParams = new URLSearchParams(window.location.search);
39+
const searchParam = urlParams.get('search');
40+
if (searchParam) {
41+
searchInput.value = searchParam;
42+
performSearch();
43+
}
44+
}
45+
46+
searchInput.addEventListener('input', function () {
47+
performSearch();
48+
updateURL();
49+
});
50+
51+
// Initialize search from URL on page load
52+
loadSearchFromURL();
53+
})();

‎templates.html‎

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -46,44 +46,4 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Templa
4646
{% endfor %}
4747

4848
{% endfor %}
49-
</table>
50-
51-
<script>
52-
const searchInput = document.getElementById('searchInput');
53-
const collectionTable = document.getElementById('collectionTable');
54-
const rows = collectionTable.getElementsByTagName('tr');
55-
56-
function performSearch() {
57-
const searchValue = searchInput.value.toLowerCase();
58-
59-
for (let i = 1; i < rows.length; i++) {
60-
const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
61-
const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
62-
63-
if (name.includes(searchValue) || maintainer.includes(searchValue)) {
64-
rows[i].style.display = '';
65-
} else {
66-
rows[i].style.display = 'none';
67-
}
68-
}
69-
}
70-
71-
searchInput.addEventListener('input', function () {
72-
performSearch();
73-
const url = new URL(window.location);
74-
if (searchInput.value) {
75-
url.searchParams.set('search', searchInput.value);
76-
} else {
77-
url.searchParams.delete('search');
78-
}
79-
window.history.replaceState({}, '', url);
80-
});
81-
82-
// Read search parameter from URL on page load
83-
const urlParams = new URLSearchParams(window.location.search);
84-
const searchParam = urlParams.get('search');
85-
if (searchParam) {
86-
searchInput.value = searchParam;
87-
performSearch();
88-
}
89-
</script>
49+
</table>

0 commit comments

Comments
 (0)