@itrocks/table 0.0.1

package/edit.js

@@ -0,0 +1,208 @@
+import ContentEditable from '../contenteditable/contenteditable.js';
+import Plugin from '../plugin/plugin.js';
+let editable;
+let selected;
+let selectedStyle;
+let selectedText;
+export class RangeCopy {
+    commonAncestorContainer;
+    endContainer;
+    endOffset;
+    startContainer;
+    startOffset;
+    constructor(range) {
+        this.commonAncestorContainer = range.commonAncestorContainer;
+        this.endContainer = range.endContainer;
+        this.endOffset = range.endOffset;
+        this.startContainer = range.startContainer;
+        this.startOffset = range.startOffset;
+    }
+    toRange() {
+        const range = new Range;
+        range.setStart(this.startContainer, this.startOffset);
+        range.setEnd(this.endContainer, this.endOffset);
+        return range;
+    }
+}
+export default class TableEdit extends Plugin {
+    zIndex = '2';
+    init() {
+        const table = this.of;
+        table.styleSheet.push(`
+			${table.selector} > * > tr > * > div[contenteditable] {
+				position: relative;
+				z-index: ${this.zIndex};
+			}
+		`);
+        table.addEventListener(table.element, 'mousedown', event => {
+            const cell = this.closestEditableCell(event.target);
+            if (!cell)
+                return;
+            this.selectCell(cell);
+        });
+    }
+    closestEditable(node) {
+        if ((node instanceof Range) || (node instanceof RangeCopy)) {
+            node = node.commonAncestorContainer;
+        }
+        let parent = (node instanceof Element) ? node : (node.parentElement ?? undefined);
+        while (parent && !parent.hasAttribute('contenteditable')) {
+            parent = parent.parentElement ?? undefined;
+        }
+        if (!parent) {
+            throw 'Called from a node outside of contenteditable';
+        }
+        return parent;
+    }
+    closestEditableCell(target) {
+        return (target instanceof Element)
+            ? target.closest('table.itrocks > * > tr > *, table.itrocks > * > tr > *') ?? undefined
+            : undefined;
+    }
+    createEditable(selected, selectedStyle) {
+        const contentEditable = new ContentEditable(document.createElement('div'));
+        const editable = contentEditable.element;
+        editable.innerHTML = selected.innerHTML;
+        selected.innerHTML = '';
+        const height = getComputedStyle(selected).height;
+        if (!contentEditable.value().includes(contentEditable.br()))
+            editable.style.lineHeight = height;
+        editable.style.minHeight = height;
+        editable.style.paddingBottom = selectedStyle.paddingBottom;
+        editable.style.paddingLeft = selectedStyle.paddingLeft;
+        editable.style.paddingRight = selectedStyle.paddingRight;
+        editable.style.paddingTop = selectedStyle.paddingTop;
+        editable.addEventListener('input', event => {
+            const editable = event.target;
+            const contentEditable = editable.editable;
+            const text = contentEditable.value();
+            if (text.includes(contentEditable.br())) {
+                if (editable.style.lineHeight) {
+                    editable.style.removeProperty('line-height');
+                }
+            }
+            else if (!editable.style.lineHeight) {
+                editable.style.lineHeight = editable.style.minHeight;
+            }
+            this.setSelectedText(text);
+        });
+        selected.replaceChildren(editable);
+        selected.style.padding = '0';
+        if (selectedStyle.position === 'sticky') {
+            selected.style.zIndex = this.zIndex;
+        }
+        return editable;
+    }
+    editable() {
+        return editable;
+    }
+    editableEndRange(node) {
+        node = this.closestEditable(node);
+        while (node.lastChild && !(node.nodeType === Node.TEXT_NODE)) {
+            node = node.lastChild;
+        }
+        const newRange = new Range;
+        newRange.setStartAfter(node);
+        newRange.setEndAfter(node);
+        return newRange;
+    }
+    editableFullRange(node) {
+        const newRange = new Range;
+        newRange.selectNodeContents(this.closestEditable(node));
+        return newRange;
+    }
+    getSelectionRange() {
+        const selection = getSelection();
+        if (!selection)
+            throw 'Should be called only when there is a selection';
+        const range = selection?.getRangeAt(0);
+        if (!range)
+            throw 'Should be called only when there is a selection range';
+        return range;
+    }
+    inEditable(node) {
+        if ((node instanceof Range) || (node instanceof RangeCopy)) {
+            node = node.commonAncestorContainer;
+        }
+        return !!((node instanceof Element)
+            ? node.closest('div[contenteditable]')
+            : node.parentElement?.closest('div[contenteditable]'));
+    }
+    rangeTextContent(range) {
+        const element = document.createElement('div');
+        element.appendChild(range.cloneContents());
+        return element.innerHTML;
+    }
+    /** If cell is not already selected : unselects old cell, then selects this new one */
+    selectCell(cell) {
+        if (cell === selected)
+            return;
+        this.unselectCell();
+        this.setSelectedCell(cell);
+    }
+    /** Returns the currently selected cell, or undefined if no cell is selected */
+    selected() {
+        return selected;
+    }
+    /** Sets selected cell to this cell, and set its content to div[contenteditable] */
+    setSelectedCell(cell) {
+        selected = cell;
+        selectedText = selected.innerHTML;
+        const originSelectedStyle = getComputedStyle(selected);
+        selectedStyle = selected.getAttribute('style') ?? '';
+        selected.setAttribute('contenteditable', '');
+        setTimeout(() => {
+            if (!selected) {
+                console.error('cell:', cell);
+                throw 'Unexpected failure: cell was unselected before contenteditable was effective';
+            }
+            const range = new RangeCopy(this.getSelectionRange());
+            selected.removeAttribute('contenteditable');
+            editable = this.createEditable(selected, originSelectedStyle);
+            this.setSelectionRange(this.inEditable(range) ? range.toRange() : this.editableFullRange(editable));
+        });
+    }
+    setSelectedText(newText) {
+        if (newText === selectedText)
+            return;
+        selectedText = newText;
+        //this.of.reset()
+    }
+    setSelectionRange(range) {
+        const selection = getSelection();
+        if (!selection)
+            throw 'Should be called only when there is a selection';
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    textContentAfterRange() {
+        const range = this.getSelectionRange();
+        const editable = this.closestEditable(range.commonAncestorContainer);
+        const next = new Range;
+        next.setStart(range.endContainer, range.endOffset);
+        editable.lastChild
+            ? next.setEndAfter(editable.lastChild)
+            : next.setEnd(editable, editable.textContent?.length ?? 0);
+        return this.rangeTextContent(next);
+    }
+    textContentBeforeRange() {
+        const range = this.getSelectionRange();
+        const editable = this.closestEditable(range.commonAncestorContainer);
+        const previous = new Range;
+        previous.setStart(editable, 0);
+        previous.setEnd(range.startContainer, range.startOffset);
+        return this.rangeTextContent(previous);
+    }
+    unselectCell() {
+        if (!editable || !selected)
+            return;
+        editable.editable.deactivate();
+        selected.innerHTML = editable.innerHTML;
+        selectedStyle.length
+            ? selected.setAttribute('style', selectedStyle)
+            : selected.removeAttribute('style');
+        this.setSelectedText(selected.innerHTML);
+        editable = undefined;
+        selected = undefined;
+    }
+}

package/fix.d.ts

@@ -0,0 +1,27 @@
+import Plugin from '../node_modules/@itrocks/plugin/plugin.js';
+import { HTMLTableFixElement, Table } from './table.js';
+interface FullIndex {
+    column: string;
+    corner: string;
+    row: string;
+}
+export declare class FixTable extends Plugin<Table> {
+    columns: NodeListOf<HTMLTableFixElement>;
+    full?: FullIndex;
+    leftColumnCount: number;
+    rightColumnCount: number;
+    zIndex: string;
+    constructor(table: Table);
+    init(): void;
+    closestScrollable(element: Element): HTMLElement | (Window & typeof globalThis) | undefined;
+    protected countLeftColumns(): number;
+    protected countRightColumns(): number;
+    protected fixFootRows(): void;
+    protected fixHeadRows(): void;
+    protected fixLeftColumns(): void;
+    protected fixRightColumns(): void;
+    protected getColumns(): NodeListOf<HTMLTableFixElement>;
+    position(position: number, _counter: number, _colCell: HTMLTableFixElement, _side: 'bottom' | 'left' | 'right' | 'top'): string;
+    visibleInnerRect(): DOMRect;
+}
+export default FixTable;

package/fix.js

@@ -0,0 +1,191 @@
+import Plugin from '../plugin/plugin.js';
+export class FixTable extends Plugin {
+    columns;
+    full;
+    leftColumnCount;
+    rightColumnCount;
+    zIndex = '1';
+    constructor(table) {
+        super(table);
+        this.columns = this.getColumns();
+        this.leftColumnCount = this.countLeftColumns();
+        this.rightColumnCount = this.countRightColumns();
+    }
+    init() {
+        this.fixFootRows();
+        this.fixHeadRows();
+        this.fixLeftColumns();
+        this.fixRightColumns();
+    }
+    closestScrollable(element) {
+        let parent = element.closest('table')?.parentElement;
+        while (parent && (parent.scrollHeight <= parent.clientHeight)) {
+            parent = parent.parentElement;
+        }
+        return parent ? ((parent instanceof HTMLHtmlElement) ? window : parent) : undefined;
+    }
+    countLeftColumns() {
+        let count = 0;
+        while ((count < this.columns.length - 1) && (this.columns[count].dataset.fix !== undefined)) {
+            count++;
+        }
+        return count;
+    }
+    countRightColumns() {
+        let count = this.columns.length - 1;
+        while ((count > 0) && (this.columns[count].dataset.fix !== undefined)) {
+            count--;
+        }
+        return this.columns.length - 1 - count;
+    }
+    fixFootRows() {
+        const table = this.of;
+        if (!table.element.tFoot?.rows.length)
+            return;
+        let counter = 1, bottom = .0, previousBottom = table.element.getBoundingClientRect().bottom;
+        for (const row of Array.from(table.element.tFoot.querySelectorAll(':scope > tr')).reverse()) {
+            const actualBottom = row.getBoundingClientRect().bottom;
+            bottom += previousBottom - actualBottom;
+            previousBottom = actualBottom;
+            table.styleSheet.push(`
+				${table.selector} > tfoot > tr:nth-last-child(${counter}) > * {
+					bottom: ${this.position(bottom, counter, row.firstElementChild, 'bottom')};
+				}
+			`);
+            counter++;
+        }
+        const zIndex = this.full ? `z-index: ${this.full.row};` : '';
+        table.styleSheet.push(`
+			${table.selector} > tfoot > tr > * {
+				position: sticky;
+				${zIndex}
+			}		
+		`);
+    }
+    fixHeadRows() {
+        const table = this.of;
+        if (!table.element.tHead?.rows.length)
+            return;
+        let counter = 1, top = .0, previousTop = table.element.getBoundingClientRect().top;
+        table.element.tHead.querySelectorAll(':scope > tr').forEach(row => {
+            const actualTop = row.getBoundingClientRect().top;
+            top += actualTop - previousTop;
+            previousTop = actualTop;
+            table.styleSheet.push(`
+				${table.selector} > thead > tr:nth-child(${counter}) > * {
+					top: ${this.position(top, counter, row.firstElementChild, 'top')};
+				}
+			`);
+            counter++;
+        });
+        const zIndex = this.full ? `z-index: ${this.full.row};` : '';
+        table.styleSheet.push(`
+			${table.selector} > thead > tr > * {
+				position: sticky;
+				${zIndex}
+			}		
+		`);
+    }
+    fixLeftColumns() {
+        if (!this.leftColumnCount)
+            return;
+        const table = this.of;
+        const bodySel = [];
+        const cornerSel = [];
+        let counter = 1, left = .0, previousLeft = table.element.getBoundingClientRect().left;
+        for (const colCell of Array.from(this.columns).toSpliced(this.leftColumnCount)) {
+            const actualLeft = colCell.getBoundingClientRect().left;
+            left += actualLeft - previousLeft;
+            previousLeft = actualLeft;
+            table.styleSheet.push(`
+				${table.selector} > * > tr > :nth-child(${counter}) {
+					left: ${this.position(left, counter, colCell, 'left')};
+				}
+			`);
+            bodySel.push(`${table.selector} > tbody > tr > :nth-child(${counter})`);
+            cornerSel.push(`${table.selector} > tfoot > tr > :nth-child(${counter})`);
+            cornerSel.push(`${table.selector} > thead > tr > :nth-child(${counter})`);
+            counter++;
+        }
+        const zIndex = this.full ? `z-index: ${this.full.column};` : '';
+        const zIndexValue = this.full ? this.full.corner : this.zIndex;
+        table.styleSheet.push(`
+			${bodySel.join(', ')} {
+				position: sticky;
+				${zIndex}
+			}
+			${cornerSel.join(', ')} {
+				z-index: ${zIndexValue};
+			}
+		`);
+    }
+    fixRightColumns() {
+        if (!this.rightColumnCount)
+            return;
+        const table = this.of;
+        const bodySel = [];
+        const cornerSel = [];
+        let counter = 1, right = .0, previousRight = table.element.getBoundingClientRect().right;
+        for (const colCell of Array.from(this.columns).reverse().toSpliced(this.rightColumnCount)) {
+            const actualRight = colCell.getBoundingClientRect().right;
+            right += previousRight - actualRight;
+            previousRight = actualRight;
+            table.styleSheet.push(`
+				${table.selector} > * > tr > :nth-last-child(${counter}) {
+					right: ${this.position(right, counter, colCell, 'right')};
+				}
+			`);
+            bodySel.push(`${table.selector} > tbody > tr > :nth-last-child(${counter})`);
+            if (this.full) {
+                cornerSel.push(`${table.selector} > tfoot > tr > :nth-last-child(${counter})`);
+            }
+            cornerSel.push(`${table.selector} > thead > tr > :nth-last-child(${counter})`);
+            counter++;
+        }
+        const zIndex = this.full ? `z-index: ${this.full.column};` : '';
+        const zIndexValue = this.full ? this.full.corner : this.zIndex;
+        table.styleSheet.push(`
+			${bodySel.join(', ')} {
+				position: sticky;
+				${zIndex}
+			}
+			${cornerSel.join(', ')} {
+				z-index: ${zIndexValue};
+			}
+		`);
+    }
+    getColumns() {
+        if (this.columns)
+            return this.columns;
+        const table = this.of;
+        let columns = table.element.querySelectorAll(':scope > colgroup > col');
+        if (!columns.length) {
+            columns = table.element.querySelectorAll(':scope > thead > tr:first-child > *');
+            if (!columns.length) {
+                columns = table.element.querySelectorAll(':scope > tbody > tr:first-child > *');
+            }
+        }
+        return columns;
+    }
+    position(position, _counter, _colCell, _side) {
+        return `${position}px`;
+    }
+    visibleInnerRect() {
+        const tableElement = this.of.element;
+        const rect = tableElement.getBoundingClientRect();
+        if (this.leftColumnCount) {
+            rect.x = this.columns[this.leftColumnCount - 1].getBoundingClientRect().right;
+        }
+        if (tableElement.tHead?.lastElementChild?.firstElementChild) {
+            rect.y = tableElement.tHead.lastElementChild.firstElementChild.getBoundingClientRect().bottom;
+        }
+        if (this.rightColumnCount) {
+            rect.width = this.columns[this.columns.length - this.rightColumnCount].getBoundingClientRect().left - rect.x + 1;
+        }
+        if (tableElement.tFoot?.firstElementChild?.firstElementChild) {
+            rect.height = tableElement.tFoot.firstElementChild.firstElementChild.getBoundingClientRect().top - rect.y + 1;
+        }
+        return rect;
+    }
+}
+export default FixTable;

package/freeze/inherit-background.d.ts

@@ -0,0 +1,10 @@
+import TableFreeze from '../freeze.js';
+import Table from '../table';
+/**
+ * This plugin has no use and no effect if your table has border-collapse: collapse
+ */
+export default class TableFreezeInheritBackground extends TableFreeze {
+    tableStyle: CSSStyleDeclaration;
+    constructor(table: Table);
+    init(): void;
+}

package/freeze/inherit-background.js

@@ -0,0 +1,41 @@
+import TableFreeze from '../freeze.js';
+/**
+ * This plugin has no use and no effect if your table has border-collapse: collapse
+ */
+export default class TableFreezeInheritBackground extends TableFreeze {
+    tableStyle;
+    constructor(table) {
+        super(table);
+        this.tableStyle = getComputedStyle(table.element);
+    }
+    init() {
+        if (this.tableStyle.borderCollapse !== 'separate')
+            return;
+        const table = this.of;
+        if (this.tableStyle.backgroundColor.replaceAll(' ', '').endsWith(',0)'))
+            return;
+        const borderSpacing = parseFloat(this.tableStyle.borderSpacing);
+        if (!borderSpacing)
+            return;
+        let selectors = [];
+        for (let child = 1; child <= this.leftColumnCount; child++) {
+            selectors.push(`${table.selector} > tbody > tr > :nth-child(${child})`);
+        }
+        for (let child = 1; child <= this.rightColumnCount; child++) {
+            selectors.push(`${table.selector} > tbody > tr > :nth-last-child(${child})`);
+        }
+        if (table.element.tFoot?.rows.length) {
+            selectors.push(`${table.selector} > tfoot > tr > *`);
+        }
+        if (table.element.tHead?.rows.length) {
+            selectors.push(`${table.selector} > thead > tr > *`);
+        }
+        if (!selectors.length)
+            return;
+        table.styleSheet.push(`
+			${selectors.join(', ')} {
+				box-shadow: 0 0 0 ${borderSpacing}px ${this.tableStyle.backgroundColor};
+			}
+		`);
+    }
+}

package/freeze/inherit-border.d.ts

@@ -0,0 +1,14 @@
+import Plugin from '../../node_modules/@itrocks/plugin/plugin.js';
+import TableFreeze from '../freeze.js';
+import { HTMLTableFreezeElement } from '../freeze.js';
+import Table from '../table.js';
+/**
+ * This plugin has no use and no effect if your table has border-collapse: separate (default)
+ */
+export default class TableFreezeInheritBorder extends Plugin<Table> {
+    tableStyle: CSSStyleDeclaration;
+    tableFreeze: TableFreeze;
+    constructor(table: Table);
+    init(): void;
+    position(position: number, counter: number, colCell: HTMLTableFreezeElement, side: 'bottom' | 'left' | 'right' | 'top'): number;
+}

package/freeze/inherit-border.js

@@ -0,0 +1,77 @@
+import Plugin from '../../plugin/plugin.js';
+/**
+ * This plugin has no use and no effect if your table has border-collapse: separate (default)
+ */
+export default class TableFreezeInheritBorder extends Plugin {
+    tableStyle;
+    tableFreeze;
+    constructor(table) {
+        super(table);
+        this.tableFreeze = table.plugins.TableFreeze;
+        this.tableStyle = getComputedStyle(table.element);
+        if (this.tableStyle.borderCollapse !== 'collapse')
+            return;
+        const superPosition = this.tableFreeze.position;
+        this.tableFreeze.position = (position, counter, colCell, side) => superPosition.call(this.of.plugins.TableFreeze, this.position(position, counter, colCell, side), counter, colCell, side);
+    }
+    init() {
+        if (this.tableStyle.borderCollapse !== 'collapse')
+            return;
+        const tableFreeze = this.tableFreeze;
+        const table = this.of;
+        // table
+        table.styleSheet.push(`
+			${table.selector} {
+				border-collapse: separate;
+				border-spacing: 0;
+			}
+		`);
+        // columns
+        let rightSelector = '';
+        if (tableFreeze.rightColumnCount) {
+            rightSelector = `:not(:nth-last-child(${tableFreeze.rightColumnCount}))`;
+            table.styleSheet.push(`
+				${table.selector} > * > tr > :nth-last-child(${tableFreeze.rightColumnCount + 1}) {
+					border-right-width: 0;
+				}
+			`);
+        }
+        table.styleSheet.push(`
+			${table.selector} > * > tr > :not(:first-child)${rightSelector} {
+				border-left-width: 0;
+			}
+		`);
+        // rows
+        if (table.element.tHead?.rows.length) {
+            table.styleSheet.push(`
+				${table.selector} > tbody > tr > *,
+				${table.selector} > thead > tr:not(:first-child) > * {
+					border-top-width: 0;
+				}
+			`);
+        }
+        else {
+            table.styleSheet.push(`
+				${table.selector} > tbody > tr:not(:first-child) > * {
+					border-top-width: 0;
+				}
+			`);
+        }
+        if (table.element.tFoot?.rows.length) {
+            table.styleSheet.push(`
+				${table.selector} > tbody > tr:last-child > *,
+				${table.selector} > tfoot > tr:not(:last-child) > * { 
+					border-bottom-width: 0;
+				}
+			`);
+        }
+    }
+    position(position, counter, colCell, side) {
+        const width = parseFloat(getComputedStyle(colCell).borderWidth) / 2;
+        const shift = (counter > 1) ? width : -width;
+        position += (side === 'bottom') || (side === 'right')
+            ? Math.ceil(shift)
+            : Math.floor(shift);
+        return position;
+    }
+}

package/freeze.d.ts

@@ -0,0 +1,28 @@
+import Plugin from '../node_modules/@itrocks/plugin/plugin.js';
+import Table from './table.js';
+export type HTMLTableFreezeElement = HTMLTableCellElement | HTMLTableColElement;
+interface FullIndex {
+    column: string;
+    corner: string;
+    row: string;
+}
+export default class TableFreeze extends Plugin<Table> {
+    columns: NodeListOf<HTMLTableFreezeElement>;
+    full?: FullIndex;
+    leftColumnCount: number;
+    rightColumnCount: number;
+    zIndex: string;
+    constructor(table: Table);
+    init(): void;
+    closestScrollable(element: Element): HTMLElement | (Window & typeof globalThis) | undefined;
+    protected countLeftColumns(): number;
+    protected countRightColumns(): number;
+    protected freezeFootRows(): void;
+    protected freezeHeadRows(): void;
+    protected freezeLeftColumns(): void;
+    protected freezeRightColumns(): void;
+    protected getColumns(): NodeListOf<HTMLTableFreezeElement>;
+    position(position: number, _counter: number, _colCell: HTMLTableFreezeElement, _side: 'bottom' | 'left' | 'right' | 'top'): string;
+    visibleInnerRect(): DOMRect;
+}
+export {};