//this js should load the html and functionality for the location filter in the search
//it is a new script added for the relaunch 2021
//everything it needs is an item in the html that fits to the css selector in the var locationselect_selector
//further resources needed for this to work:
//locationselect.php (in tools)
//locationselect.css
var locationselect_selector = ".locationselect";
var locationselect_settings = {
"path" : "/tools/locationselect.php",
"usecountry" : false,
"usecity" : true,
"usehouse" : true,
"countryname" : "country",
"cityname" : "city",
"housename" : "house",
"text-default" : "-",
"text-selectbox" : "-",
"text-country" : "Country",
"text-city" : "City",
"text-house" : "House",
};
$(function(){
$(locationselect_selector).each(function(){
var container = $(this);
container.empty();
var settings = JSON.parse(JSON.stringify(locationselect_settings)); // clone without reference
for (var setting in settings) { // get the settings from data-attributes with fallback to the original ones
if (settings.hasOwnProperty(setting)) {
if(container.attr("data-"+setting) != undefined) {
var value = container.attr("data-"+setting);
if(value == "true") {
value = true;
}
if(value == "false") {
value = false;
}
settings[setting] = value;
}
container.attr("data-"+setting, settings[setting]);
}
}
// build html
container.append('<a class="locationselect_toggler" href="#locationselect_box"><span class="locationselect_toggler_text">'+settings['text-default']+'</span></a><div class="locationselect_box"><ul class="locationselect_filterlist"></ul></div>');
if(settings.usecountry) {
container.find(".locationselect_filterlist").append('<li class="locationselect_filter locationselect_filter--country"><label class="locationselect_filtername" for="'+settings['countryname']+'">'+settings['text-country']+':</label><select class="locationselect_filterselect searchableselect" name="'+settings['countryname']+'" id="'+settings['countryname']+'"><option value="unselected" disabled selected>'+settings['text-selectbox']+'</option></select></li>');
}
if(settings.usecity) {
container.find(".locationselect_filterlist").append('<li class="locationselect_filter locationselect_filter--city"><label class="locationselect_filtername" for="'+settings['cityname']+'">'+settings['text-city']+':</label><select class="locationselect_filterselect searchableselect" name="'+settings['cityname']+'" id="'+settings['cityname']+'"><option value="unselected" disabled selected>'+settings['text-selectbox']+'</option></select></li>');
}
if(settings.usehouse) {
container.find(".locationselect_filterlist").append('<li class="locationselect_filter locationselect_filter--house"><label class="locationselect_filtername" for="'+settings['housename']+'">'+settings['text-house']+':</label><select class="locationselect_filterselect searchableselect" name="'+settings['housename']+'" id="'+settings['housename']+'"><option value="unselected" disabled selected>'+settings['text-selectbox']+'</option></select></li>');
}
container.find(".locationselect_filterlist").append('<li class="locationselect_filter"><button type="submit" title="Filter anwenden" class="locationfilter button">Filter anwenden</button></li>');
if (typeof searchableselect === "function") {
searchableselect();
}
// init events
container.find(".locationselect_toggler").click(function(e){
e.preventDefault();
$(this).closest(locationselect_selector).trigger("locationselect_toggle");
});
container.find('.locationselect_filterselect[name="'+settings['countryname']+'"]').on("change", function(){
$(this).closest(locationselect_selector).trigger("locationselect_load_city");
});
container.find('.locationselect_filterselect[name="'+settings['cityname']+'"]').on("change", function(){
$(this).closest(locationselect_selector).trigger("locationselect_load_house");
});
container.find('.locationselect_filterselect').on("change", function(){
$(this).closest(locationselect_selector).trigger("locationselect_update_text");
if (typeof searchableselect === "function") {
searchableselect();
}
});
// init trigger
container.on("locationselect_update_text", function(){
var selectedtexts = [];
$(this).find('.locationselect_filterselect').each(function(){
if($(this).find('option:selected:not([value="unselected"])').length > 0) {
selectedtexts.push($(this).find('option:selected').text());
}
});
var text = settings['text-default'];
if(selectedtexts.length > 0) {
text = selectedtexts.join(", ");
}
$(this).find(".locationselect_toggler_text").html(text);
});
container.on("locationselect_toggle", function(){
if($(this).hasClass("locationselect_open")){
$(this).trigger("locationselect_close");
}
else {
$(this).trigger("locationselect_open");
}
});
container.on("locationselect_open", function(){
$(this).addClass("locationselect_open");
if(settings.usecountry) {
if(!$(this).hasClass("locationselect_countriesloaded") && !$(this).hasClass("locationselect_countriesloading")) {
$(this).trigger("locationselect_load_country");
}
}
else if(settings.usecity) {
if(!$(this).hasClass("locationselect_citiesloaded") && !$(this).hasClass("locationselect_citiesloading")) {
$(this).trigger("locationselect_load_city");
if(settings.usehouse) {
if(!$(this).hasClass("locationselect_housesloaded") && !$(this).hasClass("locationselect_housesloading")) {
$(this).trigger("locationselect_load_house");
}
}
}
}
else if(settings.usehouse) {
if(!$(this).hasClass("locationselect_housesloaded") && !$(this).hasClass("locationselect_housesloading")) {
$(this).trigger("locationselect_load_house");
}
}
});
container.on("locationselect_close", function(){
$(this).removeClass("locationselect_open");
});
container.on("locationselect_load_country", function(){
container.addClass("locationselect_countriesloading");
var url = settings.path+"?get="+settings['countryname'];
locationselect_load_options(container, url, function(){
container.addClass("locationselect_countriesloaded").removeClass("locationselect_countriesloading");
//console.log("finished");
});
});
container.on("locationselect_load_city", function(){
container.addClass("locationselect_citiesloading");
var url = settings.path+"?get="+settings['cityname'];
if(settings.usecountry && container.find('.locationselect_filterselect[name="'+settings['countryname']+'"]').val() != null) {
url += "&"+settings['countryname']+"="+container.find('.locationselect_filterselect[name="'+settings['countryname']+'"]').val();
}
locationselect_load_options(container, url, function(){
container.addClass("locationselect_citiesloaded").removeClass("locationselect_citiesloading");
//console.log("finished");
});
});
container.on("locationselect_load_house", function(){
container.addClass("locationselect_housesloading");
var url = settings.path+"?get="+settings['housename'];
if(settings.usecity && container.find('.locationselect_filterselect[name="'+settings['cityname']+'"]').val() != null) {
url += "&"+settings['cityname']+"="+container.find('.locationselect_filterselect[name="'+settings['cityname']+'"]').val();
}
if(settings.usecountry && container.find('.locationselect_filterselect[name="'+settings['countryname']+'"]').val() != null) {
url += "&"+settings['countryname']+"="+container.find('.locationselect_filterselect[name="'+settings['countryname']+'"]').val();
}
locationselect_load_options(container, url, function(){
container.addClass("locationselect_housesloaded").removeClass("locationselect_housesloading");
//console.log("finished");
});
});
container.on("locationselect_load_current_all", function(){
var params = locationselect_parse_query_string(window.location.search);
if(params.country != undefined) {
$(this).trigger("locationselect_load_country");
$(this).find('.locationselect_filterselect[name="'+settings['countryname']+'"] option[value="'+params.country+'"]').prop('selected', true);
if(params.city != undefined) {
$(this).trigger("locationselect_load_city");
$(this).find('.locationselect_filterselect[name="'+settings['cityname']+'"] option[value="'+params.city+'"]').prop('selected', true);
$(this).trigger("locationselect_load_house");
if(params.house != undefined) {
$(this).trigger("locationselect_load_house");
$(this).find('.locationselect_filterselect[name="'+settings['housename']+'"] option[value="'+params.house+'"]').prop('selected', true);
}
}
else {
$(this).trigger("locationselect_load_city");
}
}
});
//finally load current filters if a filter is active
container.trigger("locationselect_load_current_all");
});
});
function locationselect_load_options(container, url, callback){
$.ajax({
url: url,
async: false,
success: function(response){
locationselect_update_options(container, response, callback);
}
});
}
function locationselect_update_options(container, response, callback){
if(typeof response === 'object' && response !== null) {
for (var key in response) { // get the settings from data-attributes with fallback to the original ones
if (response.hasOwnProperty(key)) {
if(typeof response[key] === 'object' && response[key] !== null) {
var optionshtml = "";
for (var optionkey in response[key]) { // get the settings from data-attributes with fallback to the original ones
if (response[key].hasOwnProperty(optionkey)) {
optionshtml += '<option value="'+optionkey+'">'+response[key][optionkey]+'</option>';
}
}
var selectobject;
selectobject=container.find('.locationselect_filterselect[name="'+key+'"]');
selectobject.html(optionshtml);
//reorder
if(selectobject.attr("id")=="house"){
var options = selectobject.find('option');
var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
options.each(function(i, o) {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
}
selectobject.html('<option value="unselected" disabled selected>'+container.attr('data-text-selectbox')+'</option>' + selectobject.html());
}
else {
console.log("response property in locationselect_update_options was not an object :(");
console.log(key);
console.log(response[key]);
}
}
}
}
else {
console.log("response in locationselect_update_options was not an object :(");
console.log(response);
}
callback();
if (typeof searchableselect === "function") {
searchableselect();
}
}
function locationselect_parse_query_string(query) {
var vars = query.split("&");
var query_string = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
var key = decodeURIComponent(pair[0]);
var value = decodeURIComponent(pair[1]);
// If first entry with this name
if (typeof query_string[key] === "undefined") {
query_string[key] = decodeURIComponent(value);
// If second entry with this name
} else if (typeof query_string[key] === "string") {
var arr = [query_string[key], decodeURIComponent(value)];
query_string[key] = arr;
// If third or later entry with this name
} else {
query_string[key].push(decodeURIComponent(value));
}
}
return query_string;
}