/** * Cesar Garage Door Services Widget * Displays services in a floating 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, // Delay before showing widget (ms) ctaUrl: '/contact-us', // Default CTA URL ctaText: 'Get Free Quote', // Default CTA text }; // Cesar Garage Door Services const SERVICES = [ { name: 'Emergency Garage Door Repair', category: 'emergency' }, { name: 'Garage Door Repair', category: 'repair' }, { name: 'Garage Door Spring Repair', category: 'repair' }, { name: 'Garage Door Cable Repair', category: 'repair' }, { name: 'Garage Door Track Repair', category: 'repair' }, { name: 'Garage Door Opener Repair', category: 'repair' }, { name: 'Garage Door Installation', category: 'installation' }, { name: 'Garage Door Opener Installation', category: 'installation' }, { name: 'Garage Door Replacement', category: 'replacement' }, { name: 'Garage Door Panel Replacement', category: 'replacement' }, { name: 'Garage Door Spring Replacement', category: 'replacement' }, { name: 'Garage Door Opener Replacement', category: 'replacement' }, { name: 'Garage Door Roller Replacement', category: 'replacement' }, { name: 'Garage Door Maintenance', category: 'maintenance' }, { name: 'Garage Door Sensor Alignment', category: 'maintenance' } ]; // Service icon mapping const SERVICE_ICONS = { 'emergency': 'fa-exclamation-triangle', 'maintenance': 'fa-tools', 'sensor': 'fa-eye', 'alignment': 'fa-eye', 'opener installation': 'fa-plus-circle', 'opener repair': 'fa-screwdriver', 'opener replacement': 'fa-sync-alt', 'installation': 'fa-hammer', 'spring': 'fa-compress', 'cable': 'fa-link', 'track': 'fa-align-center', 'panel': 'fa-square', 'roller': 'fa-circle', 'repair': 'fa-wrench', 'replacement': 'fa-sync-alt' }; // Widget styles using Cesar's color scheme const WIDGET_STYLES = ` .cgds-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(2, 72, 115, 0.12); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; display: none; } .cgds-service-widget.visible { display: block; animation: cgdsSlideInRight 0.5s ease; } .cgds-service-widget.minimized { width: 60px; height: 60px; border-radius: 30px; cursor: pointer; } .cgds-widget-toggle { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; background: #024873; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 10; } .cgds-widget-toggle:hover { transform: scale(1.1); background: #727373; } .cgds-widget-toggle i { color: white; font-size: 14px; transition: transform 0.3s ease; } .cgds-service-widget.minimized .cgds-widget-toggle { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; } .cgds-service-widget.minimized .cgds-widget-toggle i { font-size: 18px; } .cgds-widget-header { padding: 24px; background: #727373; color: white; opacity: 1; transition: opacity 0.3s ease; } .cgds-service-widget.minimized .cgds-widget-header { opacity: 0; pointer-events: none; } .cgds-widget-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; } .cgds-widget-subtitle { font-size: 13px; opacity: 0.85; line-height: 1.4; } .cgds-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; } .cgds-emergency-badge i { font-size: 10px; animation: cgdsPulse 2s infinite; } @keyframes cgdsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .cgds-widget-content { padding: 20px; max-height: 380px; overflow-y: auto; opacity: 1; transition: opacity 0.3s ease; background: #E8F6F8; } .cgds-service-widget.minimized .cgds-widget-content { opacity: 0; pointer-events: none; } .cgds-services-loading { text-align: center; padding: 40px 20px; color: #727373; font-size: 14px; } .cgds-services-loading i { font-size: 24px; margin-bottom: 10px; animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .cgds-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; } .cgds-service-item:hover { transform: translateX(-3px); box-shadow: 0 4px 12px rgba(2, 72, 115, 0.08); border-color: #024873; } .cgds-service-item.emergency { background: #024873; color: white; border-color: #024873; } .cgds-service-item.emergency:hover { background: #727373; border-color: #727373; } .cgds-service-icon { width: 32px; height: 32px; background: #E8F6F8; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cgds-service-item.emergency .cgds-service-icon { background: rgba(255, 255, 255, 0.2); } .cgds-service-icon i { font-size: 14px; color: #024873; } .cgds-service-item.emergency .cgds-service-icon i { color: white; } .cgds-service-name { font-size: 13px; font-weight: 500; line-height: 1.3; flex: 1; color: #024873; } .cgds-service-item.emergency .cgds-service-name { color: white; } .cgds-service-arrow { color: #024873; font-size: 12px; opacity: 0; transform: translateX(-5px); transition: all 0.2s ease; } .cgds-service-item:hover .cgds-service-arrow { opacity: 1; transform: translateX(0); } .cgds-service-item.emergency .cgds-service-arrow { color: white; } .cgds-service-category { font-size: 10px; font-weight: 600; color: #727373; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 10px; padding-left: 4px; opacity: 0.7; } .cgds-service-category:first-child { margin-top: 0; } .cgds-widget-cta { padding: 16px 20px; background: #727373; opacity: 1; transition: opacity 0.3s ease; } .cgds-service-widget.minimized .cgds-widget-cta { opacity: 0; pointer-events: none; } .cgds-cta-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; background: #024873; color: white; text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; } .cgds-cta-button:hover { background: #727373; transform: translateY(-1px); } .cgds-cta-button i { font-size: 14px; } .cgds-widget-content::-webkit-scrollbar { width: 5px; } .cgds-widget-content::-webkit-scrollbar-track { background: #727373; border-radius: 3px; } .cgds-widget-content::-webkit-scrollbar-thumb { background: #024873; border-radius: 3px; } @media (max-width: 480px) { .cgds-service-widget { right: 15px; top: 15px; width: calc(100vw - 30px); } } @keyframes cgdsSlideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } `; class CesarGarageDoorWidget { constructor() { this.widget = null; this.services = SERVICES; this.isMinimized = false; this.showTimeout = null; } init() { console.log('Cesar Garage Door Widget: Initializing'); // Load FontAwesome this.loadFontAwesome(); // Inject styles this.injectStyles(); // Create widget this.createWidget(); // Show widget after delay this.showTimeout = setTimeout(() => this.showWidget(), CONFIG.widgetDelay); } 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('cgds-widget-styles')) return; const styleSheet = document.createElement('style'); styleSheet.id = 'cgds-widget-styles'; styleSheet.textContent = WIDGET_STYLES; document.head.appendChild(styleSheet); } 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() { if (this.widget) return; console.log('Cesar Garage Door Widget: Creating widget with', this.services.length, 'services'); const widget = document.createElement('div'); widget.className = 'cgds-service-widget font-pairing-secondary'; widget.id = 'cgdsServiceWidget'; widget.innerHTML = ` `; document.body.appendChild(widget); this.widget = widget; // Add click handler for toggle const toggleBtn = widget.querySelector('.cgds-widget-toggle'); toggleBtn.addEventListener('click', () => this.toggleWidget()); // Store reference globally window.cgdsWidget = this; } hasEmergencyService() { return this.services.some(s => s.category === 'emergency'); } buildServicesList() { // Group services by category const categories = { 'emergency': [], 'repair': [], 'installation': [], 'replacement': [], '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); const href = `/services/${service.name.toLowerCase().replace(/\s+/g, '-')}`; html += `

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

Our Services

Sitemap