https://cascade-prod.static.wm.edu/_shared/static/js/_js-imports/page_nav_adjust_height.js

1// this file includes exported page_nav_adjust_height() function 
2// and internal page_nav_resize_observer() function
3
4/* =============================================================
5FUNCTION page_nav_adjust_height()
6
7- If body width is greater than 930, adjust page navigation's height; otherwise, set content's minimum height as zero.
8
9================================================================= */
10
11const { runTests, addCheck } = await import('./_run_tests_var.js');
12const { CONTENT_ELEMENT, 
13        PAGENAV, 
14        EXTRANAV, 
15        SOCIALMEDIA_WRAPPER, 
16        MOBILE_PAGENAV_BUTTON, 
17        WM_PAGE_MENU } = await import('./page_nav_variables.js');
18        
19
20export function page_nav_adjust_height() {
21    // this variable should match the $maincontent-bottom-spacing variable found in wm_spacing.scss
22    let maincontent_bottom_spacing = 44;
23    if (CONTENT_ELEMENT) {
24        if (window.innerWidth > 930) {
25
26            if (PAGENAV) {
27                var pagenavheight = PAGENAV.offsetHeight;
28                CONTENT_ELEMENT.style.minHeight = pagenavheight + maincontent_bottom_spacing + "px";
29
30                // Added test
31                if (runTests) {
32                    if (parseInt(CONTENT_ELEMENT.style.minHeight) != pagenavheight + maincontent_bottom_spacing) {
33                        console.log("Test failed - incorrect min-height set");
34                        addCheck('setMinHeight', false)
35                    } else {
36                        addCheck('setMinHeight');
37                    }
38                }
39            }
40        } else {
41            CONTENT_ELEMENT.style.minHeight = 0;
42
43            if (runTests) {
44                if (parseInt(CONTENT_ELEMENT.style.minHeight) != 0) {
45                    console.log("Test failed - min-height not set to 0");
46                    addCheck('removeMinHeight', false)
47                } else {
48                    addCheck('removeMinHeight');
49                }
50            }
51        }
52    }
53}
54
55
56/* =============================================================
57FUNCTION page_nav_resize_observer
58
59Add observer to page nav divs and run pageNav_adjustHeight() again when the a div size changes (this can happen when custom fonts finish)
60================================================================= */
61function page_nav_resize_observer() {
62    const myObserver = new ResizeObserver(entries => {
63        entries.forEach(entry => {
64            page_nav_adjust_height();
65            console.log('resize observed');
66        });
67    });
68    // TODO: CHECK IF ALL OF THESE ARE NEEDED
69    const pmenu = document.querySelector('.wm-page_menu');
70    const smnav = document.querySelector('.social-media-nav');
71    const enav = document.querySelector('.extra-nav');
72    if (pmenu) { myObserver.observe(pmenu); }
73    if (smnav) { myObserver.observe(smnav); }
74    if (enav) { myObserver.observe(enav); }
75
76}
77