362 lines
13 KiB
JavaScript
362 lines
13 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// ---------- MOBILNI MENI ----------
|
|
const mainNav = document.querySelector('.main-nav');
|
|
const body = document.body;
|
|
|
|
// Ustvari overlay element
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'menu-overlay';
|
|
document.body.appendChild(overlay);
|
|
|
|
if (menuToggle && mainNav) {
|
|
menuToggle.addEventListener('click', function() {
|
|
menuToggle.classList.toggle('active');
|
|
mainNav.classList.toggle('active');
|
|
overlay.classList.toggle('active');
|
|
body.classList.toggle('menu-open');
|
|
});
|
|
|
|
// Zapri meni ob kliku na overlay
|
|
overlay.addEventListener('click', function() {
|
|
menuToggle.classList.remove('active');
|
|
mainNav.classList.remove('active');
|
|
overlay.classList.remove('active');
|
|
body.classList.remove('menu-open');
|
|
});
|
|
|
|
// Zapri meni ob kliku na povezavo
|
|
mainNav.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
menuToggle.classList.remove('active');
|
|
mainNav.classList.remove('active');
|
|
overlay.classList.remove('active');
|
|
body.classList.remove('menu-open');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Zapri meni ob resize-u okna
|
|
window.addEventListener('resize', function() {
|
|
if (window.innerWidth > 768) {
|
|
menuToggle.classList.remove('active');
|
|
mainNav.classList.remove('active');
|
|
overlay.classList.remove('active');
|
|
body.classList.remove('menu-open');
|
|
}
|
|
});
|
|
|
|
// ---------- PLAVAJOČI GUMB ZA POVPRAŠEVANJE ----------
|
|
// Ustvarimo nov HTML element za plavajoči gumb
|
|
const floatingButton = document.createElement('a');
|
|
floatingButton.className = 'floating-inquiry-btn';
|
|
floatingButton.href = '/inquiry/';
|
|
floatingButton.innerHTML = '<i class="fas fa-comment-alt"></i> Custom Journey Inquiry';
|
|
|
|
// Dodamo gumb v body
|
|
document.body.appendChild(floatingButton);
|
|
|
|
// Če obstaja popup element na strani, bomo uporabili ta obstoječi element
|
|
let inquiryPopup = document.getElementById('inquiry-popup');
|
|
|
|
// Če popup ne obstaja na trenutni strani, ga ustvarimo
|
|
if (!inquiryPopup) {
|
|
// Ustvarimo nov popup
|
|
inquiryPopup = document.createElement('div');
|
|
inquiryPopup.id = 'inquiry-popup';
|
|
inquiryPopup.className = 'inquiry-popup';
|
|
|
|
// Vsebina popupa
|
|
inquiryPopup.innerHTML = `
|
|
<div class="inquiry-popup-content">
|
|
<span class="inquiry-close">×</span>
|
|
<h3>Custom Journey Inquiry</h3>
|
|
<form id="custom-inquiry-form" class="inquiry-form">
|
|
<input type="hidden" name="action" value="custom_inquiry_submit">
|
|
<input type="hidden" name="inquiry_security" id="inquiry_security" value="">
|
|
<div class="form-group">
|
|
<label for="name">Your Name</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
<div class="form-group half">
|
|
<label for="travel-date">Planned Travel Date</label>
|
|
<input type="date" id="travel-date" name="travel_date">
|
|
</div>
|
|
<div class="form-group half">
|
|
<label for="travelers">Number of Travelers</label>
|
|
<input type="number" id="travelers" name="travelers" min="1" value="2">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="destination">Preferred Destination(s)</label>
|
|
<input type="text" id="destination" name="destination" placeholder="e.g. Slovenia, Croatia, Hungary...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Your Travel Wishes</label>
|
|
<textarea id="message" name="message" rows="4" placeholder="Tell us what you're looking for in your custom journey..."></textarea>
|
|
</div>
|
|
<button type="submit" class="btn-submit">Submit Inquiry</button>
|
|
</form>
|
|
</div>
|
|
`;
|
|
|
|
// Dodamo style, če ga še ni
|
|
if (!document.getElementById('inquiry-popup-styles')) {
|
|
const popupStyles = document.createElement('style');
|
|
popupStyles.id = 'inquiry-popup-styles';
|
|
popupStyles.textContent = `
|
|
/* Popup Styles */
|
|
.inquiry-popup {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.inquiry-popup.active {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.inquiry-popup-content {
|
|
background-color: white;
|
|
margin: 5% auto;
|
|
padding: 2rem;
|
|
border-radius: 12px;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-20px);
|
|
transition: transform 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.inquiry-popup.active .inquiry-popup-content {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.inquiry-close {
|
|
position: absolute;
|
|
top: 1.2rem;
|
|
right: 1.5rem;
|
|
font-size: 2rem;
|
|
color: #aaa;
|
|
cursor: pointer;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.inquiry-close:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.inquiry-popup h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--dark);
|
|
font-size: 1.8rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.inquiry-form .form-group {
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.inquiry-form .half {
|
|
width: 49%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.inquiry-form .form-group:nth-child(3) {
|
|
margin-right: 2%;
|
|
}
|
|
|
|
.inquiry-form label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: #555;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.inquiry-form input,
|
|
.inquiry-form textarea {
|
|
width: 100%;
|
|
padding: 0.8rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.inquiry-form input:focus,
|
|
.inquiry-form textarea:focus {
|
|
border-color: var(--accent);
|
|
outline: none;
|
|
}
|
|
|
|
.inquiry-form .btn-submit {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
background-color: var(--accent);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
transition: background-color 0.3s ease;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.inquiry-form .btn-submit:hover {
|
|
background-color: var(--accent-dark);
|
|
}
|
|
|
|
body.popup-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.inquiry-popup-content {
|
|
padding: 1.5rem;
|
|
margin: 10% auto;
|
|
width: 95%;
|
|
}
|
|
|
|
.inquiry-form .half {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.inquiry-form .form-group:nth-child(3) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(popupStyles);
|
|
}
|
|
|
|
// Dodamo popup v body
|
|
document.body.appendChild(inquiryPopup);
|
|
|
|
// Pridobimo varnostni nonce preko AJAX klica
|
|
fetch(inquiry_ajax_object.ajax_url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'action=get_inquiry_nonce'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
document.getElementById('inquiry_security').value = data.data;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching nonce:', error);
|
|
});
|
|
}
|
|
|
|
// Poskrbimo, da je popup začetno skrit
|
|
inquiryPopup.classList.remove('active');
|
|
document.body.classList.remove('popup-open');
|
|
|
|
// Dodamo "click" poslušalec za odpiranje popupa
|
|
floatingButton.addEventListener('click', function() {
|
|
inquiryPopup.classList.add('active');
|
|
document.body.classList.add('popup-open');
|
|
});
|
|
|
|
// Pridobimo referenco na elemente v popupu
|
|
const inquiryClose = inquiryPopup.querySelector('.inquiry-close');
|
|
const inquiryForm = inquiryPopup.querySelector('#custom-inquiry-form');
|
|
|
|
// Zapri popup (X gumb)
|
|
inquiryClose.addEventListener('click', function() {
|
|
inquiryPopup.classList.remove('active');
|
|
document.body.classList.remove('popup-open');
|
|
});
|
|
|
|
// Zapri popup (klik izven obrazca)
|
|
inquiryPopup.addEventListener('click', function(e) {
|
|
if (e.target === inquiryPopup) {
|
|
inquiryPopup.classList.remove('active');
|
|
document.body.classList.remove('popup-open');
|
|
}
|
|
});
|
|
|
|
// Zapri popup (tipka ESC)
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && inquiryPopup.classList.contains('active')) {
|
|
inquiryPopup.classList.remove('active');
|
|
document.body.classList.remove('popup-open');
|
|
}
|
|
});
|
|
|
|
// Pošlji obrazec
|
|
inquiryForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Prikaži indikator nalaganja
|
|
const submitBtn = inquiryForm.querySelector('.btn-submit');
|
|
const originalBtnText = submitBtn.textContent;
|
|
submitBtn.textContent = 'Sending...';
|
|
submitBtn.disabled = true;
|
|
|
|
// Pridobi podatke iz obrazca
|
|
const formData = new FormData(inquiryForm);
|
|
const nonce = document.getElementById('inquiry_security').value;
|
|
formData.append('security', nonce);
|
|
|
|
console.log('Sending form data to AJAX endpoint...');
|
|
|
|
// Pošlji AJAX zahtevek
|
|
fetch(inquiry_ajax_object.ajax_url, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => {
|
|
console.log('Response status:', response.status);
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok: ' + response.status);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Response data:', data);
|
|
|
|
// Ponastavi gumb
|
|
submitBtn.textContent = originalBtnText;
|
|
submitBtn.disabled = false;
|
|
|
|
if (data.success) {
|
|
// Uspešno poslano
|
|
alert(data.data);
|
|
inquiryForm.reset();
|
|
inquiryPopup.classList.remove('active');
|
|
document.body.classList.remove('popup-open');
|
|
} else {
|
|
// Napaka
|
|
console.error('Form submission error:', data);
|
|
alert(data.data || 'There was an error sending your inquiry. Please try again.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
// Ponastavi gumb
|
|
submitBtn.textContent = originalBtnText;
|
|
submitBtn.disabled = false;
|
|
|
|
console.error('Error during form submission:', error);
|
|
alert('There was an error sending your inquiry: ' + error.message);
|
|
});
|
|
});
|
|
});
|