ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Husky fixes for Search/SearchFavorites

Browse source
This commit is contained in:
Marcus Jaschen 2021-11-14 10:46:54 +01:00 • committed by Gautier P
parent f1557a1d5c
commit 1551fec917
1 changed files with 249 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

507
js/plugin/Search.js
View file

@ -22,8 +22,7 @@ BR.Search = class extends L.Control.Geocoder {
L.DomEvent.addListener(document, 'keydown', this._keydownListener, this);
}
markGeocode(result) {
this._map.fitBounds(result.geocode.bbox, {
maxZoom: 17,
@ -52,58 +51,59 @@ BR.Search = class extends L.Control.Geocoder {
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;
}
/* 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=[];
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">
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")}"
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")}"
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(); });
//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(`
$(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>
@ -114,243 +114,234 @@ class SearchFavorites {
</div>
<div class="btn-group btn-group-sm collapse" id="autocomplete-btngroup">
<button id="search-fav-deleteall"
title="${i18next.t("searchfav.removeall")}"
title="${i18next.t('searchfav.removeall')}"
class="fa fa-eraser border">
</button>
<button id="search-fav-export"
title="${i18next.t("searchfav.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")}" >
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.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.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");
}
this.autocompleteContainer.find('#search-fav-menu-toggle').on('mousedown touchend', (e) => {
e.stopPropagation();
e.preventDefault();
});
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();
}
this.autocompleteContainer.find('#search-fav-menu-toggle').on('click touchend', (e) => {
e.stopPropagation();
e.preventDefault();
this.autocompleteMenu.collapse('toggle');
});
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();
this.autocompleteContainer.find('.autocomplete-select-container').on('wheel', (e) => {
e.stopPropagation();
});
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) {
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');
});
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();
this.autocompleteSelect.click((e) => this.onFavItemClicked(e));
};
r.readAsText(e.target.files[0]);
e.target.value='';
}
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 = '';
}
}