mirror of
https://github.com/maptiler/tileserver-gl.git
synced 2024-09-11 03:55:27 +03:00
feat: simple typeahead search (#1335)
* 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:
parent
f846573395
commit
5cb00470c7
@ -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;
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<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="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}}
|
||||
<h2 class="box-header">Styles</h2>
|
||||
<div class="box">
|
||||
{{#each styles}}
|
||||
<div class="item">
|
||||
<div class="item" data-id="{{@key}}" data-name="{{name}}">
|
||||
{{#if thumbnail}}
|
||||
<img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
|
||||
{{else}}
|
||||
@ -70,7 +92,7 @@
|
||||
<h2 class="box-header">Data</h2>
|
||||
<div class="box">
|
||||
{{#each data}}
|
||||
<div class="item">
|
||||
<div class="item" data-id="{{@key}}" data-name="{{tileJSON.name}}">
|
||||
{{#if thumbnail}}
|
||||
<img src="{{public_url}}data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
|
||||
{{else}}
|
||||
|
Loading…
Reference in New Issue
Block a user