429 lines
14 KiB
JavaScript
429 lines
14 KiB
JavaScript
|
|
//
|
|
|
|
|
|
// selector =============
|
|
const selectElement = function (element) {
|
|
return document.querySelector(element);
|
|
};
|
|
// selector end=============
|
|
|
|
let drop = document.querySelectorAll('.profile_drop');
|
|
let profile_head = document.querySelectorAll('.profile_head');
|
|
let register = document.querySelector('.register');
|
|
let register_btn = document.querySelectorAll('.register_btn');
|
|
let log_in = document.querySelectorAll('.log_in');
|
|
let btn_1 = document.querySelector('#btn-1');
|
|
let btn_2 = document.querySelector('#btn-2');
|
|
|
|
let inline = document.querySelector('#inline');
|
|
let card = document.querySelector('#card');
|
|
|
|
let forget = document.querySelector('#forget');
|
|
let password = document.querySelector('.password');
|
|
|
|
let eye_off = document.querySelectorAll('.eye_off');
|
|
let eye_on = document.querySelectorAll('.eye_on');
|
|
let pass = document.querySelector('#password');
|
|
let pass_2 = document.querySelector('#password_2');
|
|
let person = document.querySelectorAll('.person');
|
|
let chat_alert = document.querySelectorAll('.chat_alert');
|
|
|
|
let chat_burger = document.querySelector('.chat_burger');
|
|
let chat_people = document.querySelector('.chat_people');
|
|
|
|
let register_content = document.querySelector('.register_content');
|
|
let register_content_2 = document.querySelector('.register_content_2');
|
|
|
|
let seller_btn = document.querySelector('.seller_btn');
|
|
let seller_info = document.querySelector('.seller_info');
|
|
|
|
|
|
|
|
|
|
// Fixed header ====================================
|
|
|
|
window.onscroll = function () {
|
|
scrollFunc();
|
|
|
|
drop.forEach(drop => {
|
|
if (drop != undefined) {
|
|
drop.classList.remove('active');
|
|
}
|
|
}
|
|
);
|
|
|
|
// if (drop != undefined) {
|
|
// drop.classList.remove('active');
|
|
// }
|
|
|
|
};
|
|
|
|
let header = document.getElementById("head-top");
|
|
let nav = document.getElementById("nav");
|
|
let fix = nav.nextElementSibling;
|
|
function scrollFunc() {
|
|
if (window.pageYOffset > fix.offsetTop) {
|
|
header.classList.add("stick");
|
|
nav.classList.add("stick-2");
|
|
selectElement('.top_btn').classList.add('active');
|
|
} else {
|
|
header.classList.remove("stick");
|
|
nav.classList.remove("stick-2");
|
|
selectElement('.top_btn').classList.remove('active');
|
|
}
|
|
}
|
|
// Fixed header end ====================================
|
|
|
|
|
|
// timing ====================
|
|
function sleep(time) {
|
|
return new Promise((resolve) => setTimeout(resolve, time));
|
|
}
|
|
// timing ====================
|
|
|
|
|
|
window.onclick = function (e) {
|
|
|
|
// if (drop != undefined) {
|
|
// if (document.querySelector('.profile_drop').classList.contains('active') && !e.target.closest('.profile_head')) {
|
|
// document.querySelector('.profile_drop').classList.remove('active');
|
|
// }
|
|
// }
|
|
|
|
drop.forEach(drop => {
|
|
if (drop != undefined) {
|
|
drop.classList.contains('active') && !e.target.closest('.profile_head');
|
|
drop.classList.remove('active')
|
|
}
|
|
}
|
|
);
|
|
|
|
if (register != undefined) {
|
|
if (register.classList.contains('active') && !e.target.closest('.register_body')) {
|
|
register.classList.remove('active');
|
|
selectElement('body').classList.remove('active');
|
|
|
|
}
|
|
}
|
|
|
|
if (forget != undefined) {
|
|
if (password.classList.contains('active') && !e.target.closest('.pass_mail') && !e.target.closest('.pass_mail')) {
|
|
password.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
if (chat_people != undefined) {
|
|
if (chat_people.classList.contains('active') && !e.target.closest('.chat_burger')) {
|
|
chat_people.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
if (seller_info != undefined) {
|
|
if (seller_info.classList.contains('active') && !e.target.closest('.seller_inner')) {
|
|
seller_info.classList.remove('active');
|
|
selectElement('body').classList.remove('active');
|
|
}
|
|
}
|
|
|
|
if (selectElement('.links').classList.contains('active') && !e.target.closest('.profile_head') && !e.target.closest('.links')) {
|
|
selectElement('.links').classList.remove('active');
|
|
selectElement('body').classList.remove('active');
|
|
}
|
|
|
|
if (selectElement('.links_bg').classList.contains('active') && !e.target.closest('.profile_head') && !e.target.closest('.links')) {
|
|
selectElement('.links_bg').classList.remove('active');
|
|
selectElement('body').classList.remove('active');
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// Clicks ================================================================
|
|
|
|
selectElement('.burger').addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
selectElement('.links_bg').classList.toggle('active');
|
|
selectElement('.links').classList.toggle('active');
|
|
selectElement('body').classList.toggle('active');
|
|
});
|
|
});
|
|
|
|
if (profile_head != undefined) {
|
|
profile_head.forEach(r => {
|
|
r.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
drop.forEach(p => {
|
|
p.classList.toggle('active');
|
|
})
|
|
})
|
|
});
|
|
});
|
|
}
|
|
|
|
if (register_btn != undefined) {
|
|
register_btn.forEach(x => {
|
|
x.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
register.classList.toggle('active');
|
|
btn_2.classList.add('active');
|
|
btn_1.classList.remove('active');
|
|
selectElement('body').classList.add('active');
|
|
|
|
|
|
register_content.classList.add('active');
|
|
register_content_2.classList.remove('active');
|
|
});
|
|
});
|
|
})
|
|
}
|
|
|
|
if (log_in != undefined) {
|
|
log_in.forEach(x => {
|
|
x.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
register.classList.toggle('active');
|
|
btn_1.classList.add('active');
|
|
btn_2.classList.remove('active');
|
|
selectElement('body').classList.add('active');
|
|
|
|
|
|
register_content.classList.remove('active');
|
|
register_content_2.classList.add('active');
|
|
});
|
|
});
|
|
})
|
|
}
|
|
|
|
if (btn_1 != undefined) {
|
|
btn_1.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
btn_1.classList.add('active');
|
|
btn_2.classList.remove('active');
|
|
|
|
register_content.classList.remove('active');
|
|
register_content_2.classList.add('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
if (btn_2 != undefined) {
|
|
btn_2.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
btn_2.classList.add('active');
|
|
btn_1.classList.remove('active');
|
|
|
|
register_content.classList.add('active');
|
|
register_content_2.classList.remove('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
if (forget != undefined) {
|
|
forget.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
password.classList.add('active');
|
|
|
|
register.classList.remove('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
if (eye_off != undefined) {
|
|
eye_off.forEach(x => {
|
|
x.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
|
|
pass.type = "text";
|
|
pass_2.type = "text";
|
|
|
|
eye_on.forEach(e => {
|
|
e.classList.add('active');
|
|
})
|
|
eye_off.forEach(w => {
|
|
w.classList.add('active');
|
|
})
|
|
});
|
|
});
|
|
})
|
|
}
|
|
|
|
if (eye_on != undefined) {
|
|
eye_on.forEach(q => {
|
|
q.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
|
|
pass.type = "password";
|
|
pass_2.type = "password";
|
|
|
|
eye_on.forEach(e => {
|
|
e.classList.remove('active');
|
|
})
|
|
eye_off.forEach(w => {
|
|
w.classList.remove('active');
|
|
})
|
|
});
|
|
});
|
|
})
|
|
}
|
|
|
|
if (btn_1 != undefined) {
|
|
btn_1.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
btn_1.classList.add('active');
|
|
btn_2.classList.remove('active');
|
|
|
|
register_content.classList.remove('active');
|
|
register_content_2.classList.add('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
if (chat_burger != undefined) {
|
|
chat_burger.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
chat_people.classList.toggle('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
if (seller_btn != undefined) {
|
|
seller_btn.addEventListener('click', function () {
|
|
sleep(2).then(() => {
|
|
seller_info.classList.add('active');
|
|
selectElement('body').classList.add('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
// if (person != undefined) {
|
|
// person.forEach(y => {
|
|
// y.addEventListener('click', function () {
|
|
// sleep(2).then(() => {
|
|
// // chat_alert.forEach(e => {
|
|
// // e.classList.add('active');
|
|
// // })
|
|
|
|
// chat_alert.classList.add('active');
|
|
// });
|
|
// });
|
|
// })
|
|
// }
|
|
|
|
|
|
// Clicks end ================================================================
|
|
|
|
|
|
// Category Tabs ==========================================
|
|
// const tabsBtn = document.querySelectorAll(".tab_link");
|
|
// const tabsItems = document.querySelectorAll(".tab_source");
|
|
|
|
const tabsBtn = document.querySelectorAll(".tab_btn");
|
|
const tabsItems = document.querySelectorAll(".tab_info");
|
|
tabsBtn.forEach((e) => {
|
|
onTabClick(tabsBtn, tabsItems, e);
|
|
});
|
|
function onTabClick(tabBtns, tabItems, item) {
|
|
item.addEventListener("click", function (e) {
|
|
let currentBtn = item;
|
|
let tabId = currentBtn.getAttribute("data-tab");
|
|
let currentTab = document.querySelector(tabId);
|
|
if (e.srcElement.classList.contains("active")) {
|
|
// e.srcElement.classList.remove("active");
|
|
// e.srcElement.parentElement
|
|
// .querySelector(".tab__btn")
|
|
// .classList.remove("active");
|
|
// console.log(e.srcElement.parentElement.querySelector(".event"));
|
|
// e.srcElement.parentElement
|
|
// .querySelector(".event")
|
|
// .classList.remove("active");
|
|
} else if (!currentBtn.classList.contains("active")) {
|
|
tabBtns.forEach(function (item) {
|
|
item.classList.remove("active");
|
|
});
|
|
tabItems.forEach(function (item) {
|
|
item.classList.remove("active");
|
|
});
|
|
currentBtn.classList.add("active");
|
|
currentTab.classList.add("active");
|
|
}
|
|
});
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------------------------
|
|
const tabsBtn_2 = document.querySelectorAll(".open_link");
|
|
const tabsItems_2 = document.querySelectorAll(".open_info");
|
|
tabsBtn_2.forEach((e) => {
|
|
onTabClick(tabsBtn_2, tabsItems_2, chat_alert, e);
|
|
|
|
});
|
|
function onTabClick(tabBtns_2, tabItems_2, chat_alert, item) {
|
|
item.addEventListener("click", function (e) {
|
|
let currentBtn_2 = item;
|
|
let tabId = currentBtn_2.getAttribute("data-tab");
|
|
let currentTab_2 = document.querySelector(tabId);
|
|
if (e.srcElement.classList.contains("active")) {
|
|
// e.srcElement.classList.remove("active");
|
|
// e.srcElement.parentElement
|
|
// .querySelector(".tab__btn")
|
|
// .classList.remove("active");
|
|
// console.log(e.srcElement.parentElement.querySelector(".event"));
|
|
// e.srcElement.parentElement
|
|
// .querySelector(".event")
|
|
// .classList.remove("active");
|
|
} else if (!currentBtn_2.classList.contains("active")) {
|
|
tabBtns_2.forEach(function (item) {
|
|
item.classList.remove("active");
|
|
});
|
|
tabItems_2.forEach(function (item) {
|
|
item.classList.remove("active");
|
|
});
|
|
currentBtn_2.classList.add("active");
|
|
currentTab_2.classList.add("active");
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// Category Tabs end ==========================================
|
|
|
|
|
|
// Sort by ==============================================================
|
|
|
|
if (inline != undefined) {
|
|
inline.addEventListener('click', () => {
|
|
document.documentElement.setAttribute("data-theme", "row");
|
|
localStorage.setItem("theme", "row");
|
|
selectElement('#inline').style.opacity = 1;
|
|
selectElement('#card').style.opacity = .5;
|
|
selectElement('.item_btn').style.display = 'none';
|
|
|
|
document.querySelectorAll('.item_btn').forEach(el => { el.style.display = 'none'; })
|
|
document.querySelectorAll('.item_head').forEach(el => { el.style.display = 'none'; })
|
|
document.querySelectorAll('.item_sub_name').forEach(el => { el.style.display = 'none'; })
|
|
document.querySelectorAll('.inline_head').forEach(el => { el.style.display = 'flex'; })
|
|
document.querySelectorAll('.inline_num').forEach(el => { el.style.display = 'flex'; })
|
|
|
|
})
|
|
}
|
|
|
|
|
|
if (card != undefined) {
|
|
card.addEventListener('click', () => {
|
|
document.documentElement.setAttribute("data-theme", "col");
|
|
selectElement('#inline').style.opacity = .5;
|
|
selectElement('#card').style.opacity = 1;
|
|
document.querySelectorAll('.item_btn').forEach(el => { el.style.display = 'block'; })
|
|
document.querySelectorAll('.item_head').forEach(el => { el.style.display = 'block'; })
|
|
document.querySelectorAll('.item_sub_name').forEach(el => { el.style.display = 'block'; })
|
|
document.querySelectorAll('.inline_head').forEach(el => { el.style.display = 'none'; })
|
|
document.querySelectorAll('.inline_num').forEach(el => { el.style.display = 'none'; })
|
|
})
|
|
}
|
|
|
|
|
|
// Sort by end ==============================================================
|
|
|