Files
kintone-helper-extenstion/dom.js
2025-10-17 14:39:34 +08:00

113 lines
3.9 KiB
JavaScript

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 match = window.location.pathname.match(/\/guest\/([0-9]+)\//);
return match ? match[1] : undefined;
};
/**
* 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%';
}
// 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';
// Special styling for GROUP type fields
if (type === FIELD_TYPES.GROUP) {
fieldSpan.style.marginLeft = SPACING.GROUP_MARGIN_LEFT;
}
container.appendChild(fieldSpan);
return container;
};
/**
* 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, 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 container = document.createElement('span');
// 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);
}
// 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 headers = Array.from(tableElement.querySelectorAll('th'));
const widths = headers.map(header => header.clientWidth);
// For subtables include all widths, for others skip first column
return fieldType === FIELD_TYPES.SUBTABLE ? widths : widths.slice(1);
};