218 lines
9.0 KiB
JavaScript
218 lines
9.0 KiB
JavaScript
// Координаты отеля
|
||
const HOTEL_COORDS = [43.139637, 40.527054];
|
||
const HOTEL_ADDRESS = "Набережная улица, 1, село Мгудзырхуа, Гудаутский район, Абхазия";
|
||
|
||
// Данные городов с расстояниями (км) и ключами для перевода
|
||
const citiesData = [
|
||
{ key: "sukhum", distance: 51 },
|
||
{ key: "ochamchyra", distance: 105 },
|
||
{ key: "tkvarcheli", distance: 165 },
|
||
{ key: "gal", distance: 145 },
|
||
{ key: "new_athos", distance: 25 },
|
||
{ key: "primorsk", distance: 20 },
|
||
{ key: "gudauta", distance: 10 }
|
||
];
|
||
|
||
let map = null;
|
||
let placemark = null;
|
||
let mapVisible = false;
|
||
let currentLang = localStorage.getItem('siteLang') || 'ru';
|
||
|
||
// Функция получения перевода названия города
|
||
function getCityTranslation(cityKey, lang) {
|
||
const transMap = {
|
||
sukhum: window.translations[lang].loc_city_sukhum,
|
||
ochamchyra: window.translations[lang].loc_city_ochamchyra,
|
||
tkvarcheli: window.translations[lang].loc_city_tkvarcheli,
|
||
gal: window.translations[lang].loc_city_gal,
|
||
new_athos: window.translations[lang].loc_city_new_athos,
|
||
primorsk: window.translations[lang].loc_city_primorsk,
|
||
gudauta: window.translations[lang].loc_city_gudauta
|
||
};
|
||
return transMap[cityKey] || cityKey;
|
||
}
|
||
|
||
// Показать модальное окно с фактами о городе
|
||
function showCityModal(cityKey, lang) {
|
||
const modal = document.getElementById('cityModal');
|
||
const titleElem = document.getElementById('modalCityTitle');
|
||
const factsContainer = document.getElementById('modalFactsList');
|
||
if (!modal || !titleElem || !factsContainer) return;
|
||
|
||
const cityName = getCityTranslation(cityKey, lang);
|
||
titleElem.textContent = cityName;
|
||
|
||
const factsKey = `loc_facts_${cityKey}`;
|
||
let factsArray = window.translations[lang][factsKey];
|
||
if (!factsArray || !factsArray.length) {
|
||
factsArray = [window.translations[lang].loc_facts_default || "Удивительные места ждут вас!"];
|
||
}
|
||
|
||
factsContainer.innerHTML = factsArray.map(fact => `<div class="modal-fact-item">${fact}</div>`).join('');
|
||
modal.style.display = 'flex';
|
||
}
|
||
|
||
function closeModal() {
|
||
const modal = document.getElementById('cityModal');
|
||
if (modal) modal.style.display = 'none';
|
||
}
|
||
|
||
// Генерация HTML для секции location
|
||
function generateLocationHTML(lang) {
|
||
const addressLabel = window.translations[lang].loc_address_label;
|
||
const coordsLabel = window.translations[lang].loc_coords_label;
|
||
const kmLabel = window.translations[lang].loc_km;
|
||
|
||
// Карточки городов – стили задаются через CSS, инлайн-цвета удалены
|
||
const cardsHTML = citiesData.map((city) => `
|
||
<div class="location-card" data-city-key="${city.key}">
|
||
<div class="location-icon">🚗</div>
|
||
<div class="location-title">${getCityTranslation(city.key, lang)}</div>
|
||
<div class="location-distance">${city.distance} ${kmLabel}</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
return `
|
||
<h2 class="section-title animate" data-i18n="loc_title">${window.translations[lang].loc_title}</h2>
|
||
<div class="about-grid">
|
||
<div class="about-text animate delay-1">
|
||
<p style="font-size:1.1rem; margin-bottom:1.5rem;"><strong>${addressLabel}</strong></p>
|
||
<div style="background:var(--input-bg); padding:2rem; border-radius:16px; margin-bottom:1.5rem;">
|
||
<span style="font-size:1.1rem;">${HOTEL_ADDRESS}</span>
|
||
</div>
|
||
<div style="background:var(--input-bg); padding:2rem; border-radius:16px; margin-bottom:1.5rem;">
|
||
<span style="font-size:1.1rem;"><strong>${coordsLabel}</strong> ${HOTEL_COORDS[0]}, ${HOTEL_COORDS[1]}</span>
|
||
</div>
|
||
<div class="location-cards">
|
||
${cardsHTML}
|
||
</div>
|
||
</div>
|
||
<div class="about-image-wrapper animate delay-2">
|
||
<img src="img/znak.webp" alt="Указатель Hotel 777" class="about-img signpost-img location-img-animate" id="signpostImg" loading="lazy">
|
||
<div id="yandexMap" class="map-container" style="display: none;"></div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// Инициализация карты (без изменений)
|
||
function initMapOnce() {
|
||
if (!window.ymaps) return;
|
||
const mapContainer = document.getElementById('yandexMap');
|
||
if (!mapContainer) return;
|
||
if (!map) {
|
||
window.ymaps.ready(() => {
|
||
map = new window.ymaps.Map('yandexMap', {
|
||
center: HOTEL_COORDS,
|
||
zoom: 14,
|
||
controls: ['zoomControl', 'fullscreenControl']
|
||
});
|
||
placemark = new window.ymaps.Placemark(HOTEL_COORDS, {
|
||
hintContent: HOTEL_ADDRESS,
|
||
balloonContent: HOTEL_ADDRESS
|
||
}, { preset: 'islands#redDotIcon' });
|
||
map.geoObjects.add(placemark);
|
||
});
|
||
}
|
||
}
|
||
|
||
function showMap() {
|
||
const mapContainer = document.getElementById('yandexMap');
|
||
if (!mapContainer) return;
|
||
if (!map) {
|
||
initMapOnce();
|
||
setTimeout(() => {
|
||
mapContainer.style.display = 'block';
|
||
if (map) window.ymaps.ready(() => map.container.fitToViewport());
|
||
}, 300);
|
||
} else {
|
||
mapContainer.style.display = 'block';
|
||
window.ymaps.ready(() => map.container.fitToViewport());
|
||
}
|
||
mapVisible = true;
|
||
}
|
||
|
||
function updateLocationTexts(lang) {
|
||
const locationSection = document.getElementById('location');
|
||
if (!locationSection) return;
|
||
const title = locationSection.querySelector('.section-title');
|
||
if (title) title.innerHTML = window.translations[lang].loc_title;
|
||
const aboutText = locationSection.querySelector('.about-text');
|
||
if (aboutText) {
|
||
const addressLabelStrong = aboutText.querySelector('p strong');
|
||
if (addressLabelStrong) addressLabelStrong.textContent = window.translations[lang].loc_address_label;
|
||
const coordsSpan = aboutText.querySelector('div:nth-of-type(2) span strong');
|
||
if (coordsSpan) coordsSpan.textContent = window.translations[lang].loc_coords_label;
|
||
const cards = aboutText.querySelectorAll('.location-card');
|
||
cards.forEach((card, idx) => {
|
||
if (citiesData[idx]) {
|
||
const titleDiv = card.querySelector('.location-title');
|
||
if (titleDiv) titleDiv.textContent = getCityTranslation(citiesData[idx].key, lang);
|
||
const distSpan = card.querySelector('.location-distance');
|
||
if (distSpan) distSpan.textContent = `${citiesData[idx].distance} ${window.translations[lang].loc_km}`;
|
||
}
|
||
});
|
||
}
|
||
if (map && placemark) {
|
||
placemark.properties.set({ hintContent: HOTEL_ADDRESS, balloonContent: HOTEL_ADDRESS });
|
||
}
|
||
}
|
||
|
||
function renderLocation(lang) {
|
||
const locationSection = document.getElementById('location');
|
||
if (!locationSection) return;
|
||
locationSection.innerHTML = generateLocationHTML(lang);
|
||
|
||
const signImg = document.getElementById('signpostImg');
|
||
if (signImg) {
|
||
const imgObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('in-view');
|
||
imgObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.3 });
|
||
imgObserver.observe(signImg);
|
||
}
|
||
|
||
const showBtn = document.getElementById('showMapBtn');
|
||
if (showBtn) showBtn.addEventListener('click', showMap);
|
||
|
||
// Обработчик клика на карточках городов
|
||
const cityCards = locationSection.querySelectorAll('.location-card');
|
||
cityCards.forEach(card => {
|
||
card.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
const cityKey = card.getAttribute('data-city-key');
|
||
if (cityKey) showCityModal(cityKey, lang);
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.animate').forEach(el => {
|
||
if (el.style.animationPlayState !== 'running') {
|
||
el.style.animationPlayState = 'paused';
|
||
const obs = new IntersectionObserver(entries => {
|
||
entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; });
|
||
});
|
||
obs.observe(el);
|
||
}
|
||
});
|
||
}
|
||
|
||
function updateLocationLanguage(lang) {
|
||
currentLang = lang;
|
||
if (document.getElementById('location').innerHTML.trim() !== '') {
|
||
updateLocationTexts(lang);
|
||
closeModal();
|
||
} else {
|
||
renderLocation(lang);
|
||
}
|
||
}
|
||
|
||
window.updateLocationLanguage = updateLocationLanguage;
|
||
window.closeModal = closeModal; // для доступа из scripts.js
|
||
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
setTimeout(() => renderLocation(currentLang), 300);
|
||
}); |