|
|
@ -45,7 +45,7 @@ let onFirstMount = () => { |
|
|
|
var parent = selectCountryCode.parentElement; |
|
|
|
var parent = selectCountryCode.parentElement; |
|
|
|
|
|
|
|
|
|
|
|
var wrapper = document.createElement('div'); |
|
|
|
var wrapper = document.createElement('div'); |
|
|
|
wrapper.classList.add('select-wrapper', 'z-depth-3'); |
|
|
|
wrapper.classList.add('select-wrapper', 'z-depth-3', 'hide'); |
|
|
|
|
|
|
|
|
|
|
|
var list = document.createElement('ul'); |
|
|
|
var list = document.createElement('ul'); |
|
|
|
wrapper.appendChild(list); |
|
|
|
wrapper.appendChild(list); |
|
|
@ -59,9 +59,9 @@ let onFirstMount = () => { |
|
|
|
pageSignQR.mount(); |
|
|
|
pageSignQR.mount(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
selectCountryCode.addEventListener('focus', function(this: typeof selectCountryCode, e) { |
|
|
|
let initSelect = () => { |
|
|
|
/* this.removeAttribute('readonly'); */ |
|
|
|
initSelect = null; |
|
|
|
if(!initedSelect) { |
|
|
|
|
|
|
|
countries.forEach((c) => { |
|
|
|
countries.forEach((c) => { |
|
|
|
initedSelect = true; |
|
|
|
initedSelect = true; |
|
|
|
|
|
|
|
|
|
|
@ -114,16 +114,35 @@ let onFirstMount = () => { |
|
|
|
setTimeout(() => telEl.focus(), 0); |
|
|
|
setTimeout(() => telEl.focus(), 0); |
|
|
|
//console.log('clicked', e, countryName, phoneCode);
|
|
|
|
//console.log('clicked', e, countryName, phoneCode);
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parent.appendChild(wrapper); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
initSelect(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let hideTimeout: number; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
selectCountryCode.addEventListener('focus', function(this: typeof selectCountryCode, e) { |
|
|
|
|
|
|
|
if(initSelect) { |
|
|
|
|
|
|
|
initSelect(); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
countries.forEach((c) => { |
|
|
|
countries.forEach((c) => { |
|
|
|
c.li.forEach(li => li.style.display = ''); |
|
|
|
c.li.forEach(li => li.style.display = ''); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
parent.appendChild(wrapper); |
|
|
|
clearTimeout(hideTimeout); |
|
|
|
}/* , {once: true} */); |
|
|
|
|
|
|
|
|
|
|
|
wrapper.classList.remove('hide'); |
|
|
|
|
|
|
|
void wrapper.offsetWidth; // reflow
|
|
|
|
|
|
|
|
wrapper.classList.add('active'); |
|
|
|
|
|
|
|
}); |
|
|
|
selectCountryCode.addEventListener('blur', function(this: typeof selectCountryCode, e) { |
|
|
|
selectCountryCode.addEventListener('blur', function(this: typeof selectCountryCode, e) { |
|
|
|
parent.removeChild(wrapper); |
|
|
|
wrapper.classList.remove('active'); |
|
|
|
|
|
|
|
hideTimeout = setTimeout(() => { |
|
|
|
|
|
|
|
wrapper.classList.add('hide'); |
|
|
|
|
|
|
|
}, 200); |
|
|
|
|
|
|
|
|
|
|
|
e.cancelBubble = true; |
|
|
|
e.cancelBubble = true; |
|
|
|
}, {capture: true}); |
|
|
|
}, {capture: true}); |
|
|
|
|
|
|
|
|
|
|
|