@itrocks/table 0.1.0 → 0.1.2

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;
+    } | undefined;
+    init(): void;
+    onClick(event: MouseEvent): void;
+}
+export {};

package/link.js

@@ -0,0 +1,77 @@
+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.endsWith('/') ? '' : '/') + 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 + ']');
+        const value = element?.getAttribute(attribute);
+        if (element && value)
+            return { element, value };
+    }
+    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(this.options.link(href.value, id?.value));
+    }
+}

package/package.json

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