@danielgindi/dgtable.js 2.0.7 → 2.0.8

package/src/header_events.ts

@@ -0,0 +1,369 @@
+/**
+ * Header events functionality for DGTable
+ */
+
+import { find } from './util';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-ignore - No type declarations available for this module
+import { getElementWidth, getElementHeight, getElementOffset } from '@danielgindi/dom-utils/lib/Css.js';
+import { isInputElementEvent } from './helpers';
+import {
+    getColumnByResizePosition,
+    cancelColumnResize,
+    onMouseDownColumnHeader,
+} from './column_resize';
+import type { DGTableInterface } from './private_types';
+import { RelatedTouchSymbol } from './private_types';
+
+// Extended element types
+interface HeaderCellElement extends HTMLElement {
+    columnName?: string;
+}
+
+interface DragData {
+    dragId: number;
+    column: string;
+}
+
+type PositionHost = {
+    pageX: number;
+    pageY: number;
+    clientX?: number;
+    identifier?: number;
+};
+
+type TouchOrMouseEvent = (MouseEvent | TouchEvent) & {
+    [RelatedTouchSymbol]?: PositionHost;
+    currentTarget: HTMLElement;
+    target: HTMLElement;
+};
+
+interface TableWithSort extends DGTableInterface {
+    sort(column?: string, descending?: boolean, add?: boolean): this;
+    render(): this;
+    moveColumn(src: string, dest: string): void;
+}
+
+/**
+ * Handle touch start on column header
+ */
+export function onTouchStartColumnHeader(table: DGTableInterface, event: TouchEvent & { [RelatedTouchSymbol]?: PositionHost }): void {
+    const p = table._p;
+
+    if (p.currentTouchId) return;
+
+    const startTouch = event.changedTouches[0];
+    p.currentTouchId = startTouch.identifier;
+
+    const cellEl = event.currentTarget as HTMLElement;
+
+    const startPos = { x: startTouch.pageX, y: startTouch.pageY };
+    let currentPos = startPos;
+    const distanceTreshold = 9;
+
+    let tapAndHoldTimeout: ReturnType<typeof setTimeout>;
+
+    const unbind = function () {
+        p.currentTouchId = null;
+        p.eventsSink.remove(cellEl, '.colheader');
+        clearTimeout(tapAndHoldTimeout);
+    };
+
+    (event as any)[RelatedTouchSymbol] = event.changedTouches[0];
+    onMouseDownColumnHeader(table, event as unknown as MouseEvent & { [RelatedTouchSymbol]?: PositionHost });
+
+    tapAndHoldTimeout = setTimeout(() => {
+        unbind();
+
+        p.eventsSink
+            .add(cellEl, 'touchend.colheader', (event: Event) => {
+                if (!isInputElementEvent(event))
+                    event.preventDefault();
+
+                p.eventsSink.remove(cellEl, '.colheader');
+            }, { once: true })
+            .add(cellEl, 'touchcancel.colheader', (_event: Event) => {
+                p.eventsSink.remove(cellEl, '.colheader');
+            }, { once: true });
+
+        const distanceTravelled = Math.sqrt(Math.pow(Math.abs(currentPos.x - startPos.x), 2) + Math.pow(Math.abs(currentPos.y - startPos.y), 2));
+
+        if (distanceTravelled < distanceTreshold) {
+            cancelColumnResize(table);
+            triggerColumnHeaderContextMenu(table, event);
+        }
+
+    }, 500);
+
+    p.eventsSink
+        .add(cellEl, 'touchend.colheader', (event: Event) => {
+            const touchEvent = event as TouchEvent & { [RelatedTouchSymbol]?: PositionHost };
+            const touch = find(Array.from(touchEvent.changedTouches), (t) => t.identifier === p.currentTouchId);
+            if (!touch) return;
+
+            unbind();
+
+            if (!isInputElementEvent(event))
+                event.preventDefault();
+
+            currentPos = { x: touch.pageX, y: touch.pageY };
+            const distanceTravelled = Math.sqrt(Math.pow(Math.abs(currentPos.x - startPos.x), 2) + Math.pow(Math.abs(currentPos.y - startPos.y), 2));
+
+            if (distanceTravelled < distanceTreshold || p.resizer) {
+                (touchEvent as any)[RelatedTouchSymbol] = touch;
+                onSortOnColumnHeaderEvent(table, touchEvent);
+            }
+
+        })
+        .add(cellEl, 'touchcancel.colheader', unbind)
+        .add(cellEl, 'touchmove.colheader', (event: Event) => {
+            const touchEvent = event as TouchEvent & { [RelatedTouchSymbol]?: PositionHost };
+            const touch = find(Array.from(touchEvent.changedTouches), (t) => t.identifier === p.currentTouchId);
+            if (!touch) return;
+
+            currentPos = { x: touch.pageX, y: touch.pageY };
+
+            if (p.resizer) {
+                event.preventDefault();
+
+                (touchEvent as any)[RelatedTouchSymbol] = touch;
+                onMouseMoveColumnHeader(table, touchEvent);
+            }
+        });
+}
+
+/**
+ * Handle mouse move on column header
+ */
+export function onMouseMoveColumnHeader(table: DGTableInterface, event: Event): void {
+    const o = table._o;
+    const p = table._p;
+
+    if (!o.resizableColumns)
+        return;
+
+    const col = getColumnByResizePosition(table, event as MouseEvent);
+    const headerCell = (event.target as HTMLElement).closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`) as HTMLElement;
+    if (!headerCell) return;
+
+    if (!col || !p.columns.get(col)?.resizable) {
+        headerCell.style.cursor = '';
+    } else {
+        headerCell.style.cursor = 'e-resize';
+    }
+}
+
+/**
+ * Handle mouse up on column header
+ */
+export function onMouseUpColumnHeader(table: DGTableInterface, event: Event): void {
+    if ((event as MouseEvent).button !== 2)
+        return;
+
+    triggerColumnHeaderContextMenu(table, event);
+}
+
+/**
+ * Trigger context menu on column header
+ */
+export function triggerColumnHeaderContextMenu(table: DGTableInterface, event: Event): void {
+    const o = table._o;
+
+    const touchEvent = event as TouchEvent;
+    const mouseEvent = event as MouseEvent;
+    const positionHost: PositionHost = (event as TouchOrMouseEvent)[RelatedTouchSymbol] ?? touchEvent.changedTouches?.[0] ?? { pageX: mouseEvent.pageX, pageY: mouseEvent.pageY };
+
+    const headerCell = (event.target as HTMLElement).closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`) as HeaderCellElement;
+    if (!headerCell) return;
+
+    const bounds = getElementOffset(headerCell) as { left: number; top: number; width?: number; height?: number };
+    bounds.width = getElementWidth(headerCell, true, true, true);
+    bounds.height = getElementHeight(headerCell, true, true, true);
+    table.emit('headercontextmenu', {
+        columnName: headerCell.columnName,
+        pageX: positionHost.pageX,
+        pageY: positionHost.pageY,
+        bounds: bounds,
+    });
+}
+
+/**
+ * Handle mouse leave on column header
+ */
+export function onMouseLeaveColumnHeader(table: DGTableInterface, event: MouseEvent): void {
+    const o = table._o;
+    const headerCell = (event.target as HTMLElement).closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`) as HTMLElement;
+    if (headerCell) {
+        headerCell.style.cursor = '';
+    }
+}
+
+/**
+ * Handle sort click on column header
+ */
+export function onSortOnColumnHeaderEvent(table: DGTableInterface, event: Event): void {
+    if (isInputElementEvent(event))
+        return;
+
+    if (getColumnByResizePosition(table, event as MouseEvent))
+        return;
+
+    const o = table._o;
+    const p = table._p;
+
+    const headerCell = (event.target as HTMLElement).closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`) as HeaderCellElement;
+    if (!headerCell) return;
+
+    if (!o.sortableColumns)
+        return;
+
+    const column = p.columns.get(headerCell.columnName!);
+    const currentSort = p.rows.sortColumn;
+    if (column && column.sortable) {
+        let shouldAdd = true;
+
+        const lastSort = currentSort.length ? currentSort[currentSort.length - 1] : null;
+
+        if (lastSort && lastSort.column === column.name) {
+            if (!lastSort.descending || !o.allowCancelSort) {
+                lastSort.descending = !lastSort.descending;
+            } else {
+                shouldAdd = false;
+                currentSort.splice(currentSort.length - 1, 1);
+            }
+        }
+
+        const tableWithSort = table as unknown as TableWithSort;
+        if (shouldAdd) {
+            tableWithSort.sort(column.name, undefined, true).render();
+        } else {
+            tableWithSort.sort(); // just refresh current situation
+        }
+    }
+}
+
+/**
+ * Handle drag start on column header
+ */
+export function onStartDragColumnHeader(table: DGTableInterface, event: DragEvent): void {
+    const o = table._o;
+    const p = table._p;
+
+    if (o.movableColumns) {
+        const headerCell = (event.target as HTMLElement).closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`) as HeaderCellElement;
+        if (!headerCell) {
+            event.preventDefault();
+            return;
+        }
+
+        const column = p.columns.get(headerCell.columnName!);
+        if (column && column.movable) {
+            headerCell.style.opacity = '0.35';
+            p.dragId = Math.random() * 0x9999999;
+            event.dataTransfer?.setData('text', JSON.stringify({ dragId: p.dragId, column: column.name }));
+        } else {
+            event.preventDefault();
+        }
+    } else {
+        event.preventDefault();
+    }
+}
+
+/**
+ * Handle drag end on column header
+ */
+export function onDragEndColumnHeader(table: DGTableInterface, event: DragEvent): void {
+    const p = table._p;
+
+    if (!p.resizer) {
+        (event.target as HTMLElement).style.opacity = '';
+    }
+}
+
+/**
+ * Handle drag enter on column header
+ */
+export function onDragEnterColumnHeader(table: DGTableInterface, event: DragEvent): void {
+    const o = table._o;
+    const p = table._p;
+
+    if (o.movableColumns) {
+        let dataTransferred: DragData | null = null;
+        const dataStr = event.dataTransfer?.getData('text');
+        if (dataStr) {
+            try {
+                dataTransferred = JSON.parse(dataStr);
+            } catch {
+                dataTransferred = null;
+            }
+        }
+
+        const headerCell = (event.target as HTMLElement).closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`) as HeaderCellElement;
+        if (!headerCell) return;
+
+        if (!dataTransferred ||
+            (p.dragId === dataTransferred.dragId && headerCell.columnName !== dataTransferred.column)) {
+
+            const column = p.columns.get(headerCell.columnName!);
+            if (column && (column.movable || column !== p.visibleColumns[0])) {
+                headerCell.classList.add('drag-over');
+            }
+        }
+    }
+}
+
+/**
+ * Handle drag over on column header
+ */
+export function onDragOverColumnHeader(_table: DGTableInterface, event: DragEvent): void {
+    event.preventDefault();
+}
+
+/**
+ * Handle drag leave on column header
+ */
+export function onDragLeaveColumnHeader(table: DGTableInterface, event: DragEvent): void {
+    const o = table._o;
+    const headerCell = (event.target as HTMLElement).closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`) as HTMLElement;
+    if (!headerCell) return;
+
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    if (!relatedTarget?.contains(headerCell.firstChild)) {
+        headerCell.classList.remove('drag-over');
+    }
+}
+
+/**
+ * Handle drop on column header
+ */
+export function onDropColumnHeader(table: DGTableInterface, event: DragEvent): void {
+    event.preventDefault();
+
+    const o = table._o;
+    const p = table._p;
+
+    const dataStr = event.dataTransfer?.getData('text');
+    if (!dataStr) return;
+
+    let dataTransferred: DragData;
+    try {
+        dataTransferred = JSON.parse(dataStr);
+    } catch {
+        return;
+    }
+
+    const headerCell = (event.target as HTMLElement).closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`) as HeaderCellElement;
+    if (!headerCell) return;
+
+    if (o.movableColumns && dataTransferred.dragId === p.dragId) {
+        const srcColName = dataTransferred.column;
+        const destColName = headerCell.columnName!;
+        const srcCol = p.columns.get(srcColName);
+        const destCol = p.columns.get(destColName);
+        if (srcCol && destCol && srcCol.movable && (destCol.movable || destCol !== p.visibleColumns[0])) {
+            (table as unknown as TableWithSort).moveColumn(srcColName, destColName);
+        }
+    }
+    headerCell.classList.remove('drag-over');
+}
+

