From 8000ed32850593bcb4fda2473e410acc7b9ef7b0 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Sun, 23 Aug 2020 15:44:33 +0300 Subject: [PATCH] Country selector fix & animation --- src/pages/pageSignIn.ts | 125 +++++++++++++++++++++++----------------- src/scss/style.scss | 9 +++ 2 files changed, 81 insertions(+), 53 deletions(-) diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts index df94bf09..a6fef199 100644 --- a/src/pages/pageSignIn.ts +++ b/src/pages/pageSignIn.ts @@ -45,7 +45,7 @@ let onFirstMount = () => { var parent = selectCountryCode.parentElement; 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'); wrapper.appendChild(list); @@ -59,71 +59,90 @@ let onFirstMount = () => { pageSignQR.mount(); }); - selectCountryCode.addEventListener('focus', function(this: typeof selectCountryCode, e) { - /* this.removeAttribute('readonly'); */ - if(!initedSelect) { - 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 = []; - 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 = ``; - - - - let kek = RichTextProcessor.wrapRichText(emoji); - //console.log(c.name, emoji, kek, spanEmoji.innerHTML); - - li.appendChild(spanEmoji); - spanEmoji.outerHTML = kek; - - li.append(c.name); + let initSelect = () => { + initSelect = null; - var span = document.createElement('span'); - span.classList.add('phone-code'); - span.innerText = '+' + phoneCode; - li.appendChild(span); + 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 = []; + 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 = ``; + + - liArr.push(li); - list.append(li); - }); + let kek = RichTextProcessor.wrapRichText(emoji); + //console.log(c.name, emoji, kek, spanEmoji.innerHTML); - c.li = liArr; + 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'); - 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('.phone-code').innerText; + let countryName = target.childNodes[1].textContent;//target.innerText.split('\n').shift(); + let phoneCode = target.querySelector('.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); - }); + 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) { + if(initSelect) { + initSelect(); } else { countries.forEach((c) => { c.li.forEach(li => li.style.display = ''); }); } - parent.appendChild(wrapper); - }/* , {once: true} */); + clearTimeout(hideTimeout); + + wrapper.classList.remove('hide'); + void wrapper.offsetWidth; // reflow + wrapper.classList.add('active'); + }); 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; }, {capture: true}); diff --git a/src/scss/style.scss b/src/scss/style.scss index ec4a51a2..bc0ec9bb 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1033,6 +1033,15 @@ avatar-element { display: flex; flex-direction: column; 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 { margin: .5rem 0;