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