r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Country selector fix & animation

Browse Source
This commit is contained in:
morethanwords 2020-08-23 15:44:33 +03:00
parent 99203abe01
commit 8000ed3285
2 changed files with 80 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
src/pages/pageSignIn.ts
View File

@ -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,71 +59,90 @@ let onFirstMount = () => {
pageSignQR.mount(); pageSignQR.mount();
}); });
let initSelect = () => {
initSelect = null;
countries.forEach((c) => {
initedSelect = true;
/* let unified = unifiedCountryCodeEmoji(c.code);
let emoji = unified.split('-').reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), ''); */
//let emoji = countryCodeEmoji(c.code);
let emoji = c.emoji;
let liArr: Array<HTMLLIElement> = [];
c.phoneCode.split(' and ').forEach((phoneCode: string) => {
let li = document.createElement('li');
var spanEmoji = document.createElement('span');
/* spanEmoji.innerHTML = countryCodeEmoji(c.code); */
//spanEmoji.classList.add('emoji-outer', 'emoji-sizer');
//spanEmoji.innerHTML = `<span class="emoji-inner" style="background: url(${sheetUrl}${sheetNo}.png);background-position:${xPos}% ${yPos}%;background-size:${sizeX}% ${sizeY}%" data-codepoints="${unified}"></span>`;
let kek = RichTextProcessor.wrapRichText(emoji);
//console.log(c.name, emoji, kek, spanEmoji.innerHTML);
li.appendChild(spanEmoji);
spanEmoji.outerHTML = kek;
li.append(c.name);
var span = document.createElement('span');
span.classList.add('phone-code');
span.innerText = '+' + phoneCode;
li.appendChild(span);
liArr.push(li);
list.append(li);
});
c.li = liArr;
});
list.addEventListener('mousedown', function(e) {
let target = e.target as HTMLElement;
if(target.tagName != 'LI') target = findUpTag(target, 'LI');
let countryName = target.childNodes[1].textContent;//target.innerText.split('\n').shift();
let phoneCode = target.querySelector<HTMLElement>('.phone-code').innerText;
selectCountryCode.value = countryName;
lastCountrySelected = countries.find(c => c.name == countryName);
telEl.value = phoneCode;
setTimeout(() => telEl.focus(), 0);
//console.log('clicked', e, countryName, phoneCode);
});
parent.appendChild(wrapper);
};
initSelect();
let hideTimeout: number;
selectCountryCode.addEventListener('focus', function(this: typeof selectCountryCode, e) { selectCountryCode.addEventListener('focus', function(this: typeof selectCountryCode, e) {
/* this.removeAttribute('readonly'); */ if(initSelect) {
if(!initedSelect) { initSelect();
countries.forEach((c) => {
initedSelect = true;
/* let unified = unifiedCountryCodeEmoji(c.code);
let emoji = unified.split('-').reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), ''); */
//let emoji = countryCodeEmoji(c.code);
let emoji = c.emoji;
let liArr: Array<HTMLLIElement> = [];
c.phoneCode.split(' and ').forEach((phoneCode: string) => {
let li = document.createElement('li');
var spanEmoji = document.createElement('span');
/* spanEmoji.innerHTML = countryCodeEmoji(c.code); */
//spanEmoji.classList.add('emoji-outer', 'emoji-sizer');
//spanEmoji.innerHTML = `<span class="emoji-inner" style="background: url(${sheetUrl}${sheetNo}.png);background-position:${xPos}% ${yPos}%;background-size:${sizeX}% ${sizeY}%" data-codepoints="${unified}"></span>`;
let kek = RichTextProcessor.wrapRichText(emoji);
//console.log(c.name, emoji, kek, spanEmoji.innerHTML);
li.appendChild(spanEmoji);
spanEmoji.outerHTML = kek;
li.append(c.name);
var span = document.createElement('span');
span.classList.add('phone-code');
span.innerText = '+' + phoneCode;
li.appendChild(span);
liArr.push(li);
list.append(li);
});
c.li = liArr;
});
list.addEventListener('mousedown', function(e) {
let target = e.target as HTMLElement;
if(target.tagName != 'LI') target = findUpTag(target, 'LI');
let countryName = target.childNodes[1].textContent;//target.innerText.split('\n').shift();
let phoneCode = target.querySelector<HTMLElement>('.phone-code').innerText;
selectCountryCode.value = countryName;
lastCountrySelected = countries.find(c => c.name == countryName);
telEl.value = phoneCode;
setTimeout(() => telEl.focus(), 0);
//console.log('clicked', e, countryName, phoneCode);
});
} 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});

9
src/scss/style.scss
View File

@ -1033,6 +1033,15 @@ avatar-element {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
transition: opacity .2s ease-out, transform .2s ease-out;
transform: scale(.95);
transform-origin: top center;
opacity: 0;
&.active {
transform: scale(1);
opacity: 1;
}
ul { ul {
margin: .5rem 0; margin: .5rem 0;