https://somersetnlv.org/apps-shared/encms/encms-public.js?acn=384110

1class ENResponsiveDiv extends HTMLDivElement {
2	static #responsiveDivs = new Set();
3
4	static #initClass = (function() {
5		customElements.define("en-responsive-div", ENResponsiveDiv, { extends: "div" });
6		window.addEventListener("resize", function (e) {
7			ENResponsiveDiv.#responsiveDivs.forEach(function (responsiveDiv) {
8				responsiveDiv.enRender();
9			});
10		});
11		if (!(document.createElement("div", { is: "en-responsive-div" }) instanceof ENResponsiveDiv)) { //safari
12			document.querySelectorAll("div[is='en-responsive-div']").forEach(function (div) {
13				if (!(div instanceof ENResponsiveDiv)) {
14					ENResponsiveDiv.initElement(div);
15				}
16			});
17		}
18	})();
19	
20	static get observedAttributes() {
21		return ['style'];
22	}
23	
24	constructor() {
25		super();
26		if (this.isConnected) {
27			ENResponsiveDiv.initElement(this);
28		}
29	}
30
31    static initElement(element) {
32		ENResponsiveDiv.#responsiveDivs.add(element);
33		let shadowRoot = element.attachShadow({ mode: 'closed' });
34		shadowRoot.innerHTML = `
35			<style>
36			slot {
37				width: 100%; height: 100%;
38				display: inline-block; transform-origin: 0 0; transform: scale(var(--scale, 1));
39			}
40			</style>
41			<slot />
42		`;
43
44		let hostStyleSheet = document.createElement("style");
45        hostStyleSheet.innerHTML = `:host { max-height: var(--max-height, calc(var(--orig-height) * var(--scale, 1)))  !important; }`;

46		shadowRoot.prepend(hostStyleSheet);
47		let hostCssRule = hostStyleSheet.sheet.cssRules[0];
48
49        // Accept only pure numeric px like "123px" or "123.45px"
50        const isNumericPx = (val) => /^\d+(\.\d+)?px$/i.test(val);
51
52        let origWidth, origHeight = 0;
53        let scale = 1;
54        element.enRender = function (syncOrigDimensions) {
55            const elementWidth = (element.style.width || '').trim();
56            const elementHeight = (element.style.height || '').trim();
57
58            const isWidthNumeric = isNumericPx(elementWidth);
59            const isHeightNumeric = isNumericPx(elementHeight);
60
61            if (syncOrigDimensions) {
62                origWidth = isWidthNumeric ? parseFloat(elementWidth) : 0;
63                hostCssRule.style.setProperty("--orig-width", isWidthNumeric ? `${origWidth}px` : (elementWidth || "auto"));
64
65                origHeight = isHeightNumeric ? parseFloat(elementHeight) : 0;
66                hostCssRule.style.setProperty("--orig-height", isHeightNumeric ? `${origHeight}px` : (elementHeight || "auto"));
67
68                if (!isWidthNumeric || !isHeightNumeric) {
69                    hostCssRule.style.setProperty("--max-height", "none");
70                }
71            }
72
73            const elementMaxWidth = window.getComputedStyle(element).maxWidth;
74
75            // width: 240px;, width: 240;
76            // not 100%, 50vw ... relative units
77            const case1 = isWidthNumeric && origWidth > 0;
78
79            // max-width: 100%; and height: auto;
80            const case2 = !(elementMaxWidth && !isHeightNumeric);
81
82            if (case1 && case2) {
83                const renderedWidth = parseFloat(window.getComputedStyle(element).width);
84                const newScale = renderedWidth / origWidth;
85
86                if (isFinite(newScale) && newScale > 0) {
87                    scale = Math.min(1, newScale);
88                    hostCssRule.style.setProperty("--scale", scale);
89                }
90                // else → CSS fallback var(--scale, 1) will apply
91            }
92        };
93
94		Object.defineProperty(element, "enScale", {
95			get() {
96				return scale;
97			}
98		});
99
100		if (!(element instanceof ENResponsiveDiv)) {
101			element.enRender(true);
102		}
103	};
104	
105	attributeChangedCallback(name, oldValue, newValue) {
106        if (this.enRender && oldValue !== newValue) {
107			this.enRender(true);
108		}
109	}
110}