From 1b745a45c7ae10e142aa3241474614f547c989e5 Mon Sep 17 00:00:00 2001 From: Martijn van Exel Date: Mon, 29 Jul 2024 16:28:03 -0600 Subject: [PATCH] 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 e3f7952..23b2926 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 0f0b6f0..214c3ca 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