refactor

dom.js

@@ -1,91 +1,112 @@
+import { COLORS, SPACING, FIELD_TYPES } from './constants.js';
+
+/**
+ * Extracts the guest space ID from the current URL
+ * @returns {string|undefined} Guest space ID or undefined if not found
+ */
 export const getGuestSpaceId = () => {
-  const pathMatch = window.location.pathname.match(/\/guest\/([0-9]+)\//);
-  return pathMatch ? pathMatch[1] : undefined;
+  const match = window.location.pathname.match(/\/guest\/([0-9]+)\//);
+  return match ? match[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";
+/**
+ * Creates a field span element with proper styling
+ * @param {Object} params - Parameters for the span
+ * @param {string} params.code - Field code
+ * @param {string} params.type - Field type
+ * @param {number} params.width - Field width (optional)
+ * @returns {HTMLElement} Container div with span
+ */
+const createFieldSpan = ({ code, type, width }) => {
+  const container = document.createElement('div');
+
+  // Handle width and margin
+  if (width !== undefined) {
+    container.style.width = `${Number(width) - 8}px`;
+    container.style.marginLeft = '8px';
   } else {
-    container.style.width = "100%";
+    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";
+  // Create and style the span element
+  const fieldSpan = document.createElement('span');
+  fieldSpan.textContent = type !== undefined ? `${code} (${type})` : code;
+  fieldSpan.style.display = 'inline-block';
+  fieldSpan.style.width = '100%';
+  fieldSpan.style.color = COLORS.TOOLTIP_TEXT;
+  fieldSpan.style.overflowWrap = 'anywhere';
+  fieldSpan.style.whiteSpace = 'pre-wrap';
 
-  if (fieldType === "GROUP") {
-    fieldSpan.style.marginLeft = "20px";
+  // Special styling for GROUP type fields
+  if (type === FIELD_TYPES.GROUP) {
+    fieldSpan.style.marginLeft = SPACING.GROUP_MARGIN_LEFT;
   }
 
   container.appendChild(fieldSpan);
   return container;
 };
 
-export const createFieldWithTooltips = ({
-  code: tooltipCode,
-  type: tooltipType,
-  width: tooltipWidth,
-}) => {
-  const container = document.createElement("div");
-  container.style.display = "inline-block";
+/**
+ * Creates a label container element
+ * @param {Object} params - Parameters for the label
+ * @param {string} params.code - Field code for label
+ * @param {string} params.type - Field type for label
+ * @param {number} params.width - Width for label container
+ * @returns {HTMLElement} Container with field span
+ */
+export const createFieldWithLabels = ({ code, type, width }) => {
+  const container = document.createElement('div');
+  container.style.display = 'inline-block';
 
-  const fieldSpan = createFieldSpan({
-    code: tooltipCode,
-    type: tooltipType,
-    width: tooltipWidth,
-  });
-
-  container.append(fieldSpan);
+  const fieldSpan = createFieldSpan({ code, type, width });
+  container.appendChild(fieldSpan);
 
   return container;
 };
 
+/**
+ * Creates a container with multiple field labels
+ * @param {Array} fieldNames - Names of fields to create labels for
+ * @param {Array} widths - Widths corresponding to field names
+ * @param {string} fieldType - Type of the field (affects spacing)
+ * @returns {HTMLElement} Span container with all labels
+ */
 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');
 
-  const container = document.createElement("span");
-
-  if (fieldType === "REFERENCE_TABLE") {
-    const spacer = document.createElement("span");
-    spacer.style.width = "30px";
-    spacer.style.display = "inline-block";
+  // Add spacer for reference table fields
+  if (fieldType === FIELD_TYPES.REFERENCE_TABLE) {
+    const spacer = document.createElement('span');
+    spacer.style.width = SPACING.REFERENCE_TABLE_SPACER;
+    spacer.style.display = 'inline-block';
     container.appendChild(spacer);
   }
 
-  for (let i = 0; i < labels.length; i++) {
-    const label = labels[i];
-    container.appendChild(label);
-  }
+  // Create label elements with adjusted widths
+  const labels = fieldNames.map((name, index) => {
+    const adjustedWidth = index === fieldNames.length - 1 ? widths[index] - 1 : widths[index];
+    return createFieldWithLabels({
+      code: name,
+      width: adjustedWidth,
+    });
+  });
+
+  // Append all labels to container
+  labels.forEach(label => container.appendChild(label));
 
   return container;
 };
 
+/**
+ * Extracts column widths from table headers
+ * @param {HTMLElement} tableElement - Table element to analyze
+ * @param {string} fieldType - Type of field (affects returned widths)
+ * @returns {Array} Array of column widths
+ */
 export const getColumnWidths = (tableElement, fieldType) => {
-  const columnWidths = [];
-  const headers = tableElement.querySelectorAll("th");
+  const headers = Array.from(tableElement.querySelectorAll('th'));
+  const widths = headers.map(header => header.clientWidth);
 
-  for (let i = 0; i < headers.length; i++) {
-    const header = headers[i];
-    columnWidths.push(header.clientWidth);
-  }
-
-  return fieldType === "SUBTABLE" ? columnWidths : columnWidths.slice(1);
+  // For subtables include all widths, for others skip first column
+  return fieldType === FIELD_TYPES.SUBTABLE ? widths : widths.slice(1);
 };