https://www.zhaw.ch/_assets/476334098594ac1462978859d8e2ba19/JavaS…/NewsEventListColCalculator.js?1790690348

1/**
2 * Copies H1 indentation and width into two column helper elements:
3 *  - .first-col-width  gets the computed margin-left of the H1 as its width
4 *  - .second-col-width gets the measured width of the H1 as its width
5 *
6 * Updates on window resize. Values are only applied when viewport >= 992px.
7 */
8(() => {
9    const MIN_WIDTH_QUERY = "(min-width: 992px)";
10
11    // Adjust if needed
12    const H1_SELECTOR = "main h1";
13    const FIRST_COL_SELECTOR = ".first-col-width";
14    const SECOND_COL_SELECTOR = ".second-col-width";
15
16    const mq = window.matchMedia(MIN_WIDTH_QUERY);
17
18    let requestAnimationFrameId = null;
19
20    const pxToNumber = (value) => {
21        const n = Number.parseFloat(value || "0");
22        return Number.isFinite(n) ? n : 0;
23    };
24
25    const clearWidths = (firstCols, secondCols) => {
26        firstCols.forEach((el) => el.style.removeProperty("width"));
27        secondCols.forEach((el) => el.style.removeProperty("width"));
28    };
29
30    const applyWidths = () => {
31        const h1 = document.querySelector(H1_SELECTOR);
32        const firstCols = document.querySelectorAll(FIRST_COL_SELECTOR);
33        const secondCols = document.querySelectorAll(SECOND_COL_SELECTOR);
34
35        // If there is nothing to do, exit early.
36        if (!h1 || (firstCols.length === 0 && secondCols.length === 0)) return;
37
38        // Only apply widths on desktop breakpoint, otherwise reset inline widths.
39        if (!mq.matches) {
40            clearWidths(firstCols, secondCols);
41            return;
42        }
43
44        const h1Style = window.getComputedStyle(h1);
45
46        // 1) H1 margin-left -> first column width
47        const h1MarginLeftPx = pxToNumber(h1Style.marginLeft);
48        firstCols.forEach((el) => {
49            el.style.width = `${h1MarginLeftPx}px`;
50        });
51
52        // 2) H1 width -> second column width
53        const h1WidthPx = h1.getBoundingClientRect().width;
54        secondCols.forEach((el) => {
55            el.style.width = `${h1WidthPx}px`;
56        });
57    };
58
59    const scheduleApplyWidths = () => {
60        if (requestAnimationFrameId) cancelAnimationFrame(requestAnimationFrameId);
61        requestAnimationFrameId = requestAnimationFrame(() => {
62            requestAnimationFrameId = null;
63            applyWidths();
64        });
65    };
66
67    // Run once on startup
68    if (document.readyState === "loading") {
69        document.addEventListener("DOMContentLoaded", scheduleApplyWidths);
70    } else {
71        scheduleApplyWidths();
72    }
73
74    // Recalculate on viewport resize
75    window.addEventListener("resize", scheduleApplyWidths, { passive: true });
76
77    // Recalculate when crossing the 992px breakpoint
78    if (typeof mq.addEventListener === "function") {
79        mq.addEventListener("change", scheduleApplyWidths);
80    } else if (typeof mq.addListener === "function") {
81        // Safari / older browsers
82        mq.addListener(scheduleApplyWidths);
83    }
84})();