134 lines
3.5 KiB
JavaScript
134 lines
3.5 KiB
JavaScript
/**
|
|
* Tour Manager for Car Inventory System
|
|
* Uses IntroJS to provide guided tours of the application
|
|
*/
|
|
|
|
function getCsrfToken(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== "") {
|
|
const cookies = document.cookie.split(";");
|
|
for (let cookie of cookies) {
|
|
cookie = cookie.trim();
|
|
if (cookie.substring(0, name.length + 1) === name + "=") {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
|
|
class TourManager {
|
|
constructor() {
|
|
this.introJs = introJs();
|
|
this.currentTour = null;
|
|
this.tourData = null;
|
|
this.tourSlug = null;
|
|
|
|
// Configure IntroJS defaults
|
|
this.introJs.setOptions({
|
|
showStepNumbers: true,
|
|
showBullets: true,
|
|
showProgress: true,
|
|
scrollToElement: true,
|
|
disableInteraction: false,
|
|
doneLabel: 'Finish',
|
|
nextLabel: 'Next →',
|
|
prevLabel: '← Back',
|
|
exitOnEsc: true,
|
|
exitOnOverlayClick: false
|
|
});
|
|
|
|
// Set up event listeners
|
|
this.introJs.oncomplete(() => this.onTourComplete());
|
|
this.introJs.onexit(() => this.onTourExit());
|
|
}
|
|
|
|
/**
|
|
* Load and start a tour by its slug
|
|
* @param {string} slug - The tour slug
|
|
*/
|
|
async loadTour(slug) {
|
|
try {
|
|
this.tourSlug = slug;
|
|
const response = await fetch(`/tours/data/${slug}/`);
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load tour data');
|
|
}
|
|
|
|
const data = await response.json();
|
|
this.tourData = data.tour;
|
|
|
|
// If user already completed this tour, ask if they want to repeat
|
|
if (data.completed && !confirm('You have already completed this guide. Would you like to view it again?')) {
|
|
return;
|
|
}
|
|
|
|
this.startTour();
|
|
} catch (error) {
|
|
console.error('Error loading tour:', error);
|
|
alert('Failed to load the interactive guide. Please try again later.');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Start the currently loaded tour
|
|
*/
|
|
startTour() {
|
|
if (!this.tourData) {
|
|
console.error('No tour data loaded');
|
|
return;
|
|
}
|
|
|
|
this.introJs.setOptions({
|
|
steps: this.tourData.steps
|
|
});
|
|
|
|
this.introJs.start();
|
|
}
|
|
|
|
/**
|
|
* Handle tour completion
|
|
*/
|
|
onTourComplete() {
|
|
if (!this.tourSlug) return;
|
|
|
|
// Mark the tour as completed on the server
|
|
fetch(`/tours/complete/${this.tourSlug}/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': getCsrfToken()
|
|
}
|
|
}).catch(error => {
|
|
console.error('Error marking tour as completed:', error);
|
|
});
|
|
|
|
// Show success message
|
|
alert('Congratulations! You have completed the guide.');
|
|
}
|
|
|
|
/**
|
|
* Handle tour exit (without completion)
|
|
*/
|
|
onTourExit() {
|
|
console.log('Tour exited');
|
|
}
|
|
|
|
/**
|
|
* Get CSRF token from cookies
|
|
*/
|
|
|
|
}
|
|
|
|
// Initialize the tour manager
|
|
window.tourManager = new TourManager();
|
|
|
|
// Function to start a tour from a link
|
|
function startTour(slug) {
|
|
window.tourManager.loadTour(slug);
|
|
return false; // Prevent default link action
|
|
}
|
|
|
|
// Export for use in other modules
|
|
// export { startTour };
|