Sync DNS2 production changes - removed obsolete test suite and refactored structure
This commit is contained in:
Krystie
363
dashcaddy-api/assets/tour-manager.js
Normal file
363
dashcaddy-api/assets/tour-manager.js
Normal file
@@ -0,0 +1,363 @@
|
||||
/**
|
||||
* Tour Manager
|
||||
* Orchestrates the onboarding tour using Driver.js
|
||||
*/
|
||||
|
||||
(function(window) {
|
||||
'use strict';
|
||||
|
||||
class TourManager {
|
||||
constructor(progressTracker, themeAdapter, dnsTemplateSelector) {
|
||||
this.progressTracker = progressTracker;
|
||||
this.themeAdapter = themeAdapter;
|
||||
this.dnsTemplateSelector = dnsTemplateSelector;
|
||||
this.driver = null;
|
||||
this.currentStepIndex = 0;
|
||||
this.isActive = false;
|
||||
this.resizeHandler = null;
|
||||
this.layoutChangeHandler = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize Driver.js with theme-aware configuration
|
||||
*/
|
||||
async initializeDriver() {
|
||||
// Driver.js v1.x IIFE: window.driver.js.driver is the factory function
|
||||
const driverFactory = window.driver?.js?.driver || window.driver?.driver || window.driver;
|
||||
|
||||
if (typeof driverFactory !== 'function') {
|
||||
console.error('[TourManager] Driver.js not loaded or invalid. window.driver:', window.driver);
|
||||
return false;
|
||||
}
|
||||
|
||||
const themeConfig = this.themeAdapter.getDriverTheme();
|
||||
|
||||
this.driver = driverFactory({
|
||||
showProgress: true,
|
||||
showButtons: ['next', 'previous', 'close'],
|
||||
allowClose: true,
|
||||
overlayClickNext: false,
|
||||
overlayOpacity: 0,
|
||||
stagePadding: 0,
|
||||
stageRadius: 0,
|
||||
allowKeyboardControl: true,
|
||||
popoverClass: 'dashcaddy-popover',
|
||||
onDestroyed: () => this.onTourComplete(),
|
||||
onDestroyStarted: () => {
|
||||
if (!this.progressTracker.isTourCompleted()) {
|
||||
this.onTourSkip();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Apply theme
|
||||
this.themeAdapter.applyTheme(this.driver);
|
||||
|
||||
// Listen for theme changes
|
||||
this.themeAdapter.onThemeChange(() => {
|
||||
this.themeAdapter.applyTheme(this.driver);
|
||||
});
|
||||
|
||||
// Set up dynamic repositioning
|
||||
this.setupDynamicRepositioning();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if tour should auto-start
|
||||
*/
|
||||
shouldAutoStart() {
|
||||
return !this.progressTracker.isTourCompleted() &&
|
||||
this.progressTracker.getCurrentStep() === 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Start the onboarding tour
|
||||
*/
|
||||
async startTour() {
|
||||
if (!this.driver) {
|
||||
const initialized = await this.initializeDriver();
|
||||
if (!initialized) return;
|
||||
}
|
||||
|
||||
// Get active tooltips (filtered by conditions)
|
||||
const allTooltips = window.TooltipDefinitions.getSortedTooltips();
|
||||
|
||||
// Filter out completed tooltips
|
||||
const completedIds = this.progressTracker.getCompletedTooltips();
|
||||
const activeTooltips = allTooltips.filter(t => !completedIds.includes(t.id));
|
||||
|
||||
if (activeTooltips.length === 0) {
|
||||
console.log('[TourManager] No tooltips to show');
|
||||
this.progressTracker.markTourCompleted();
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert to Driver.js steps with navigation logic
|
||||
const steps = activeTooltips.map((tooltip, index) => {
|
||||
const isFirst = index === 0;
|
||||
const isLast = index === activeTooltips.length - 1;
|
||||
|
||||
const step = {
|
||||
element: tooltip.element,
|
||||
popover: {
|
||||
title: tooltip.popover.title,
|
||||
description: tooltip.popover.description,
|
||||
side: tooltip.popover.position || 'bottom',
|
||||
align: tooltip.popover.align || 'start',
|
||||
showButtons: this._getButtonsForStep(tooltip, isFirst, isLast),
|
||||
showProgress: tooltip.popover.showProgress !== false,
|
||||
onNextClick: () => {
|
||||
this.progressTracker.markTooltipCompleted(tooltip.id);
|
||||
this.progressTracker.setCurrentStep(index + 1);
|
||||
this.currentStepIndex = index + 1;
|
||||
this.driver.moveNext();
|
||||
},
|
||||
onPrevClick: () => {
|
||||
this.progressTracker.setCurrentStep(Math.max(0, index - 1));
|
||||
this.currentStepIndex = Math.max(0, index - 1);
|
||||
this.driver.movePrevious();
|
||||
},
|
||||
onCloseClick: () => {
|
||||
this.skipTour();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Add custom handlers for DNS tooltip
|
||||
if (tooltip.id === 'dns-priority' && this.dnsTemplateSelector) {
|
||||
step.popover.onSetupNowClick = () => {
|
||||
console.log('[TourManager] Opening DNS template selector');
|
||||
this.dnsTemplateSelector.showTemplateSelector();
|
||||
// Mark tooltip as completed and move to next
|
||||
this.progressTracker.markTooltipCompleted(tooltip.id);
|
||||
this.progressTracker.setCurrentStep(index + 1);
|
||||
this.currentStepIndex = index + 1;
|
||||
this.driver.moveNext();
|
||||
};
|
||||
|
||||
step.popover.onLaterClick = () => {
|
||||
console.log('[TourManager] DNS setup deferred');
|
||||
this.progressTracker.markDnsSetupDeferred();
|
||||
// Mark tooltip as completed and move to next
|
||||
this.progressTracker.markTooltipCompleted(tooltip.id);
|
||||
this.progressTracker.setCurrentStep(index + 1);
|
||||
this.currentStepIndex = index + 1;
|
||||
this.driver.moveNext();
|
||||
};
|
||||
}
|
||||
|
||||
return step;
|
||||
});
|
||||
|
||||
this.isActive = true;
|
||||
this.driver.setSteps(steps);
|
||||
this.driver.drive();
|
||||
}
|
||||
|
||||
/**
|
||||
* Resume tour from last step
|
||||
*/
|
||||
async resumeTour() {
|
||||
const currentStep = this.progressTracker.getCurrentStep();
|
||||
if (currentStep > 0) {
|
||||
await this.startTour();
|
||||
// Driver.js will start from beginning, we'd need to skip to current step
|
||||
// This is a simplified implementation
|
||||
} else {
|
||||
await this.startTour();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Skip the entire tour
|
||||
*/
|
||||
skipTour() {
|
||||
if (this.driver) {
|
||||
this.driver.destroy();
|
||||
}
|
||||
this.cleanupDynamicRepositioning();
|
||||
this.isActive = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restart tour from beginning
|
||||
*/
|
||||
async restartTour() {
|
||||
this.progressTracker.resetProgress();
|
||||
await this.startTour();
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a specific tooltip by ID
|
||||
*/
|
||||
async showTooltip(tooltipId) {
|
||||
const tooltip = window.TooltipDefinitions.getTooltipById(tooltipId);
|
||||
if (!tooltip) {
|
||||
console.error(`[TourManager] Tooltip not found: ${tooltipId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.driver) {
|
||||
await this.initializeDriver();
|
||||
}
|
||||
|
||||
const step = {
|
||||
element: tooltip.element,
|
||||
popover: {
|
||||
title: tooltip.popover.title,
|
||||
description: tooltip.popover.description,
|
||||
side: tooltip.popover.position || 'bottom',
|
||||
align: tooltip.popover.align || 'start'
|
||||
}
|
||||
};
|
||||
|
||||
this.driver.highlight(step);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show "What's New" tour - only tooltips marked as new features
|
||||
*/
|
||||
async showWhatsNew() {
|
||||
if (!this.driver) {
|
||||
const initialized = await this.initializeDriver();
|
||||
if (!initialized) return;
|
||||
}
|
||||
|
||||
// Get only new feature tooltips
|
||||
const newFeatureTooltips = window.TooltipDefinitions.getNewFeatureTooltips();
|
||||
|
||||
if (newFeatureTooltips.length === 0) {
|
||||
console.log('[TourManager] No new features to show');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`[TourManager] Showing ${newFeatureTooltips.length} new features`);
|
||||
|
||||
// Convert to Driver.js steps
|
||||
const steps = newFeatureTooltips.map((tooltip, index) => {
|
||||
const isFirst = index === 0;
|
||||
const isLast = index === newFeatureTooltips.length - 1;
|
||||
|
||||
return {
|
||||
element: tooltip.element,
|
||||
popover: {
|
||||
title: `✨ NEW: ${tooltip.popover.title}`,
|
||||
description: tooltip.popover.description,
|
||||
side: tooltip.popover.position || 'bottom',
|
||||
align: tooltip.popover.align || 'start',
|
||||
showButtons: this._getButtonsForStep(tooltip, isFirst, isLast),
|
||||
showProgress: true,
|
||||
onNextClick: () => {
|
||||
this.driver.moveNext();
|
||||
},
|
||||
onPrevClick: () => {
|
||||
this.driver.movePrevious();
|
||||
},
|
||||
onCloseClick: () => {
|
||||
this.skipTour();
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
this.isActive = true;
|
||||
this.driver.setSteps(steps);
|
||||
this.driver.drive();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up dynamic repositioning for window resize and layout changes
|
||||
*/
|
||||
setupDynamicRepositioning() {
|
||||
// Window resize handler with debouncing
|
||||
let resizeTimeout;
|
||||
this.resizeHandler = () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
if (this.isActive && this.driver) {
|
||||
console.log('[TourManager] Window resized, repositioning tooltip');
|
||||
this.driver.refresh();
|
||||
}
|
||||
}, 150); // Debounce for 150ms
|
||||
};
|
||||
|
||||
// Layout change handler (for theme changes, DOM mutations)
|
||||
this.layoutChangeHandler = () => {
|
||||
if (this.isActive && this.driver) {
|
||||
console.log('[TourManager] Layout changed, repositioning tooltip');
|
||||
// Small delay to allow layout to settle
|
||||
setTimeout(() => {
|
||||
if (this.driver) {
|
||||
this.driver.refresh();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
// Add event listeners
|
||||
window.addEventListener('resize', this.resizeHandler);
|
||||
|
||||
// Listen for theme changes (already handled by ThemeAdapter, but also trigger reposition)
|
||||
this.themeAdapter.onThemeChange(this.layoutChangeHandler);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up dynamic repositioning listeners
|
||||
*/
|
||||
cleanupDynamicRepositioning() {
|
||||
if (this.resizeHandler) {
|
||||
window.removeEventListener('resize', this.resizeHandler);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get buttons to show for a specific step
|
||||
* @private
|
||||
*/
|
||||
_getButtonsForStep(tooltip, isFirst, isLast) {
|
||||
// Check if tooltip has custom buttons defined
|
||||
if (tooltip.popover.showButtons) {
|
||||
return tooltip.popover.showButtons;
|
||||
}
|
||||
|
||||
// Default button configuration
|
||||
const buttons = [];
|
||||
|
||||
if (!isFirst) {
|
||||
buttons.push('previous');
|
||||
}
|
||||
|
||||
if (!isLast) {
|
||||
buttons.push('next');
|
||||
} else {
|
||||
buttons.push('close');
|
||||
}
|
||||
|
||||
return buttons;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle tour completion
|
||||
*/
|
||||
onTourComplete() {
|
||||
this.progressTracker.markTourCompleted();
|
||||
this.isActive = false;
|
||||
console.log('[TourManager] Tour completed');
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle tour skip
|
||||
*/
|
||||
onTourSkip() {
|
||||
// Save current progress but don't mark as completed
|
||||
console.log('[TourManager] Tour skipped');
|
||||
this.isActive = false;
|
||||
}
|
||||
}
|
||||
|
||||
window.TourManager = TourManager;
|
||||
console.log('[TourManager] Module loaded');
|
||||
|
||||
})(window);
|
||||
Reference in New Issue
Block a user