- B09 표 탭 안내 글 = 쓸모 있는 한 줄(lineHint) · 묶음 탭과 같은 줄임표 - B08 표 아래 안내 · 경고 줄 = footNote 한 줄 · 서버 알림은 한 줄로 이어 붙임 - 새 시험 test_236_1 · 창 높이별 창 끝까지 셈 헬퍼 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018jonfdxn1Xit9bdkNJpE4G
73 lines
2.3 KiB
JavaScript
73 lines
2.3 KiB
JavaScript
/* 236-1 — 표 아래 안내 글이 한 줄일 때 창 끝까지 셈(`ui_template_data_table.ts` fillViewport)이
|
|
* 창 크기마다 문서 맨 아래 = 창 끝(페이지 스크롤 0)이 되는지 단위검증 헬퍼. JSON 으로 냄. */
|
|
const fs = require("fs");
|
|
const path = require("path");
|
|
const ts = require(path.join(__dirname, "..", "..", "config", "node_modules", "typescript"));
|
|
|
|
const file = path.join(__dirname, "..", "..", "ui_template", "ui_template_data_table.ts");
|
|
const js = ts.transpileModule(fs.readFileSync(file, "utf8"), {
|
|
compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020 },
|
|
}).outputText;
|
|
|
|
const ONE_LINE = 18; // 안내 글 한 줄(caption 글꼴) 높이
|
|
const win = { innerHeight: 0, scrollY: 0, addEventListener() {}, removeEventListener() {} };
|
|
const observers = [];
|
|
class RO {
|
|
constructor(fn) {
|
|
observers.push(fn);
|
|
}
|
|
observe() {}
|
|
disconnect() {}
|
|
}
|
|
const el = (css = {}, height = 0) => ({
|
|
css,
|
|
height,
|
|
top: 0,
|
|
parentElement: null,
|
|
nextElementSibling: null,
|
|
isConnected: true,
|
|
style: {},
|
|
getBoundingClientRect() {
|
|
return { top: this.top, height: this.height };
|
|
},
|
|
});
|
|
const sty = (n) => ({
|
|
rowGap: n.css.rowGap ?? "normal",
|
|
paddingBottom: n.css.paddingBottom ?? "0px",
|
|
borderBottomWidth: n.css.borderBottomWidth ?? "0px",
|
|
marginBottom: n.css.marginBottom ?? "0px",
|
|
});
|
|
const box = { exports: {} };
|
|
new Function(
|
|
"exports",
|
|
"module",
|
|
"require",
|
|
"window",
|
|
"document",
|
|
"getComputedStyle",
|
|
"ResizeObserver",
|
|
js,
|
|
)(box.exports, box, (p) => (p.endsWith(".css") ? {} : require(p)), win, { body: null }, sty, RO);
|
|
|
|
const out = [];
|
|
for (const h of [1080, 768, 600]) {
|
|
win.innerHeight = h;
|
|
observers.length = 0;
|
|
// 문서: body(padding-bottom 8) > card(padding-bottom 12 · gap 8) > [표 칸][안내 한 줄]
|
|
const body = el({ paddingBottom: "8px" });
|
|
const card = el({ paddingBottom: "12px", rowGap: "8px" });
|
|
const root = el();
|
|
const hint = el({}, ONE_LINE);
|
|
card.parentElement = body;
|
|
root.parentElement = card;
|
|
hint.parentElement = card;
|
|
root.nextElementSibling = hint;
|
|
root.top = 200;
|
|
box.exports.fillViewport(root);
|
|
observers.forEach((fn) => fn());
|
|
const grow = parseFloat(root.style.maxHeight);
|
|
const below = box.exports.spaceBelow(root);
|
|
out.push({ viewport: h, bottom: root.top + grow + below, grow, below });
|
|
}
|
|
console.log(JSON.stringify(out));
|