Skip to content

Commit 3b5c6a0

Browse files
matowdevmatowdev
committed
[PRAC/cont] Add custom "dropdown" element
Initial organiz "dropdown" in contact row, when "add-modal" btn clicked. Deserv(s) attention: - recognizing how important to understand when looking at a template (as a whole, for the first time).. what/how to layout a particular element (what should be here and what should be there). core: B-3 / JS-BL
1 parent 7fce65c commit 3b5c6a0

File tree

4 files changed

+203
-42
lines changed

4 files changed

+203
-42
lines changed

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

Lines changed: 109 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,31 @@
5757
flex-direction: column;
5858
}
5959

60+
.modal__add-body-form .add-modal-input {
61+
margin: 0;
62+
border-radius: 0;
63+
font-family: var(--open-sans), sans-serif;
64+
font-weight: var(--semi-bold);
65+
font-size: var(--default-fs);
66+
caret-color: var(--main-purple);
67+
}
68+
69+
.add-modal-input::placeholder {
70+
color: var(--text-gray);
71+
}
72+
73+
.add-modal-input:focus {
74+
border-color: var(--main-purple);
75+
box-shadow: 0 0 0 .25rem rgba(152, 115, 255, .25);
76+
outline: none;
77+
}
78+
79+
.add-modal-input.is-invalid:focus {
80+
border-color: var(--bootstrap-red);
81+
box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);
82+
outline: none;
83+
}
84+
6085
.modal__add-body-inputs-wrap {
6186
display: flex;
6287
flex-direction: column;
@@ -67,34 +92,22 @@
6792
}
6893

6994
.modal__add-body-inputs-wrap .modal__add-body-input {
70-
font-family: var(--open-sans), sans-serif;
71-
font-weight: var(--semi-bold);
72-
font-size: var(--default-fs);
73-
}
74-
75-
.modal__add-body-inputs-wrap .modal__add-body-input {
76-
margin: 0;
7795
border: none;
7896
border-bottom: 1px solid var(--gray);
79-
border-radius: 0;
8097
padding: 5px 3px;
8198
height: 45px;
8299
min-height: 45px;
83-
caret-color: var(--main-purple);
84100
}
85101

86102
.modal__add-body-input:focus {
87103
border-color: var(--main-purple);
88104
/* тень только снизу */
89105
box-shadow: 0 .25rem 0 rgba(152, 115, 255, .25);
90-
outline: none;
91106
}
92107

93108
.modal__add-body-input.is-invalid:focus {
94-
border-color: var(--bootstrap-red);
95109
/* тень только снизу */
96110
box-shadow: 0 .25rem 0 rgba(220, 53, 69, .25);
97-
outline: none;
98111
}
99112

100113
.modal__add-body-input-wrap .modal__add-body-input-label {
@@ -127,14 +140,97 @@
127140
background-color: rgba(200, 197, 209, .3);
128141
}
129142

