From 1b745a45c7ae10e142aa3241474614f547c989e5 Mon Sep 17 00:00:00 2001 From: Martijn van Exel Date: Mon, 29 Jul 2024 16:28:03 -0600 Subject: [PATCH 1/5] feat: simple typeahead search Signed-off-by: Martijn van Exel --- public/resources/index.css | 11 +++++++++++ public/templates/index.tmpl | 30 ++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/public/resources/index.css b/public/resources/index.css index e3f7952fa..23b292695 100644 --- a/public/resources/index.css +++ b/public/resources/index.css @@ -73,6 +73,17 @@ section { font-size: 20px; background: #fff; } +.filter-details { + padding: 20px 30px; +} +.box input { /* Filter text input */ + padding: 10px; + font-size: 16px; + border: 1px solid #ededed; + border-radius: 4px; + /* fill out to parent */ + width: 100%; +} .item { background: #fff; height: 191px; diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl index 0f0b6f03c..214c3ca61 100644 --- a/public/templates/index.tmpl +++ b/public/templates/index.tmpl @@ -13,12 +13,42 @@ el.setSelectionRange(0, el.value.length); return false; } + + function filter() { + var filter = document.getElementById('filter').value.toLowerCase(); + var items = document.getElementsByClassName('item'); + for (var i = 0; i < items.length; i++) { + var item = items[i]; + if (!item.getElementsByClassName('details')[0]) { + continue; + } + var details = item.getElementsByClassName('details')[0]; + var name = details.getElementsByTagName('h3')[0].textContent.toLowerCase(); + var identifier = details.getElementsByClassName('identifier')[0].textContent.toLowerCase().substring(12); // remove "identifier: " + if (name.indexOf(filter) > -1 || identifier.indexOf(filter) > -1) { + item.style.display = 'block'; + } else { + item.style.display = 'none'; + } + } + }

TileServer GL

Vector {{#if is_light}}and raster{{else}}and raster{{/if}} maps with GL styles

+

Filter

+ +
+
+
+

Filter styles and data by name or identifier.

+ + +
+
+
{{#if styles}}

Styles

From 96db28a91d4ef274351f155b766ea94e2a5f4ab6 Mon Sep 17 00:00:00 2001 From: Martijn van Exel Date: Wed, 31 Jul 2024 17:44:04 -0600 Subject: [PATCH 2/5] Update public/templates/index.tmpl Co-authored-by: Aarni Koskela --- public/templates/index.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl index 214c3ca61..06cd6ba71 100644 --- a/public/templates/index.tmpl +++ b/public/templates/index.tmpl @@ -24,7 +24,7 @@ } var details = item.getElementsByClassName('details')[0]; var name = details.getElementsByTagName('h3')[0].textContent.toLowerCase(); - var identifier = details.getElementsByClassName('identifier')[0].textContent.toLowerCase().substring(12); // remove "identifier: " + var identifier = details.getElementsByClassName('identifier')[0].textContent.toLowerCase().replace(/^identifier: /, ''); if (name.indexOf(filter) > -1 || identifier.indexOf(filter) > -1) { item.style.display = 'block'; } else { From b7de2627833a3f2cdbde8fb1249f99db9be42ac9 Mon Sep 17 00:00:00 2001 From: Martijn van Exel Date: Wed, 31 Jul 2024 17:44:23 -0600 Subject: [PATCH 3/5] Update public/templates/index.tmpl Co-authored-by: Aarni Koskela --- public/templates/index.tmpl | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl index 06cd6ba71..ef6b6e4e3 100644 --- a/public/templates/index.tmpl +++ b/public/templates/index.tmpl @@ -19,10 +19,8 @@ var items = document.getElementsByClassName('item'); for (var i = 0; i < items.length; i++) { var item = items[i]; - if (!item.getElementsByClassName('details')[0]) { - continue; - } var details = item.getElementsByClassName('details')[0]; + if(!details) continue; var name = details.getElementsByTagName('h3')[0].textContent.toLowerCase(); var identifier = details.getElementsByClassName('identifier')[0].textContent.toLowerCase().replace(/^identifier: /, ''); if (name.indexOf(filter) > -1 || identifier.indexOf(filter) > -1) { From 07ed845fabf5d4722173735c06ddf5e351b82ec2 Mon Sep 17 00:00:00 2001 From: Martijn van Exel Date: Wed, 31 Jul 2024 17:44:31 -0600 Subject: [PATCH 4/5] Update public/templates/index.tmpl Co-authored-by: Aarni Koskela --- public/templates/index.tmpl | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl index ef6b6e4e3..5f396e979 100644 --- a/public/templates/index.tmpl +++ b/public/templates/index.tmpl @@ -23,11 +23,7 @@ if(!details) continue; var name = details.getElementsByTagName('h3')[0].textContent.toLowerCase(); var identifier = details.getElementsByClassName('identifier')[0].textContent.toLowerCase().replace(/^identifier: /, ''); - if (name.indexOf(filter) > -1 || identifier.indexOf(filter) > -1) { - item.style.display = 'block'; - } else { - item.style.display = 'none'; - } + item.hidden = !(name.indexOf(filter) > -1 || identifier.indexOf(filter) > -1); } } From 9815e76433f0426de72f7a220f7525d586734dc5 Mon Sep 17 00:00:00 2001 From: Martijn van Exel Date: Fri, 2 Aug 2024 09:45:51 -0600 Subject: [PATCH 5/5] fix: clean up styling, use data attrs Signed-off-by: Martijn van Exel --- public/resources/index.css | 6 ++++++ public/templates/index.tmpl | 20 +++++++++----------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/public/resources/index.css b/public/resources/index.css index 23b292695..d18b63816 100644 --- a/public/resources/index.css +++ b/public/resources/index.css @@ -90,6 +90,12 @@ section { border: 1px solid #ededed; border-top: none; } +.filter-item { + background: #fbfbfb; + height: 150px; + border: 1px solid #ededed; + border-top: none; +} .item:nth-child(odd) { background-color: #fbfbfb; } diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl index 5f396e979..d4d5be766 100644 --- a/public/templates/index.tmpl +++ b/public/templates/index.tmpl @@ -18,12 +18,10 @@ var filter = document.getElementById('filter').value.toLowerCase(); var items = document.getElementsByClassName('item'); for (var i = 0; i < items.length; i++) { - var item = items[i]; - var details = item.getElementsByClassName('details')[0]; - if(!details) continue; - var name = details.getElementsByTagName('h3')[0].textContent.toLowerCase(); - var identifier = details.getElementsByClassName('identifier')[0].textContent.toLowerCase().replace(/^identifier: /, ''); - item.hidden = !(name.indexOf(filter) > -1 || identifier.indexOf(filter) > -1); + var item = items[i]; + var dataName = item.getAttribute('data-name')?.toLowerCase() ?? ''; + var dataIdentifier = item.getAttribute('data-id')?.toLowerCase() ?? ''; + item.hidden = !(dataName.indexOf(filter) > -1 || dataIdentifier.indexOf(filter) > -1); } } @@ -35,11 +33,11 @@

Filter

-
+
-

Filter styles and data by name or identifier.

+

Filter styles and data by name or identifier

- +
@@ -47,7 +45,7 @@

Styles

{{#each styles}} -
+
{{#if thumbnail}} {{name}} preview {{else}} @@ -94,7 +92,7 @@

Data

{{#each data}} -
+
{{#if thumbnail}} {{name}} preview {{else}}