diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index ac62d83..4c7596e 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -714,6 +714,9 @@ button{ background: var(--background-white); transition: left .2s ease-out; } +.form-input-two__input:checked + .form-input-two__oval{ + left: calc(50% - 2px); +} .form-input-two__button{ width: 50%; diff --git a/assets/js/gp-form.js b/assets/js/gp-form.js index 50a5af7..0983077 100644 --- a/assets/js/gp-form.js +++ b/assets/js/gp-form.js @@ -1,9 +1,9 @@ 'use strict'; -inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', '.form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code'); +inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search'); -function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode) { +function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) { let inputs = document.querySelectorAll(main); inputs.forEach(e => { @@ -11,12 +11,24 @@ function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, thisMainCode = e.querySelector(mainCode), thisInput = e.querySelector(input), thisList = e.querySelector(list), - thisSelects = e.querySelectorAll(selects); + thisSelects = e.querySelectorAll(`.${selects}`), + thisSearchInput = e.querySelector(`.${searchInput}`); + + thisInput.onblur = function (input) { + if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) { + thisList.classList.remove('active'); + } + } e.onclick = function (event) { - thisInput.focus(); + if (!event.target.classList.contains(searchInput)) { + if (thisList.classList.contains('active')) { + thisList.classList.remove('active'); + } - thisList.classList.add('active'); + thisInput.focus(); + thisList.classList.add('active'); + } } thisSelects.forEach(e => { @@ -61,35 +73,19 @@ function checkPhone(input) { }) } -inputTwo('.form-input__two', '.form-input-two__button', '.form-input-two__oval', '.form-input-two__input') +inputTwo('.form-input__two', '.form-input-two__input') -function inputTwo(inputTwo, button, oval, input) { - let inputTwos = document.querySelectorAll(inputTwo); - - inputTwos.forEach(e => { - let thisButtons = e.querySelectorAll(button), - thisOval = e.querySelector(oval), - thisInput = e.querySelector(input), - thisMain = e; +function inputTwo(main, inputTwo) { + let buttons = document.querySelectorAll(main); + + buttons.forEach(button => { + let input = button.querySelector(inputTwo); + + button.onclick = function () { + input.checked = (input.checked == false) ? true : false; + } - thisButtons.forEach(button => { - button.onclick = function (event) { - event.preventDefault(); - let newLeft = button.clientWidth; - let newValue = button.textContent; - - if (button.classList.contains('alternative')) { - thisMain.classList.add('alternative'); - thisInput.value = newValue; - thisOval.style.left = `${newLeft}px`; - }else{ - thisMain.classList.remove('alternative'); - thisInput.value = newValue; - thisOval.style.left = `2px`; - } - } - }) }) } @@ -134,6 +130,12 @@ function listInputRadio(main ,item, textClass, input, content, block) { thisBlock.style.height = '192px'; } + + thisInput.onblur = function(){ + thisBlock.classList.remove('active'); + thisBlock.style.height = '0px'; + }; + items.forEach(item => { item.onclick = function (event) { event.preventDefault(); @@ -146,9 +148,6 @@ function listInputRadio(main ,item, textClass, input, content, block) { } item.classList.add('active'); - - thisBlock.classList.remove('active'); - thisBlock.style.height = '0px'; } }) }) diff --git a/notification-form-pet.html b/notification-form-pet.html index 3f85c75..82d56c2 100644 --- a/notification-form-pet.html +++ b/notification-form-pet.html @@ -234,12 +234,11 @@