impress/app/javascript/item-page.js
Emi Matchu 68578aa929 Fix the two-line case for show more/less
I made two mistakes here! One is that you need to round up subpixel
line heights, and the other is that `clientHeight` is what I want, I
shouldn't include the margin!
2024-01-19 04:35:44 -08:00

41 lines
1.3 KiB
JavaScript

import React from "react";
import ReactDOM from "react-dom";
import { AppProvider, ItemPageOutfitPreview } from "./wardrobe-2020";
const rootNode = document.querySelector("#outfit-preview-root");
const itemId = rootNode.getAttribute("data-item-id");
// TODO: Use the new React 18 APIs instead!
// eslint-disable-next-line react/no-deprecated
ReactDOM.render(
<AppProvider>
<ItemPageOutfitPreview itemId={itemId} />
</AppProvider>,
rootNode,
);
try {
const tradeHangers = document.querySelector("#trade-hangers");
const tradeSections = document.querySelectorAll("#trade-hangers p");
for (const section of tradeSections) {
const oneLine = parseFloat(getComputedStyle(section)['line-height']);
const maxHeight = Math.ceil(oneLine * 2);
if (section.clientHeight > maxHeight) {
section.style.maxHeight = `${maxHeight}px`;
section.setAttribute("data-overflows", "");
}
section.querySelector(".more")?.addEventListener("click", (event) => {
section.setAttribute("data-showing-more", "");
section.style.maxHeight = "none";
});
section.querySelector(".less")?.addEventListener("click", (event) => {
section.removeAttribute("data-showing-more");
section.style.maxHeight = `${maxHeight}px`;
});
}
} catch (error) {
console.error("Error applying trade list more/less toggle", error);
}