https://www.campaignasia.com/HbmCoreTheme/js/core.js?v=JXixfWnrDhqfyigEqNZXZC571lyECxb8mg1cJN_rv-M

1// TO DO:- Will splits functions into separte components JS files
2
3document.addEventListener('DOMContentLoaded', () => {
4    const header = document.querySelector('.header__container');
5    const topBrandMenu = document.querySelector('#brandMenu');
6    const stickyBrandMenu = document.querySelector(".header__brandMenuSticky");
7    const topBrandLogo = document.querySelector('.header__brandLogo');
8    const siteMenu = document.querySelector("#siteMenu");
9    
10    
11    const primaryNav = document.querySelector('.header__mainMenu #primaryNav');
12    const searchFields = document.querySelector('.header__siteSearch');
13    const headerSiteLogo = document.querySelector(".header__siteLogo");
14    const mastHead = document.querySelector("#masthead");
15    
16    
17    
18
19    initAccordion();
20
21
22    // register page  logic
23    var registerPage = document.querySelector('.registerPage') ? true : false;
24    if (document.querySelector('.myaccountPage')) {
25        registerPage = false;
26    }
27
28    const allFocusable = document.querySelectorAll("a, button, input, textarea, select, [tabindex]"); // Include all interactive elements
29
30    document.addEventListener("keydown", (event) => {
31        if (event.key === "Escape") {
32            const focusedElement = document.activeElement;
33
34            if (focusedElement && focusedElement !== document.body) {
35                focusedElement.blur(); // Remove focus from any focused element
36                moveToNextFocusable(); // Move to the next focusable element
37            }
38        }
39    });
40
41    // Function to move focus to the next element outside the currently focused element
42    function moveToNextFocusable() {
43        const focusedIndex = Array.from(allFocusable).indexOf(document.activeElement);
44
45        if (focusedIndex !== -1 && focusedIndex + 1 < allFocusable.length) {
46            allFocusable[focusedIndex + 1].focus();
47        } else {
48            document.body.focus(); // If there's no next element, focus the body
49        }
50    }
51
52    // function to show/hide accordion on gating page
53    function initAccordion() {
54        const toggleHeader = document.querySelector('.trouble-signin .toggle-header');
55        const toggleContent = document.querySelector('.trouble-signin .toggle-content');
56        const caret = document.querySelector('.trouble-signin .caret');
57
58        if (!toggleHeader || !toggleContent || !caret) return;
59
60        toggleHeader.addEventListener('click', () => {
61            toggleContent.classList.toggle('is-open');
62            caret.classList.toggle('is-rotated');
63        });
64    }
65
66});
67
68// Bulletin unsubscribe script
69document.getElementById('unsubscribeForm')?.addEventListener('submit', async function (e) {
70    e.preventDefault();
71
72    const email = document.getElementById('userEmail').value.trim();
73    const checkbox = document.getElementById('checkToUnsubscribe').checked;
74    const externalProviderId = document.getElementById('externalProviderId').value;
75    const apiUrl = document.getElementById('bulletinApiUrl').value;
76    const submitBtn = e.target.querySelector('button[type="submit"]');
77    const token = $('input[name="__RequestVerificationToken"]').val();
78
79    let valid = true;
80
81    // Email validation
82    if (!email) {
83        document.getElementById('warningMsg-email').style.display = 'block';
84        valid = false;
85    } else {
86        document.getElementById('warningMsg-email').style.display = 'none';
87    }
88
89    // Checkbox validation
90    if (!checkbox) {
91        document.getElementById('warningMsg-checkbox').style.display = 'block';
92        valid = false;
93    } else {
94        document.getElementById('warningMsg-checkbox').style.display = 'none';
95    }
96
97    if (!valid) return;
98
99    const payload = {
100        emailAddress: email,
101        subscribebulletinsIds: [],
102        unSubscribebulletinsIds: [externalProviderId]
103    };
104
105    try {
106        submitBtn.disabled = true;
107        submitBtn.innerText = "Unsubscribing...";
108
109        const response = await fetch(apiUrl, {
110
111            method: 'POST',
112            headers: {
113                'Content-Type': 'application/json',
114                'RequestVerificationToken': token
115            },
116            body: JSON.stringify(payload)
117        });
118        console.log(response);
119
120        if (response.ok) {
121            document.querySelector('.bulletinUnsubscribe-container_form').style.display = 'none';
122
123            document.querySelectorAll('.show_on_load').forEach(el => el.style.display = 'none');
124
125            document.querySelectorAll('.show_on_success').forEach(el => el.style.display = 'block');
126        } else {
127            const data = await response.json().catch(() => null);
128            console.log('Unsubscribe failed:', data);
129
130            const messageElement = document.getElementById("bulletinUnsubscribe-message");
131            if (messageElement) {
132                messageElement.textContent = data?.message || "Unsubscribe failed: Please try again.";
133                messageElement.style.color = "red";
134            }
135        }
136    } catch (err) {
137        console.error(err);
138        alert('Error while unsubscribing.');
139    } finally {
140        if (document.querySelector('.bulletinUnsubscribe-container_form').style.display !== 'none') {
141            submitBtn.disabled = false;

142            submitBtn.innerText = "Unsubscribe";
143        }
144    }
145});
146
147
148// Advertising Scripts - setSiteWallpaper
149function setSiteWallpaper() {
150    console.log("setSiteWallpaper called");
151    
152    const windowWidth = $(window.parent).width();
153    const parentDoc = $(window.parent.document);
154    const swipeBody = document.querySelector("body");
155    const swipeRightNav = document.querySelector(".swipeNavigation .sidebar--right");
156    const swipeLeftNav = document.querySelector(".swipeNavigation .sidebar--left");
157
158    console.log("swipeBody", swipeBody);
159    console.log("swipeLeftNav", swipeLeftNav);
160    console.log("swipeRightNav", swipeRightNav);
161    
162    // Cache selectors
163    const $skyscrapers = parentDoc.find('#skyscraper_left, #skyscraper_right');
164    const $contentWrap = parentDoc.find('#outerWrap, #footerWrap #copyright.copyright--stretch');
165    
166    // Configuration object for breakpoints
167    const breakpoints = {
168        large: {
169            threshold: 1600,
170            contentWidth: 1240,
171            skyscraperWidth: (windowWidth - 1240) / 2
172        },
173        medium: {
174            threshold: 1260,
175            contentWidth: 1030,
176            skyscraperWidth: (windowWidth - 1030) / 2
177        }
178    };
179    
180    // Reset swipe padding helper
181    const resetSwipePadding = () => {
182        console.log("resetSwipePadding called");
183        if (swipeRightNav) swipeBody.style.paddingRight = "";
184        if (swipeLeftNav) swipeBody.style.paddingLeft = "";
185    };
186    
187    const setSwipePaddingZero = () => {
188        console.log("setSwipePaddingZero called");
189        if (swipeRightNav) swipeBody.style.paddingRight = "0";
190        if (swipeLeftNav) swipeBody.style.paddingLeft = "0";
191    };
192    
193    // Apply layout based on breakpoint
194    if (windowWidth > breakpoints.large.threshold) {
195        const bp = breakpoints.large;
196        $skyscrapers.css({
197            width: `${bp.skyscraperWidth}px`,
198            marginTop: "0",
199            display: "block"
200        });
201        $contentWrap.css({
202            maxWidth: `${bp.contentWidth}px`,
203            marginLeft: "auto",
204            marginRight: "auto",
205            left: "0",
206            right: "0"
207        });
208        setSwipePaddingZero();
209        
210    } else if (windowWidth > breakpoints.medium.threshold) {
211        const bp = breakpoints.medium;
212        $skyscrapers.css({
213            width: `${bp.skyscraperWidth}px`,
214            marginTop: "0",
215            display: "block"
216        });
217        $contentWrap.css({
218            maxWidth: `${bp.contentWidth}px`,
219            marginLeft: "auto",
220            marginRight: "auto",
221            left: "0",
222            right: "0"
223        });
224        
225        // Call resNav functions if available
226        const resNav = window.parent.resNav;
227        if (resNav && typeof resNav === "object") {
228            if (typeof resNav.responsiveResize === "function") {
229                resNav.responsiveResize();
230            }
231            if (typeof resNav.desktop === "function") {
232                resNav.desktop();
233            }
234        }
235        setSwipePaddingZero();
236        
237    } else {
238        // Mobile/small screens - hide skyscrapers and reset styles
239        $skyscrapers.css({ display: "none" });
240        $contentWrap.css({
241            maxWidth: "",
242            marginLeft: "",
243            marginRight: "",
244            left: "",
245            right: ""
246        });
247        resetSwipePadding();
248    }
249    
250    // Set global flags
251    $('body').addClass('advertLoaded');
252    $('#marketingBanner').css('display', 'none');
253    window.parent.wallpaperRunning = true;
254}
255
256// for skip navigation
257(function () {
258    const mainHeader = document.querySelector('.header__container');
259    const brandHeader = document.querySelector('.nav--brand');
260    const skipNav = document.querySelector('.skipToLink__container');
261
262    if (!mainHeader || !skipNav) return;
263
264    function getHeaderHeight() {
265        let totalHeight = 0;
266
267
268        totalHeight += mainHeader.getBoundingClientRect().height;
269        if (brandHeader) {
270            const style = window.getComputedStyle(brandHeader);
271
272            if (style.display !== 'none') {
273                totalHeight += brandHeader.getBoundingClientRect().height;
274            }
275        }
276
277        console.log("totalHeight", totalHeight);
278
279        return totalHeight;
280    }
281
282    function handleSkipScroll() {
283        const rawHash = window.location.hash;
284        if (!rawHash) return;
285
286        const normalizedHash = rawHash.replace(/^#\/?/, '#');
287        const target = document.querySelector(normalizedHash);
288        if (!target) return;
289
290        const headerHeight = getHeaderHeight();
291        const targetTop =
292            target.getBoundingClientRect().top + window.pageYOffset;
293
294        window.scrollTo({
295            top: targetTop - headerHeight - 8,
296            behavior: 'smooth'
297        });
298
299        // accessibility focus
300        target.setAttribute('tabindex', '-1');

301        target.focus({ preventScroll: true });
302    }
303
304    window.addEventListener('hashchange', handleSkipScroll);
305
306    document.addEventListener('DOMContentLoaded', function () {
307        setTimeout(handleSkipScroll, 50);
308    });
309})();
310
311(function () {
312    // Wait until full page load
313    window.addEventListener('load', () => {
314        document.querySelector('.header__mainMenu')
315            .style.pointerEvents = 'auto'; // re-enable interaction
316    });
317})();