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

feat: simple typeahead search (#1335)

Browse source 
* feat: simple typeahead search

Signed-off-by: Martijn van Exel <m@rtijn.org>

* Update public/templates/index.tmpl

Co-authored-by: Aarni Koskela <akx@iki.fi>

* Update public/templates/index.tmpl

Co-authored-by: Aarni Koskela <akx@iki.fi>

* Update public/templates/index.tmpl

Co-authored-by: Aarni Koskela <akx@iki.fi>

* fix: clean up styling, use data attrs

Signed-off-by: Martijn van Exel <m@rtijn.org>

---------

Signed-off-by: Martijn van Exel <m@rtijn.org>
Co-authored-by: Aarni Koskela <akx@iki.fi>
Co-authored-by: Andrew Calcutt <acalcutt@techidiots.net>
This commit is contained in:
Martijn van Exel 2024-08-09 13:14:12 -06:00 committed by GitHub
parent f846573395
commit 5cb00470c7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 41 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
public/resources/index.css
View file

@ -73,12 +73,29 @@ 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;
border: 1px solid #ededed; border: 1px solid #ededed;
border-top: none; border-top: none;
} }
.filter-item {
background: #fbfbfb;
height: 150px;
border: 1px solid #ededed;
border-top: none;
}
.item:nth-child(odd) { .item:nth-child(odd) {
background-color: #fbfbfb; background-color: #fbfbfb;
} }

26
public/templates/index.tmpl
View file

@ -13,17 +13,39 @@
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];
var dataName = item.getAttribute('data-name')?.toLowerCase() ?? '';
var dataIdentifier = item.getAttribute('data-id')?.toLowerCase() ?? '';
item.hidden = !(dataName.indexOf(filter) > -1 || dataIdentifier.indexOf(filter) > -1);
}
}
</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="filter-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="Start typing 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">
{{#each styles}} {{#each styles}}
<div class="item"> <div class="item" data-id="{{@key}}" data-name="{{name}}">
{{#if thumbnail}} {{#if thumbnail}}
<img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" /> <img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
{{else}} {{else}}
@ -70,7 +92,7 @@
<h2 class="box-header">Data</h2> <h2 class="box-header">Data</h2>
<div class="box"> <div class="box">
{{#each data}} {{#each data}}
<div class="item"> <div class="item" data-id="{{@key}}" data-name="{{tileJSON.name}}">
{{#if thumbnail}} {{#if thumbnail}}
<img src="{{public_url}}data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" /> <img src="{{public_url}}data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
{{else}} {{else}}