upskill-event-manager/assets/js/hvac-welcome-popup.js
Ben Reed cdc5ea85f4 feat: Add comprehensive CSS, JavaScript and theme asset infrastructure
Add massive collection of CSS, JavaScript and theme assets that were previously excluded:

**CSS Files (681 total):**
- HVAC plugin-specific styles (hvac-*.css): 34 files including dashboard, certificates, registration, mobile nav, accessibility fixes, animations, and welcome popup
- Theme framework files (Astra, builder systems, layouts): 200+ files
- Plugin compatibility styles (WooCommerce, WPForms, Elementor, Contact Form 7): 150+ files
- WordPress core and editor styles: 50+ files
- Responsive and RTL language support: 200+ files

**JavaScript Files (400+ total):**
- HVAC plugin functionality (hvac-*.js): 27 files including menu systems, dashboard enhancements, profile sharing, mobile responsive features, accessibility, and animations
- Framework and library files: jQuery plugins, GSAP, AOS, Swiper, Chart.js, Lottie, Isotope
- Plugin compatibility scripts: WPForms, WooCommerce, Elementor, Contact Form 7, LifterLMS
- WordPress core functionality: customizer, admin, block editor compatibility
- Third-party integrations: Stripe, SMTP, analytics, search functionality

**Assets:**
- Certificate background images and logos
- Comprehensive theme styling infrastructure
- Mobile-responsive design systems
- Cross-browser compatibility assets
- Performance-optimized minified versions

**Updated .gitignore:**
- Fixed asset directory whitelisting patterns to properly include CSS/JS/images
- Added proper directory structure recognition (!/assets/css/, !/assets/js/, etc.)
- Maintains security by excluding sensitive files while including essential assets

This commit provides the complete frontend infrastructure needed for:
- Full theme functionality and styling
- Plugin feature implementations
- Mobile responsiveness and accessibility
- Cross-browser compatibility
- Performance optimization
- Developer workflow support
2025-08-11 16:20:31 -03:00

299 lines
No EOL
14 KiB
JavaScript

