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

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

275
js/plugin/Search.js
View file

@ -23,7 +23,6 @@ BR.Search = class extends L.Control.Geocoder {
L.DomEvent.addListener(document, 'keydown', this._keydownListener, this); L.DomEvent.addListener(document, 'keydown', this._keydownListener, this);
} }
markGeocode(result) { markGeocode(result) {
this._map.fitBounds(result.geocode.bbox, { this._map.fitBounds(result.geocode.bbox, {
maxZoom: 17, maxZoom: 17,
@ -55,55 +54,56 @@ BR.Search = class extends L.Control.Geocoder {
/* Search favorites handling */ /* Search favorites handling */
onAdd(map) { onAdd(map) {
if (!BR.Util.localStorageAvailable()) return super.onAdd(map);
if(!BR.Util.localStorageAvailable()) let container = super.onAdd(map);
return super.onAdd(map); new SearchFavorites(this, container);
let container=super.onAdd(map);
new SearchFavorites(this,container);
return container; return container;
} }
}; };
class SearchFavorites { class SearchFavorites {
constructor(geocoder, container) {
constructor(geocoder,container) {
//because eslint does not support instance var declaration //because eslint does not support instance var declaration
this.searchInput=undefined; this.searchInput = undefined;
this.autocompleteContainer=undefined; this.autocompleteContainer = undefined;
this.autocompleteSelect=undefined; this.autocompleteSelect = undefined;
this.autocompleteMenu=undefined; this.autocompleteMenu = undefined;
this.geocoderForm=undefined; this.geocoderForm = undefined;
this.geocoder=undefined; this.geocoder = undefined;
this.favElements=undefined; this.favElements = undefined;
this.isFiltered=true; this.isFiltered = true;
this.arFavitems=[]; this.arFavitems = [];
this.arFavitemsLC=[]; this.arFavitemsLC = [];
this.geocoder=geocoder; this.geocoder = geocoder;
this.searchInput=$(container).find(".leaflet-control-geocoder-form input[type=text]"); 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.searchInput.after(`<span class="search-fav-ctrls btn-group btn-group-sm">
<button id="search-fav-add" <button id="search-fav-add"
title="${i18next.t("searchfav.addfavorite")}" title="${i18next.t('searchfav.addfavorite')}"
class="fa fa-star-o border-0"> class="fa fa-star-o border-0">
</button><button data-toggle="collapse" </button><button data-toggle="collapse"
href="#search-autocomplete-container" href="#search-autocomplete-container"
id="search-fav-expand" id="search-fav-expand"
title="${i18next.t("searchfav.openfavorites")}" title="${i18next.t('searchfav.openfavorites')}"
class="fa fa-angle-double-down border-0"> class="fa fa-angle-double-down border-0">
</button> </button>
</span> </span>
`); `);
//otherwise parent catches event and click is never fired //otherwise parent catches event and click is never fired
$(container).find(".leaflet-control-geocoder-form .search-fav-ctrls").on("mousedown", $(container)
(e) => { e.stopPropagation();e.preventDefault(); }); .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 .search-fav-ctrls')
.click((e) => this.onCtrlsClick(e));
$(container).find(".leaflet-control-geocoder-form").append(` $(container).find('.leaflet-control-geocoder-form').append(`
<div class="collapse autocomplete-container filtered" id="search-autocomplete-container"> <div class="collapse autocomplete-container filtered" id="search-autocomplete-container">
<div class="autocomplete-select-container"> <div class="autocomplete-select-container">
<div class="list-group autocomplete-select" id="search-autocomplete-select" ></div> <div class="list-group autocomplete-select" id="search-autocomplete-select" ></div>
@ -114,165 +114,161 @@ class SearchFavorites {
</div> </div>
<div class="btn-group btn-group-sm collapse" id="autocomplete-btngroup"> <div class="btn-group btn-group-sm collapse" id="autocomplete-btngroup">
<button id="search-fav-deleteall" <button id="search-fav-deleteall"
title="${i18next.t("searchfav.removeall")}" title="${i18next.t('searchfav.removeall')}"
class="fa fa-eraser border"> class="fa fa-eraser border">
</button> </button>
<button id="search-fav-export" <button id="search-fav-export"
title="${i18next.t("searchfav.export")}" title="${i18next.t('searchfav.export')}"
class="fa fa-floppy-o border"> class="fa fa-floppy-o border">
</button> </button>
<button id="search-fav-import" <button id="search-fav-import"
class="fa fa-folder-open-o border" 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"> <input id="search-fav-file" type="file" class="d-none" accept=".json">
</button> </button>
</div> </div>
</div> </div>
`); `);
this.autocompleteContainer=$(container).find("#search-autocomplete-container"); this.autocompleteContainer = $(container).find('#search-autocomplete-container');
this.autocompleteSelect=this.autocompleteContainer.find("#search-autocomplete-select"); this.autocompleteSelect = this.autocompleteContainer.find('#search-autocomplete-select');
this.autocompleteMenu=this.autocompleteContainer.find("#autocomplete-btngroup"); this.autocompleteMenu = this.autocompleteContainer.find('#autocomplete-btngroup');
this.geocoderForm=$(container).find(".leaflet-control-geocoder-form"); this.geocoderForm = $(container).find('.leaflet-control-geocoder-form');
this.autocompleteContainer.on("mousedown", this.autocompleteContainer.on('mousedown', (e) => {
(e) => { e.stopPropagation();e.preventDefault(); }); e.stopPropagation();
e.preventDefault();
});
this.autocompleteContainer.find("#search-fav-menu-toggle").on("mousedown touchend", this.autocompleteContainer.find('#search-fav-menu-toggle').on('mousedown touchend', (e) => {
(e) => { e.stopPropagation();e.preventDefault();}); e.stopPropagation();
e.preventDefault();
});
this.autocompleteContainer.find("#search-fav-menu-toggle").on("click touchend", this.autocompleteContainer.find('#search-fav-menu-toggle').on('click touchend', (e) => {
(e) => { e.stopPropagation();
e.stopPropagation();e.preventDefault(); e.preventDefault();
this.autocompleteMenu.collapse('toggle'); this.autocompleteMenu.collapse('toggle');
}); });
this.autocompleteContainer.find(".autocomplete-select-container").on("wheel", this.autocompleteContainer.find('.autocomplete-select-container').on('wheel', (e) => {
(e) => { e.stopPropagation(); }); 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.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.autocompleteSelect.click((e) => this.onFavItemClicked(e));
this.autocompleteContainer.find(".autocomplete-menu").click((e) => this.onFavMenuClicked(e)); this.autocompleteContainer.find('.autocomplete-menu').click((e) => this.onFavMenuClicked(e));
this.autocompleteContainer.find("#search-fav-file").on("change",(e) => this.onImportFavFile(e)); this.autocompleteContainer.find('#search-fav-file').on('change', (e) => this.onImportFavFile(e));
let strFavitems=localStorage['searchFavItems']; let strFavitems = localStorage['searchFavItems'];
if(strFavitems) { if (strFavitems) {
this.arFavitems=JSON.parse(strFavitems); this.arFavitems = JSON.parse(strFavitems);
this.arFavitemsLC = this.arFavitems.map(x => x.toLowerCase()); //copy to Lowercase this.arFavitemsLC = this.arFavitems.map((x) => x.toLowerCase()); //copy to Lowercase
} }
this.updateFavList(); this.updateFavList();
this.searchInput.on("keyup",(e) => this.onInput(e)); this.searchInput.on('keyup', (e) => this.onInput(e));
} }
updateFavList() { updateFavList() {
if(this.arFavitems.length > 0){ 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>'); let opts = this.arFavitems.join(
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>`); '</button><button class="list-group-item list-group-item-action rounded-0 favitem"><span class="fa fa-trash-o mr-1 del-favitem"></span>'
} );
else this.autocompleteSelect.html(
this.autocompleteSelect.empty(); `<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.favElements = this.autocompleteSelect.find('button');
} }
appendFavorite(strFav) { appendFavorite(strFav) {
this.arFavitems.push(strFav); this.arFavitems.push(strFav);
this.arFavitems=[... new Set(this.arFavitems)]; //remove duplicates this.arFavitems = [...new Set(this.arFavitems)]; //remove duplicates
this.arFavitems.sort(); this.arFavitems.sort();
this.arFavitemsLC = this.arFavitems.map(x => x.toLowerCase()); //copy to Lowercase this.arFavitemsLC = this.arFavitems.map((x) => x.toLowerCase()); //copy to Lowercase
localStorage['searchFavItems']=JSON.stringify(this.arFavitems); localStorage['searchFavItems'] = JSON.stringify(this.arFavitems);
this.updateFavList(); this.updateFavList();
} }
deleteFavorite(strFav) { deleteFavorite(strFav) {
let pos=this.arFavitems.indexOf(strFav); let pos = this.arFavitems.indexOf(strFav);
if(pos >= 0) { if (pos >= 0) {
this.arFavitems.splice(pos, 1); this.arFavitems.splice(pos, 1);
this.arFavitems=[... new Set(this.arFavitems)]; //remove duplicates this.arFavitems = [...new Set(this.arFavitems)]; //remove duplicates
this.arFavitems.sort(); this.arFavitems.sort();
this.arFavitemsLC = this.arFavitems.map(x => x.toLowerCase()); //copy to Lowercase this.arFavitemsLC = this.arFavitems.map((x) => x.toLowerCase()); //copy to Lowercase
localStorage['searchFavItems']=JSON.stringify(this.arFavitems); localStorage['searchFavItems'] = JSON.stringify(this.arFavitems);
this.updateFavList(); this.updateFavList();
} }
} }
onInput(e) { onInput(e) {
if(e.keyCode == 13) { if (e.keyCode == 13) {
this.autocompleteContainer.collapse('hide'); this.autocompleteContainer.collapse('hide');
return; return;
} }
if(e.keyCode <=45 && e.keyCode != 8) return; if (e.keyCode <= 45 && e.keyCode != 8) return;
let srch=this.searchInput.val().toLowerCase(); let srch = this.searchInput.val().toLowerCase();
if(!srch || srch.length < 2) { if (!srch || srch.length < 2) {
this.autocompleteContainer.collapse('hide'); this.autocompleteContainer.collapse('hide');
return; return;
} }
if(!this.isFiltered) { if (!this.isFiltered) {
this.autocompleteContainer.addClass("filtered"); this.autocompleteContainer.addClass('filtered');
this.isFiltered=true; this.isFiltered = true;
} }
let matches=false; let matches = false;
this.favElements.removeClass("match"); this.favElements.removeClass('match');
this.arFavitemsLC.forEach((val,idx) => { this.arFavitemsLC.forEach((val, idx) => {
if(val.indexOf(srch) != -1) { if (val.indexOf(srch) != -1) {
this.favElements.eq(idx).addClass("match"); this.favElements.eq(idx).addClass('match');
matches=true; matches = true;
} }
}); });
if(matches) if (matches) this.autocompleteContainer.collapse('show');
this.autocompleteContainer.collapse('show'); else this.autocompleteContainer.collapse('hide');
else
this.autocompleteContainer.collapse('hide');
} }
onCtrlsClick(e) { onCtrlsClick(e) {
e.stopPropagation();e.preventDefault(); e.stopPropagation();
switch(e.target.id) { e.preventDefault();
case "search-fav-add": switch (e.target.id) {
case 'search-fav-add':
this.appendFavorite(this.searchInput.val()); this.appendFavorite(this.searchInput.val());
break; break;
case "search-fav-expand": case 'search-fav-expand':
if(this.autocompleteContainer.hasClass("show")) { if (this.autocompleteContainer.hasClass('show')) {
if(this.isFiltered) { if (this.isFiltered) {
this.autocompleteContainer.removeClass("filtered"); this.autocompleteContainer.removeClass('filtered');
this.isFiltered=false; this.isFiltered = false;
} else {
this.autocompleteContainer.collapse('hide');
this.autocompleteContainer.addClass('filtered');
this.isFiltered = true;
} }
else } else {
{ this.autocompleteContainer.removeClass('filtered');
this.autocompleteContainer.collapse('hide') this.isFiltered = false;
this.autocompleteContainer.addClass("filtered");
this.isFiltered=true;
}
}
else
{
this.autocompleteContainer.removeClass("filtered");
this.isFiltered=false;
this.autocompleteContainer.collapse('show'); this.autocompleteContainer.collapse('show');
} }
break; break;
@ -283,35 +279,33 @@ class SearchFavorites {
} }
onFavItemClicked(e) { onFavItemClicked(e) {
e.stopPropagation();e.preventDefault(); e.stopPropagation();
e.preventDefault();
if($(e.target).hasClass("favitem")) { if ($(e.target).hasClass('favitem')) {
this.autocompleteContainer.collapse('hide'); this.autocompleteContainer.collapse('hide');
this.geocoder.setQuery(e.target.innerText); this.geocoder.setQuery(e.target.innerText);
this.searchInput.focus(); this.searchInput.focus();
this.geocoder._keydown({keyCode: 13 }); this.geocoder._keydown({ keyCode: 13 });
} } else if ($(e.target).hasClass('del-favitem')) {
else if($(e.target).hasClass("del-favitem")) { this.deleteFavorite($(e.target).closest('button').text());
this.deleteFavorite($(e.target).closest("button").text());
} }
} }
onFavMenuClicked(e) { onFavMenuClicked(e) {
switch (e.target.id) {
switch(e.target.id) { case 'search-fav-deleteall':
case "search-fav-deleteall": if (confirm(i18next.t('searchfav.ask_removeall'))) {
this.arFavitems = [];
if(confirm(i18next.t("searchfav.ask_removeall")) ) { this.arFavitemsLC = [];
this.arFavitems=[]; localStorage['searchFavItems'] = JSON.stringify(this.arFavitems);
this.arFavitemsLC=[];
localStorage['searchFavItems']=JSON.stringify(this.arFavitems);
this.updateFavList(); this.updateFavList();
} }
break; break;
case "search-fav-export": case 'search-fav-export':
let exp=JSON.stringify(this.arFavitems,null,2); let exp = JSON.stringify(this.arFavitems, null, 2);
const blob = new Blob([exp], { const blob = new Blob([exp], {
type: 'application/json;charset=utf-8', type: 'application/json;charset=utf-8',
}); });
@ -322,35 +316,32 @@ class SearchFavorites {
link.click(); link.click();
break; break;
case "search-fav-import": case 'search-fav-import':
$(e.target).find("input[type=file]").click(); $(e.target).find('input[type=file]').click();
e.preventDefault(); e.preventDefault();
break; break;
default: default:
break; break;
} }
} }
onImportFavFile(e) { onImportFavFile(e) {
if(!e.target.files[0]) return; if (!e.target.files[0]) return;
let r=new FileReader(); let r = new FileReader();
r.onload=(f) => { r.onload = (f) => {
let importFavItems=JSON.parse(f.target.result); let importFavItems = JSON.parse(f.target.result);
this.arFavitems=this.arFavitems.concat(importFavItems); this.arFavitems = this.arFavitems.concat(importFavItems);
this.arFavitems=[... new Set(this.arFavitems)]; //remove duplicates this.arFavitems = [...new Set(this.arFavitems)]; //remove duplicates
this.arFavitems.sort(); this.arFavitems.sort();
this.arFavitemsLC = this.arFavitems.map(x => x.toLowerCase()); //copy to Lowercase this.arFavitemsLC = this.arFavitems.map((x) => x.toLowerCase()); //copy to Lowercase
localStorage['searchFavItems']=JSON.stringify(this.arFavitems); localStorage['searchFavItems'] = JSON.stringify(this.arFavitems);
this.updateFavList(); this.updateFavList();
}; };
r.readAsText(e.target.files[0]); r.readAsText(e.target.files[0]);
e.target.value=''; e.target.value = '';
} }
} }