Country selector fix & animation

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<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);
+  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<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>`;
+        
+        
 
-          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<HTMLElement>('.phone-code').innerText;
+      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);
-      });
+      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});
 

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;