/** * Persistent Services Widget for SPA * Extracts services from footer links (present on all pages) * Works with Single Page Applications */ (function () { 'use strict'; // Configuration const CONFIG = { fontAwesomeUrl: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css', widgetDelay: 2000, // Delay before showing widget (ms) ctaUrl: '/contact-us', // Default CTA URL ctaText: 'Get Free Quote', // Default CTA text footerSelector: '.grab-footer-links-services-list', // Footer services list footerLinkSelector: '.grab-footer-links-services-item-link', // Footer service links storageKey: 'gds_widget_services' // SessionStorage key for caching services }; // Service icon mapping const SERVICE_ICONS = { 'emergency': 'fa-exclamation-triangle', '24 hour': 'fa-clock', 'panel': 'fa-square', 'lube': 'fa-oil-can', 'tune': 'fa-wrench', 'maintenance': 'fa-tools', 'opener installation': 'fa-plus-circle', 'opener repair': 'fa-screwdriver', 'installation': 'fa-hammer', 'residential': 'fa-home', 'off track': 'fa-align-center', 'spring': 'fa-compress', 'weather': 'fa-cloud-rain', 'seal': 'fa-shield-alt', 'repair': 'fa-wrench', 'replacement': 'fa-sync-alt' }; // Widget styles const WIDGET_STYLES = ` .gds-service-widget { position: fixed; top: 30px; right: 30px; width: 380px; max-width: calc(100vw - 60px); background: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(25, 97, 102, 0.12); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; border: 1px solid #CAD9DB; display: none; } .gds-service-widget.visible { display: block; animation: gdsSlideInRight 0.5s ease; } .gds-service-widget.minimized { width: 60px; height: 60px; border-radius: 30px; cursor: pointer; } .gds-widget-toggle { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; background: #196166; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 10; } .gds-widget-toggle:hover { transform: scale(1.1); background: #557173; } .gds-widget-toggle i { color: white; font-size: 14px; transition: transform 0.3s ease; } .gds-service-widget.minimized .gds-widget-toggle { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; } .gds-service-widget.minimized .gds-widget-toggle i { font-size: 18px; } .gds-widget-header { padding: 24px; background: #263031; color: white; opacity: 1; transition: opacity 0.3s ease; } .gds-service-widget.minimized .gds-widget-header { opacity: 0; pointer-events: none; } .gds-widget-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; } .gds-widget-subtitle { font-size: 13px; opacity: 0.85; line-height: 1.4; } .gds-emergency-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.15); padding: 5px 10px; border-radius: 20px; margin-top: 10px; font-size: 11px; font-weight: 500; } .gds-emergency-badge i { font-size: 10px; animation: gdsPulse 2s infinite; } @keyframes gdsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .gds-widget-content { padding: 20px; max-height: 380px; overflow-y: auto; opacity: 1; transition: opacity 0.3s ease; background: #EEF3F4; } .gds-service-widget.minimized .gds-widget-content { opacity: 0; pointer-events: none; } .gds-services-loading { text-align: center; padding: 40px 20px; color: #557173; font-size: 14px; } .gds-services-loading i { font-size: 24px; margin-bottom: 10px; animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .gds-service-item { background: white; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; text-decoration: none; display: flex; align-items: center; gap: 12px; color: inherit; } .gds-service-item:hover { transform: translateX(-3px); box-shadow: 0 4px 12px rgba(25, 97, 102, 0.08); border-color: #196166; } .gds-service-item.emergency { background: #196166; color: white; border-color: #196166; } .gds-service-item.emergency:hover { background: #557173; border-color: #557173; } .gds-service-icon { width: 32px; height: 32px; background: #EEF3F4; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gds-service-item.emergency .gds-service-icon { background: rgba(255, 255, 255, 0.2); } .gds-service-icon i { font-size: 14px; color: #263031; } .gds-service-item.emergency .gds-service-icon i { color: white; } .gds-service-name { font-size: 13px; font-weight: 500; line-height: 1.3; flex: 1; color: #263031; } .gds-service-item.emergency .gds-service-name { color: white; } .gds-service-arrow { color: #196166; font-size: 12px; opacity: 0; transform: translateX(-5px); transition: all 0.2s ease; } .gds-service-item:hover .gds-service-arrow { opacity: 1; transform: translateX(0); } .gds-service-item.emergency .gds-service-arrow { color: white; } .gds-service-category { font-size: 10px; font-weight: 600; color: #557173; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 10px; padding-left: 4px; opacity: 0.7; } .gds-service-category:first-child { margin-top: 0; } .gds-widget-cta { padding: 16px 20px; background: #CAD9DB; opacity: 1; transition: opacity 0.3s ease; } .gds-service-widget.minimized .gds-widget-cta { opacity: 0; pointer-events: none; } .gds-cta-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; background: #196166; color: white; text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; } .gds-cta-button:hover { background: #557173; transform: translateY(-1px); } .gds-cta-button i { font-size: 14px; } .gds-widget-content::-webkit-scrollbar { width: 5px; } .gds-widget-content::-webkit-scrollbar-track { background: #CAD9DB; border-radius: 3px; } .gds-widget-content::-webkit-scrollbar-thumb { background: #196166; border-radius: 3px; } @media (max-width: 480px) { .gds-service-widget { right: 15px; top: 15px; width: calc(100vw - 30px); } } @keyframes gdsSlideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } `; class FooterServicesWidget { constructor() { this.widget = null; this.services = []; this.isMinimized = false; this.observer = null; this.showTimeout = null; this.servicesLoaded = false; this.retryCount = 0; this.maxRetries = 10; } init() { console.log('Services Widget: Initializing'); // Load FontAwesome this.loadFontAwesome(); // Inject styles once this.injectStyles(); // Try to load cached services first this.loadCachedServices(); // If we have cached services, create widget immediately if (this.servicesLoaded) { this.createWidget(); this.showTimeout = setTimeout(() => this.showWidget(), CONFIG.widgetDelay); } else { // Otherwise, wait for footer to load this.waitForFooter(); } } waitForFooter() { // Check if footer exists const footer = document.querySelector(CONFIG.footerSelector); if (footer) { console.log('Services Widget: Found footer, extracting services'); this.extractServicesFromFooter(footer); if (this.services.length > 0) { this.servicesLoaded = true; this.cacheServices(); this.createWidget(); this.showTimeout = setTimeout(() => this.showWidget(), CONFIG.widgetDelay); } } else if (this.retryCount < this.maxRetries) { // Retry after a short delay this.retryCount++; console.log(`Services Widget: Footer not found, retrying... (${this.retryCount}/${this.maxRetries})`); setTimeout(() => this.waitForFooter(), 500); } else { // Set up observer as last resort console.log('Services Widget: Setting up observer for footer'); this.setupObserver(); } } setupObserver() { if (this.servicesLoaded) return; this.observer = new MutationObserver((mutations) => { if (!this.servicesLoaded) { const footer = document.querySelector(CONFIG.footerSelector); if (footer) { console.log('Services Widget: Footer appeared, extracting services'); this.extractServicesFromFooter(footer); if (this.services.length > 0) { this.servicesLoaded = true; this.cacheServices(); this.createWidget(); this.showTimeout = setTimeout(() => this.showWidget(), CONFIG.widgetDelay); // Stop observing this.observer.disconnect(); this.observer = null; } } } }); this.observer.observe(document.body, { childList: true, subtree: true }); } extractServicesFromFooter(footer) { this.services = []; const serviceLinks = footer.querySelectorAll(CONFIG.footerLinkSelector); console.log(`Services Widget: Found ${serviceLinks.length} service links in footer`); serviceLinks.forEach(link => { const href = link.getAttribute('href'); const name = link.textContent.trim(); if (href && name) { this.services.push({ name: name, href: href, category: this.categorizeService(name) }); } }); } loadCachedServices() { try { const cached = sessionStorage.getItem(CONFIG.storageKey); if (cached) { this.services = JSON.parse(cached); this.servicesLoaded = true; console.log('Services Widget: Loaded cached services:', this.services.length); } } catch (e) { console.log('Services Widget: No cached services found'); } } cacheServices() { try { sessionStorage.setItem(CONFIG.storageKey, JSON.stringify(this.services)); console.log('Services Widget: Cached services for session'); } catch (e) { console.warn('Services Widget: Could not cache services', e); } } loadFontAwesome() { const existingFA = document.querySelector('link[href*="font-awesome"], link[href*="fontawesome"]'); if (!existingFA) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = CONFIG.fontAwesomeUrl; document.head.appendChild(link); } } injectStyles() { if (document.getElementById('gds-widget-styles')) return; const styleSheet = document.createElement('style'); styleSheet.id = 'gds-widget-styles'; styleSheet.textContent = WIDGET_STYLES; document.head.appendChild(styleSheet); } categorizeService(serviceName) { const nameLower = serviceName.toLowerCase(); if (nameLower.includes('24 hour') || nameLower.includes('emergency')) { return 'emergency'; } else if (nameLower.includes('installation') && !nameLower.includes('repair')) { return 'installation'; } else if (nameLower.includes('maintenance') || nameLower.includes('lube') || nameLower.includes('tune')) { return 'maintenance'; } else { return 'repair'; } } getServiceIcon(serviceName) { const nameLower = serviceName.toLowerCase(); for (const [keyword, icon] of Object.entries(SERVICE_ICONS)) { if (nameLower.includes(keyword)) { return icon; } } return 'fa-cog'; } createWidget() { // Don't recreate if already exists if (this.widget) return; console.log('Services Widget: Creating widget with', this.services.length, 'services'); const widget = document.createElement('div'); widget.className = 'gds-service-widget'; widget.id = 'gdsServiceWidget'; // Build widget HTML widget.innerHTML = ` `; document.body.appendChild(widget); this.widget = widget; // Add click handler for toggle const toggleBtn = widget.querySelector('.gds-widget-toggle'); toggleBtn.addEventListener('click', () => this.toggleWidget()); // Store reference globally window.gdsWidget = this; } hasEmergencyService() { return this.services.some(s => s.category === 'emergency'); } buildServicesList() { if (this.services.length === 0) { return `

Loading services...

`; } // Group services by category const categories = { 'emergency': [], 'repair': [], 'installation': [], 'maintenance': [] }; this.services.forEach(service => { if (categories[service.category]) { categories[service.category].push(service); } }); // Build HTML let html = ''; Object.entries(categories).forEach(([category, categoryServices]) => { if (categoryServices.length > 0) { // Add category header (except for emergency) if (category !== 'emergency') { html += `

${category.toUpperCase()}

`; } // Add services categoryServices.forEach(service => { const isEmergency = category === 'emergency'; const icon = this.getServiceIcon(service.name); html += `

${service.name}

`; }); } }); return html; } showWidget() { if (this.widget) { this.widget.classList.add('visible'); console.log('Services Widget: Widget is now visible'); } } toggleWidget() { if (this.widget) { this.widget.classList.toggle('minimized'); this.isMinimized = !this.isMinimized; } } destroy() { if (this.observer) { this.observer.disconnect(); } if (this.showTimeout) { clearTimeout(this.showTimeout); } if (this.widget) { this.widget.remove(); } } } // Initialize widget const footerWidget = new FooterServicesWidget(); // Wait for DOM to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => footerWidget.init()); } else { footerWidget.init(); } // Expose destroy method for cleanup if needed window.gdsWidgetDestroy = () => footerWidget.destroy(); })();

Our Services

SHOWCASE

Our Projects

Sleek Brown Paneled Garage Door Installation