127 lines
4.0 KiB
JavaScript
127 lines
4.0 KiB
JavaScript
function toggleSelectCountry(el, callback) {
|
|
if (!el) return;
|
|
|
|
let $parent = el.closest('.w_select_country');
|
|
if (!$parent) return;
|
|
|
|
if ($parent.classList.contains('closed')) {
|
|
openSelectCountry(el, callback)
|
|
} else {
|
|
closeSelectCountry(el, callback);
|
|
}
|
|
}
|
|
|
|
function openSelectCountry(el, callback) {
|
|
let $parent = el.closest('.w_select_country');
|
|
if (!$parent) return;
|
|
|
|
$parent.classList.remove('closed');
|
|
|
|
$('body')[0].onclick = function (){
|
|
if (event.target.closest(".w_select_country.closed") || !event.target.closest(".w_select_country")){
|
|
closeSelectCountry(el)
|
|
}
|
|
}
|
|
if (callback) callback('opened', $parent);
|
|
}
|
|
|
|
function closeSelectCountry(el, callback) {
|
|
let $parent = el.closest('.w_select_country');
|
|
if (!$parent) return;
|
|
|
|
$parent.classList.add('closed');
|
|
|
|
if (callback) callback('closed', $parent);
|
|
}
|
|
|
|
let search_country_timeout = false;
|
|
|
|
function searchCountry(el) {
|
|
resetCountrySelect(el)
|
|
closeSelectCountry(el)
|
|
if (el && el.value.length < 3) closeSelectCountry(el)
|
|
if (!el || el.value.length < 3) return;
|
|
|
|
let $parent = el.closest('.w_select_country');
|
|
let $search_icon_cont = $parent.querySelector('.w_select_country_icon');
|
|
let $content_part = $parent.querySelector('.w_select_country_content');
|
|
|
|
$search_icon_cont.src = '/static/v2/loaders/search_spinner.svg'
|
|
|
|
if (search_country_timeout) {
|
|
clearTimeout(search_country_timeout);
|
|
search_country_timeout = false;
|
|
}
|
|
search_country_timeout = setTimeout(function () {
|
|
let url = '/reference_data/search_city/'
|
|
let data = {
|
|
'search_str': el.value
|
|
}
|
|
let request = new api({
|
|
url: url,
|
|
data: data,
|
|
data_type: 'json',
|
|
success: function (data) {
|
|
if (!data.res_search_list && data.res_search_list !== '') console.log(`request data has not html => ${url}`);
|
|
$search_icon_cont.src = '/static/v2/icons/widgets/w_select_country/pin.svg'
|
|
$content_part.innerHTML = data.res_search_list;
|
|
openSelectCountry(el)
|
|
}, error: function (data) {
|
|
}
|
|
});
|
|
request.ajaxRequest()
|
|
}, 1000)
|
|
}
|
|
|
|
function selectCountry(el, callback) {
|
|
let $parent = el.closest('.w_select_country');
|
|
if (!$parent) return;
|
|
|
|
let $input_part = $parent.querySelector('.select_country_header_left_part');
|
|
let $flag = $input_part.querySelector('.country_flag_img_container');
|
|
let $country_code = $input_part.querySelector('.country_code');
|
|
let $input = $input_part.querySelector('input');
|
|
|
|
let country_data = {
|
|
full_name: el.dataset.name,
|
|
id: el.dataset.id,
|
|
country_code: el.dataset.country_code,
|
|
flag: el.dataset.flag,
|
|
}
|
|
|
|
$flag.src = country_data.flag;
|
|
$country_code.innerHTML = country_data.country_code;
|
|
$input.value = country_data.full_name;
|
|
|
|
$input.dataset.name = country_data.full_name;
|
|
$input.dataset.id = country_data.id;
|
|
|
|
closeSelectCountry(el)
|
|
}
|
|
|
|
function resetCountrySelect(el, callback) {
|
|
let $parent = el.closest('.w_select_country');
|
|
if (!$parent) return;
|
|
|
|
let $input_part = $parent.querySelector('.select_country_header_left_part');
|
|
let $flag = $input_part.querySelector('.country_flag_img_container');
|
|
let $country_code = $input_part.querySelector('.country_code');
|
|
let $input = $input_part.querySelector('input');
|
|
let $content_part = $parent.querySelector('.w_select_country_content');
|
|
|
|
$flag.removeAttribute('src')
|
|
$country_code.innerHTML = '';
|
|
$input.dataset.name = '';
|
|
$input.dataset.id = '';
|
|
$content_part.innerHTML = '';
|
|
}
|
|
|
|
function openCountruSelectIfDataEnter(el, callback) {
|
|
let $parent = el.closest('.w_select_country');
|
|
if (!$parent) return;
|
|
|
|
let $content_part = $parent.querySelector('.w_select_country_content');
|
|
if (!$content_part) return;
|
|
|
|
if ($content_part.innerHTML.includes("div")) openSelectCountry(el)
|
|
} |