Subgrid polyfill

gistfile1.txt

	subgridPolyfill(parent: HTMLElement, mode: "rows" | "columns") {
		const go = () => {
			const parentStyle = getComputedStyle(parent);
			if (parentStyle.display != "grid") return;
			const subgrids = Array.from(parent.children);
			
			for (const child of subgrids) {
				if (!(child instanceof HTMLElement)) throw new Error("child not instance of HtmlElement");
				if (mode == "rows") {
					child.style.gridTemplateRows = null;
					child.style.gridAutoRows = "0px";
				} else {
					child.style.gridTemplateColumns = null;
					child.style.gridAutoColumns = "0px";
				}
			}
			
			const sizes = [];
			for (const subgrid of subgrids) {
				const subgridStyle = getComputedStyle(subgrid);
				if (subgridStyle.display != "grid") continue;
				
				for (let i = 0; i < subgrid.children.length; i++) {
					if (sizes.length <= i) sizes.push(0);
					const element = subgrid.children[i];
					const elementStyle = getComputedStyle(element);
					const styleToPixels = (style: string | null): number => {
						if (style == null) style = "0px";
						return +style.substring(0, style.length - 2);
					};
					const elementSize = mode == "rows" ?
							element.scrollHeight + styleToPixels(elementStyle.marginTop) + styleToPixels(elementStyle.marginBottom) :
							element.scrollWidth + styleToPixels(elementStyle.marginLeft) + styleToPixels(elementStyle.marginRight);
					if (elementSize > sizes[i]) sizes[i] = elementSize;
				}
			}
			
			let sizesString = "";
			for (const size of sizes) {
				sizesString += size + "px ";
			}
			
			for (const child of subgrids) {
				if (!(child instanceof HTMLElement)) throw new Error("child not instance of HtmlElement");
				if (mode == "rows") {
					child.style.gridTemplateRows = sizesString;
					child.style.gridAutoRows = null;
				} else {
					child.style.gridTemplateColumns = sizesString;
					child.style.gridAutoColumns = null;
				}
			}
		};
		window.addEventListener("resize", go);
		this.sub(new Subscription(() => window.removeEventListener("resize", go)));
		go();
	}