package/src/helpers.ts

@@ -0,0 +1,291 @@
+/**
+ * Helper functions for DGTable
+ * These are extracted to keep the main class focused on public API
+ */
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-ignore - No type declarations available for this module
+import { getElementWidth, setCssProps } from '@danielgindi/dom-utils/lib/Css.js';
+
+import { ColumnWidthMode } from './constants';
+import type { InternalColumn, DGTableInterface } from './private_types';
+
+const createElement = document.createElement.bind(document);
+
+/**
+ * BUGFIX: WebKit has a bug where it does not relayout
+ */
+export function webkitRenderBugfix(el: HTMLElement): HTMLElement {
+    const oldDisplay = el.style.display;
+    el.style.display = 'none';
+    // No need to store this anywhere, the reference is enough
+    void el.offsetHeight;
+    el.style.display = oldDisplay;
+    return el;
+}
+
+/**
+ * Make element relative if not already positioned
+ */
+export function relativizeElement(el: HTMLElement): void {
+    if (!['relative', 'absolute', 'fixed'].includes(getComputedStyle(el).position)) {
+        el.style.position = 'relative';
+    }
+}
+
+/**
+ * Check if event target is an input element
+ */
+export function isInputElementEvent(event: Event): boolean {
+    const target = event.target as HTMLElement;
+    return /^(?:INPUT|TEXTAREA|BUTTON|SELECT)$/.test(target.tagName);
+}
+
+/**
+ * Calculate horizontal padding of an element
+ */
+export function horizontalPadding(el: Element): number {
+    const style = getComputedStyle(el);
+    return ((parseFloat(style.paddingLeft) || 0) +
+        (parseFloat(style.paddingRight) || 0));
+}
+
+/**
+ * Calculate horizontal border width of an element
+ */
+export function horizontalBorderWidth(el: Element): number {
+    const style = getComputedStyle(el);
+    return ((parseFloat(style.borderLeftWidth) || 0) +
+        (parseFloat(style.borderRightWidth) || 0));
+}
+
+/**
+ * Disable CSS text selection on an element
+ */
+export function disableCssSelect(el: HTMLElement): void {
+    const style = el.style as CSSStyleDeclaration & Record<string, string>;
+    style['-webkit-touch-callout'] = 'none';
+    style['-webkit-user-select'] = 'none';
+    style['-moz-user-select'] = 'none';
+    style['-ms-user-select'] = 'none';
+    style['-o-user-select'] = 'none';
+    style['user-select'] = 'none';
+}
+
+/**
+ * Get text width by measuring in a temporary element
+ */
+export function getTextWidth(table: DGTableInterface, text: string): number {
+    const tableClassName = table._o.tableClassName;
+
+    const tableWrapper = createElement('div');
+    tableWrapper.className = table.el.className;
+    const header = createElement('div');
+    header.className = tableClassName + '-header';
+    const headerRow = createElement('div');
+    headerRow.className = tableClassName + '-header-row';
+    const cell = createElement('div');
+    cell.className = tableClassName + '-header-cell';
+    const cellContent = createElement('div');
+    cellContent.textContent = text;
+
+    cell.appendChild(cellContent);
+    headerRow.appendChild(cell);
+    header.appendChild(headerRow);
+    tableWrapper.appendChild(header);
+    setCssProps(tableWrapper, {
+        position: 'absolute',
+        top: '-9999px',
+        visibility: 'hidden',
+    });
+
+    document.body.appendChild(tableWrapper);
+
+    const width = getElementWidth(cell);
+
+    tableWrapper.remove();
+
+    return width;
+}
+
+/**
+ * Calculate width available for columns
+ */
+export function calculateWidthAvailableForColumns(table: DGTableInterface): number {
+    const o = table._o, p = table._p;
+
+    // Changing display mode briefly, to prevent taking in account the parent's scrollbar width when we are the cause for it
+    let oldDisplay: string | undefined;
+    let lastScrollTop = 0;
+    let lastScrollLeft = 0;
+    if (p.table) {
+        lastScrollTop = p.table ? p.table.scrollTop : 0;
+        lastScrollLeft = p.table ? p.table.scrollLeft : 0;
+
+        if (o.virtualTable) {
+            oldDisplay = p.table.style.display;
+            p.table.style.display = 'none';
+        }
+    }
+
+    let detectedWidth = getElementWidth(table.el);
+
+    if (p.table) {
+        if (o.virtualTable && oldDisplay !== undefined) {
+            p.table.style.display = oldDisplay;
+        }
+
+        p.table.scrollTop = lastScrollTop;
+        p.table.scrollLeft = lastScrollLeft;
+        if (p.header) {
+            p.header.scrollLeft = lastScrollLeft;
+        }
+    }
+
+    const tableClassName = o.tableClassName;
+
+    const thisWrapper = createElement('div');
+    thisWrapper.className = table.el.className;
+    setCssProps(thisWrapper, {
+        'z-index': '-1',
+        'position': 'absolute',
+        left: '0',
+        top: '-9999px',
+    });
+    const header = createElement('div');
+    header.className = `${tableClassName}-header`;
+    thisWrapper.appendChild(header);
+    const headerRow = createElement('div') as HTMLDivElement & { index: null; vIndex: null };
+    headerRow.index = null;
+    headerRow.vIndex = null;
+    headerRow.className = `${tableClassName}-header-row`;
+    header.appendChild(headerRow);
+    for (let i = 0; i < p.visibleColumns.length; i++) {
+        const column = p.visibleColumns[i];
+        const cell = createElement('div') as HTMLDivElement & { columnName: string };
+        cell.className = `${tableClassName}-header-cell ${column.cellClasses || ''}`;
+        cell.columnName = column.name;
+        cell.appendChild(createElement('div'));
+        headerRow.appendChild(cell);
+    }
+    document.body.appendChild(thisWrapper);
+
+    detectedWidth -= horizontalBorderWidth(headerRow);
+
+    const cells = headerRow.querySelectorAll(`div.${tableClassName}-header-cell`) as NodeListOf<HTMLDivElement & { columnName: string }>;
+    for (const cell of cells) {
+        const cellStyle = getComputedStyle(cell);
+        const isBoxing = cellStyle.boxSizing === 'border-box';
+        if (!isBoxing) {
+            detectedWidth -=
+                (parseFloat(cellStyle.borderRightWidth) || 0) +
+                (parseFloat(cellStyle.borderLeftWidth) || 0) +
+                (horizontalPadding(cell)); // CELL's padding
+
+            const colName = cell.columnName;
+            const column = p.columns.get(colName);
+            if (column)
+                detectedWidth -= column.arrowProposedWidth || 0;
+        }
+    }
+
+    thisWrapper.remove();
+
+    return Math.max(0, detectedWidth);
+}
+
+/**
+ * Calculate the size required for the table body width
+ */
+export function calculateTbodyWidth(table: DGTableInterface): number {
+    const p = table._p;
+    const o = table._o;
+
+    const tableClassName = o.tableClassName;
+    const rowClassName = tableClassName + '-row';
+    const cellClassName = tableClassName + '-cell';
+    const visibleColumns = p.visibleColumns;
+    const colCount = visibleColumns.length;
+
+    const row = createElement('div');
+    row.className = rowClassName;
+    row.style.float = 'left';
+
+    let sumActualWidth = 0;
+
+    for (let colIndex = 0; colIndex < colCount; colIndex++) {
+        const column = visibleColumns[colIndex];
+        const cell = createElement('div');
+        cell.className = cellClassName;
+        cell.style.width = (column.actualWidth ?? 0) + 'px';
+        if (column.cellClasses) cell.className += ' ' + column.cellClasses;
+        cell.appendChild(createElement('div'));
+        row.appendChild(cell);
+        sumActualWidth += column.actualWidth ?? 0;
+    }
+
+    const thisWrapper = createElement('div');
+    thisWrapper.className = table.el.className;
+    setCssProps(thisWrapper, {
+        'z-index': '-1',
+        'position': 'absolute',
+        'left': '0',
+        'top': '-9999px',
+        'float': 'left',
+        'width': '1px',
+        'overflow': 'hidden',
+    });
+
+    const tableDiv = createElement('div');
+    tableDiv.className = tableClassName;
+    thisWrapper.appendChild(tableDiv);
+    const tableBodyDiv = createElement('div');
+    tableBodyDiv.className = tableClassName + '-body';
+    tableBodyDiv.style.width = (sumActualWidth + 10000) + 'px';
+    tableDiv.appendChild(tableBodyDiv);
+    tableBodyDiv.appendChild(row);
+
+    document.body.appendChild(thisWrapper);
+
+    const fractionTest = createElement('div');
+    setCssProps(fractionTest, {
+        border: '1.5px solid #000',
+        width: '0',
+        height: '0',
+        position: 'absolute',
+        left: '0',
+        top: '-9999px',
+    });
+    document.body.appendChild(fractionTest);
+    const fractionValue = parseFloat(getComputedStyle(fractionTest).borderWidth);
+    const hasFractions = Math.round(fractionValue) !== fractionValue;
+    fractionTest.remove();
+
+    let width = getElementWidth(row, true, true, true);
+    width -= p.scrollbarWidth || 0;
+
+    if (hasFractions) {
+        width++;
+    }
+
+    thisWrapper.remove();
+    return width;
+}
+
+/**
+ * Check if table is RTL
+ */
+export function isTableRtl(table: DGTableInterface): boolean {
+    const p = table._p;
+    return p.table ? getComputedStyle(p.table).direction === 'rtl' : false;
+}
+
+/**
+ * Serialize column width to string
+ */
+export function serializeColumnWidth(column: InternalColumn): string | number {
+    return column.widthMode === ColumnWidthMode.AUTO ? 'auto' :
+        column.widthMode === ColumnWidthMode.RELATIVE ? column.width * 100 + '%' :
+            column.width;
+}
+