https://license.gooutdoorsiowa.com/Scripts/ResizeListener.js?v=20260615013102

1/// Original JIRA ticket: 'ONE-52324 Footer Is Overlapping Page Content On / OnlineCheckout.aspx and / CheckoutComplete.aspx'
2/// Dmytro Lytvyn 03/11/2024
3/// This script is used to adjust the height of the main content area to fill the available screen space.
4
5const DOM_CHANGE_LIMIT = 100; // threshold for significant DOM changes
6const SIGNIFICANT_PIXEL_CHANGE = 35; // threshold for significant pixel change
7
8document.addEventListener("DOMContentLoaded", function () {
9    const throttledSetMainHeight = throttle(setMainHeight, 200);
10
11    // Set up resize event listener
12    window.addEventListener('resize', throttledSetMainHeight);
13
14    // Set up a MutationObserver to detect when the document height changes
15    let lastKnownDocumentHeight = document.documentElement.scrollHeight;
16
17    // Initialize a counter for significant DOM changes
18    let domChangeCounter = 0;
19
20    function shouldStopObserving() {
21        // Check if the number of changes has reached the threshold
22        return domChangeCounter >= DOM_CHANGE_LIMIT;
23    }
24
25    const observer = new MutationObserver(mutations => {
26        observer.disconnect(); // Stop observing temporarily
27
28        const newDocumentHeight = document.documentElement.scrollHeight;
29        window.requestAnimationFrame(() => {
30            if (document.documentElement.scrollHeight !== lastKnownDocumentHeight) {
31                lastKnownDocumentHeight = document.documentElement.scrollHeight;
32                throttledSetMainHeight(); // Update DOM here
33            }
34
35            domChangeCounter++; // Increment the change counter since we've detected and handled a change
36
37            // Check if we should stop observing
38            if (shouldStopObserving()) {
39                observer.disconnect();
40            } else {
41                observer.observe(document.body, { childList: true, subtree: true, attributes: true }); // Resume observation if the limit is not reached
42            }
43        });
44    });
45
46
47    const target = document.body; // The target node to observe
48    if (target) {
49        observer.observe(target, {
50            childList: true,
51            subtree: true,
52            attributes: true
53        });
54    }
55
56    setMainHeight(); // Initial call
57
58    // can only be used after the document is ready.
59    function setMainHeight() {
60        observer.disconnect();
61
62        document.getElementById("main").setAttribute("style", "height:unset");
63
64        var headerHeight = document.getElementById("masterHeader").offsetHeight;
65        var footerHeight = document.getElementById("FooterContent").offsetHeight;
66        var cookieBannerHeight = 0;
67        if ($('#cookieCMdiv').length) {
68            cookieBannerHeight = document.getElementById("cookieCMdiv").offsetHeight;
69        }
70        var mainHeight = document.getElementById("main").offsetHeight;
71        var headFootSum = headerHeight + footerHeight;
72
73        if (cookieBannerHeight > 0) {
74            headFootSum = headerHeight + footerHeight + cookieBannerHeight;
75        }
76
77        var availableScreen = ($(window).height()) - headFootSum;
78        var contentWrapperPadding = parseInt($("#contentWrapper").css('padding-top'));
79
80        if (mainHeight > 2500) {
81            contentWrapperPadding = contentWrapperPadding * 2;
82        }
83
84        // ONE-65902
85        let additionalPadding = 0;
86        if ($(window).width() <= 767) {
87            additionalPadding = 40;
88        }
89
90        if (mainHeight + contentWrapperPadding < availableScreen) {
91            if ($(window).width() > 767) {
92                availableScreen = availableScreen - 29.203;
93            }
94
95            document.getElementById("main").setAttribute("style", "height:" + availableScreen + "px");
96        }
97        else {
98            document.getElementById("main").setAttribute("style", "height:" + (mainHeight + contentWrapperPadding + additionalPadding) + "px");
99        }
100
101        if (!shouldStopObserving()) {
102            observer.observe(document.body, { childList: true, subtree: true, attributes: true }); // Only resume observation if conditions are not met to stop.
103        }
104    }
105
106    function throttle(func, limit) {
107        let lastFunc;
108        let lastRan;
109        return function () {
110            const context = this;
111            const args = arguments;
112            if (!lastRan) {

113                func.apply(context, args);
114                lastRan = Date.now();
115            } else {
116                clearTimeout(lastFunc);
117                lastFunc = setTimeout(function () {
118                    if ((Date.now() - lastRan) >= limit) {
119                        func.apply(context, args);
120                        lastRan = Date.now();
121                    }
122                }, limit - (Date.now() - lastRan));
123            }
124        }
125    }
126});