https://maritime-executive.com/js/logo-fix.js?v=v2025.09.29.011646

1/**
2 * Logo Fix - Ensure logo images maintain correct sizing
3 * Fixes issues with aspect-ratio styling affecting logos
4 */
5
6(function () {
7    'use strict';
8
9    // Logo fix configuration
10    const config = {
11        debug: window.location.hostname.includes('dev') || window.location.hostname.includes('localhost'),
12        logoSelectors: [
13            '.logo img',
14            'img[src*="marexlogo"]',
15            'img[src*="logo"]',
16            'img[alt*="Logo"]',
17            'img[alt*="logo"]'
18        ]
19    };
20
21    class LogoFix {
22        constructor() {
23            this.init();
24        }
25
26        init() {
27            this.log('Logo Fix initializing...');
28
29            // Fix logos immediately if DOM is ready
30            this.fixLogoSizing();
31
32            // Watch for dynamically added logos
33            this.watchForDynamicLogos();
34
35            // Fix on resize to handle responsive changes
36            this.handleResize();
37        }
38
39        /**
40         * Fix logo sizing issues
41         */
42        fixLogoSizing() {
43            config.logoSelectors.forEach(selector => {
44                const logos = document.querySelectorAll(selector);
45                logos.forEach(logo => this.restoreNaturalLogoSize(logo));
46            });
47        }
48
49        /**
50         * Restore natural logo size and aspect ratio
51         */
52        restoreNaturalLogoSize(logoImg) {
53            if (!logoImg) return;
54
55            try {
56                // Remove any forced aspect ratio
57                logoImg.style.aspectRatio = '';
58                logoImg.style.objectFit = '';
59
60                // Ensure responsive behavior
61                if (!logoImg.style.maxWidth) {
62                    logoImg.style.maxWidth = '100%';
63                }
64
65                if (!logoImg.style.height) {
66                    logoImg.style.height = 'auto';
67                }
68
69                // For Maritime Executive logo specifically
70                if (logoImg.src.includes('marexlogo')) {
71                    // Reset any conflicting styles
72                    logoImg.removeAttribute('width');
73                    logoImg.removeAttribute('height');
74
75                    // Apply natural sizing
76                    logoImg.style.width = 'auto';
77                    logoImg.style.maxWidth = '100%';
78                    logoImg.style.height = 'auto';
79                    logoImg.style.aspectRatio = 'unset';
80                    logoImg.style.objectFit = 'unset';
81
82                    this.log('Fixed Maritime Executive logo sizing:', logoImg.src);
83                }
84
85                // Add a class to prevent future interference
86                logoImg.classList.add('logo-fixed');
87
88                this.log('Logo sizing restored:', logoImg.src);
89
90            } catch (error) {
91                this.log('Error fixing logo:', error);
92            }
93        }
94
95        /**
96         * Watch for dynamically added logos
97         */
98        watchForDynamicLogos() {
99            if (window.MutationObserver) {
100                const observer = new MutationObserver((mutations) => {
101                    mutations.forEach((mutation) => {
102                        mutation.addedNodes.forEach((node) => {
103                            if (node.nodeType === 1) { // Element node
104                                // Check if the added node is a logo
105                                config.logoSelectors.forEach(selector => {
106                                    if (node.matches && node.matches(selector)) {
107                                        this.restoreNaturalLogoSize(node);
108                                    }
109
110                                    // Check for logos within the added node
111                                    const logos = node.querySelectorAll && node.querySelectorAll(selector);
112                                    if (logos) {
113                                        logos.forEach(logo => this.restoreNaturalLogoSize(logo));
114                                    }
115                                });
116                            }
117                        });
118                    });
119                });
120
121                observer.observe(document.body, {
122                    childList: true,
123                    subtree: true
124                });
125
126                this.log('Watching for dynamic logos');
127            }
128        }
129
130        /**
131         * Handle window resize events
132         */
133        handleResize() {
134            let resizeTimeout;
135            window.addEventListener('resize', () => {
136                clearTimeout(resizeTimeout);
137                resizeTimeout = setTimeout(() => {
138                    this.fixLogoSizing();
139                }, 250);
140            });
141        }
142
143        /**
144         * Debug logging
145         */
146        log(...args) {
147            if (config.debug) {
148                console.log('[Logo Fix]', ...args);
149            }
150        }
151    }
152
153    // Initialize immediately or when DOM is ready
154    if (document.readyState === 'loading') {
155        document.addEventListener('DOMContentLoaded', () => {
156            new LogoFix();
157        });
158    } else {
159        new LogoFix();
160    }
161
162    // Also run on window load as a fallback
163    window.addEventListener('load', () => {
164        new LogoFix();
165    });
166
167})();