first commit

dom.js

@@ -0,0 +1,91 @@
+export const getGuestSpaceId = () => {
+  const pathMatch = window.location.pathname.match(/\/guest\/([0-9]+)\//);
+  return pathMatch ? pathMatch[1] : undefined;
+};
+
+export const createFieldSpan = ({
+  code: fieldCode,
+  type: fieldType,
+  width: fieldWidth,
+}) => {
+  const container = document.createElement("div");
+  if (fieldWidth) {
+    container.style.width = `${Number(fieldWidth) - 8}px`;
+    container.style.marginLeft = "8px";
+  } else {
+    container.style.width = "100%";
+  }
+
+  const fieldSpan = document.createElement("span");
+  fieldSpan.textContent =
+    fieldType !== void 0 ? `${fieldCode} (${fieldType})` : fieldCode;
+  fieldSpan.style.display = "inline-block";
+  fieldSpan.style.width = "100%";
+  fieldSpan.style.color = "red";
+  fieldSpan.style.overflowWrap = "anywhere";
+  fieldSpan.style.whiteSpace = "pre-wrap";
+
+  if (fieldType === "GROUP") {
+    fieldSpan.style.marginLeft = "20px";
+  }
+
+  container.appendChild(fieldSpan);
+  return container;
+};
+
+export const createFieldWithTooltips = ({
+  code: tooltipCode,
+  type: tooltipType,
+  width: tooltipWidth,
+}) => {
+  const container = document.createElement("div");
+  container.style.display = "inline-block";
+
+  const fieldSpan = createFieldSpan({
+    code: tooltipCode,
+    type: tooltipType,
+    width: tooltipWidth,
+  });
+
+  container.append(fieldSpan);
+
+  return container;
+};
+
+export const createFieldLabels = (fieldNames, widths, fieldType) => {
+  const labels = fieldNames.map((name, index) => {
+    const width = widths[index];
+    return createFieldWithTooltips({
+      code: name,
+      width: index === fieldNames.length - 1 ? width - 1 : width,
+    });
+  });
+
+  const container = document.createElement("span");
+
+  if (fieldType === "REFERENCE_TABLE") {
+    const spacer = document.createElement("span");
+    spacer.style.width = "30px";
+    spacer.style.display = "inline-block";
+    container.appendChild(spacer);
+  }
+
+  for (let i = 0; i < labels.length; i++) {
+    const label = labels[i];
+    container.appendChild(label);
+  }
+
+  return container;
+};
+
+export const getColumnWidths = (tableElement, fieldType) => {
+  const columnWidths = [];
+  const headers = tableElement.querySelectorAll("th");
+
+  for (let i = 0; i < headers.length; i++) {
+    const header = headers[i];
+    columnWidths.push(header.clientWidth);
+  }
+
+  return fieldType === "SUBTABLE" ? columnWidths : columnWidths.slice(1);
+};