Fix | js and layout bugs fix #15
Merged
Andrei-10
merged 1 commits from restruct_bugfix into master 3 months ago
|
After Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,286 @@ |
||||
'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', 'form-input-phone-list__search'); |
||||
|
||||
function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) { |
||||
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}`), |
||||
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) { |
||||
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), |
||||
newCode = e.querySelector(selectCode); |
||||
|
||||
e.onclick = function (event) { |
||||
event.preventDefault(); |
||||
thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`; |
||||
thisMainCode.textContent = newCode.textContent; |
||||
|
||||
|
||||
setTimeout(() => { |
||||
thisList.classList.remove('active'); |
||||
}, 0); |
||||
} |
||||
|
||||
}) |
||||
}) |
||||
} |
||||
|
||||
if (document.querySelector('.form-input-phone__input')) { |
||||
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; |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
inputTabs('.form-input__tabs', '.form-input-tabs__button'); |
||||
inputTabs('.modal-map__control', '.modal-map-control__item'); |
||||
|
||||
function inputTabs(main, button) { |
||||
let mains = document.querySelectorAll(main); |
||||
|
||||
mains.forEach(main => { |
||||
let buttons = main.querySelectorAll(button); |
||||
|
||||
buttons.forEach(button => { |
||||
button.onclick = function () { |
||||
if (button.classList.contains('active')) { |
||||
return ; |
||||
} |
||||
|
||||
main.querySelector('.active').classList.remove('active'); |
||||
|
||||
button.classList.add('active'); |
||||
|
||||
if (button.querySelector('input')){ |
||||
button.querySelector('input').click(); |
||||
}
|
||||
} |
||||
}) |
||||
|
||||
}) |
||||
} |
||||
|
||||
|
||||
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 (event) { |
||||
event.preventDefault(); |
||||
|
||||
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'; |
||||
} |
||||
|
||||
|
||||
thisInput.onblur = function(){ |
||||
thisBlock.classList.remove('active'); |
||||
thisBlock.style.height = '0px'; |
||||
}; |
||||
|
||||
items.forEach(item => { |
||||
item.onclick = function (event) { |
||||
event.preventDefault(); |
||||
let newText = item.querySelector(textClass).textContent; |
||||
|
||||
thisInput.value = newText; |
||||
|
||||
if (thisContent.querySelector('.active')) { |
||||
thisContent.querySelector('.active').classList.remove('active'); |
||||
} |
||||
|
||||
item.classList.add('active'); |
||||
} |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
remoteControl('.form-input__remote-control', '.form-input-tabs__button'); |
||||
remoteControl('.modal-map__control', '.modal-map-control__item'); |
||||
|
||||
function remoteControl(main, button) { |
||||
let mains = document.querySelectorAll(main); |
||||
|
||||
mains.forEach(main => { |
||||
let subjectClass = main.dataset.content, |
||||
subject = document.querySelector(`.${subjectClass}`), |
||||
buttons = Array.from(main.querySelectorAll(button)); |
||||
|
||||
main.addEventListener('click', function (eventMain) { |
||||
setTimeout(() => { |
||||
let indexActive = buttons.findIndex((button, index) => { |
||||
if (button.classList.contains('active')) { |
||||
return true; |
||||
} |
||||
}); |
||||
if(subject.children[indexActive].classList.contains('active')){ |
||||
return ; |
||||
} |
||||
|
||||
subject.querySelector('.remote-control__item.active').classList.remove('active'); |
||||
subject.children[indexActive].classList.add('active'); |
||||
|
||||
let mandatorys = subject.querySelectorAll('.mandatory'); |
||||
|
||||
mandatorys.forEach(mandatory => { |
||||
if (mandatory.required) { |
||||
mandatory.required = false; |
||||
}else{ |
||||
mandatory.required = true; |
||||
} |
||||
}) |
||||
}, 0); |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
formCheck('.modal-form__content', 'input[type=submit]'); |
||||
formCheck('.modal-map__form', 'input[type=submit]'); |
||||
|
||||
function formCheck(form, submit) { |
||||
let forms = document.querySelectorAll(form); |
||||
|
||||
forms.forEach(form => { |
||||
let thisSubmit = form.querySelector(submit); |
||||
|
||||
thisSubmit.onclick = function () { |
||||
form.classList.add('check') |
||||
} |
||||
|
||||
}) |
||||
} |
||||
|
||||
inputPhoneNoFlag('.no-flag'); |
||||
|
||||
function inputPhoneNoFlag(input){ |
||||
let inputs = document.querySelectorAll(input); |
||||
|
||||
inputs.forEach(input => { |
||||
let code = '+' + input.dataset.code; |
||||
|
||||
input.onfocus = function () { |
||||
if (input.value == '') { |
||||
input.value = code; |
||||
} |
||||
} |
||||
|
||||
input.addEventListener('input', function(event) { |
||||
let text = event.target.value; |
||||
let length = text.length; |
||||
let newSymbol = event.data; |
||||
|
||||
if (isNaN(event.data) || event.data == ' ') { |
||||
event.target.value = text.slice(0, -1); |
||||
return; |
||||
} |
||||
|
||||
if (length == 3 || length == 7 || length == 11) { |
||||
if (newSymbol != null) { |
||||
event.target.value = text.slice(0, -1) + ' ' + newSymbol; |
||||
} |
||||
} |
||||
|
||||
}) |
||||
}) |
||||
} |
||||
|
||||
|
||||
inputCheck('.form-agreement__check'); |
||||
|
||||
function inputCheck(className) { |
||||
let checks = document.querySelectorAll(className); |
||||
|
||||
checks.forEach(check => { |
||||
let square = check.querySelector('.form-agreement__square'), |
||||
input = check.querySelector('input'); |
||||
|
||||
square.onclick = function () { |
||||
input.click();
|
||||
} |
||||
}) |
||||
} |
||||
|
||||
|
||||
inputRead('.input-read'); |
||||
function inputRead(className) { |
||||
let inputs = document.querySelectorAll(className); |
||||
|
||||
inputs.forEach(input => { |
||||
input.addEventListener("input", function (event) { |
||||
let text = event.target.value; |
||||
|
||||
event.target.value = text.slice(0, -1);
|
||||
}) |
||||
}) |
||||
} |
||||
@ -0,0 +1,156 @@ |
||||
'use strict'; |
||||
|
||||
// function
|
||||
function modalOpen(buttonElement, contentElement){ |
||||
let modal = document.querySelector('.modal'), |
||||
aside = document.querySelector('.modal__aside'), |
||||
elements = document.querySelectorAll(buttonElement), |
||||
device = window.screen.width; |
||||
|
||||
elements.forEach(e => { |
||||
let thisContentElement = document.querySelector(contentElement); |
||||
|
||||
e.onclick = function () { |
||||
modal.classList.add('active'); |
||||
thisContentElement.classList.add('active'); |
||||
|
||||
let width = thisContentElement.clientWidth; |
||||
|
||||
setTimeout(() => { |
||||
if (device <= 720) { |
||||
aside.style.width = `${device}px`; |
||||
thisContentElement.style.opacity = 1; |
||||
thisContentElement.style.filter = 'blur(0px)'; |
||||
}else{ |
||||
aside.style.width = `${width}px`; |
||||
thisContentElement.style.opacity = 1; |
||||
thisContentElement.style.filter = 'blur(0px)'; |
||||
} |
||||
}, 10); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function modalClose(buttonElement) { |
||||
let modal = document.querySelector('.modal'), |
||||
aside = document.querySelector('.modal__aside'), |
||||
asideItems = document.querySelectorAll('.modal__item'), |
||||
elements = document.querySelectorAll(buttonElement); |
||||
|
||||
elements.forEach(e => { |
||||
e.onclick = function () {
|
||||
aside.style.width = '0px'; |
||||
|
||||
asideItems.forEach(e => { |
||||
if (e.classList.contains('active')) { |
||||
e.style.filter = 'blur(10px)'; |
||||
} |
||||
}); |
||||
|
||||
setTimeout(() => { |
||||
asideItems.forEach(e => { |
||||
if (e.classList.contains('active')) { |
||||
e.classList.remove('active'); |
||||
} |
||||
}); |
||||
|
||||
modal.classList.remove('active'); |
||||
}, 300); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function closeModalForm(close){ |
||||
let buttons = document.querySelectorAll(close), |
||||
modal = document.querySelector('.modal'); |
||||
|
||||
buttons.forEach(button => { |
||||
button.onclick = function (buttonEvent) { |
||||
modal.classList.remove('active'); |
||||
|
||||
if (!modal.querySelector('.modal-map.active')) { |
||||
modal.querySelector('.modal-form.active').classList.remove('active'); |
||||
}else{ |
||||
modal.querySelector('.modal-map.active').classList.remove('active'); |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { |
||||
let elements = document.querySelectorAll(mainElement); |
||||
|
||||
elements.forEach(e => { |
||||
let thisMainElement = e, |
||||
thisButtonElement = e.querySelector(buttonElement), |
||||
thisHeightElement = e.querySelector(heightElement), |
||||
thisContentElement = e.querySelector(contentElement);
|
||||
|
||||
thisButtonElement.onclick = function (e) { |
||||
let height = thisHeightElement.clientHeight; |
||||
|
||||
if (close == true && !thisMainElement.classList.contains('active')) { |
||||
elements.forEach(e => { |
||||
if (e.classList.contains('active')) { |
||||
e.classList.remove('active'); |
||||
e.querySelector(contentElement).style.height = null |
||||
}
|
||||
}) |
||||
} |
||||
|
||||
if (!thisMainElement.classList.contains('active')) { |
||||
thisContentElement.style.height = `${height}px`; |
||||
thisMainElement.classList.add('active'); |
||||
}else{ |
||||
thisContentElement.style.height = null; |
||||
thisMainElement.classList.remove('active'); |
||||
} |
||||
} |
||||
|
||||
}); |
||||
} |
||||
|
||||
function toggleHeader(button, content, blockheight, removeBlock, removeClass) { |
||||
let thisButton = document.querySelector(button),
|
||||
thisContent = document.querySelector(content), |
||||
thisRemoveBlock = document.querySelector(removeBlock) || '', |
||||
thisBlockheight = document.querySelector(blockheight); |
||||
|
||||
thisButton.onclick = function () { |
||||
let height = thisBlockheight.clientHeight; |
||||
|
||||
if (!thisContent.classList .contains('open')) { |
||||
thisContent.style.height = `${height}px`; |
||||
thisContent.classList .add('open'); |
||||
|
||||
if (removeBlock) { |
||||
thisRemoveBlock.classList.remove(removeClass); |
||||
} |
||||
}else{ |
||||
thisContent.style.height = null; |
||||
thisContent.classList .remove('open'); |
||||
|
||||
if (removeBlock) { |
||||
if (window.scrollY <= 25) { |
||||
thisRemoveBlock.classList.add(removeClass); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
function modalFormOpen(formOrNotification) { |
||||
let buttons = document.querySelectorAll(formOrNotification), |
||||
modal = document.querySelector('.modal'); |
||||
|
||||
buttons.forEach(button => { |
||||
button.onclick = function (eventButton) { |
||||
let classOpenForm = button.dataset.form, |
||||
form = modal.querySelector(`.${classOpenForm}`);
|
||||
|
||||
form.classList.add('active'); |
||||
modal.classList.add('active'); |
||||
} |
||||
}) |
||||
} |
||||
// function
|
||||
@ -1,129 +0,0 @@ |
||||
jQuery(document).ready(function($) { |
||||
// Инициализация слайдера для мобильной галереи
|
||||
const mobileGallerySwiper = new Swiper('.detail__images-phone', { |
||||
slidesPerView: 1, |
||||
spaceBetween: 10, |
||||
pagination: { |
||||
el: '.swiper-pagination', |
||||
clickable: true |
||||
} |
||||
}); |
||||
|
||||
// Инициализация слайдера для полноэкранной галереи
|
||||
const gallerySwiper = new Swiper('.gallery__slider', { |
||||
slidesPerView: 1, |
||||
spaceBetween: 10, |
||||
navigation: { |
||||
nextEl: '.swiper-button-next', |
||||
prevEl: '.swiper-button-prev', |
||||
}, |
||||
pagination: { |
||||
el: '.swiper-pagination', |
||||
clickable: true |
||||
} |
||||
}); |
||||
|
||||
// Инициализация слайдера для рекомендованных товаров
|
||||
const recommendedSwiper = new Swiper('.detail__catalot .detail-catalot__content', { |
||||
slidesPerView: 1, |
||||
spaceBetween: 20, |
||||
navigation: { |
||||
nextEl: '.detail-catalot__control .next', |
||||
prevEl: '.detail-catalot__control .prev', |
||||
}, |
||||
breakpoints: { |
||||
768: { |
||||
slidesPerView: 2, |
||||
}, |
||||
1024: { |
||||
slidesPerView: 3, |
||||
}, |
||||
1280: { |
||||
slidesPerView: 4, |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// Обработка переключения веса продукта
|
||||
$('.detail-block-form__item--radio button').on('click', function(e) { |
||||
e.preventDefault(); |
||||
const variationId = $(this).data('variation-id'); |
||||
|
||||
// Убираем активный класс у всех кнопок
|
||||
$('.detail-block-form__item--radio button').removeClass('active'); |
||||
// Добавляем активный класс текущей кнопке
|
||||
$(this).addClass('active'); |
||||
|
||||
// Отправляем AJAX запрос для получения данных вариации
|
||||
$.ajax({ |
||||
url: '/wp-admin/admin-ajax.php', |
||||
type: 'POST', |
||||
data: { |
||||
action: 'get_variation_data', |
||||
variation_id: variationId |
||||
}, |
||||
success: function(response) { |
||||
if (response.success) { |
||||
// Обновляем цену
|
||||
$('.detail-block-price__price').text(response.data.price); |
||||
|
||||
// Обновляем скидку если есть
|
||||
if (response.data.regular_price !== response.data.price) { |
||||
$('.detail-block-price__sale').html(` |
||||
<p class="detail-block-price-sale__text">${response.data.regular_price}</p> |
||||
<p class="detail-block-price-sale__perc">${response.data.discount_percentage}</p> |
||||
`);
|
||||
} else { |
||||
$('.detail-block-price__sale').empty(); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
// Обработка открытия/закрытия аккордеона
|
||||
$('.toggle__title').on('click', function() { |
||||
const content = $(this).next('.toggle__block-content'); |
||||
const isOpen = content.is(':visible'); |
||||
|
||||
// Закрываем все открытые блоки
|
||||
$('.toggle__block-content').slideUp(); |
||||
|
||||
// Если текущий блок был закрыт, открываем его
|
||||
if (!isOpen) { |
||||
content.slideDown(); |
||||
} |
||||
}); |
||||
|
||||
// Обработка открытия галереи
|
||||
$('.detail__image').on('click', function() { |
||||
const imageIndex = $(this).data('count-img'); |
||||
|
||||
// Открываем галерею
|
||||
$('.gallery').addClass('active'); |
||||
|
||||
// Устанавливаем активный слайд
|
||||
gallerySwiper.slideTo(imageIndex); |
||||
|
||||
// Добавляем активный класс соответствующей миниатюре
|
||||
$('.gallery-pagination__item').removeClass('active'); |
||||
$(`.gallery-pagination__item[data-count-img="${imageIndex}"]`).addClass('active'); |
||||
}); |
||||
|
||||
// Обработка закрытия галереи
|
||||
$('.gallery__close').on('click', function() { |
||||
$('.gallery').removeClass('active'); |
||||
}); |
||||
|
||||
// Обработка клика по миниатюрам в галерее
|
||||
$('.gallery-pagination__item').on('click', function() { |
||||
const imageIndex = $(this).data('count-img'); |
||||
|
||||
// Переключаем слайд
|
||||
gallerySwiper.slideTo(imageIndex); |
||||
|
||||
// Обновляем активную миниатюру
|
||||
$('.gallery-pagination__item').removeClass('active'); |
||||
$(this).addClass('active'); |
||||
}); |
||||
});
|
||||
Loading…
Reference in new issue