Skip to content

Commit c7f41b7

Browse files
matowdevmatowdev
committed
[PRAC/cont] Add modal window for "add-btn"
Init organization of modal window/structure, accord Bootstrap features. Worth noting: - the size of the scope of work (it is better to do everything in Html). core: B-3 / JS-BL
1 parent 01dc029 commit c7f41b7

File tree

5 files changed

+141
-10
lines changed

5 files changed

+141
-10
lines changed

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
padding-left: var(--container-padding);
77
}
88

9+
.crm__add-btn-wrap {
10+
padding-bottom: 30px;
11+
}
12+
913
.crm__add-btn {
1014
display: flex;
1115
justify-content: flex-end;
@@ -39,6 +43,10 @@
3943
opacity: 1;
4044
}
4145

46+
.crm__add-btn:focus-visible:active {
47+
color: var(--gray);
48+
}
49+
4250
.crm__add-btn:active {
4351
border: 1px solid var(--gray);
4452
color: var(--gray);

‎core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/images/add-client-gray.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/images/add-client-white.svg‎

Lines changed: 2 additions & 2 deletions
Loading

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@
1919
<script src="js/index.js" defer></script>
2020
</head>
2121

22-
<body class="page">
22+
<body class="page" id="'page">
2323
<div class="crm page__crm" id="crm">
2424
<h1 class="crm__title visually-hidden">Skillbus-CRM</h1>
2525
<div class="crm__search-data" id="crm-search">
26-
<div class="crm__search-container container page__container"></div>
26+
<div class="crm__search-container page__container container"></div>
2727
</div>
2828
<div class="crm__output-data" id="crm-output">
29-
<div class="crm__output-container container page__container"></div>
29+
<div class="crm__output-container page__container container"></div>
3030
</div>
3131
<div class="crm__add-data" id="crm-add">
32-
<div class="crm__add-container container page__container"></div>
32+
<div class="crm__add-container page__container container"></div>
3333
</div>
3434
</div>
3535
</body>

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

Lines changed: 125 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
(() => {
22
// ** получение существующих, создание "новых" элементов (глобальное объявление)
3+
const page = document.getElementById('page');
34
const crm = document.getElementById('crm');
45
const crmSearch = document.getElementById('crm-search');
56
const crmOutput = document.getElementById('crm-output');
@@ -229,18 +230,140 @@
229230
const addBtnGrayIcon = document.createElement('span');
230231
const addBtnText = document.createElement('span');
231232
const addModalWrap = document.createElement('div');
233+
const addModalDialog = document.createElement('div');
234+
const addModalContent = document.createElement('div');
235+
const addModalHeader = document.createElement('div');
236+
const addModalHeaderTitle = document.createElement('h1');
237+
const addModalHeaderXBtn = document.createElement('button');
238+
const addModalBody = document.createElement('div');
239+
const addModalBodyForm = document.createElement('form');
240+
const addModalBodySurnameInputWrap = document.createElement('div');
241+
const addModalBodySurnameInput = document.createElement('input');
242+
const addModalBodyNameInputWrap = document.createElement('div');
243+
const addModalBodyNameInput = document.createElement('input');
244+
const addModalBodyPatronymicInputWrap = document.createElement('div');
245+
const addModalBodyPatronymicInput = document.createElement('input');
246+
const addModalFooter = document.createElement('div');
247+
const addModalFooterAddBtnWrap = document.createElement('div');
248+
const addModalFooterAddBtn = document.createElement('button');
249+
const addModalFooterSaveBtn = document.createElement('button');
250+
const addModalFooterCancelBtn = document.createElement('button');
232251

252+
addBtnWrap.classList.add('crm__add-btn-wrap');
233253
addBtn.classList.add('crm__add-btn');
234254
addBtnDefaultIcon.classList.add('crm__add-btn-icon', 'default-add-icon');
235255
addBtnWhiteIcon.classList.add('crm__add-btn-icon', 'white-add-icon');
236256
addBtnGrayIcon.classList.add('crm__add-btn-icon', 'gray-add-icon');
237257
addBtnText.classList.add('crm__add-btn-text');
258+
addModalWrap.classList.add('modal', 'crm__add-btn-modal', 'fade');
259+
addModalDialog.classList.add(
260+
'modal__add-dialog',
261+
'modal-dialog',
262+
'modal-dialog-centered'
263+
);
264+
addModalContent.classList.add('modal__add-content-wrap', 'modal-content');
265+
addModalHeader.classList.add('modal__add-header', 'modal-header');
266+
addModalHeaderTitle.classList.add('modal__add-header-title', 'modal-title');
267+
addModalHeaderXBtn.classList.add('modal__add-header-x-btn', 'btn-close');
268+
addModalBody.classList.add('modal__add-body', 'modal-body');
269+
addModalBodyForm.classList.add('modal__add-body-form');
270+
addModalBodySurnameInputWrap.classList.add(
271+
'modal__add-body-input-wrap',
272+
'add-surname-input-wrap'
273+
);
274+
addModalBodySurnameInput.classList.add(
275+
'modal__add-body-input',
276+
'add-surname-input',
277+
'form-control'
278+
);
279+
addModalBodyNameInputWrap.classList.add(
280+
'modal__add-body-input-wrap',
281+
'add-name-input-wrap'
282+
);
283+
addModalBodyNameInput.classList.add(
284+
'modal__add-body-input',
285+
'add-name-input',
286+
'form-control'
287+
);
288+
addModalBodyPatronymicInputWrap.classList.add(
289+
'modal__add-body-input-wrap',
290+
'add-patronymic-input-wrap'
291+
);
292+
addModalBodyPatronymicInput.classList.add(
293+
'modal__add-body-input',
294+
'add-patronymic-input',
295+
'form-control'
296+
);
297+
addModalFooter.classList.add('modal__add-footer', 'modal-footer');
298+
addModalFooterAddBtnWrap.classList.add('modal__add-footer-add-btn-wrap');
299+
addModalFooterAddBtn.classList.add('modal__add-footer-add-btn');
300+
addModalFooterSaveBtn.classList.add('modal__add-footer-save-btn');
301+
addModalFooterCancelBtn.classList.add('modal__add-footer-cancel-btn');
302+
303+
addBtn.setAttribute('id', 'add-btn');
304+
addBtn.setAttribute('type', 'button');
305+
addBtn.setAttribute('data-bs-toggle', 'modal');
306+
addBtn.setAttribute('data-bs-target', '#add-btn-modal');
307+
addModalWrap.setAttribute('id', 'add-btn-modal');
308+
addModalWrap.setAttribute('tabindex', '-1');
309+
addModalWrap.setAttribute('aria-hidden', 'true');
310+
addModalHeaderXBtn.setAttribute('type', 'button');
311+
addModalHeaderXBtn.setAttribute('data-bs-dismiss', 'modal');
312+
addModalHeaderXBtn.setAttribute('aria-label', 'Close');
313+
addModalBodyForm.setAttribute('id', 'add-modal-form');
314+
addModalBodyForm.setAttribute('action', '#');
315+
addModalBodyForm.setAttribute('novalidate', '');
316+
addModalBodySurnameInput.setAttribute('id', 'add-surname-input');
317+
addModalBodySurnameInput.setAttribute('type', 'text');
318+
addModalBodySurnameInput.setAttribute('pattern', '[А-Яа-яЁё\\-]+');
319+
addModalBodySurnameInput.setAttribute('placeholder', 'Фамилия');
320+
addModalBodySurnameInput.setAttribute('required', '');
321+
addModalBodyNameInput.setAttribute('id', 'add-name-input');
322+
addModalBodyNameInput.setAttribute('type', 'text');
323+
addModalBodyNameInput.setAttribute('pattern', '[А-Яа-яЁё\\-]+');
324+
addModalBodyNameInput.setAttribute('placeholder', 'Имя');
325+
addModalBodyNameInput.setAttribute('required', '');
326+
addModalBodyPatronymicInput.setAttribute('id', 'add-patronymic-input');
327+
addModalBodyPatronymicInput.setAttribute('type', 'text');
328+
addModalBodyPatronymicInput.setAttribute('pattern', '[А-Яа-яЁё\\-]+');
329+
addModalBodyPatronymicInput.setAttribute('placeholder', 'Отчество');
330+
addModalBodyPatronymicInput.setAttribute('required', '');
331+
addModalFooterAddBtn.setAttribute('id', 'add-modal-footer-add-btn');
332+
addModalFooterAddBtn.setAttribute('type', 'button');
333+
addModalFooterSaveBtn.setAttribute('id', 'add-modal-footer-save-btn');
334+
addModalFooterSaveBtn.setAttribute('type', 'button');
335+
addModalFooterCancelBtn.setAttribute('id', 'add-modal-footer-cancel-btn');
336+
addModalFooterCancelBtn.setAttribute('type', 'button');
337+
addModalFooterCancelBtn.setAttribute('data-bs-dismiss', 'modal');
238338

239339
addBtnText.textContent = 'Добавить клиента';
340+
addModalHeaderTitle.textContent = 'Новый клиент';
341+
addModalFooterAddBtn.textContent = 'Добавить контакт';
342+
addModalFooterSaveBtn.textContent = 'Сохранить';
343+
addModalFooterCancelBtn.textContent = 'Отмена';
240344

241345
addBtn.append(addBtnDefaultIcon, addBtnWhiteIcon, addBtnGrayIcon, addBtnText);
242-
addBtnWrap.append(addBtn, addModalWrap);
243-
crmAddContainer.append(addBtnWrap);
346+
addBtnWrap.append(addBtn);
347+
addModalHeader.append(addModalHeaderTitle, addModalHeaderXBtn);
348+
addModalBodySurnameInputWrap.append(addModalBodySurnameInput);
349+
addModalBodyNameInputWrap.append(addModalBodyNameInput);
350+
addModalBodyPatronymicInputWrap.append(addModalBodyPatronymicInput);
351+
addModalBodyForm.append(
352+
addModalBodySurnameInputWrap,
353+
addModalBodyNameInputWrap,
354+
addModalBodyPatronymicInputWrap
355+
);
356+
addModalBody.append(addModalBodyForm);
357+
addModalFooterAddBtnWrap.append(addModalFooterAddBtn);
358+
addModalFooter.append(
359+
addModalFooterAddBtnWrap,
360+
addModalFooterSaveBtn,
361+
addModalFooterCancelBtn
362+
);
363+
addModalContent.append(addModalHeader, addModalBody, addModalFooter);
364+
addModalDialog.append(addModalContent);
365+
addModalWrap.append(addModalDialog);
366+
crmAddContainer.append(addBtnWrap, addModalWrap);
244367

245368
// основные блоки/составляющие элементы приложения
246369
crm.append(crmSearch, crmOutput, crmAdd);

0 commit comments

Comments
 (0)