Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

fix закрытие input с выподающими списками

Browse Source
This commit is contained in:
Kirill Pet
2024-10-28 14:34:52 +03:00
parent e6bccc904f
commit 928d5c1ffa
3 changed files with 42 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/gp-style-core.css
View File

@@ -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%;

63
assets/js/gp-form.js
View File

@@ -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,13 +11,25 @@ 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');
}
thisInput.focus();
thisList.classList.add('active');
}
}
thisSelects.forEach(e => {
let newIcon = e.querySelector(selectIcon),
@@ -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);
function inputTwo(main, inputTwo) {
let buttons = document.querySelectorAll(main);
inputTwos.forEach(e => {
let thisButtons = e.querySelectorAll(button),
thisOval = e.querySelector(oval),
thisInput = e.querySelector(input),
thisMain = e;
buttons.forEach(button => {
let input = button.querySelector(inputTwo);
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`;
button.onclick = function () {
input.checked = (input.checked == false) ? true : false;
}
}
})
})
}
@@ -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';
}
})
})

15
notification-form-pet.html
View File

@@ -234,12 +234,11 @@
<div class="modal-form-content__line">
<label for="" class="label-name">Вид животного</label>
<div class="form-input__two">
<input type="radio" class="form-input-two__input">
<div class="form-input-two__oval"></div>
<button class="form-input-two__button">Кошка</button>
<button class="form-input-two__button alternative">Собака</button>
<input type="text" value="Кошка" class="form-input-two__input">
<button class="form-input-two__button ">Собака</button>
</div>
</div>
@@ -262,12 +261,12 @@
<div class="modal-form-content__line">
<label for="" class="label-name">Пол вашего питомца</label>
<div class="form-input__two">
<input type="radio" class="form-input-two__input">
<div class="form-input-two__oval"></div>
<button class="form-input-two__button">Мальчик</button>
<button class="form-input-two__button alternative">Девочка</button>
<button class="form-input-two__button ">Девочка</button>
<input type="text" value="Кошка" class="form-input-two__input">
</div>
</div>
@@ -378,12 +377,12 @@
<div class="modal-form-content__line">
<label for="" class="label-name">Возраст питомца</label>
<div class="form-input__two">
<input type="radio" class="form-input-two__input">
<div class="form-input-two__oval"></div>
<button class="form-input-two__button">Примерный</button>
<button class="form-input-two__button alternative">Точный</button>
<input type="text" value="Кошка" class="form-input-two__input">
<button class="form-input-two__button ">Точный</button>
</div>
</div>