Загрузить файлы в «frontend»
This commit is contained in:
parent
a122ce5499
commit
30059aaa52
1 changed files with 198 additions and 144 deletions
|
|
@ -1,144 +1,198 @@
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const sortButton = document.querySelector('.sort-button');
|
const translations = {
|
||||||
const modal = document.getElementById('sortModal');
|
ru: {
|
||||||
const closeButton = document.querySelector('.close-btn');
|
title: "workshop",
|
||||||
const cancelButton = document.querySelector('.cancel-button');
|
made_by: "Сделал: ©️𝙎𝙃∆𝙈∆𝙉©️",
|
||||||
const okButton = document.querySelector('.ok-button');
|
description: "Неофициальный сайт<br>с картами для CS:GO<br>из мастерской Steam",
|
||||||
const startDateInput = document.querySelector('.first-rectangle .date-input');
|
header: "CS:GO Workshop",
|
||||||
const endDateInput = document.querySelector('.second-rectangle .date-input');
|
contact: "Связаться",
|
||||||
const checkboxes = document.querySelectorAll('.game-mode-checkbox');
|
sort_by_date: "Сортировать по дате",
|
||||||
const params = new URLSearchParams(window.location.search);
|
show_products: "Показать продукты, попадающие в каждую из выбранных категорий:",
|
||||||
|
game_modes: "РЕЖИМ ИГРЫ",
|
||||||
// Устанавливаем состояние чекбоксов при загрузке страницы
|
game_mode_Classic: "Классический",
|
||||||
checkboxes.forEach(checkbox => {
|
game_mode_Deathmatch: "Бой насмерть",
|
||||||
checkbox.checked = params.getAll('game_modes').includes(checkbox.value);
|
game_mode_Demolition: "Уничтожение объекта",
|
||||||
});
|
game_mode_Armsrace: "Гонка вооружений",
|
||||||
|
game_mode_Custom: "Пользовательский",
|
||||||
// Открыть модальное окно при нажатии на кнопку
|
game_mode_Training: "Обучение",
|
||||||
sortButton.addEventListener('click', function () {
|
"game_mode_Co-op Strike": "Совместный налёт",
|
||||||
modal.style.display = 'block';
|
game_mode_Wingman: "Напарники",
|
||||||
});
|
game_mode_Flying_Scoutsman: "Перелётные снайперы",
|
||||||
|
search_placeholder: "Поиск по названию",
|
||||||
// Закрыть модальное окно при нажатии на крестик
|
from: "С",
|
||||||
closeButton.addEventListener('click', function () {
|
to: "ПО",
|
||||||
modal.style.display = 'none';
|
ok: "ОК",
|
||||||
});
|
cancel: "Отмена",
|
||||||
|
filter_by_stars: "Фильтр по количеству звезд:"
|
||||||
// Закрыть модальное окно при нажатии на кнопку "Отмена"
|
},
|
||||||
cancelButton.addEventListener('click', function () {
|
en: {
|
||||||
modal.style.display = 'none';
|
title: "Workshop",
|
||||||
});
|
made_by: "Made by: ©️𝙎𝙃∆𝙈∆𝙉©️",
|
||||||
|
description: "Unofficial site<br>with CS:GO maps<br>from Steam Workshop",
|
||||||
// Применить фильтры по дате и режимам игры при нажатии на кнопку "OK"
|
header: "CS:GO Workshop",
|
||||||
okButton.addEventListener('click', function () {
|
contact: "Contact",
|
||||||
const startDate = startDateInput.value;
|
sort_by_date: "Sort by date",
|
||||||
const endDate = endDateInput.value;
|
show_products: "Show products matching all selected categories:",
|
||||||
|
game_modes: "GAME MODES",
|
||||||
// Фильтры по датам
|
game_mode_Classic: "Classic",
|
||||||
if (startDate) params.set('start_date', startDate);
|
game_mode_Deathmatch: "Deathmatch",
|
||||||
else params.delete('start_date');
|
game_mode_Demolition: "Demolition",
|
||||||
|
game_mode_Armsrace: "Arms Race",
|
||||||
if (endDate) params.set('end_date', endDate);
|
game_mode_Custom: "Custom",
|
||||||
else params.delete('end_date');
|
game_mode_Training: "Training",
|
||||||
|
"game_mode_Co-op Strike": "Co-op Strike",
|
||||||
// Фильтры по режимам игры
|
game_mode_Wingman: "Wingman",
|
||||||
const selectedGameModes = Array.from(checkboxes)
|
game_mode_Flying_Scoutsman: "Flying Scoutsman",
|
||||||
.filter(checkbox => checkbox.checked)
|
search_placeholder: "Search by title",
|
||||||
.map(checkbox => checkbox.value);
|
from: "From",
|
||||||
|
to: "To",
|
||||||
// Обновляем параметры для выбранных режимов
|
ok: "OK",
|
||||||
params.delete('game_modes'); // Удаляем старые значения
|
cancel: "Cancel",
|
||||||
selectedGameModes.forEach(mode => params.append('game_modes', mode));
|
filter_by_stars: "Filter by number of stars:"
|
||||||
|
}
|
||||||
params.set('page', 1); // Сбрасываем на первую страницу
|
};
|
||||||
modal.style.display = 'none'; // Закрываем модальное окно
|
|
||||||
window.location.search = params.toString(); // Перезагружаем страницу с новыми параметрами
|
const savedLang = localStorage.getItem('selectedLanguage');
|
||||||
});
|
const browserLang = (navigator.language || navigator.userLanguage).split('-')[0];
|
||||||
|
const defaultLang = savedLang && translations[savedLang] ? savedLang : (translations[browserLang] ? browserLang : 'ru');
|
||||||
// Обновление параметров при изменении чекбоксов
|
|
||||||
checkboxes.forEach(checkbox => {
|
function translatePage(lang) {
|
||||||
checkbox.addEventListener('change', function () {
|
document.querySelectorAll('[data-i18n]').forEach(element => {
|
||||||
const selectedGameModes = Array.from(checkboxes)
|
const key = element.getAttribute('data-i18n');
|
||||||
.filter(checkbox => checkbox.checked)
|
if (translations[lang][key]) {
|
||||||
.map(checkbox => checkbox.value);
|
element.innerHTML = translations[lang][key];
|
||||||
|
} else {
|
||||||
// Обновляем параметры URL
|
console.warn(`Translation missing for key: ${key} in language: ${lang}`);
|
||||||
params.delete('game_modes'); // Удаляем старые значения
|
}
|
||||||
selectedGameModes.forEach(mode => params.append('game_modes', mode));
|
});
|
||||||
|
document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
|
||||||
params.set('page', 1); // Сбрасываем на первую страницу
|
const key = element.getAttribute('data-i18n-placeholder');
|
||||||
window.location.search = params.toString(); // Перезагружаем страницу с новыми параметрами
|
if (translations[lang][key]) {
|
||||||
});
|
element.placeholder = translations[lang][key];
|
||||||
});
|
} else {
|
||||||
});
|
console.warn(`Placeholder translation missing for key: ${key} in language: ${lang}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.documentElement.lang = lang;
|
||||||
const searchInput = document.querySelector('.search-input');
|
localStorage.setItem('selectedLanguage', lang);
|
||||||
|
}
|
||||||
// Функция для обработки поиска
|
|
||||||
function performSearch() {
|
translatePage(defaultLang);
|
||||||
const query = searchInput.value.toLowerCase();
|
|
||||||
const cards = document.querySelectorAll('.card');
|
const sortButton = document.querySelector('.sort-button');
|
||||||
|
const modal = document.getElementById('sortModal');
|
||||||
cards.forEach(card => {
|
const closeButton = document.querySelector('.close-btn');
|
||||||
const title = card.querySelector('.card-title').textContent.toLowerCase();
|
const cancelButton = document.querySelector('.cancel-button');
|
||||||
if (title.includes(query)) {
|
const okButton = document.querySelector('.ok-button');
|
||||||
card.style.display = 'block'; // Показываем карточку, если название соответствует запросу
|
const startDateInput = document.querySelector('.first-rectangle .date-input');
|
||||||
} else {
|
const endDateInput = document.querySelector('.second-rectangle .date-input');
|
||||||
card.style.display = 'none'; // Скрываем карточку, если название не соответствует запросу
|
const checkboxes = document.querySelectorAll('.game-mode-checkbox');
|
||||||
}
|
const params = new URLSearchParams(window.location.search);
|
||||||
});
|
|
||||||
}
|
checkboxes.forEach(checkbox => {
|
||||||
|
checkbox.checked = params.getAll('game_modes').includes(checkbox.value);
|
||||||
// Поиск по нажатию клавиши Enter
|
});
|
||||||
searchInput.addEventListener('keydown', function (event) {
|
|
||||||
if (event.key === 'Enter') {
|
sortButton.addEventListener('click', function () {
|
||||||
performSearch();
|
modal.style.display = 'block';
|
||||||
}
|
});
|
||||||
});
|
|
||||||
|
closeButton.addEventListener('click', function () {
|
||||||
// Поиск по клику на лупу (если такая кнопка добавлена)
|
modal.style.display = 'none';
|
||||||
const searchButton = document.querySelector('.search-button');
|
});
|
||||||
if (searchButton) {
|
|
||||||
searchButton.addEventListener('click', performSearch);
|
cancelButton.addEventListener('click', function () {
|
||||||
}
|
modal.style.display = 'none';
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
okButton.addEventListener('click', function () {
|
||||||
const starsCheckboxes = document.querySelectorAll('input[name="stars"]');
|
const startDate = startDateInput.value;
|
||||||
const params = new URLSearchParams(window.location.search);
|
const endDate = endDateInput.value;
|
||||||
|
|
||||||
// Устанавливаем состояние чекбоксов при загрузке страницы
|
if (startDate) params.set('start_date', startDate);
|
||||||
const selectedStars = params.get('stars');
|
else params.delete('start_date');
|
||||||
if (selectedStars) {
|
|
||||||
starsCheckboxes.forEach(checkbox => {
|
if (endDate) params.set('end_date', endDate);
|
||||||
if (checkbox.value === selectedStars) {
|
else params.delete('end_date');
|
||||||
checkbox.checked = true;
|
|
||||||
}
|
const selectedGameModes = Array.from(checkboxes)
|
||||||
});
|
.filter(checkbox => checkbox.checked)
|
||||||
}
|
.map(checkbox => checkbox.value);
|
||||||
|
|
||||||
// Обновление параметров при изменении чекбоксов для звезд
|
params.delete('game_modes');
|
||||||
starsCheckboxes.forEach(checkbox => {
|
selectedGameModes.forEach(mode => params.append('game_modes', mode));
|
||||||
checkbox.addEventListener('change', function () {
|
|
||||||
// Снимаем отметки с других чекбоксов
|
params.set('page', 1);
|
||||||
starsCheckboxes.forEach(otherCheckbox => {
|
modal.style.display = 'none';
|
||||||
if (otherCheckbox !== checkbox) {
|
window.location.search = params.toString();
|
||||||
otherCheckbox.checked = false;
|
});
|
||||||
}
|
|
||||||
});
|
checkboxes.forEach(checkbox => {
|
||||||
|
checkbox.addEventListener('change', function () {
|
||||||
const selectedStar = checkbox.checked ? checkbox.value : null;
|
const selectedGameModes = Array.from(checkboxes)
|
||||||
|
.filter(checkbox => checkbox.checked)
|
||||||
// Обновляем параметры URL
|
.map(checkbox => checkbox.value);
|
||||||
params.delete('stars');
|
|
||||||
if (selectedStar) {
|
params.delete('game_modes');
|
||||||
params.set('stars', selectedStar); // Устанавливаем выбранную звезду
|
selectedGameModes.forEach(mode => params.append('game_modes', mode));
|
||||||
}
|
|
||||||
|
params.set('page', 1);
|
||||||
params.set('page', 1); // Сбрасываем на первую страницу
|
window.location.search = params.toString();
|
||||||
window.location.search = params.toString(); // Перезагружаем страницу с новыми параметрами
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
});
|
const searchInput = document.querySelector('.search-input');
|
||||||
|
function performSearch() {
|
||||||
|
const query = searchInput.value.toLowerCase();
|
||||||
|
const cards = document.querySelectorAll('.card');
|
||||||
|
|
||||||
|
cards.forEach(card => {
|
||||||
|
const title = card.querySelector('.card-title').textContent.toLowerCase();
|
||||||
|
if (title.includes(query)) {
|
||||||
|
card.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
card.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
searchInput.addEventListener('keydown', function (event) {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
performSearch();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const searchButton = document.querySelector('.search-button');
|
||||||
|
if (searchButton) {
|
||||||
|
searchButton.addEventListener('click', performSearch);
|
||||||
|
}
|
||||||
|
|
||||||
|
const starsCheckboxes = document.querySelectorAll('input[name="stars"]');
|
||||||
|
const selectedStars = params.get('stars');
|
||||||
|
if (selectedStars) {
|
||||||
|
starsCheckboxes.forEach(checkbox => {
|
||||||
|
if (checkbox.value === selectedStars) {
|
||||||
|
checkbox.checked = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
starsCheckboxes.forEach(checkbox => {
|
||||||
|
checkbox.addEventListener('change', function () {
|
||||||
|
starsCheckboxes.forEach(otherCheckbox => {
|
||||||
|
if (otherCheckbox !== checkbox) {
|
||||||
|
otherCheckbox.checked = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectedStar = checkbox.checked ? checkbox.value : null;
|
||||||
|
params.delete('stars');
|
||||||
|
if (selectedStar) {
|
||||||
|
params.set('stars', selectedStar);
|
||||||
|
}
|
||||||
|
|
||||||
|
params.set('page', 1);
|
||||||
|
window.location.search = params.toString();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue