05ff4bd430
* search favorites Adds the ability to save search terms, use this for autoexpand during typing in searchbox or select from whole list * moved class vars to contructor Co-authored-by: Karl Schweiger <kschweiger@directbox.com>
356 lines
10 KiB
JavaScript
356 lines
10 KiB
JavaScript
BR.Search = class extends L.Control.Geocoder {
|
|
constructor(options) {
|
|
super(
|
|
Object.assign(
|
|
{
|
|
geocoder: new L.Control.Geocoder.LatLng({
|
|
next: new L.Control.Geocoder.Nominatim({
|
|
serviceUrl: 'https://nominatim.openstreetmap.org/',
|
|
}),
|
|
sizeInMeters: 800,
|
|
}),
|
|
position: 'topleft',
|
|
expand: 'click',
|
|
shortcut: {
|
|
search: 70, // char code for 'f'
|
|
},
|
|
placeholder: i18next.t('map.geocoder-placeholder'),
|
|
},
|
|
options
|
|
)
|
|
);
|
|
|
|
L.DomEvent.addListener(document, 'keydown', this._keydownListener, this);
|
|
}
|
|
|
|
|
|
markGeocode(result) {
|
|
this._map.fitBounds(result.geocode.bbox, {
|
|
maxZoom: 17,
|
|
});
|
|
|
|
this.clear();
|
|
this._geocodeMarker = new L.CircleMarker(result.geocode.center, {
|
|
interactive: false,
|
|
color: 'red',
|
|
opacity: 1,
|
|
weight: 3,
|
|
}).addTo(this._map);
|
|
|
|
return this;
|
|
}
|
|
|
|
clear() {
|
|
if (this._geocodeMarker) {
|
|
this._map.removeLayer(this._geocodeMarker);
|
|
}
|
|
}
|
|
|
|
_keydownListener(e) {
|
|
if (BR.Util.keyboardShortcutsAllowed(e) && e.keyCode === this.options.shortcut.search) {
|
|
$('#map .leaflet-control-geocoder')[0].dispatchEvent(new MouseEvent('click'));
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
/* Search favorites handling */
|
|
onAdd(map) {
|
|
|
|
if(!BR.Util.localStorageAvailable())
|
|
return super.onAdd(map);
|
|
|
|
let container=super.onAdd(map);
|
|
new SearchFavorites(this,container);
|
|
return container;
|
|
|
|
}
|
|
};
|
|
|
|
|
|
class SearchFavorites {
|
|
|
|
constructor(geocoder,container) {
|
|
//because eslint does not support instance var declaration
|
|
this.searchInput=undefined;
|
|
this.autocompleteContainer=undefined;
|
|
this.autocompleteSelect=undefined;
|
|
this.autocompleteMenu=undefined;
|
|
this.geocoderForm=undefined;
|
|
this.geocoder=undefined;
|
|
this.favElements=undefined;
|
|
this.isFiltered=true;
|
|
this.arFavitems=[];
|
|
this.arFavitemsLC=[];
|
|
|
|
this.geocoder=geocoder;
|
|
this.searchInput=$(container).find(".leaflet-control-geocoder-form input[type=text]");
|
|
this.searchInput.after(`<span class="search-fav-ctrls btn-group btn-group-sm">
|
|
<button id="search-fav-add"
|
|
title="${i18next.t("searchfav.addfavorite")}"
|
|
class="fa fa-star-o border-0">
|
|
</button><button data-toggle="collapse"
|
|
href="#search-autocomplete-container"
|
|
id="search-fav-expand"
|
|
title="${i18next.t("searchfav.openfavorites")}"
|
|
class="fa fa-angle-double-down border-0">
|
|
</button>
|
|
</span>
|
|
`);
|
|
|
|
//otherwise parent catches event and click is never fired
|
|
$(container).find(".leaflet-control-geocoder-form .search-fav-ctrls").on("mousedown",
|
|
(e) => { e.stopPropagation();e.preventDefault(); });
|
|
|
|
$(container).find(".leaflet-control-geocoder-form .search-fav-ctrls").click((e) => this.onCtrlsClick(e));
|
|
|
|
$(container).find(".leaflet-control-geocoder-form").append(`
|
|
<div class="collapse autocomplete-container filtered" id="search-autocomplete-container">
|
|
<div class="autocomplete-select-container">
|
|
<div class="list-group autocomplete-select" id="search-autocomplete-select" ></div>
|
|
</div>
|
|
<div class="autocomplete-menu bg-light rounded-bottom">
|
|
<div id="search-fav-menu-toggle" class="" data-toggle="collapse" href="#autocomplete-btngroup">
|
|
<span class="bt-more align-top">...</span>
|
|
</div>
|
|
<div class="btn-group btn-group-sm collapse" id="autocomplete-btngroup">
|
|
<button id="search-fav-deleteall"
|
|
title="${i18next.t("searchfav.removeall")}"
|
|
class="fa fa-eraser border">
|
|
</button>
|
|
<button id="search-fav-export"
|
|
title="${i18next.t("searchfav.export")}"
|
|
class="fa fa-floppy-o border">
|
|
</button>
|
|
<button id="search-fav-import"
|
|
class="fa fa-folder-open-o border"
|
|
title="${i18next.t("searchfav.import")}" >
|
|
<input id="search-fav-file" type="file" class="d-none" accept=".json">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
this.autocompleteContainer=$(container).find("#search-autocomplete-container");
|
|
this.autocompleteSelect=this.autocompleteContainer.find("#search-autocomplete-select");
|
|
this.autocompleteMenu=this.autocompleteContainer.find("#autocomplete-btngroup");
|
|
this.geocoderForm=$(container).find(".leaflet-control-geocoder-form");
|
|
|
|
this.autocompleteContainer.on("mousedown",
|
|
(e) => { e.stopPropagation();e.preventDefault(); });
|
|
|
|
this.autocompleteContainer.find("#search-fav-menu-toggle").on("mousedown touchend",
|
|
(e) => { e.stopPropagation();e.preventDefault();});
|
|
|
|
this.autocompleteContainer.find("#search-fav-menu-toggle").on("click touchend",
|
|
(e) => {
|
|
e.stopPropagation();e.preventDefault();
|
|
this.autocompleteMenu.collapse('toggle');
|
|
});
|
|
|
|
this.autocompleteContainer.find(".autocomplete-select-container").on("wheel",
|
|
(e) => { e.stopPropagation(); });
|
|
|
|
this.autocompleteContainer.on("shown.bs.collapse", (e) => this.geocoderForm.addClass("stayvisible"));
|
|
this.autocompleteContainer.on("hidden.bs.collapse", (e) => {
|
|
this.geocoderForm.removeClass("stayvisible");
|
|
this.autocompleteMenu.collapse('hide');
|
|
|
|
});
|
|
|
|
|
|
|
|
this.autocompleteSelect.click((e) => this.onFavItemClicked(e));
|
|
|
|
this.autocompleteContainer.find(".autocomplete-menu").click((e) => this.onFavMenuClicked(e));
|
|
this.autocompleteContainer.find("#search-fav-file").on("change",(e) => this.onImportFavFile(e));
|
|
|
|
let strFavitems=localStorage['searchFavItems'];
|
|
if(strFavitems) {
|
|
this.arFavitems=JSON.parse(strFavitems);
|
|
this.arFavitemsLC = this.arFavitems.map(x => x.toLowerCase()); //copy to Lowercase
|
|
}
|
|
|
|
this.updateFavList();
|
|
|
|
this.searchInput.on("keyup",(e) => this.onInput(e));
|
|
|
|
}
|
|
|
|
updateFavList() {
|
|
if(this.arFavitems.length > 0){
|
|
let opts=this.arFavitems.join('</button><button class="list-group-item list-group-item-action rounded-0 favitem"><span class="fa fa-trash-o mr-1 del-favitem"></span>');
|
|
this.autocompleteSelect.html(`<button class="list-group-item list-group-item-action rounded-0 favitem"><span class="fa fa-trash-o mr-1 del-favitem"></span>${opts}</button>`);
|
|
}
|
|
else
|
|
this.autocompleteSelect.empty();
|
|
|
|
this.favElements=this.autocompleteSelect.find("button");
|
|
}
|
|
|
|
appendFavorite(strFav) {
|
|
this.arFavitems.push(strFav);
|
|
|
|
this.arFavitems=[... new Set(this.arFavitems)]; //remove duplicates
|
|
this.arFavitems.sort();
|
|
this.arFavitemsLC = this.arFavitems.map(x => x.toLowerCase()); //copy to Lowercase
|
|
|
|
localStorage['searchFavItems']=JSON.stringify(this.arFavitems);
|
|
this.updateFavList();
|
|
}
|
|
|
|
deleteFavorite(strFav) {
|
|
let pos=this.arFavitems.indexOf(strFav);
|
|
if(pos >= 0) {
|
|
this.arFavitems.splice(pos, 1);
|
|
this.arFavitems=[... new Set(this.arFavitems)]; //remove duplicates
|
|
this.arFavitems.sort();
|
|
this.arFavitemsLC = this.arFavitems.map(x => x.toLowerCase()); //copy to Lowercase
|
|
|
|
localStorage['searchFavItems']=JSON.stringify(this.arFavitems);
|
|
|
|
this.updateFavList();
|
|
}
|
|
|
|
}
|
|
|
|
onInput(e) {
|
|
if(e.keyCode == 13) {
|
|
this.autocompleteContainer.collapse('hide');
|
|
return;
|
|
}
|
|
|
|
if(e.keyCode <=45 && e.keyCode != 8) return;
|
|
|
|
let srch=this.searchInput.val().toLowerCase();
|
|
|
|
if(!srch || srch.length < 2) {
|
|
this.autocompleteContainer.collapse('hide');
|
|
return;
|
|
}
|
|
|
|
if(!this.isFiltered) {
|
|
this.autocompleteContainer.addClass("filtered");
|
|
this.isFiltered=true;
|
|
}
|
|
|
|
let matches=false;
|
|
this.favElements.removeClass("match");
|
|
this.arFavitemsLC.forEach((val,idx) => {
|
|
if(val.indexOf(srch) != -1) {
|
|
this.favElements.eq(idx).addClass("match");
|
|
matches=true;
|
|
}
|
|
});
|
|
|
|
if(matches)
|
|
this.autocompleteContainer.collapse('show');
|
|
else
|
|
this.autocompleteContainer.collapse('hide');
|
|
}
|
|
|
|
|
|
onCtrlsClick(e) {
|
|
e.stopPropagation();e.preventDefault();
|
|
switch(e.target.id) {
|
|
case "search-fav-add":
|
|
this.appendFavorite(this.searchInput.val());
|
|
break;
|
|
|
|
case "search-fav-expand":
|
|
if(this.autocompleteContainer.hasClass("show")) {
|
|
if(this.isFiltered) {
|
|
this.autocompleteContainer.removeClass("filtered");
|
|
this.isFiltered=false;
|
|
}
|
|
else
|
|
{
|
|
this.autocompleteContainer.collapse('hide')
|
|
this.autocompleteContainer.addClass("filtered");
|
|
this.isFiltered=true;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
this.autocompleteContainer.removeClass("filtered");
|
|
this.isFiltered=false;
|
|
this.autocompleteContainer.collapse('show');
|
|
}
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
onFavItemClicked(e) {
|
|
e.stopPropagation();e.preventDefault();
|
|
|
|
if($(e.target).hasClass("favitem")) {
|
|
this.autocompleteContainer.collapse('hide');
|
|
this.geocoder.setQuery(e.target.innerText);
|
|
this.searchInput.focus();
|
|
|
|
this.geocoder._keydown({keyCode: 13 });
|
|
}
|
|
else if($(e.target).hasClass("del-favitem")) {
|
|
this.deleteFavorite($(e.target).closest("button").text());
|
|
}
|
|
}
|
|
|
|
onFavMenuClicked(e) {
|
|
|
|
switch(e.target.id) {
|
|
case "search-fav-deleteall":
|
|
|
|
if(confirm(i18next.t("searchfav.ask_removeall")) ) {
|
|
this.arFavitems=[];
|
|
this.arFavitemsLC=[];
|
|
localStorage['searchFavItems']=JSON.stringify(this.arFavitems);
|
|
this.updateFavList();
|
|
}
|
|
break;
|
|
|
|
case "search-fav-export":
|
|
let exp=JSON.stringify(this.arFavitems,null,2);
|
|
const blob = new Blob([exp], {
|
|
type: 'application/json;charset=utf-8',
|
|
});
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = objectUrl;
|
|
link.download = 'SearchFavorites.json';
|
|
link.click();
|
|
break;
|
|
|
|
case "search-fav-import":
|
|
$(e.target).find("input[type=file]").click();
|
|
e.preventDefault();
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
|
|
}
|
|
}
|
|
|
|
onImportFavFile(e) {
|
|
if(!e.target.files[0]) return;
|
|
|
|
let r=new FileReader();
|
|
r.onload=(f) => {
|
|
let importFavItems=JSON.parse(f.target.result);
|
|
this.arFavitems=this.arFavitems.concat(importFavItems);
|
|
this.arFavitems=[... new Set(this.arFavitems)]; //remove duplicates
|
|
this.arFavitems.sort();
|
|
this.arFavitemsLC = this.arFavitems.map(x => x.toLowerCase()); //copy to Lowercase
|
|
localStorage['searchFavItems']=JSON.stringify(this.arFavitems);
|
|
this.updateFavList();
|
|
|
|
};
|
|
|
|
r.readAsText(e.target.files[0]);
|
|
|
|
e.target.value='';
|
|
}
|
|
}
|
|
|