@itrocks/table 0.0.22 → 0.1.1

package/column-reorder.d.ts

@@ -1,8 +1,8 @@
-import { Plugin } from '../../plugin/plugin.js';
+import { Plugin } from '../plugin/plugin.js';
 import { HTMLTableFreezeElement } from './freeze.js';
 import { Table } from './table.js';
 export declare class TableColumnReorder extends Plugin<Table> {
     reorderCells: NodeListOf<HTMLTableFreezeElement>;
-    constructor(table: Table);
+    init(): void;
     protected getReorderCells(): NodeListOf<HTMLTableFreezeElement>;
 }

package/column-reorder.js

@@ -1,13 +1,13 @@
 import { Plugin } from '../plugin/plugin.js';
 export class TableColumnReorder extends Plugin {
     reorderCells;
-    constructor(table) {
-        super(table);
+    init() {
         this.reorderCells = this.getReorderCells();
         let downed;
         let dragging;
         let mouse = new DOMRect;
         let mouseFrom = new DOMRect;
+        const table = this.of;
         for (const cell of Array.from(this.reorderCells)) {
             table.addEventListener(cell, 'mousedown', event => {
                 console.log('mousedown', event.target);

package/edit/lock.d.ts

@@ -1,15 +1,15 @@
-import { Plugin } from '../../../plugin/plugin.js';
+import { Plugin } from '../../plugin/plugin.js';
+import { PluginOptions } from '../../plugin/plugin.js';
 import { Table } from '../table.js';
-declare class Options {
+declare class Options extends PluginOptions {
     nonEditableConditions: {
         [index: string]: string;
     };
 }
-export declare class TableEditLock extends Plugin<Table> {
-    options: Options;
-    constructor(table: Table, options?: Partial<Options>);
+export declare class TableEditLock extends Plugin<Table, Options> {
     colCell(cell: HTMLTableCellElement): HTMLTableCellElement | HTMLTableColElement;
     closestEditableCell(editable?: HTMLTableCellElement): HTMLTableCellElement | undefined;
-    static defaultOptions(): Options;
+    defaultOptions(): Options;
+    init(): void;
 }
 export {};

package/edit/lock.js

@@ -1,19 +1,12 @@
 import { Plugin } from '../../plugin/plugin.js';
-class Options {
+import { PluginOptions } from '../../plugin/plugin.js';
+class Options extends PluginOptions {
     nonEditableConditions = {
         'closest': 'tfoot, thead, [data-lock]',
         'col': '[data-lock]'
     };
 }
 export class TableEditLock extends Plugin {
-    options = new Options;
-    constructor(table, options = {}) {
-        super(table);
-        Object.assign(this.options, options);
-        const tableEdit = table.plugins.TableEdit;
-        const superClosestEditableCell = tableEdit.closestEditableCell;
-        tableEdit.closestEditableCell = target => this.closestEditableCell(superClosestEditableCell.call(tableEdit, target));
-    }
     colCell(cell) {
         const table = cell.closest('table');
         const position = this.of.cellColumnNumber(cell);
@@ -61,7 +54,12 @@ export class TableEditLock extends Plugin {
         }
         return editable;
     }
-    static defaultOptions() {
-        return new Options;
+    defaultOptions() {
+        return new Options();
+    }
+    init() {
+        const tableEdit = this.of.plugins.TableEdit;
+        const superClosestEditableCell = tableEdit.closestEditableCell;
+        tableEdit.closestEditableCell = target => this.closestEditableCell(superClosestEditableCell.call(tableEdit, target));
     }
 }

package/edit/move.d.ts

@@ -1,10 +1,10 @@
-import { HTMLEditableElement } from '../../../contenteditable/contenteditable.js';
-import { Plugin } from '../../../plugin/plugin.js';
+import { HTMLEditableElement } from '../../contenteditable/contenteditable.js';
+import { Plugin } from '../../plugin/plugin.js';
 import { TableEdit } from '../edit.js';
 import { Table } from '../table.js';
 export declare class TableEditMove extends Plugin<Table> {
     tableEdit: TableEdit;
-    constructor(table: Table);
+    init(): void;
     selectNextColumn(): void;
     selectNextRow(): void;
     selectPreviousColumn(): void;

package/edit/move.js

@@ -1,9 +1,8 @@
 import { Plugin } from '../../plugin/plugin.js';
 export class TableEditMove extends Plugin {
     tableEdit;
-    constructor(table) {
-        super(table);
-        this.tableEdit = table.plugins.TableEdit;
+    init() {
+        this.tableEdit = this.of.plugins.TableEdit;
         const superCreateEditable = this.tableEdit.createEditable;
         this.tableEdit.createEditable = (selected, selectedStyle) => this.setEditableKeydownListener(superCreateEditable.call(this.tableEdit, selected, selectedStyle));
     }

package/edit-freeze/hide.d.ts

@@ -1,12 +1,12 @@
-import { HTMLEditableElement } from '../../../contenteditable/contenteditable.js';
-import { Plugin } from '../../../plugin/plugin.js';
+import { HTMLEditableElement } from '../../contenteditable/contenteditable.js';
+import { Plugin } from '../../plugin/plugin.js';
 import { TableEdit } from '../edit.js';
 import { TableFreeze } from '../freeze.js';
 import { Table } from '../table.js';
 export declare class TableEditFreezeHide extends Plugin<Table> {
-    readonly tableFreeze: TableFreeze;
-    readonly tableEdit: TableEdit;
-    constructor(table: Table);
+    tableFreeze: TableFreeze;
+    tableEdit: TableEdit;
+    init(): void;
     addEditableEventListeners(editable: HTMLEditableElement): HTMLEditableElement;
     autoHide(): void;
     goAhead(): void;

package/edit-freeze/hide.js

@@ -7,17 +7,16 @@ const zIndex = {
 export class TableEditFreezeHide extends Plugin {
     tableFreeze;
     tableEdit;
-    constructor(table) {
-        super(table);
-        const tableEdit = this.tableEdit = table.plugins.TableEdit;
-        const tableFreeze = this.tableFreeze = table.plugins.TableFreeze;
-        const scrollable = this.tableFreeze.closestScrollable(table.element);
+    init() {
+        const tableEdit = this.tableEdit = this.of.plugins.TableEdit;
+        const tableFreeze = this.tableFreeze = this.of.plugins.TableFreeze;
+        const scrollable = this.tableFreeze.closestScrollable(this.of.element);
         if (!scrollable)
             return;
         tableFreeze.full = { column: '2', corner: '6', row: '4' };
         tableEdit.zIndex = '7';
-        table.addEventListener(scrollable, 'scroll', () => this.autoHide());
-        table.addEventListener(window, 'resize', () => this.autoHide());
+        this.of.addEventListener(scrollable, 'scroll', () => this.autoHide());
+        this.of.addEventListener(window, 'resize', () => this.autoHide());
         const superCreateEditable = tableEdit.createEditable;
         tableEdit.createEditable = (selected, selectedStyle) => this.addEditableEventListeners(superCreateEditable.call(tableEdit, selected, selectedStyle));
     }

package/edit-freeze/scroll.d.ts

@@ -1,8 +1,8 @@
-import { Plugin } from '../../../plugin/plugin.js';
+import { Plugin } from '../../plugin/plugin.js';
 import { TableFreeze } from '../freeze.js';
 import { Table } from '../table.js';
 export declare class TableEditFreezeScroll extends Plugin<Table> {
     tableFreeze: TableFreeze;
-    constructor(table: Table);
+    init(): void;
     scrollToCell(cell: HTMLTableCellElement): HTMLTableCellElement;
 }

package/edit-freeze/scroll.js

@@ -1,10 +1,9 @@
 import { Plugin } from '../../plugin/plugin.js';
 export class TableEditFreezeScroll extends Plugin {
     tableFreeze;
-    constructor(table) {
-        super(table);
-        this.tableFreeze = table.plugins.TableFreeze;
-        const tableEdit = table.plugins.TableEdit;
+    init() {
+        this.tableFreeze = this.of.plugins.TableFreeze;
+        const tableEdit = this.of.plugins.TableEdit;
         const superSetSelectedCell = tableEdit.setSelectedCell;
         tableEdit.setSelectedCell = cell => superSetSelectedCell.call(tableEdit, this.scrollToCell(cell));
     }

package/edit.d.ts

@@ -1,5 +1,5 @@
-import { HTMLEditableElement } from '../../contenteditable/contenteditable.js';
-import { Plugin } from '../../plugin/plugin.js';
+import { HTMLEditableElement } from '../contenteditable/contenteditable.js';
+import { Plugin } from '../plugin/plugin.js';
 import { Table } from './table.js';
 export declare class RangeCopy {
     commonAncestorContainer: Node;

package/feed.d.ts

@@ -1,8 +1,8 @@
-import { Plugin } from '../../plugin/plugin.js';
+import { Plugin } from '../plugin/plugin.js';
 import { Table } from './table.js';
 export declare class TableFeed extends Plugin<Table> {
     observer: IntersectionObserver | undefined;
-    constructor(table: Table);
     feed(): Promise<void>;
+    init(): void;
     observe(): void;
 }

package/feed.js

@@ -1,10 +1,6 @@
 import { Plugin } from '../plugin/plugin.js';
 export class TableFeed extends Plugin {
     observer = undefined;
-    constructor(table) {
-        super(table);
-        this.observe();
-    }
     async feed() {
         const table = this.of.element;
         const tbody = table.querySelector(':scope > tbody');
@@ -25,6 +21,9 @@ export class TableFeed extends Plugin {
         }
         this.observe();
     }
+    init() {
+        this.observe();
+    }
     observe() {
         const table = this.of.element;
         const lastCell = table.querySelector(':scope > tbody > tr:last-child')

package/freeze/inherit-background.d.ts

@@ -1,10 +1,8 @@
 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 declare class TableFreezeInheritBackground extends TableFreeze {
     tableStyle: CSSStyleDeclaration;
-    constructor(table: Table);
     init(): void;
 }

package/freeze/inherit-background.js

@@ -4,11 +4,8 @@ import { TableFreeze } from '../freeze.js';
  */
 export class TableFreezeInheritBackground extends TableFreeze {
     tableStyle;
-    constructor(table) {
-        super(table);
-        this.tableStyle = getComputedStyle(table.element);
-    }
     init() {
+        this.tableStyle = getComputedStyle(this.of.element);
         if (this.tableStyle.borderCollapse !== 'separate')
             return;
         const table = this.of;

package/freeze/inherit-border.d.ts

@@ -1,14 +1,10 @@
-import { Plugin } from '../../../plugin/plugin.js';
-import { TableFreeze } from '../freeze.js';
+import { Plugin } from '../../plugin/plugin.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 declare 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

@@ -3,21 +3,15 @@ import { Plugin } from '../../plugin/plugin.js';
  * This plugin has no use and no effect if your table has border-collapse: separate (default)
  */
 export 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')
+        const tableFreeze = this.of.plugins.TableFreeze;
+        const tableStyle = getComputedStyle(this.of.element);
+        if (tableStyle.borderCollapse !== 'collapse')
+            return;
+        const superPosition = tableFreeze.position;
+        tableFreeze.position = (position, counter, colCell, side) => superPosition.call(this.of.plugins.TableFreeze, this.position(position, counter, colCell, side), counter, colCell, side);
+        if (tableStyle.borderCollapse !== 'collapse')
             return;
-        const tableFreeze = this.tableFreeze;
         const table = this.of;
         // table
         table.styleSheet.push(`

package/freeze.d.ts

@@ -1,4 +1,4 @@
-import { Plugin } from '../../plugin/plugin.js';
+import { Plugin } from '../plugin/plugin.js';
 import { Table } from './table.js';
 export type HTMLTableFreezeElement = HTMLTableCellElement | HTMLTableColElement;
 interface FullIndex {
@@ -12,7 +12,6 @@ export declare class TableFreeze extends Plugin<Table> {
     leftColumnCount: number;
     rightColumnCount: number;
     zIndex: string;
-    constructor(table: Table);
     init(): void;
     closestScrollable(element: Element): HTMLElement | (Window & typeof globalThis) | undefined;
     protected countLeftColumns(): number;

package/freeze.js

@@ -5,13 +5,10 @@ export class TableFreeze extends Plugin {
     leftColumnCount;
     rightColumnCount;
     zIndex = '1';
-    constructor(table) {
-        super(table);
+    init() {
         this.columns = this.getColumns();
         this.leftColumnCount = this.countLeftColumns();
         this.rightColumnCount = this.countRightColumns();
-    }
-    init() {
         this.freezeFootRows();
         this.freezeHeadRows();
         this.freezeLeftColumns();

package/link.d.ts

@@ -0,0 +1,31 @@
+import { Plugin } from '../plugin/plugin.js';
+import { PluginOptions } from '../plugin/plugin.js';
+import { Table } from './table.js';
+type ValueCallback = (element: Element) => ({
+    element: Element;
+    value: string;
+} | undefined);
+declare class Options extends PluginOptions {
+    call: (url: string) => void;
+    href: string | ValueCallback;
+    id: string | ValueCallback;
+    link: (href: string, id?: string) => string;
+}
+export declare class TableLink extends Plugin<Table, Options> {
+    constructor(options?: Partial<Options>);
+    defaultOptions(): Options;
+    protected getCell(row: HTMLTableRowElement, columnIndex: number): HTMLTableCellElement | undefined;
+    protected getCol(columnIndex: number): HTMLElement | undefined;
+    protected getHeadCell(columnIndex: number): HTMLElement | undefined;
+    protected getHref(target: Element, attribute: string, cell: HTMLTableCellElement, idElement?: Element): {
+        element: Element;
+        value: string;
+    } | undefined;
+    protected getId(target: Element, attribute: string): {
+        element: Element;
+        value: string | null;
+    } | undefined;
+    init(): void;
+    onClick(event: MouseEvent): void;
+}
+export {};

package/link.js

@@ -0,0 +1,76 @@
+import { Plugin } from '../plugin/plugin.js';
+import { PluginOptions } from '../plugin/plugin.js';
+class Options extends PluginOptions {
+    call = function (url) { window.location.href = url; };
+    href = 'data-href';
+    id = 'data-id';
+    link = function (href, id) {
+        return id ? (href + ((href[href.length - 1] === '/') ? '' : '/') + id) : href;
+    };
+}
+export class TableLink extends Plugin {
+    constructor(options) {
+        super(options);
+    }
+    defaultOptions() {
+        return new Options();
+    }
+    getCell(row, columnIndex) {
+        let current = -1;
+        for (const cell of Array.from(row.cells)) {
+            const start = current + 1;
+            const end = start + Math.max(1, cell.colSpan || 1) - 1;
+            if (columnIndex >= start && columnIndex <= end) {
+                return cell;
+            }
+            current = end;
+        }
+    }
+    getCol(columnIndex) {
+        return this.of.element.querySelector('colgroup')?.querySelectorAll('col')?.[columnIndex];
+    }
+    getHeadCell(columnIndex) {
+        const row = this.of.element.tHead?.rows[0];
+        return row ? this.getCell(row, columnIndex) : undefined;
+    }
+    getHref(target, attribute, cell, idElement) {
+        let element = target.closest('[' + attribute + ']') ?? undefined;
+        if (element && idElement?.contains(element))
+            element = undefined;
+        if (!element)
+            for (const getFunc of [this.getHeadCell, this.getCol]) {
+                element = getFunc.call(this, cell.cellIndex);
+                if (element?.hasAttribute(attribute))
+                    break;
+            }
+        if (element)
+            return { element, value: element.getAttribute(attribute) ?? '' };
+    }
+    getId(target, attribute) {
+        const element = target.closest('[' + attribute + ']');
+        if (element)
+            return { element, value: element.getAttribute(attribute) };
+    }
+    init() {
+        for (const tBody of Array.from(this.of.element.tBodies)) {
+            tBody.addEventListener('click', event => this.onClick(event));
+        }
+    }
+    onClick(event) {
+        const target = event.target;
+        if (!(target instanceof Element))
+            return;
+        const cell = target.closest('td, th');
+        if (!cell || cell.querySelector('input, select, textarea'))
+            return;
+        const id = (typeof this.options.id === 'function')
+            ? this.options.id.call(this, target)
+            : this.getId(target, this.options.id);
+        const href = (typeof this.options.href === 'function')
+            ? this.options.href.call(this, target)
+            : this.getHref(target, this.options.href, cell, id?.element);
+        if (!href)
+            return;
+        this.options.call(href.value + (id ? (href.value.endsWith('/') ? '' : '/') + id.value : ''));
+    }
+}

package/package.json

@@ -56,5 +56,5 @@
 	},
 	"type": "module",
 	"types": "./table.d.ts",
-	"version": "0.0.22"
+	"version": "0.1.1"
 }

package/table.d.ts

@@ -1,4 +1,4 @@
-import { HasPlugins, Options as PluginOptions } from '../../plugin/plugin.js';
+import { HasPlugins, Options as PluginOptions } from '../plugin/plugin.js';
 export declare function applyStyleSheets(): void;
 export declare function garbageCollector(): void;
 export declare function getTables(): Table[];