444 lines
13 KiB
JavaScript
444 lines
13 KiB
JavaScript
function maxLengthCheck(object) {
|
|
if (object.value.length > object.max.length)
|
|
object.value = object.value.slice(0, object.max.length)
|
|
}
|
|
|
|
function isNumeric(evt) {
|
|
let theEvent = evt || window.event;
|
|
let key = theEvent.keyCode || theEvent.which;
|
|
key = String.fromCharCode(key);
|
|
let regex = /[0-9]|\./;
|
|
if (!regex.test(key)) {
|
|
theEvent.returnValue = false;
|
|
if (theEvent.preventDefault) theEvent.preventDefault();
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
//
|
|
let heart = document.querySelectorAll('#product-heart-id');
|
|
|
|
for (let i = 0; i < heart.length; i++) {
|
|
heart[i].addEventListener('click', function() {
|
|
heart[i].classList.toggle('bxs-heart')
|
|
})
|
|
}
|
|
|
|
let search_category_btn = document.querySelector('#search-category');
|
|
let fe_search_popup = document.querySelector('.fe-search-popup');
|
|
let close_popup_btn = document.querySelector('#close-popup');
|
|
let popup_category = document.querySelectorAll('#popup-category');
|
|
let arrow = document.querySelector('#search-arrow');
|
|
let popup_category_all = document.querySelector('#popup-category-all');
|
|
|
|
search_category_btn.addEventListener('click', () => {
|
|
fe_search_popup.style.display = 'block';
|
|
document.querySelector('body').style.overflow = 'hidden';
|
|
});
|
|
|
|
close_popup_btn.addEventListener('click', () => {
|
|
fe_search_popup.style.display = 'none';
|
|
document.querySelector('body').style.overflow = 'auto';
|
|
});
|
|
|
|
arrow.addEventListener('click', () => {
|
|
if (arrow.classList.contains('bxs-down-arrow')) {
|
|
fe_search_popup.style.display = 'block';
|
|
document.querySelector('body').style.overflow = 'hidden';
|
|
}
|
|
})
|
|
|
|
window.addEventListener('click', f => {
|
|
const target = f.target;
|
|
if (target.closest('.fe-search-popup')) {
|
|
fe_search_popup.style.display = 'none'
|
|
document.querySelector('body').style.overflow = 'auto';
|
|
}
|
|
})
|
|
|
|
for (let i = 0; i < popup_category.length; i++) {
|
|
popup_category[i].addEventListener('click', () => {
|
|
search_category_btn.innerText = popup_category[i].innerText;
|
|
fe_search_popup.style.display = 'none';
|
|
arrow.classList.remove('bxs-down-arrow');
|
|
arrow.classList.add('bx-x');
|
|
arrow.style.color = '#157DEC';
|
|
arrow.style.fontSize = '1.4rem';
|
|
arrow.style.background = 'white';
|
|
arrow.style.borderRadius = '50%';
|
|
arrow.style.cursor = 'pointer'
|
|
});
|
|
popup_category_all.addEventListener('click', () => {
|
|
search_category_btn.innerText = popup_category_all.innerText;
|
|
arrow.classList.add('bxs-down-arrow');
|
|
arrow.classList.remove('bx-x');
|
|
arrow.style.color = '#fff';
|
|
arrow.style.fontSize = '1rem';
|
|
arrow.style.background = 'none';
|
|
arrow.style.borderRadius = 'none';
|
|
})
|
|
arrow.addEventListener('click', () => {
|
|
arrow.classList.add('bxs-down-arrow');
|
|
arrow.classList.remove('bx-x');
|
|
search_category_btn.innerText = popup_category_all.innerText
|
|
arrow.style.color = '#fff';
|
|
arrow.style.fontSize = '1rem';
|
|
arrow.style.background = 'none';
|
|
arrow.style.borderRadius = 'none';
|
|
})
|
|
};
|
|
//
|
|
//
|
|
//
|
|
//
|
|
|
|
//
|
|
//
|
|
//
|
|
//
|
|
|
|
let cat_link = document.querySelectorAll('.fe-categories-link');
|
|
let fe_cat = document.querySelectorAll('.fe-dropdown-cat')
|
|
let cat_box = document.querySelectorAll('fe-catalog-list-box')
|
|
let gray_bg = document.querySelector('.gray-bg')
|
|
let hd = document.querySelector('.header');
|
|
let back_page = document.querySelectorAll('.back-page-btn')
|
|
|
|
cat_link.forEach(catlink => {
|
|
fe_cat.forEach(fecat => {
|
|
catlink.addEventListener('click', (event) => {
|
|
let target = event.target
|
|
gray_bg.style.display = 'block'
|
|
document.querySelector('body').style.overflow = 'hidden'
|
|
if (target.id == catlink.id && catlink.id == fecat.id) {
|
|
fecat.style.display = 'block'
|
|
} else {
|
|
fecat.style.display = 'none'
|
|
}
|
|
})
|
|
back_page.forEach(back => {
|
|
back.addEventListener('click', () => {
|
|
fecat.style.display = 'none'
|
|
})
|
|
})
|
|
gray_bg.addEventListener('click', () => {
|
|
gray_bg.style.display = 'none'
|
|
fecat.style.display = 'none'
|
|
document.querySelector('body').style.overflow = 'auto'
|
|
catlink.classList.remove('active-border')
|
|
})
|
|
hd.addEventListener('click', () => {
|
|
gray_bg.style.display = 'none'
|
|
fecat.style.display = 'none'
|
|
catlink.classList.remove('active-border')
|
|
})
|
|
|
|
});
|
|
})
|
|
|
|
//
|
|
//
|
|
//
|
|
//
|
|
|
|
//
|
|
//
|
|
//
|
|
//
|
|
let log = document.querySelector('.log');
|
|
let fe_login_reg = document.querySelector('.fe-login-reg');
|
|
let close_lore_popup = document.querySelector('#close-lore-popup');
|
|
let code_send_btn = document.querySelector('#code-send-btn');
|
|
let fe_popup_code = document.querySelector('.fe-popup-code');
|
|
let back_page_btn = document.querySelector('#back-page-btn');
|
|
let input_tel = document.querySelector('#input-tel');
|
|
let fe_popup_confirm = document.querySelector('.fe-popup-confirm');
|
|
let change_num_btn = document.querySelector('#change-num-btn');
|
|
let open_login = document.querySelectorAll('#open-login');
|
|
|
|
change_num_btn.addEventListener('click', () => {
|
|
fe_popup_code.classList.add('active')
|
|
fe_popup_confirm.classList.remove('active')
|
|
})
|
|
|
|
|
|
let lit_cat_text = document.querySelectorAll('.fe-lit-cat-text');
|
|
let lit_cat_items = document.querySelectorAll('.fe-lit-cat-items');
|
|
let bxs_down_arrow = document.querySelectorAll('.bx-down-arrow');
|
|
|
|
lit_cat_text.forEach(text => {
|
|
lit_cat_items.forEach(items => {
|
|
bxs_down_arrow.forEach(darrow => {
|
|
text.addEventListener('click', () => {
|
|
if (text.id == items.id && text.id == darrow.id) {
|
|
items.classList.toggle('lit-sub-menu')
|
|
darrow.classList.toggle('bx-up-arrow')
|
|
}
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
let prod_size = document.querySelectorAll('.fe-prod-size')
|
|
let prod_act = document.getElementsByClassName('prod-active')
|
|
let prod_num = document.querySelector('#prod-size')
|
|
|
|
for (let x = 0; prod_size.length > x; x++) {
|
|
prod_size[x].onclick = (event) => {
|
|
let target = event.target
|
|
let cur_prod = prod_act[0]
|
|
if (prod_size[x].classList.contains('prod-none')) {
|
|
return
|
|
}
|
|
if (prod_size[x].classList.contains('prod-active')) {
|
|
return
|
|
}
|
|
if (cur_prod) {
|
|
cur_prod.classList.remove('prod-active');
|
|
}
|
|
if (cur_prod !== target) {
|
|
target.classList.add('prod-active')
|
|
}
|
|
prod_num.innerText = target.innerText
|
|
|
|
}
|
|
|
|
}
|
|
open_login.forEach(oplog => {
|
|
oplog.addEventListener('click', () => {
|
|
fe_login_reg.classList.add('active');
|
|
document.querySelector('body').style.overflow = 'hidden'
|
|
});
|
|
})
|
|
|
|
let info = document.querySelectorAll('.fe-prod-detail');
|
|
let bx_plus = document.querySelectorAll('.pr-pl');
|
|
let prod_detail = document.querySelectorAll('.prod-detail');
|
|
|
|
info.forEach(more => {
|
|
prod_detail.forEach(detail => {
|
|
bx_plus.forEach(plus => {
|
|
more.addEventListener('click', () => {
|
|
if (more.id == detail.id && more.id == plus.id) {
|
|
plus.innerText = plus.innerText === '+' ? '-' : '+';
|
|
detail.style.display = detail.style.display === 'block' ? 'none' : 'block';
|
|
}
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
|
|
let ant_clr = document.querySelectorAll('.anthracite-pic')
|
|
let anth_act = document.getElementsByClassName('anth-act')
|
|
|
|
for (let x = 0; ant_clr.length > x; x++) {
|
|
ant_clr[x].onclick = (event) => {
|
|
let target = event.target
|
|
let cur_prod = anth_act[0]
|
|
if (ant_clr[x].classList.contains('anth-act')) {
|
|
return
|
|
}
|
|
if (cur_prod) {
|
|
cur_prod.classList.remove('anth-act');
|
|
cur_prod.classList.add('anth-dct');
|
|
}
|
|
if (cur_prod !== target) {
|
|
target.classList.add('anth-act')
|
|
target.classList.remove('anth-dct')
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//
|
|
//
|
|
//
|
|
//
|
|
|
|
let fav_ord = document.querySelectorAll('#fav-to-ord')
|
|
|
|
|
|
fav_ord.forEach(basket => {
|
|
basket.addEventListener('click', function() {
|
|
basket.classList.toggle('basket-act')
|
|
})
|
|
});
|
|
|
|
|
|
let cn = document.querySelectorAll('.counter')
|
|
let counterVal = 1
|
|
|
|
function increment() {
|
|
updateDisplay(++counterVal)
|
|
}
|
|
|
|
function dicrement() {
|
|
if (counterVal < 1) {
|
|
return
|
|
}
|
|
updateDisplay(--counterVal)
|
|
}
|
|
|
|
function updateDisplay(val) {
|
|
for (let i = 0; i < cn.length; i++) {
|
|
cn[i].innerHTML = val;
|
|
|
|
}
|
|
}
|
|
|
|
//
|
|
//
|
|
//
|
|
//
|
|
|
|
|
|
let side = window.matchMedia("(max-width: 1350px)")
|
|
let closeSide = window.matchMedia("(min-width: 1350px)")
|
|
let main = document.querySelector('.fe-top-header-categories')
|
|
let open_sb = document.querySelector('#open-side-bar');
|
|
let close_sb = document.querySelector('#close-side-bar');
|
|
let list_li = document.querySelectorAll('.fe-header-category-list')
|
|
let list_text = document.querySelectorAll('#fe-header-category-list-text');
|
|
let cat_list_text = document.querySelectorAll('.category-list-text')
|
|
|
|
function sidFc(side) {
|
|
if (side.matches) {
|
|
open_sb.addEventListener('click', () => {
|
|
main.classList.add('activated')
|
|
gray_bg.classList.add('activated')
|
|
})
|
|
close_sb.addEventListener('click', () => {
|
|
main.classList.remove('activated')
|
|
gray_bg.classList.remove('activated')
|
|
})
|
|
gray_bg.addEventListener('click', () => {
|
|
main.classList.remove('activated')
|
|
gray_bg.classList.remove('activated')
|
|
})
|
|
for (let j = 0; j < list_text.length; j++) {
|
|
list_text[j].addEventListener('click', event => {
|
|
let target = event.target
|
|
|
|
if (!target) {
|
|
list_text[j].classList.add('diactivated')
|
|
}
|
|
if (target) {
|
|
cat_list_text[i].classList.remove('diactivated')
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
function clsSD(closeSide) {
|
|
if (closeSide.matches) {
|
|
main.classList.remove('activated')
|
|
gray_bg.classList.remove('activated')
|
|
}
|
|
}
|
|
|
|
|
|
sidFc(side)
|
|
side.addListener(sidFc)
|
|
|
|
clsSD(closeSide)
|
|
closeSide.addListener(clsSD)
|
|
|
|
//
|
|
//
|
|
//
|
|
//
|
|
|
|
let like_btn = document.querySelector('#like-btn')
|
|
// let like_btn_child = like_btn.querySelector('.bx-heart')
|
|
|
|
// like_btn.addEventListener('click', () => {
|
|
// like_btn_child.classList.toggle('bxs-heart')
|
|
// })
|
|
|
|
//
|
|
//
|
|
//
|
|
//
|
|
let stars = document.querySelectorAll('#rate-star');
|
|
let rate_count = document.querySelector('#rate-count');
|
|
|
|
for (let i = 0; i < stars.length; i++) {
|
|
stars[i].addEventListener('click', (e) => {
|
|
let target = e.target
|
|
if (target == stars[0]) {
|
|
stars[0].classList.remove('bx-star')
|
|
stars[0].classList.add('bxs-star')
|
|
stars[1].classList.remove('bxs-star')
|
|
stars[1].classList.add('bx-star')
|
|
stars[2].classList.remove('bxs-star')
|
|
stars[2].classList.add('bx-star')
|
|
stars[3].classList.remove('bxs-star')
|
|
stars[3].classList.add('bx-star')
|
|
stars[4].classList.remove('bxs-star')
|
|
stars[4].classList.add('bx-star')
|
|
rate_count.innerText = '1'
|
|
}
|
|
if (target == stars[1]) {
|
|
stars[0].classList.add('bxs-star')
|
|
stars[1].classList.remove('bx-star')
|
|
stars[1].classList.add('bxs-star')
|
|
stars[2].classList.remove('bxs-star')
|
|
stars[2].classList.add('bx-star')
|
|
stars[3].classList.remove('bxs-star')
|
|
stars[3].classList.add('bx-star')
|
|
stars[4].classList.remove('bxs-star')
|
|
stars[4].classList.add('bx-star')
|
|
rate_count.innerText = '2'
|
|
}
|
|
if (target == stars[2]) {
|
|
stars[0].classList.add('bxs-star')
|
|
stars[1].classList.add('bxs-star')
|
|
stars[2].classList.remove('bx-star')
|
|
stars[2].classList.add('bxs-star')
|
|
stars[3].classList.remove('bxs-star')
|
|
stars[3].classList.add('bx-star')
|
|
stars[4].classList.remove('bxs-star')
|
|
stars[4].classList.add('bx-star')
|
|
rate_count.innerText = '3'
|
|
}
|
|
if (target == stars[3]) {
|
|
stars[0].classList.add('bxs-star')
|
|
stars[1].classList.add('bxs-star')
|
|
stars[2].classList.add('bxs-star')
|
|
stars[3].classList.remove('bx-star')
|
|
stars[3].classList.add('bxs-star')
|
|
stars[4].classList.remove('bxs-star')
|
|
stars[4].classList.add('bx-star')
|
|
rate_count.innerText = '4'
|
|
}
|
|
if (target == stars[4]) {
|
|
stars[0].classList.add('bxs-star')
|
|
stars[1].classList.add('bxs-star')
|
|
stars[2].classList.add('bxs-star')
|
|
stars[3].classList.add('bxs-star')
|
|
stars[4].classList.remove('bx-star')
|
|
stars[4].classList.add('bxs-star')
|
|
rate_count.innerText = '5'
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
|
|
//
|
|
//
|
|
//
|
|
//
|
|
|
|
|
|
back_page_btn.addEventListener('click', () => {
|
|
fe_popup_code.classList.add('active')
|
|
})
|