Husky fixes for Search/SearchFavorites
This commit is contained in:
Marcus Jaschen
Gautier P
parent
f1557a1d5c
commit
1551fec917
1 changed files with 249 additions and 258 deletions
|
|
@ -23,7 +23,6 @@ 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,
|
||||
|
|
@ -55,20 +54,15 @@ BR.Search = class extends L.Control.Geocoder {
|
|||
|
||||
/* Search favorites handling */
|
||||
onAdd(map) {
|
||||
|
||||
if(!BR.Util.localStorageAvailable())
|
||||
return super.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;
|
||||
|
|
@ -83,27 +77,33 @@ class SearchFavorites {
|
|||
this.arFavitemsLC = [];
|
||||
|
||||
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">
|
||||
<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(); });
|
||||
$(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 .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="autocomplete-select-container">
|
||||
<div class="list-group autocomplete-select" id="search-autocomplete-select" ></div>
|
||||
|
|
@ -114,77 +114,80 @@ 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 = $(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.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('mousedown touchend', (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
this.autocompleteContainer.find("#search-fav-menu-toggle").on("click 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.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));
|
||||
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.arFavitemsLC = this.arFavitems.map((x) => x.toLowerCase()); //copy to Lowercase
|
||||
}
|
||||
|
||||
this.updateFavList();
|
||||
|
||||
this.searchInput.on("keyup",(e) => this.onInput(e));
|
||||
|
||||
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();
|
||||
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.favElements = this.autocompleteSelect.find('button');
|
||||
}
|
||||
|
||||
appendFavorite(strFav) {
|
||||
|
|
@ -192,7 +195,7 @@ class SearchFavorites {
|
|||
|
||||
this.arFavitems = [...new Set(this.arFavitems)]; //remove duplicates
|
||||
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);
|
||||
this.updateFavList();
|
||||
|
|
@ -204,13 +207,12 @@ class SearchFavorites {
|
|||
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
|
||||
this.arFavitemsLC = this.arFavitems.map((x) => x.toLowerCase()); //copy to Lowercase
|
||||
|
||||
localStorage['searchFavItems'] = JSON.stringify(this.arFavitems);
|
||||
|
||||
this.updateFavList();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onInput(e) {
|
||||
|
|
@ -229,49 +231,43 @@ class SearchFavorites {
|
|||
}
|
||||
|
||||
if (!this.isFiltered) {
|
||||
this.autocompleteContainer.addClass("filtered");
|
||||
this.autocompleteContainer.addClass('filtered');
|
||||
this.isFiltered = true;
|
||||
}
|
||||
|
||||
let matches = false;
|
||||
this.favElements.removeClass("match");
|
||||
this.favElements.removeClass('match');
|
||||
this.arFavitemsLC.forEach((val, idx) => {
|
||||
if (val.indexOf(srch) != -1) {
|
||||
this.favElements.eq(idx).addClass("match");
|
||||
this.favElements.eq(idx).addClass('match');
|
||||
matches = true;
|
||||
}
|
||||
});
|
||||
|
||||
if(matches)
|
||||
this.autocompleteContainer.collapse('show');
|
||||
else
|
||||
this.autocompleteContainer.collapse('hide');
|
||||
if (matches) this.autocompleteContainer.collapse('show');
|
||||
else this.autocompleteContainer.collapse('hide');
|
||||
}
|
||||
|
||||
|
||||
onCtrlsClick(e) {
|
||||
e.stopPropagation();e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
switch (e.target.id) {
|
||||
case "search-fav-add":
|
||||
case 'search-fav-add':
|
||||
this.appendFavorite(this.searchInput.val());
|
||||
break;
|
||||
|
||||
case "search-fav-expand":
|
||||
if(this.autocompleteContainer.hasClass("show")) {
|
||||
case 'search-fav-expand':
|
||||
if (this.autocompleteContainer.hasClass('show')) {
|
||||
if (this.isFiltered) {
|
||||
this.autocompleteContainer.removeClass("filtered");
|
||||
this.autocompleteContainer.removeClass('filtered');
|
||||
this.isFiltered = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.autocompleteContainer.collapse('hide')
|
||||
this.autocompleteContainer.addClass("filtered");
|
||||
} else {
|
||||
this.autocompleteContainer.collapse('hide');
|
||||
this.autocompleteContainer.addClass('filtered');
|
||||
this.isFiltered = true;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
this.autocompleteContainer.removeClass("filtered");
|
||||
} else {
|
||||
this.autocompleteContainer.removeClass('filtered');
|
||||
this.isFiltered = false;
|
||||
this.autocompleteContainer.collapse('show');
|
||||
}
|
||||
|
|
@ -283,26 +279,24 @@ class SearchFavorites {
|
|||
}
|
||||
|
||||
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.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());
|
||||
} 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")) ) {
|
||||
case 'search-fav-deleteall':
|
||||
if (confirm(i18next.t('searchfav.ask_removeall'))) {
|
||||
this.arFavitems = [];
|
||||
this.arFavitemsLC = [];
|
||||
localStorage['searchFavItems'] = JSON.stringify(this.arFavitems);
|
||||
|
|
@ -310,7 +304,7 @@ class SearchFavorites {
|
|||
}
|
||||
break;
|
||||
|
||||
case "search-fav-export":
|
||||
case 'search-fav-export':
|
||||
let exp = JSON.stringify(this.arFavitems, null, 2);
|
||||
const blob = new Blob([exp], {
|
||||
type: 'application/json;charset=utf-8',
|
||||
|
|
@ -322,14 +316,13 @@ class SearchFavorites {
|
|||
link.click();
|
||||
break;
|
||||
|
||||
case "search-fav-import":
|
||||
$(e.target).find("input[type=file]").click();
|
||||
case 'search-fav-import':
|
||||
$(e.target).find('input[type=file]').click();
|
||||
e.preventDefault();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -342,10 +335,9 @@ class SearchFavorites {
|
|||
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
|
||||
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]);
|
||||
|
|
@ -353,4 +345,3 @@ class SearchFavorites {
|
|||
e.target.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue