From da541606bd5787aa030da100dbc4cabc8a8c6861 Mon Sep 17 00:00:00 2001 From: Malix Date: Tue, 1 Oct 2024 10:58:43 +0200 Subject: [PATCH 1/2] feat: search as URL parameters --- collections.html | 34 +++++++++++++++++++++++++++++----- features.html | 37 +++++++++++++++++++++++++++++++------ templates.html | 47 +++++++++++++++++++++++++++++++++++++---------- 3 files changed, 97 insertions(+), 21 deletions(-) diff --git a/collections.html b/collections.html index 2dc28bf0..c2c2990f 100644 --- a/collections.html +++ b/collections.html @@ -19,7 +19,6 @@

Collections

-

@@ -47,9 +46,7 @@

Collections

const collectionTable = document.getElementById('collectionTable'); const rows = collectionTable.getElementsByTagName('tr'); - searchInput.addEventListener('input', function () { - const searchValue = searchInput.value.toLowerCase(); - + function updateSearchResults(searchValue) { for (let i = 1; i < rows.length; i++) { const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase(); const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase(); @@ -61,5 +58,32 @@

Collections

rows[i].style.display = 'none'; } } + } + + function getSearchParameter() { + const params = new URLSearchParams(window.location.search); + return params.get('search') || ''; + } + + function setSearchParameter(value) { + const params = new URLSearchParams(window.location.search); + if (value) { + params.set('search', value); + } else { + params.delete('search'); + } + window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`); + } + + searchInput.addEventListener('input', function () { + const searchValue = searchInput.value.toLowerCase(); + setSearchParameter(searchValue); + updateSearchResults(searchValue); + }); + + document.addEventListener('DOMContentLoaded', function () { + const searchValue = getSearchParameter(); + searchInput.value = searchValue; + updateSearchResults(searchValue); }); - \ No newline at end of file + diff --git a/features.html b/features.html index 9e87fe4f..1981dc5e 100644 --- a/features.html +++ b/features.html @@ -35,7 +35,7 @@

Available Dev Container Featur Reference Latest Version - + {% for c in site.data.devcontainer-index.collections %} {% for f in c.features %} {% if f.deprecated != true %} @@ -48,7 +48,7 @@

Available Dev Container Featur {% endif %} {% endfor %} - + {% endfor %} @@ -57,9 +57,7 @@

Available Dev Container Featur const collectionTable = document.getElementById('collectionTable'); const rows = collectionTable.getElementsByTagName('tr'); - searchInput.addEventListener('input', function () { - const searchValue = searchInput.value.toLowerCase(); - + function updateSearchResults(searchValue) { for (let i = 1; i < rows.length; i++) { const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase(); const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase(); @@ -71,5 +69,32 @@

Available Dev Container Featur rows[i].style.display = 'none'; } } + } + + function getSearchParameter() { + const params = new URLSearchParams(window.location.search); + return params.get('search') || ''; + } + + function setSearchParameter(value) { + const params = new URLSearchParams(window.location.search); + if (value) { + params.set('search', value); + } else { + params.delete('search'); + } + window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`); + } + + searchInput.addEventListener('input', function () { + const searchValue = searchInput.value.toLowerCase(); + setSearchParameter(searchValue); + updateSearchResults(searchValue); + }); + + document.addEventListener('DOMContentLoaded', function () { + const searchValue = getSearchParameter(); + searchInput.value = searchValue; + updateSearchResults(searchValue); }); - \ No newline at end of file + diff --git a/templates.html b/templates.html index a33d1702..c78e5eba 100644 --- a/templates.html +++ b/templates.html @@ -6,10 +6,12 @@

Available Dev Container Templates

- This table contains all official and community-supported Dev Container Templates - known at the time of crawling each registered collection. This list is continuously - updated with the latest available Template information. See the - Template quick start repository to add your own! + This table contains all official and community-supported Dev Container + Templates + known at the time of crawling each registered collection. This list is continuously + updated with the latest available Template information. See the + Template quick start repository to add your own!