/**
* HVAC Welcome Popup System
*
* Handles the welcome popup modal for new users with carousel functionality
*/
(function($) {
'use strict';
var HVACWelcomePopup = {
init: function() {
this.currentCard = 0;
this.totalCards = 4;
this.bindEvents();
this.checkAndShowPopup();
},
bindEvents: function() {
var self = this;
// Close popup handlers
$(document).on('click', '.hvac-welcome-close', function(e) {
e.preventDefault();
self.closePopup();
});
$(document).on('click', '.hvac-welcome-overlay', function(e) {
if (e.target === this) {
self.closePopup();
}
});
// Navigation handlers
$(document).on('click', '.hvac-welcome-nav-prev', function(e) {
e.preventDefault();
self.previousCard();
});
$(document).on('click', '.hvac-welcome-nav-next', function(e) {
e.preventDefault();
self.nextCard();
});
// Dot navigation
$(document).on('click', '.hvac-welcome-dot', function(e) {
e.preventDefault();
var cardIndex = $(this).data('card');
self.goToCard(cardIndex);
});
// Dismiss permanently
$(document).on('click', '.hvac-welcome-dismiss', function(e) {
e.preventDefault();
self.dismissPermanently();
});
// Keyboard navigation
$(document).on('keydown', function(e) {
if ($('.hvac-welcome-popup').is(':visible')) {
switch(e.which) {
case 27: // ESC
self.closePopup();
break;
case 37: // Left arrow
self.previousCard();
break;
case 39: // Right arrow
self.nextCard();
break;
}
}
});
},
checkAndShowPopup: function() {
var self = this;
// Check if user has dismissed the popup
$.ajax({
url: hvac_welcome.ajax_url,
type: 'POST',
data: {
action: 'hvac_check_welcome_dismissed',
nonce: hvac_welcome.nonce
},
success: function(response) {
if (response.success && !response.data.dismissed) {
self.showPopup();
}
}
});
},
showPopup: function() {
if ($('.hvac-welcome-popup').length === 0) {
this.createPopup();
}
$('body').addClass('hvac-welcome-open');
$('.hvac-welcome-popup').fadeIn(300);
this.updateCardDisplay();
},
closePopup: function() {
$('.hvac-welcome-popup').fadeOut(300);
$('body').removeClass('hvac-welcome-open');
},
dismissPermanently: function() {
var self = this;
var shouldDismiss = $('#hvac-welcome-dont-show').is(':checked');
if (shouldDismiss) {
$.ajax({
url: hvac_welcome.ajax_url,
type: 'POST',
data: {
action: 'hvac_dismiss_welcome_popup',
nonce: hvac_welcome.nonce
},
success: function(response) {
if (response.success) {
self.closePopup();
}
}
});
} else {
// Just close without permanently dismissing
self.closePopup();
}
},
previousCard: function() {
this.currentCard = (this.currentCard - 1 + this.totalCards) % this.totalCards;
this.updateCardDisplay();
},
nextCard: function() {
this.currentCard = (this.currentCard + 1) % this.totalCards;
this.updateCardDisplay();
},
goToCard: function(cardIndex) {
this.currentCard = cardIndex;
this.updateCardDisplay();
},
updateCardDisplay: function() {
var self = this;
var $cards = $('.hvac-welcome-card');
var $dots = $('.hvac-welcome-dot');
// Hide all cards
$cards.removeClass('active');
$dots.removeClass('active');
// Show current card with animation
setTimeout(function() {
$cards.eq(self.currentCard).addClass('active');
$dots.eq(self.currentCard).addClass('active');
}, 150);
// Update navigation button states
$('.hvac-welcome-nav-prev').toggleClass('disabled', this.currentCard === 0);
$('.hvac-welcome-nav-next').toggleClass('disabled', this.currentCard === this.totalCards - 1);
},
createPopup: function() {
var popupHTML = this.getPopupHTML();
$('body').append(popupHTML);
},
getPopupHTML: function() {
return `
<div class="hvac-welcome-popup" style="display: none;">
<div class="hvac-welcome-overlay"></div>
<div class="hvac-welcome-modal">
<button class="hvac-welcome-close" aria-label="Close">&times;</button>
<div class="hvac-welcome-content">
<div class="hvac-welcome-carousel">
<!-- Card 1: Welcome -->
<div class="hvac-welcome-card" data-card="0">
<div class="hvac-welcome-icon">
<span class="dashicons dashicons-welcome-learn-more"></span>
</div>
<h2>Welcome to Upskill HVAC!</h2>
<p class="hvac-welcome-subtitle">You're one of the first trainers to be welcomed into our comprehensive training platform.</p>
<div class="hvac-welcome-description">
<p>Our goal is to make it easier for HVAC Trainers to:</p>
<ul>
<li>Get discovered by potential students</li>
<li>Share training events and programs</li>
<li>Build professional reputation</li>
<li>Connect with the HVAC community</li>
</ul>
<p><strong>Note:</strong> We've done our best to customize your personal information, but you may need to make some corrections.</p>
</div>
</div>
<!-- Card 2: Event Management -->
<div class="hvac-welcome-card" data-card="1">
<div class="hvac-welcome-icon">
<span class="dashicons dashicons-calendar-alt"></span>
</div>
<h2>Manage Your Events!</h2>
<p class="hvac-welcome-subtitle">Create and manage your training events with our integrated event system.</p>
<div class="hvac-welcome-description">
<p>Get started by creating your first training event:</p>
<ul>
<li><strong>Events:</strong> Training sessions with pricing and capacity</li>
<li><strong>Venues:</strong> Physical or virtual training locations</li>
<li><strong>Organizers:</strong> Business entities with logos</li>
<li>Track revenue and attendance</li>
</ul>
<p><strong>Good news:</strong> We've tried to auto-create training venues and organizers for you!</p>
</div>
</div>
<!-- Card 3: Profile & Directory -->
<div class="hvac-welcome-card" data-card="2">
<div class="hvac-welcome-icon">
<span class="dashicons dashicons-admin-users"></span>
</div>
<h2>Update & Share Your Profile!</h2>
<p class="hvac-welcome-subtitle">Your trainer profile is your professional showcase in our directory.</p>
<div class="hvac-welcome-description">
<p>Your profile includes powerful features:</p>
<ul>
<li><strong>Directory Listing:</strong> Appears in "Find A Trainer" search</li>
<li><strong>Map Integration:</strong> Shows location and service areas</li>
<li><strong>QR Code Sharing:</strong> Easy sharing at events</li>
<li><strong>Direct Contact:</strong> Students reach out directly</li>
</ul>
<p><strong>Pro tip:</strong> The more you share your profile, the more training leads you can generate!</p>
</div>
</div>
<!-- Card 4: More Features -->
<div class="hvac-welcome-card" data-card="3">
<div class="hvac-welcome-icon">
<span class="dashicons dashicons-star-filled"></span>
</div>
<h2>And Much More!</h2>
<p class="hvac-welcome-subtitle">We're continuously adding features to enhance your training business.</p>
<div class="hvac-welcome-description">
<p>Current features available now:</p>
<ul>
<li><strong>Certificate Generation:</strong> Create completion certificates</li>
<li><strong>Revenue Tracking:</strong> Monitor training income</li>
<li><strong>Analytics:</strong> View performance metrics</li>
</ul>
<p>Coming soon: Direct messaging with attendees, lead history tracking, advanced certificates, and more!</p>
<p><strong>Get started:</strong> Update your profile first, then create your first event!</p>
</div>
</div>
</div>
<div class="hvac-welcome-navigation">
<button class="hvac-welcome-nav hvac-welcome-nav-prev" aria-label="Previous">
<span class="dashicons dashicons-arrow-left-alt2"></span>
</button>
<div class="hvac-welcome-dots">
<button class="hvac-welcome-dot" data-card="0" aria-label="Card 1"></button>
<button class="hvac-welcome-dot" data-card="1" aria-label="Card 2"></button>
<button class="hvac-welcome-dot" data-card="2" aria-label="Card 3"></button>
<button class="hvac-welcome-dot" data-card="3" aria-label="Card 4"></button>
</div>
<button class="hvac-welcome-nav hvac-welcome-nav-next" aria-label="Next">
<span class="dashicons dashicons-arrow-right-alt2"></span>
</button>
</div>
<div class="hvac-welcome-footer">
<label class="hvac-welcome-checkbox">
<input type="checkbox" id="hvac-welcome-dont-show">
Don't show this again
</label>
<button class="hvac-welcome-dismiss button button-primary wp-element-button">Get Started</button>
</div>
</div>
</div>
</div>
`;
}
};
// Initialize when document is ready
$(document).ready(function() {
// Only initialize on dashboard page
if ($('.hvac-trainer-dashboard-page').length > 0) {
HVACWelcomePopup.init();
}
});
})(jQuery);