[PRAC/cont] Add show/hide "dropdown" element

Organiz btn content replacement/update (according to li values/options).

Worth noting:
  - adding a "focus" state for dropdown-btn until li/option is selected.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/modal-add.css

@@ -169,17 +169,16 @@
   font-size: 12px;
   background: transparent;
   outline: none;
-  overflow: hidden;
 }
 
 .modal__add-body-add-contact-drop-btn:after {
   content: '';
   position: absolute;
   top: 50%;
-  right: 6px;
+  right: 7px;
   transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   background-image: url('../images/drop-arrow-down.svg');
   background-repeat: no-repeat;
   background-position: center;
@@ -188,14 +187,25 @@
   pointer-events: none;
 }
 
-.modal__add-body-add-contact-drop-btn:focus-visible:not(:hover) {
+.modal__add-body-add-contact-drop-btn:focus-visible,
+.modal__add-body-add-contact-drop-btn:focus {
   border-color: var(--main-purple);
   box-shadow: 0 0 0 .25rem rgba(152, 115, 255, .25);
-  z-index: 10;
+  z-index: 5;
+}
+
+.modal__add-body-add-contact-drop-btn:not(:focus-visible),
+.modal__add-body-add-contact-drop-btn:not(:focus) {
+  z-index: 3;
+}
+
+.modal__add-body-add-contact-drop-btn.arrow-rotate:focus-visible,
+.modal__add-body-add-contact-drop-btn.arrow-rotate:focus {
+  z-index: 6;
 }
 
-.modal__add-body-add-contact-drop-btn:not(:focus-visible) {
-  z-index: 1;
+.modal__add-body-add-contact-drop-btn.arrow-rotate:after {
+  transform: translateY(-50%) rotate(180deg);
 }
 
 .modal__add-body-add-contact-list {
@@ -210,6 +220,7 @@
   background: var(--option-gray);
   overflow: hidden;
   list-style-type: none;
+  z-index: 4;
 }
 
 .modal__add-body-add-contact-item {
@@ -218,19 +229,31 @@
   padding: 0;
   padding: 4px 10px;
   font-size: 12px;
+  outline: none;
   cursor: pointer;
+  transition-property: color, background-color;
+  transition-duration: var(--short);
+  transition-timing-function: ease;
 }
 
 .modal__add-body-add-contact-item:first-child {
   padding-top: 8px;
 }
 
 .modal__add-body-add-contact-item:last-child {
-  padding-bottom: 7px;
+  padding-bottom: 6px;
 }
 
-.modal__add-body-add-contact-item:hover {
-  background-color: var(--select-gray);
+.modal__add-body-add-contact-item:focus-visible:not(:hover) {
+  color: var(--main-purple);
+}
+
+.modal__add-body-add-contact-item:focus-visible:active {
+  color: var(--text-gray);
+}
+
+.modal__add-body-add-contact-item:active {
+  color: var(--text-gray);
 }
 
 .modal__add-btn {
@@ -378,6 +401,10 @@
     opacity: 1;
   }
 
+  .modal__add-body-add-contact-item:hover:not(:active) {
+    background-color: var(--select-gray);
+  }
+
   .modal__add-body-save-btn:hover:not(:active) {
     background-color: var(--light-purple);
   }

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/images/drop-arrow-up.svg

@@ -642,7 +642,10 @@
     addModalContactDropBtn.classList.add(
       'modal__add-body-add-contact-drop-btn'
     );
-    addModalContactList.classList.add('modal__add-body-add-contact-list');
+    addModalContactList.classList.add(
+      'modal__add-body-add-contact-list',
+      'd-none'
+    );
     addModalContactItemExtraPhone.classList.add(
       'modal__add-body-add-contact-item',
       'add-modal-extra-phone-item'
@@ -676,9 +679,13 @@
     addModalContactDropBtn.setAttribute('id', 'add-modal-drop-btn');
     addModalContactDropBtn.setAttribute('type', 'button');
     addModalContactItemExtraPhone.setAttribute('data-value', 'extra-phone');
+    addModalContactItemExtraPhone.setAttribute('tabindex', '0');
     addModalContactItemEmail.setAttribute('data-value', 'email');
+    addModalContactItemEmail.setAttribute('tabindex', '0');
     addModalContactItemVk.setAttribute('data-value', 'vk');
+    addModalContactItemVk.setAttribute('tabindex', '0');
     addModalContactItemFacebook.setAttribute('data-value', 'facebook');
+    addModalContactItemFacebook.setAttribute('tabindex', '0');
     addModalContactHiddenInput.setAttribute('value', 'phone'); // начальное значение, согласно textContent кнопки
     addModalContactHiddenInput.setAttribute('type', 'hidden');
     addModalContactHiddenInput.setAttribute('name', 'contact-type');
@@ -741,6 +748,28 @@
       addModalBodyAddBtn.disabled = true;
     }
 
+    // показ/скрытие выпадающего списка вариантов/контактов
+    addModalContactDropBtn.addEventListener('click', (event) => {
+      event.currentTarget.focus(); // добавление фокуса кнопке (до момента выбора)
+      event.currentTarget.classList.toggle('arrow-rotate'); // переключение направления стрелки
+      addModalContactList.classList.toggle('d-none');
+    });
+
+    const allModalContactsListItems = document.querySelectorAll(
+      '.modal__add-body-add-contact-item'
+    );
+
+    // замена/обновление содержимого/контента кнопки (согласно значений li/вариантов)
+    addModalContactList.addEventListener('click', (event) => {
+      if (event.target.tagName === 'LI') {
+        const selectedItemValue = event.target.getAttribute('data-value');
+        addModalContactDropBtn.textContent = event.target.textContent;
+        addModalContactList.classList.add('d-none'); // скрытие выпадающего списка
+        addModalContactDropBtn.classList.remove('arrow-rotate'); // возврат направления стрелки
+        addModalContactHiddenInput.value = selectedItemValue; // обновление данных в "скрытом" input (для последующей отправки на сервер)
+      }
+    });
+
     // организация удаления строки контактов
     addModalContactXBtn.addEventListener('click', (event) => {
       event.stopPropagation(); // исключение не предвиденных событий/поведения