From 5cb00470c725a0b4b2a4189bab93d132bb1a43a2 Mon Sep 17 00:00:00 2001 From: Martijn van Exel Date: Fri, 9 Aug 2024 13:14:12 -0600 Subject: [PATCH] feat: simple typeahead search (#1335) * feat: simple typeahead search Signed-off-by: Martijn van Exel * Update public/templates/index.tmpl Co-authored-by: Aarni Koskela * Update public/templates/index.tmpl Co-authored-by: Aarni Koskela * Update public/templates/index.tmpl Co-authored-by: Aarni Koskela * fix: clean up styling, use data attrs Signed-off-by: Martijn van Exel --------- Signed-off-by: Martijn van Exel Co-authored-by: Aarni Koskela Co-authored-by: Andrew Calcutt --- public/resources/index.css | 17 +++++++++++++++++ public/templates/index.tmpl | 26 ++++++++++++++++++++++++-- 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/public/resources/index.css b/public/resources/index.css index e3f7952fa..d18b63816 100644 --- a/public/resources/index.css +++ b/public/resources/index.css @@ -73,12 +73,29 @@ 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; 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 0f0b6f03c..d4d5be766 100644 --- a/public/templates/index.tmpl +++ b/public/templates/index.tmpl @@ -13,17 +13,39 @@ 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]; + var dataName = item.getAttribute('data-name')?.toLowerCase() ?? ''; + var dataIdentifier = item.getAttribute('data-id')?.toLowerCase() ?? ''; + item.hidden = !(dataName.indexOf(filter) > -1 || dataIdentifier.indexOf(filter) > -1); + } + }

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

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

Data

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