Kirill Pet
10 months ago
parent
d5ea9b0a34
commit
7ca7790b8f
|
After Width: | Height: | Size: 502 B |
|
After Width: | Height: | Size: 615 B |
|
After Width: | Height: | Size: 168 B |
@ -0,0 +1,146 @@ |
||||
'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'); |
||||
|
||||
function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode) { |
||||
let inputs = document.querySelectorAll(main); |
||||
|
||||
inputs.forEach(e => { |
||||
let thisMainFlag = e.querySelector(mainFlag),
|
||||
thisMainCode = e.querySelector(mainCode), |
||||
thisInput = e.querySelector(input), |
||||
thisList = e.querySelector(list), |
||||
thisSelects = e.querySelectorAll(selects); |
||||
|
||||
e.onclick = function (event) { |
||||
thisInput.focus(); |
||||
|
||||
thisList.classList.add('active');
|
||||
} |
||||
|
||||
thisSelects.forEach(e => { |
||||
let newIcon = e.querySelector(selectIcon), |
||||
newCode = e.querySelector(selectCode); |
||||
|
||||
e.onclick = function () { |
||||
thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`; |
||||
thisMainCode.textContent = newCode.textContent; |
||||
|
||||
|
||||
setTimeout(() => { |
||||
thisList.classList.remove('active'); |
||||
}, 0); |
||||
} |
||||
|
||||
}) |
||||
}) |
||||
} |
||||
|
||||
checkPhone('.form-input-phone__input'); |
||||
|
||||
function checkPhone(input) { |
||||
document.querySelector(input).addEventListener('input', function(event) { |
||||
let text = event.target.value; |
||||
let length = text.length; |
||||
let newSymbol = event.data; |
||||
|
||||
if (!(/^\d+$/.test(text.replaceAll(' ', '')))) { |
||||
event.target.value = text.slice(0, -1); |
||||
return; |
||||
} |
||||
|
||||
if (length == 4 || length == 8) { |
||||
if (newSymbol != null) { |
||||
event.target.value = text.slice(0, -1) + ' ' + newSymbol; |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
inputTwo('.form-input__two', '.form-input-two__button', '.form-input-two__oval', '.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; |
||||
|
||||
thisButtons.forEach(button => { |
||||
button.onclick = function () { |
||||
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`; |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input') |
||||
|
||||
function inputRadio(main ,item, textClass, input) { |
||||
let inputRadios = document.querySelectorAll(main); |
||||
|
||||
inputRadios.forEach(inputRadio => { |
||||
let items = inputRadio.querySelectorAll(item), |
||||
thisInput = inputRadio.querySelector(input); |
||||
|
||||
items.forEach(radio => { |
||||
let thisText = radio.querySelector(textClass).textContent; |
||||
|
||||
radio.onclick = function () { |
||||
if (inputRadio.querySelector(`${item}.active`)) { |
||||
inputRadio.querySelector(`${item}.active`).classList.remove('active'); |
||||
} |
||||
thisInput.value = thisText; |
||||
radio.classList.add('active'); |
||||
} |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content'); |
||||
|
||||
function listInputRadio(main ,item, textClass, input, content, block) { |
||||
let listInputRadios = document.querySelectorAll(main); |
||||
|
||||
listInputRadios.forEach(listInputRadio => { |
||||
let thisInput = listInputRadio.querySelector(input), |
||||
items = listInputRadio.querySelectorAll(item), |
||||
thisContent = listInputRadio.querySelector(content), |
||||
thisBlock = listInputRadio.querySelector(block); |
||||
|
||||
thisInput.onclick = function () { |
||||
thisBlock.classList.add('active'); |
||||
thisBlock.style.height = '192px'; |
||||
} |
||||
|
||||
items.forEach(item => { |
||||
item.onclick = function () { |
||||
let newText = item.querySelector(textClass).textContent; |
||||
|
||||
thisInput.value = newText; |
||||
|
||||
if (thisContent.querySelector('.active')) { |
||||
thisContent.querySelector('.active').classList.remove('active'); |
||||
} |
||||
|
||||
item.classList.add('active'); |
||||
|
||||
thisBlock.classList.remove('active'); |
||||
thisBlock.style.height = '0px'; |
||||
} |
||||
}) |
||||
}) |
||||
} |
||||
Loading…
Reference in new issue