Fabio/tileserver-gl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: simple typeahead search

Browse source 
Signed-off-by: Martijn van Exel <m@rtijn.org>
This commit is contained in:
Martijn van Exel 2024-07-29 16:28:03 -06:00
parent 2ff4f098af
commit 1b745a45c7
2 changed files with 41 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
public/resources/index.css
View file

@ -73,6 +73,17 @@ section {
font-size: 20px; font-size: 20px;
background: #fff; 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 { .item {
background: #fff; background: #fff;
height: 191px; height: 191px;

30
public/templates/index.tmpl
View file

@ -13,12 +13,42 @@
el.setSelectionRange(0, el.value.length); el.setSelectionRange(0, el.value.length);
return false; 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';
}
}
}
</script> </script>
</head> </head>
<body> <body>
<section> <section>
<h1 class="title {{#if is_light}}light{{/if}}"><img src="{{public_url}}images/logo.png{{&key_query}}" alt="TileServer GL" /></h1> <h1 class="title {{#if is_light}}light{{/if}}"><img src="{{public_url}}images/logo.png{{&key_query}}" alt="TileServer GL" /></h1>
<h2 class="subtitle">Vector {{#if is_light}}<s>and raster</s>{{else}}and raster{{/if}} maps with GL styles</h2> <h2 class="subtitle">Vector {{#if is_light}}<s>and raster</s>{{else}}and raster{{/if}} maps with GL styles</h2>
<h2 class="box-header">Filter</h2>
<!-- filter box -->
<div class="box">
<div class="item">
<div class="filter-details">
<h3>Filter styles and data by name or identifier.</h3>
<!-- filter input , needs to call filter() when content changes...-->
<input id="filter" type="text" oninput="filter()" placeholder="Filter by name or identifier" />
</div>
</div>
</div>
{{#if styles}} {{#if styles}}
<h2 class="box-header">Styles</h2> <h2 class="box-header">Styles</h2>
<div class="box"> <div class="box">