acf.addAction('new_field', function (field){
if(field.data.name!=='openstreetmap_search'){
return;
}
let searchResults=document.createElement('div');
searchResults.classList.add('openstreetmap-search-results');
field.$el.append(searchResults);
let request;
let timer;
let loadingSpinner=document.createElement('div');
loadingSpinner.innerHTML='Suche, bitte warten...'
loadingSpinner=document.createElement('img');
loadingSpinner.src=mi_acf.spinnerUrl;
let input=field.$el.find('input[type="text"]')[0];
input.type='search';
input.addEventListener('keyup', event=> {
if(request){
request.removeEventListener('load', renderSearchResults);
request.abort();
}
if(timer){
clearTimeout(timer)
}
timer=setTimeout(()=> {
searchResults.append(loadingSpinner);
let query=input.value;
if(query.length < 3){
return;
}
request=new XMLHttpRequest();
request.open("GET", "https://nominatim.openstreetmap.org/search?addressdetails=1&format=json&q=" + query, true);
request.addEventListener('load', renderSearchResults);
request.send();
}, 500);
})
function renderSearchResults(event){
if(event.target.status!==200){
return;
}
searchResults.innerHTML='';
let response=JSON.parse(event.target.response);
response.forEach(element=> {
let button=document.createElement('button');
button.innerText="Select";
button.type='button';
button.classList.add('components-button', 'is-primary', 'is-compact');
button.addEventListener('click', selectResult.bind(null, element));
let title=document.createElement('span');
title.innerText=element.display_name;
let result=document.createElement('div');
result.style="display: flex;gap: 10px; margin-top: 5px; align-items: center;"
result.append(button);
result.append(title);
searchResults.append(result);
})
}
function selectResult(result, event){
let mappings={
'wpcf-address_label': result.name ?? '',
'wpcf-address_latitude': result.lat ?? '',
'wpcf-address_longitude': result.lon ?? '',
'wpcf-address_street': (result.address.road ?? '') + ' ' + (result.address.house_number ?? ''),
'wpcf-address_zip': result.address.postcode ?? '',
'wpcf-address_location': result.address.city ?? result.address.town ?? '',
'wpcf-address_sublocation': result.address.city_district ?? result.address.suburb ?? result.address.village ?? '',
'wpcf-address_state': result.address.state,
'wpcf-address_country-iso-code': result.address.country_code?.toUpperCase() ?? '',
}
for (const key in mappings){
document.querySelector('.acf-field[data-name="' + key + '"] input[type="text"]').value=mappings[key];
}
input.value='';
searchResults.innerHTML='';
}});
acf.addAction('new_field', function (field){
if(field.data.name!=='start_date'&&field.data.name!=='end_date'){
return;
}
let wrapper=field.$el[0].closest('.acf-fields');
let element=field.$el.find('input[type="text"]')[0];
let partnerName=field.data.name==='start_date' ? 'end_date':'start_date';
let partner=wrapper.querySelector('[data-name="' + partnerName + '"] .acf-input input[type="text"]');
element.min=(new Date()).toISOString().substring(0, 10);
element.dataset.require=field.data.name==='start_date' ? 'max':'min';
element.addEventListener('change', event=> {
if(partner.value===''){
partner.value=element.value;
}
partner.dispatchEvent(new Event('change'));
});
});