130-
.modal__add-body-add-select-wrap {
143+
.modal__add-body-add-contacts-row-wrap {
131144
display: flex;
132145
flex-direction: column;
133146
row-gap: 15px;
134147
margin-bottom: 15px;
135148
padding: 25px 30px 0 30px;
136149
width: 100%;
150+
}
151+
152+
.modal__add-body-add-contact-select {
153+
position: relative;
154+
width: 120px;
155+
height: 37px;
156+
background-color: var(--select-gray);
157+
}
158+
159+
.modal__add-body-add-contact-drop-btn {
160+
position: relative;
161+
display: flex;
162+
justify-content: flex-start;
163+
align-items: center;
164+
border: 1px solid var(--gray);
165+
border-radius: 0;
166+
padding: 5px 10px;
167+
width: 100%;
168+
height: 100%;
169+
font-size: 12px;
170+
background: transparent;
171+
outline: none;
172+
overflow: hidden;
173+
}
174+
175+
.modal__add-body-add-contact-drop-btn:after {
176+
content: '';
177+
position: absolute;
178+
top: 50%;
179+
right: 6px;
180+
transform: translateY(-50%);
181+
width: 16px;
182+
height: 16px;
183+
background-image: url('../images/drop-arrow-down.svg');
184+
background-repeat: no-repeat;
185+
background-position: center;
186+
background-size: contain;
187+
/* отработка клика и на arrow-icon */
188+
pointer-events: none;
189+
}
190+
191+
.modal__add-body-add-contact-drop-btn:focus-visible:not(:hover) {
192+
border-color: var(--main-purple);
193+
box-shadow: 0 0 0 .25rem rgba(152, 115, 255, .25);
194+
z-index: 10;
195+
}
196+
197+
.modal__add-body-add-contact-drop-btn:not(:focus-visible) {
198+
z-index: 1;
199+
}
200+
201+
.modal__add-body-add-contact-list {
202+
position: absolute;
203+
left: 0;
204+
top: 36px;
205+
margin: 0;
206+
border: 1px solid var(--gray);
207+
border-radius: 0;
208+
padding: 0;
209+
width: 100%;
210+
background: var(--option-gray);
211+
overflow: hidden;
212+
list-style-type: none;
213+
}
137214

215+
.modal__add-body-add-contact-item {
216+
box-sizing: border-box;
217+
margin: 0;
218+
padding: 0;
219+
padding: 4px 10px;
220+
font-size: 12px;
221+
cursor: pointer;
222+
}
223+
224+
.modal__add-body-add-contact-item:first-child {
225+
padding-top: 8px;
226+
}
227+
228+
.modal__add-body-add-contact-item:last-child {
229+
padding-bottom: 7px;
230+
}
231+
232+
.modal__add-body-add-contact-item:hover {
233+
background-color: var(--select-gray);
138234
}
139235

140236
.modal__add-btn {
@@ -224,7 +320,6 @@
224320
opacity: 0;
225321
}
226322

227-
228323
.modal__add-body-save-btn {
229324
align-self: center;
230325
margin-bottom: 5px;

‎core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/variables.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
--gray: #C8C5D1;
2727
--text-gray: #B0B0B0;
2828
--specific-gray: #85859b;
29+
--select-gray: #E7E5EB;
30+
--option-gray: #F4F3F6;
2931
--bg-page: #F5F5F5;
3032

3133
/* transitions */

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

Lines changed: 10 additions & 0 deletions
Loading

‎core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js‎

Lines changed: 82 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@
252252
const addModalBodyPatronymicInputLabel = document.createElement('label');
253253
const addModalBodyPatronymicFeedback = document.createElement('div');
254254
const addModalBodyAddContactsWrap = document.createElement('div');
255-
const addModalBodyAddSelectWrap = document.createElement('div');
255+
const addModalBodyAddContactsRowWrap = document.createElement('div');
256256
const addModalBodyAddBtn = document.createElement('button');
257257
const addModalBodyAddBtnStrokeIcon = document.createElement('span');
258258
const addModalBodyAddBtnStrokeIconGray = document.createElement('span');
@@ -285,6 +285,7 @@
285285
addModalBodySurnameInput.classList.add(
286286
'modal__add-body-input',
287287
'add-surname-input',
288+
'add-modal-input',
288289
'form-control'
289290
);
290291
addModalBodySurnameInputLabel.classList.add(
@@ -308,6 +309,7 @@
308309
addModalBodyNameInput.classList.add(
309310
'modal__add-body-input',
310311
'add-name-input',
312+
'add-modal-input',
311313
'form-control'
312314
);
313315
addModalBodyNameInputLabel.classList.add(
@@ -331,6 +333,7 @@
331333
addModalBodyPatronymicInput.classList.add(
332334
'modal__add-body-input',
333335
'add-patronymic-input',
336+
'add-modal-input',
334337
'form-control'
335338
);
336339
addModalBodyPatronymicInputLabel.classList.add(
@@ -345,8 +348,8 @@
345348
addModalBodyAddContactsWrap.classList.add(
346349
'modal__add-body-add-contacts-wrap'
347350
);
348-
addModalBodyAddSelectWrap.classList.add(
349-
'modal__add-body-add-select-wrap',
351+
addModalBodyAddContactsRowWrap.classList.add(
352+
'modal__add-body-add-contacts-row-wrap',
350353
'd-none'
351354
);
352355
addModalBodyAddBtn.classList.add('modal__add-body-add-btn', 'modal__add-btn');
@@ -470,7 +473,7 @@
470473
addModalBodyAddBtnText
471474
);
472475
addModalBodyAddContactsWrap.append(
473-
addModalBodyAddSelectWrap,
476+
addModalBodyAddContactsRowWrap,
474477
addModalBodyAddBtn
475478
);
476479
addModalBodyForm.append(
@@ -617,52 +620,101 @@
617620
if (addModalContactsArr.length >= 10) return;
618621

619622
const addModalContactElement = document.createElement('div');
623+
const addModalContactCustomSelect = document.createElement('div');
624+
const addModalContactDropBtn = document.createElement('button');
625+
const addModalContactList = document.createElement('ul');
626+
const addModalContactItemExtraPhone = document.createElement('li');
627+
const addModalContactItemEmail = document.createElement('li');
628+
const addModalContactItemVk = document.createElement('li');
629+
const addModalContactItemFacebook = document.createElement('li');
630+
const addModalContactHiddenInput = document.createElement('input');
631+
const addModalContactInput = document.createElement('input');
632+
const addModalContactXBtn = document.createElement('button');
633+
620634
addModalContactElement.classList.add(
621635
'modal__add-body-add-contact-element',
622636
'input-group'
623637
);
624-
625-
const addModalContactSelect = document.createElement('select');
626-
addModalContactSelect.classList.add(
627-
'modal__add-body-add-contact-select',
628-
'form-select'
638+
addModalContactCustomSelect.classList.add(
639+
'modal__add-body-add-contact-select'
640+
// 'form-select'
641+
);
642+
addModalContactDropBtn.classList.add(
643+
'modal__add-body-add-contact-drop-btn'
644+
);
645+
addModalContactList.classList.add('modal__add-body-add-contact-list');
646+
addModalContactItemExtraPhone.classList.add(
647+
'modal__add-body-add-contact-item',
648+
'add-modal-extra-phone-item'
649+
);
650+
addModalContactItemEmail.classList.add(
651+
'modal__add-body-add-contact-item',
652+
'add-modal-email-item'
653+
);
654+
addModalContactItemVk.classList.add(
655+
'modal__add-body-add-contact-item',
656+
'add-modal-vk-item'
657+
);
658+
addModalContactItemFacebook.classList.add(
659+
'modal__add-body-add-contact-item',
660+
'add-modal-facebook-item'
661+
);
662+
addModalContactHiddenInput.classList.add(
663+
'modal__add-body-add-hidden-input'
629664
);
630-
addModalContactSelect.setAttribute('name', 'contact-options');
631-
addModalContactSelect.innerHTML = `
632-
<option value="phone" selected>Телефон</option>
633-
<option value="extra-phone">Доп. телефон</option>
634-
<option value="email">Email</option>
635-
<option value="vk">Vk</option>
636-
<option value="facebook">Facebook</option>
637-
`;
638-
639-
const addModalContactInput = document.createElement('input');
640665
addModalContactInput.classList.add(
641666
'modal__add-body-add-contact-input',
667+
'add-modal-input',
642668
'form-control'
643669
);
644-
addModalContactInput.setAttribute('type', 'text');
645-
addModalContactInput.setAttribute('name', 'contact-data');
646-
addModalContactInput.setAttribute('placeholder', 'Введите данные контакта');
647-
648-
const addModalContactXBtn = document.createElement('button');
649670
addModalContactXBtn.classList.add(
650671
'modal__add-body-add-x-btn',
651672
'add-modal-delete-btn'
652673
);
674+
675+
addModalContactCustomSelect.setAttribute('name', 'contact-options');
676+
addModalContactDropBtn.setAttribute('id', 'add-modal-drop-btn');
677+
addModalContactDropBtn.setAttribute('type', 'button');
678+
addModalContactItemExtraPhone.setAttribute('data-value', 'extra-phone');
679+
addModalContactItemEmail.setAttribute('data-value', 'email');
680+
addModalContactItemVk.setAttribute('data-value', 'vk');
681+
addModalContactItemFacebook.setAttribute('data-value', 'facebook');
682+
addModalContactHiddenInput.setAttribute('value', 'phone'); // начальное значение, согласно textContent кнопки
683+
addModalContactHiddenInput.setAttribute('type', 'hidden');
684+
addModalContactHiddenInput.setAttribute('name', 'contact-type');
685+
addModalContactInput.setAttribute('type', 'text');
686+
addModalContactInput.setAttribute('name', 'contact-data');
687+
addModalContactInput.setAttribute('placeholder', 'Введите данные контакта');
653688
addModalContactXBtn.setAttribute('type', 'button');
654689
addModalContactXBtn.setAttribute('tabindex', '0');
690+
691+
addModalContactDropBtn.textContent = 'Телефон';
692+
addModalContactItemExtraPhone.textContent = 'Доп. телефон';
693+
addModalContactItemEmail.textContent = 'Email';
694+
addModalContactItemVk.textContent = 'Vk';
695+
addModalContactItemFacebook.textContent = 'Facebook';
655696
addModalContactXBtn.textContent = '✖';
656697

698+
addModalContactList.append(
699+
addModalContactItemExtraPhone,
700+
addModalContactItemEmail,
701+
addModalContactItemVk,
702+
addModalContactItemFacebook
703+
);
704+
addModalContactCustomSelect.append(
705+
addModalContactDropBtn,
706+
addModalContactList
707+
);
657708
addModalContactElement.append(
658-
addModalContactSelect,
709+
addModalContactCustomSelect,
710+
addModalContactHiddenInput,
659711
addModalContactInput,
660712
addModalContactXBtn
661713
);
662714

663715
// отображение изначально скрытой обвёртки/родителя
664716
const addBodySelectWrap = document.querySelector(
665-
'.modal__add-body-add-select-wrap'
717+
'.modal__add-body-add-contacts-row-wrap'
666718
);
667719
addBodySelectWrap.classList.remove('d-none');
668720

@@ -721,7 +773,9 @@
721773

722774
if (modalContactsElement) {
723775
// определение заполненности инпута в данной строке контакта
724-
const currentInput = modalContactsElement.querySelector('input');
776+
const currentInput = modalContactsElement.querySelector(
777+
'.modal__add-body-add-contact-input'
778+
);
725779
const isCurrentInputFilled =
726780
currentInput && currentInput.value.trim() !== '';
727781
let confirmed = true; // изначально подтверждение/confirm не требуется
@@ -749,7 +803,7 @@
749803
.length === 0
750804
) {
751805
const addBodySelectWrap = document.querySelector(
752-
'.modal__add-body-add-select-wrap'
806+
'.modal__add-body-add-contacts-row-wrap'
753807
);
754808
addBodySelectWrap.classList.add('d-none');
755809
addModalBodyAddBtn.classList.remove('add-modal-btn-margin');

0 commit comments

Comments
 (0)