Доброго дня. Я js-дно) - камнями не кидать
(ссылка на codepen внизу)
Подскажите плиз
как правильно написать код js, он в принципе работает так как нужно, но мне кажется это возможно неправильный подход + можно сделать проще и короче, может сделать 1 слушатель на это все.
Идея в том, чтобы по клику на вход/регистрация появлялась модалка с формами. При клике на вход нужно вешать доп класс (убирает бордер) на элемент в модальном окне со ссылкой "вход" + вешать класс (show - display:block) на соответствующую форму, и соответственно тоже по клику на регистрация - убираем бордер в модалке у ссылка регистрация и показываем форму реги.
Ну и при переключении уже в открытой модалке довешивать/убирать соответствующие классы
<nav class="user-block">
<ul class="user-block-menu">
<li class="user-block-menu__item">
<span class="icon-login">
<a href="#" data-user="entry" class="user-block-menu__link">Вход</a>
</span>
</li>
<li class="user-block-menu__item">
<span class="icon-reg">
<a href="#" data-user="reg" class="user-block-menu__link">Регистрация</a>
</span>
</li>
</ul>
<div class="user-modal">
<ul class="user-modal__menu">
<li class="user-modal__item"><a class="user-modal__link" id="entry" href="#" data-link="entry">Вход</a></li>
<li class="user-modal__item"><a class="user-modal__link" id="reg" href="#" data-link="reg">Регистрация</a></li>
</ul>
<div class="user-modal__entry">
<form action="" class="user-modal__form" method="post">
<input class="user-modal__email-entry" type="email" name="email-entry" placeholder="Email">
<input class="user-modal__password-entry" type="password" name="password-entry" placeholder="Пароль">
<input class="user-modal__submit-entry" type="submit" name="submit-entry" value="Войти">
</form>
</div>
<div class="user-modal__reg">
<form action="" class="user-modal__form" method="post">
<input class="user-modal__name-reg" type="text" name="name" placeholder="Имя">
<input class="user-modal__email-reg" type="email" name="email" placeholder="Email">
<input class="user-modal__password-reg" type="password" name="password" placeholder="Пароль">
<input class="user-modal__password-reg" type="password" name="password-confirm" placeholder="Пароль">
<input class="user-modal__submit-reg" type="submit" name="submit-reg" value="Войти">
</form>
</div>
</div>
</nav>
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
modalCategory = document.querySelector('.category-wrap'),//категории модалка
linkAllCat = document.querySelector('.link-all-cat'),//ссылка на главной на модалку категорий
modalClose = document.querySelector('.modal-close'),//закрываха модалки
userModal = document.querySelector('.user-modal'),//модалка вход/рега
userModalMenu = document.querySelector('.user-modal__menu'),//слушатель вход/рега внутри модалки
userBlockMenu = document.querySelector('.user-block-menu'),//слушатель вход/рега на ссылках
entryForm = document.querySelector('.user-modal__entry'),//форма входа в модалке
regForm = document.querySelector('.user-modal__reg'),//форма реги в модалке
regId = document.querySelector('#reg'),//ссылка реги в модалке
entryId = document.querySelector('#entry');//ссылка входа в модалке
var removeClass = function(elem, className) {
if(className === undefined) {
className = 'show';
}
if(elem.classList.contains(className)) {
elem.classList.remove(className);
}
}
var addRemoveClass = function(elem1, elem2, className) {
if(className === undefined) {
className = 'show';
}
elem1.classList.remove(className);
elem2.classList.remove(className);
elem1.classList.add(className);
}
userBlockMenu.addEventListener('click', function(event) {
event.preventDefault();
if(userModal){
userModal.classList.contains('show') ?
userModal.classList.remove('show') + userModal.classList.remove('animate-user-modal') :
userModal.classList.add('show') + userModal.classList.add('animate-user-modal');
}
var elem = event.target,
dataUser = elem.getAttribute('data-user'),
dataLink = elem.getAttribute('data-link');
if(dataUser) {
if(dataUser === 'entry') {
addRemoveClass(entryForm, regForm);
addRemoveClass(entryId, regId, 'user-modal__link_active');
} else if(dataUser === 'reg') {
addRemoveClass(regForm, entryForm);
addRemoveClass(regId, entryId, 'user-modal__link_active');
}
}
});
userModalMenu.addEventListener('click', function(event) {
event.preventDefault();
var elem = event.target,
dataLink = elem.getAttribute('data-link');
if(dataLink) {
if(dataLink === 'entry') {
addRemoveClass(entryForm, regForm);
addRemoveClass(entryId, regId, 'user-modal__link_active');
} else if(dataLink === 'reg') {
addRemoveClass(regForm, entryForm);
addRemoveClass(regId, entryId, 'user-modal__link_active');
}
}
});
http://codepen.io/babulya/pen/QKyrxw