Templates listed here will be presented in the UX of supporting tools.

@@ -33,7 +35,7 @@

Available Dev Container Templa Reference Latest Version - + {% for c in site.data.devcontainer-index.collections %} {% for f in c.templates %} @@ -44,7 +46,7 @@

Available Dev Container Templa {{ f.version | strip_html }} {% endfor %} - + {% endfor %} @@ -53,9 +55,7 @@

Available Dev Container Templa const collectionTable = document.getElementById('collectionTable'); const rows = collectionTable.getElementsByTagName('tr'); - searchInput.addEventListener('input', function () { - const searchValue = searchInput.value.toLowerCase(); - + function updateSearchResults(searchValue) { for (let i = 1; i < rows.length; i++) { const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase(); const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase(); @@ -66,5 +66,32 @@

Available Dev Container Templa rows[i].style.display = 'none'; } } + } + + function getSearchParameter() { + const params = new URLSearchParams(window.location.search); + return params.get('search') || ''; + } + + function setSearchParameter(value) { + const params = new URLSearchParams(window.location.search); + if (value) { + params.set('search', value); + } else { + params.delete('search'); + } + window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`); + } + + searchInput.addEventListener('input', function () { + const searchValue = searchInput.value.toLowerCase(); + setSearchParameter(searchValue); + updateSearchResults(searchValue); + }); + + document.addEventListener('DOMContentLoaded', function () { + const searchValue = getSearchParameter(); + searchInput.value = searchValue; + updateSearchResults(searchValue); }); - \ No newline at end of file + From 1dae88e9db37bafcab13e7609e89eae47a90ba8f Mon Sep 17 00:00:00 2001 From: Malix Date: Tue, 1 Oct 2024 09:23:49 +0000 Subject: [PATCH 2/2] enhance: dry --- collections.html | 47 +---------------------------------------------- features.html | 47 +---------------------------------------------- js/search.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ templates.html | 46 +--------------------------------------------- 4 files changed, 47 insertions(+), 137 deletions(-) create mode 100644 js/search.js diff --git a/collections.html b/collections.html index c2c2990f..4d4e1dc9 100644 --- a/collections.html +++ b/collections.html @@ -41,49 +41,4 @@

Collections

{% endfor %} - + diff --git a/features.html b/features.html index 1981dc5e..fb1219cc 100644 --- a/features.html +++ b/features.html @@ -52,49 +52,4 @@

Available Dev Container Featur {% endfor %} - + diff --git a/js/search.js b/js/search.js new file mode 100644 index 00000000..c3c8efad --- /dev/null +++ b/js/search.js @@ -0,0 +1,44 @@ +function updateSearchResults(searchValue, rows) { + for (let i = 1; i < rows.length; i++) { + const cells = rows[i].getElementsByTagName('td'); + let match = false; + for (let j = 0; j < cells.length; j++) { + if (cells[j].textContent.toLowerCase().includes(searchValue)) { + match = true; + break; + } + } + rows[i].style.display = match ? '' : 'none'; + } +} + +function getSearchParameter() { + const params = new URLSearchParams(window.location.search); + return params.get('search') || ''; +} + +function setSearchParameter(value) { + const params = new URLSearchParams(window.location.search); + if (value) { + params.set('search', value); + } else { + params.delete('search'); + } + window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`); +} + +document.addEventListener('DOMContentLoaded', function () { + const searchInput = document.getElementById('searchInput'); + const collectionTable = document.getElementById('collectionTable'); + const rows = collectionTable.getElementsByTagName('tr'); + + const searchValue = getSearchParameter(); + searchInput.value = searchValue; + updateSearchResults(searchValue, rows); + + searchInput.addEventListener('input', function () { + const searchValue = searchInput.value.toLowerCase(); + setSearchParameter(searchValue); + updateSearchResults(searchValue, rows); + }); +}); diff --git a/templates.html b/templates.html index c78e5eba..2dcd6fac 100644 --- a/templates.html +++ b/templates.html @@ -50,48 +50,4 @@

Available Dev Container Templa {% endfor %} - +