/** * Persistent Services Widget for SPA * Mobile: Compact banner with 24/7 emergency + quote CTA * Desktop: Full service list widget */ (function () { 'use strict'; // Configuration const CONFIG = { fontAwesomeUrl: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css', widgetDelay: 2000, ctaUrl: '/contact-us', emergencyUrl: '/24-hour-emergency-garage-door-services', footerSelector: '.grab-footer-links-services-list', footerLinkSelector: '.grab-footer-links-services-item-link', storageKey: 'gds_widget_services', dismissedKey: 'gds_widget_dismissed' }; // 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; bottom: 30px; right: 30px; width: 380px; max-width: calc(100vw - 60px); background: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(50, 73, 49, 0.12); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; border: 1px solid #dee3de; 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: #669f58; 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: #537053; } .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: #324931; 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: #f0f5f0; } .gds-service-widget.minimized .gds-widget-content { opacity: 0; pointer-events: none; } .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(50, 73, 49, 0.08); border-color: #669f58; } .gds-service-item.emergency { background: #669f58; color: white; border-color: #669f58; } .gds-service-item.emergency:hover { background: #537053; border-color: #537053; } .gds-service-icon { width: 32px; height: 32px; background: #f0f5f0; 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: #324931; } .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: #324931; } .gds-service-item.emergency .gds-service-name { color: white; } .gds-service-arrow { color: #669f58; 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: #537053; 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: #dee3de; 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: #669f58; color: white; text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; } .gds-cta-button:hover { background: #537053; transform: translateY(-1px); } .gds-cta-button i { font-size: 14px; } .gds-widget-content::-webkit-scrollbar { width: 5px; } .gds-widget-content::-webkit-scrollbar-track { background: #dee3de; border-radius: 3px; } .gds-widget-content::-webkit-scrollbar-thumb { background: #669f58; border-radius: 3px; } /* MOBILE BANNER STYLES */ @media (max-width: 768px) { .gds-service-widget { bottom: auto; top: 50%; right: 15px; left: auto; transform: translateY(-50%); width: 90%; max-width: 320px; border-radius: 12px; } .gds-service-widget.visible { animation: gdsSlideInRight 0.4s ease; } .gds-widget-toggle { top: 10px; right: 10px; width: 28px; height: 28px; } .gds-widget-toggle i { font-size: 12px; } .gds-widget-header { padding: 16px; text-align: center; } .gds-widget-title { font-size: 15px; margin-bottom: 0; } .gds-widget-subtitle { display: none; } .gds-emergency-badge { display: none; } .gds-widget-content { padding: 12px 16px 16px; max-height: none; overflow: visible; display: flex; flex-direction: column; gap: 10px; } .gds-service-item { margin-bottom: 0; padding: 14px; justify-content: center; } .gds-service-name { font-size: 13px; text-align: center; } .gds-service-arrow { display: none; } .gds-widget-cta { display: none; } .gds-service-widget.minimized { width: 50px; height: 50px; top: 50%; right: 15px; transform: translateY(-50%); } .gds-service-widget.minimized .gds-widget-toggle { width: 36px; height: 36px; } .gds-service-widget.minimized .gds-widget-toggle i { font-size: 16px; } } @keyframes gdsSlideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @media (max-width: 768px) { @keyframes gdsSlideInRight { from { transform: translateY(-50%) translateX(100px); opacity: 0; } to { transform: translateY(-50%) 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; this.currentUrl = window.location.href; } isPpcPage() { return window.location.pathname.includes('ppc/'); } init() { if (this.isPpcPage()) { console.log('Services Widget: Skipping init on PPC page'); return; } console.log('Services Widget: Initializing'); this.loadFontAwesome(); this.injectStyles(); this.loadCachedServices(); // Set up URL change detection for SPA this.setupUrlChangeDetection(); if (this.servicesLoaded) { this.createWidget(); this.showTimeout = setTimeout(() => this.showWidget(), CONFIG.widgetDelay); } else { this.waitForFooter(); } } setupUrlChangeDetection() { // Listen for popstate (browser back/forward) window.addEventListener('popstate', () => this.handleUrlChange()); // Override pushState and replaceState const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = (...args) => { originalPushState.apply(history, args); this.handleUrlChange(); }; history.replaceState = (...args) => { originalReplaceState.apply(history, args); this.handleUrlChange(); }; // Also listen for common SPA navigation events document.addEventListener('click', (e) => { const link = e.target.closest('a'); if (link && link.href && link.href.startsWith(window.location.origin)) { setTimeout(() => this.handleUrlChange(), 100); } }); } handleUrlChange() { const newUrl = window.location.href; if (newUrl !== this.currentUrl) { console.log('Services Widget: URL changed, resetting widget'); this.currentUrl = newUrl; // Clear dismissed state on mobile if (this.isMobile()) { sessionStorage.removeItem(CONFIG.dismissedKey); } // Reset and show widget again if (this.widget) { this.widget.classList.remove('minimized'); this.isMinimized = false; if (!this.widget.classList.contains('visible')) { this.showWidget(); } } } } waitForFooter() { 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) { this.retryCount++; console.log(`Services Widget: Footer not found, retrying... (${this.retryCount}/${this.maxRetries})`); setTimeout(() => this.waitForFooter(), 500); } else { 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); 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'; } isMobile() { return window.innerWidth <= 768; } getEmergencyService() { return this.services.find(s => s.category === 'emergency'); } createWidget() { 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'; const isMobile = this.isMobile(); const emergencyService = this.getEmergencyService(); if (isMobile) { // Mobile: Simple banner with 2 buttons (emergency first, then quote) widget.innerHTML = `

${emergencyService ? `

` : ''}

Get Free Quote

`; } else { // Desktop: Full service list widget.innerHTML = ` `; } document.body.appendChild(widget); this.widget = widget; const toggleBtn = widget.querySelector('.gds-widget-toggle'); toggleBtn.addEventListener('click', () => this.toggleWidget()); window.gdsWidget = this; } buildDesktopServicesList() { if (this.services.length === 0) { return `

Loading services...

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

${category.toUpperCase()}

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

${service.name}

`; }); } }); return html; } showWidget() { if (this.widget) { // On mobile, check if it was dismissed if (this.isMobile()) { const dismissed = sessionStorage.getItem(CONFIG.dismissedKey); if (dismissed) { console.log('Services Widget: Widget was dismissed on mobile, not showing'); return; } } 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; // Update icon based on state const toggleIcon = this.widget.querySelector('.gds-widget-toggle i'); if (toggleIcon) { if (this.isMinimized) { toggleIcon.className = 'fas fa-tools'; } else { toggleIcon.className = 'fas fa-times'; } } // On mobile, save dismissed state if (this.isMobile() && this.isMinimized) { sessionStorage.setItem(CONFIG.dismissedKey, 'true'); } } } destroy() { if (this.observer) { this.observer.disconnect(); } if (this.showTimeout) { clearTimeout(this.showTimeout); } if (this.widget) { this.widget.remove(); } } } const footerWidget = new FooterServicesWidget(); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => footerWidget.init()); } else { footerWidget.init(); } window.gdsWidgetDestroy = () => footerWidget.destroy(); })();

How Can We Help You Today?

Our Services

SHOWCASE

Our Projects

Broken Garage Door Spring? Fast, Affordable Help in the CSRA

New Garage Door Installations by GDS