108 lines
3.6 KiB
JavaScript
108 lines
3.6 KiB
JavaScript
/**
|
|
* DOM 操作工具模块
|
|
* 提供用于创建和管理 DOM 元素的辅助函数
|
|
*/
|
|
|
|
import { FIELD_TYPES, DOM_CLASSES } from './constants.js';
|
|
|
|
/**
|
|
* 从表元素中提取列宽度信息
|
|
* @param {HTMLElement} tableElement - 要分析的表元素
|
|
* @param {string} fieldType - 字段类型（影响返回的宽度数组）
|
|
* @returns {Array<number>} 表列宽度的数组
|
|
*/
|
|
export const getColumnWidths = (tableElement, fieldType) => {
|
|
// 获取所有标题元素并提取它们的客户端宽度
|
|
const headerElements = Array.from(tableElement.querySelectorAll('th'));
|
|
const columnWidths = headerElements.map(header => header.clientWidth);
|
|
|
|
// 对于子表返回所有宽度，其他表跳过第一列（通常是操作列）
|
|
return fieldType === FIELD_TYPES.SUBTABLE
|
|
? columnWidths // 子表保留所有列
|
|
: columnWidths.slice(1); // 其他表跳过第一列
|
|
};
|
|
|
|
/**
|
|
* 安全地将标签元素插入到指定目标元素之前
|
|
* @param {HTMLElement} targetElement - 要插入之前的目标元素
|
|
* @param {HTMLElement} labelElement - 要插入的标签元素
|
|
* @returns {boolean} 插入是否成功
|
|
*/
|
|
export const safelyInsertLabel = (targetElement, labelElement) => {
|
|
try {
|
|
if (!targetElement || !labelElement) {
|
|
console.warn('Failed to insert label: target element or label element does not exist');
|
|
return false;
|
|
}
|
|
|
|
if (!targetElement.before) {
|
|
console.warn('Failed to insert label: target element does not support before method');
|
|
return false;
|
|
}
|
|
|
|
targetElement.before(labelElement);
|
|
return true;
|
|
} catch (error) {
|
|
console.error('Error inserting label: ', error);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 安全地将标签元素追加到指定目标元素
|
|
* @param {HTMLElement} targetElement - 要追加到的目标元素
|
|
* @param {HTMLElement} labelElement - 要追加的标签元素
|
|
* @returns {boolean} 追加是否成功
|
|
*/
|
|
export const safelyAppendLabel = (targetElement, labelElement) => {
|
|
try {
|
|
if (!targetElement || !labelElement) {
|
|
console.warn('Failed to append label: target element or label element does not exist');
|
|
return false;
|
|
}
|
|
|
|
targetElement.appendChild(labelElement);
|
|
return true;
|
|
} catch (error) {
|
|
console.error('Error appending label: ', error);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const isRowElement = (element) => element?.classList?.contains(DOM_CLASSES.ROW_ELEMENT);
|
|
const isFieldElement = (element) => element?.classList?.contains(DOM_CLASSES.FIELD_ELEMENT);
|
|
|
|
/**
|
|
* 基于 DOM 类名判断字段类型的工具对象
|
|
* 用于 admin 表单页面通过 DOM 元素判断字段类型
|
|
*/
|
|
export const FieldTypeCheckerForAdminDom = {
|
|
isRowElement,
|
|
isFieldElement,
|
|
|
|
isSubtable: (element) => {
|
|
return !isRowElement(element) && !isFieldElement(element) &&
|
|
element?.classList?.contains(DOM_CLASSES.SUBTABLE);
|
|
},
|
|
isGroup: (element) => {
|
|
return isRowElement(element) &&
|
|
!!element?.querySelector(`.${DOM_CLASSES.GROUP}`);
|
|
},
|
|
isReferenceTable: (element) => {
|
|
return isRowElement(element) &&
|
|
!!element?.querySelector(`.${DOM_CLASSES.REFERENCE_TABLE}`);
|
|
},
|
|
isSpacer: (element) => {
|
|
return isFieldElement(element) &&
|
|
element?.classList?.contains(DOM_CLASSES.SPACER);
|
|
},
|
|
isLabel: (element) => {
|
|
return isFieldElement(element) &&
|
|
element?.classList?.contains(DOM_CLASSES.LABEL);
|
|
},
|
|
isHr: (element) => {
|
|
return isFieldElement(element) &&
|
|
element?.classList?.contains(DOM_CLASSES.HR);
|
|
},
|
|
};
|