@refinitiv-ui/efx-grid 6.0.0-next.0

package/lib/tr-grid-util/es6/SubTable.js

@@ -0,0 +1,558 @@
+import { Dom } from "./Dom.js";
+import { Ext } from "./Ext.js";
+import { ElementWrapper } from "./ElementWrapper.js";
+
+/** SubTable represents a single tbody, thead, or tfoot element within table element
+* @constructor
+* @extends {ElementWrapper}
+* @param {(Element|string)=} opt_elem
+*/
+var SubTable = function(opt_elem) {
+	var elem;
+	if(opt_elem) {
+		if(typeof opt_elem == "string") { // tbody, thead, tfoot
+			elem = document.createElement(opt_elem);
+		} else {
+			elem = /** @type{Element} */(opt_elem);
+		}
+	} else {
+		elem = document.createElement("tbody");
+	}
+	this._elem = elem;
+
+	this._render = SubTable._defaultCellRenderer;
+};
+Ext.inherits(SubTable, ElementWrapper);
+
+/** @type {number}
+* @private
+*/
+SubTable.prototype._colCount = 0;
+
+/** @type {number|null}
+* @private
+*/
+SubTable.prototype._defaultRowHeight = null;
+/** @type {!Function}
+* @private
+*/
+SubTable.prototype._render;
+
+
+/** @public
+* @ignore
+* @param {number=} opt_count
+*/
+SubTable.prototype.addColumns = function(opt_count) {
+	if(opt_count == null) { opt_count = 1; }
+	else if(opt_count <= 0) { return; }
+
+	this._colCount += opt_count;
+
+	var rows = this.getRows(); // TODO: Must include all suspended rows
+	for(var r = rows.length; --r >= 0;) {
+		var tr = rows[r];
+		for(var c = 0; c < opt_count; ++c) {
+			tr.insertCell(-1);
+		}
+	}
+};
+/** @public
+* @ignore
+* @param {number=} opt_count
+*/
+SubTable.prototype.removeColumns = function(opt_count) {
+	if(opt_count == null || opt_count >= this._colCount) {
+		this.removeAllColumns();
+	}
+	if(opt_count <= 0) { return; }
+
+	this._colCount -= opt_count;
+	var rows = this.getRows(); // TODO: Must include all suspended rows
+	for(var r = rows.length; --r >= 0;) {
+		Dom.removeChildren(rows[r], opt_count);
+	}
+};
+/** @public
+* @ignore
+*/
+SubTable.prototype.removeAllColumns = function() {
+	if(this._colCount <= 0) { return; }
+	this._colCount = 0;
+
+	this.removeAllRows();
+};
+/** @public
+* @ignore
+* @param {number} val
+*/
+SubTable.prototype.setColumnCount = function(val) {
+	if(val >= this._colCount) {
+		this.addColumns(val - this._colCount);
+	} else {
+		this.removeColumns(this._colCount - val);
+	}
+};
+
+/** @public
+* @param {number=} at Index for insertion
+* @return {Element} tr (HTMLTableRowElement) element
+*/
+SubTable.prototype.insertRow = function(at) {
+	var row = this._elem.insertRow(at);
+	for(var i = this._colCount; --i >= 0;) {
+		row.insertCell();
+	}
+	return row;
+};
+
+/** @public
+* @param {number=} count
+* @return {!Array.<Element>} Array of tr (HTMLTableRowElement) elements
+*/
+SubTable.prototype.addRows = function(count) {
+	var rows = null;
+	if(count == null) {
+		count = 1;
+	}
+	if(count > 0) {
+		rows = new Array(count);
+		for(var r = 0; r < count; ++r) {
+			rows[r] = this.insertRow();
+		}
+
+		if(this._defaultRowHeight != null) {
+			this._applyDefaultRowHeight(rows, this._defaultRowHeight + "px");
+		}
+	}
+	return rows || [];
+};
+/** @public
+* @param {number=} count
+*/
+SubTable.prototype.removeRows = function(count) {
+	Dom.removeChildren(this._elem, count);
+};
+/** @public */
+SubTable.prototype.removeAllRows = function() {
+	Dom.removeChildren(this._elem);
+};
+/** @public
+* @param {number} val
+*/
+SubTable.prototype.setRowCount = function(val) {
+	var rowCount = this.getRowCount();
+	if(val >= rowCount) {
+		this.addRows(val - rowCount);
+	} else {
+		this.removeRows(rowCount - val);
+	}
+};
+/** @public
+* @param {(number|null)=} val
+*/
+SubTable.prototype.setDefaultRowHeight = function(val) {
+	if(!val) { val = null; }
+	if(val === this._defaultRowHeight) { return; }
+
+	this._defaultRowHeight = val;
+	var minHeight = (this._defaultRowHeight != null) ? this._defaultRowHeight + "px" : "";
+
+	this._applyDefaultRowHeight(this.getRows(), minHeight);
+};
+
+/** @public
+* @return {number}
+*/
+SubTable.prototype.getColumnCount = function() {
+	return this._colCount;
+};
+/** @public
+* @return {number}
+*/
+SubTable.prototype.getRowCount = function() {
+	return this._elem.children.length;
+};
+
+/** @public
+* @param {number} c
+* @param {number} r
+* @return {Element}
+*/
+SubTable.prototype.getCell = function(c, r) {
+	var tr = this.getRow(r);
+	if(tr) {
+		return tr.cells[c] || null;
+	}
+	return null;
+};
+/** @public
+* @param {number} c
+* @return {Array.<Element>} Array of td (HTMLTableCellElement) elements
+*/
+SubTable.prototype.getCellsInColumn = function(c) {
+	if(c < 0 || c >= this._colCount) {
+		return null;
+	}
+	var rows = this.getRows();
+	var rowCount = rows.length;
+	var ary = new Array(rowCount);
+	for(var r = 0; r < rowCount; ++r) {
+		ary[r] = rows[r].cells[c];
+	}
+
+	return ary;
+};
+/** @public
+* @param {number} r
+* @return {Array.<Element>} Array of td (HTMLTableCellElement) elements
+*/
+SubTable.prototype.getCellsInRow = function(r) {
+	var tr = this.getRow(r);
+	return (tr) ? tr.cells : null;
+};
+/** @public
+* @return {!Array.<Element>} Array of td (HTMLTableCellElement) elements
+*/
+SubTable.prototype.getAllCells = function() {
+	var rows = this.getRows();
+	var rowCount = rows.length;
+	var colCount = this._colCount;
+	var cellCount = 0;
+	var ary = new Array(rowCount * colCount);
+	for(var r = 0; r < rowCount; ++r) {
+		var tr = rows[r];
+		for(var c = 0; c < colCount; ++c) {
+			ary[cellCount++] = tr.cells[c];
+		}
+	}
+	return ary;
+};
+/** @public
+* @return {HTMLCollection} Array like collection of tr (HTMLTableRowElement) elements
+*/
+SubTable.prototype.getAllRows = function() {
+	return this._elem.children;
+};
+/** @public
+* @function
+* @return {HTMLCollection} Array like collection of tr (HTMLTableRowElement) elements
+*/
+SubTable.prototype.getRows = SubTable.prototype.getAllRows;
+/** @public
+* @param {number} r
+* @return {Element} Array of tr (HTMLTableRowElement) elements
+*/
+SubTable.prototype.getRow = function(r) {
+	return this._elem.children[r] || null;
+};
+
+/** @public
+* @return {!Array.<Array.<string>>}
+*/
+SubTable.prototype.getTextContents = function() {
+	var rows = this.getRows();
+	var rowCount = rows.length;
+	var rowContents = new Array(rowCount);
+	for(var r = 0; r < rowCount; ++r) {
+		var row = rows[r];
+		var colContents = new Array(this._colCount);
+		rowContents[r] = colContents;
+		for(var c = 0; c < this._colCount; ++c) {
+			colContents[c] = row.cells[c].textContent;
+		}
+	}
+	return rowContents;
+};
+/** @public
+* @param {number} c
+* @param {number} r
+* @return {string}
+*/
+SubTable.prototype.getCellTextContent = function(c, r) {
+	var cell = this.getCell(c, r);
+	if(cell) {
+		return cell.textContent;
+	}
+	return "";
+};
+/** @public
+* @param {number} c
+* @return {string}
+*/
+SubTable.prototype.getColumnTextContent = function(c) { // New-line delimited
+	var rows = this.getRows();
+	var rowCount = rows.length;
+	if(c >= 0 && c < this._colCount && rowCount > 0) {
+		var str = rows[0].cells[c].textContent;
+		for(var r = 1; r < rowCount; ++r) {
+			str += "\n" + rows[r].cells[c].textContent;
+		}
+		return str;
+	}
+	return "";
+};
+/** @public
+* @param {number} r
+* @return {string}
+*/
+SubTable.prototype.getRowTextContent = function(r) { // Tab delimited
+	var tr = this.getRow(r);
+	if(tr && this._colCount > 0) {
+		var str = tr.cells[0].textContent;
+		for(var c = 1; c < this._colCount; ++c) {
+			str += "\t" + tr.cells[c].textContent;
+		}
+		return str;
+	}
+	return "";
+};
+/** @public
+* @return {string}
+*/
+SubTable.prototype.getTableTextContent = function() { // Tab delimited
+	var rowCount = this.getRows().length;
+	if(rowCount > 0) {
+		var str = this.getRowTextContent(0);
+		for(var r = 1; r < rowCount; ++r) {
+			str += "\n" + this.getRowTextContent(r);
+		}
+		return str;
+	}
+	return "";
+};
+/** @public
+* @return {string}
+*/
+SubTable.prototype.toString = function() {
+	var str = this.getElement().outerHTML;
+	str = str.replace(/><tr/g, ">\n\t<tr");
+	str = str.replace(/><td/g, ">\n\t\t<td");
+	str = str.replace(/><td/g, ">\n\t\t<th"); // TH can occur in thead
+	str = str.replace(/><\/tr/g, ">\n\t</tr");
+	var tagName = this.getElement().tagName.toLowerCase();
+	str = str.replace("</" + tagName, "\n</" + tagName);
+	return str;
+};
+
+/** @public
+* @param {Event} e
+* @return {number}
+*/
+SubTable.prototype.getColumnIndex = function(e) {
+	if(e) {
+		var len, i;
+		var tgt = /** @type{Node} */(e.target);
+		if(this._elem.contains(tgt)) {
+			var tdElem = Dom.closestTagName(tgt, "TD");
+			if(!tdElem) {
+				tdElem = Dom.closestTagName(tgt, "TH");
+			}
+			if(tdElem) {
+				var chdr = tdElem.parentElement.children;
+				len = chdr.length;
+				for(i = 0; i < len; ++i) {
+					if(tdElem === chdr[i]) {
+						return i;
+					}
+				}
+			}
+		} else { // In case of the target is not a child of this element
+			var rows = this.getRows();
+			var cells = (rows[0]) ? rows[0].cells : null;
+			if(cells) {
+				var pos = Dom.getRelativePosition(e, this._elem);
+				var x = pos["x"];
+				if(x >= 0) {
+					len = cells.length;
+					for(i = 0; i < len; ++i) {
+						x -= cells[i].offsetWidth;
+						if(x < 0) { // Not include the right border
+							return i;
+						}
+					}
+				}
+			}
+		}
+	}
+	return -1;
+};
+/** @public
+* @param {Event} e
+* @return {number}
+*/
+SubTable.prototype.getRowIndex = function(e) {
+	var rows = this.getRows();
+	if(rows && e) {
+		var jLen = rows.length;
+		var tgtElem = e.target; // TODO: Support Shadow Root
+		for(var j = 0; j < jLen; ++j) {
+			var row = rows[j];
+			if(row === tgtElem) {
+				return j;
+			}
+		}
+
+		// In case of the target is not a child of this element
+		var pos = Dom.getRelativePosition(e, this._elem);
+		var y = pos["y"];
+		if(y >= 0) {
+			var len = rows.length;
+			for(var i = 0; i < len; ++i) {
+				y -= rows[i].offsetHeight;
+				if(y < 0) { // Not include the right border
+					return i;
+				}
+			}
+		}
+	}
+	return -1;
+};
+/** @public
+* @param {number} colIndex
+* @param {number=} rowIndex
+* @return {number}
+*/
+SubTable.prototype.getColumnLeft = function(colIndex, rowIndex) {
+	var cell = this.getCell(colIndex, rowIndex ? rowIndex : 0);
+	if(cell) {
+		return cell.offsetLeft; // WARNING: Hidden cells or cell spanning can cause unexpected results
+	}
+	return NaN;
+};
+/** @public
+* @param {number|Element} rowRef
+* @return {number}
+*/
+SubTable.prototype.getRowTop = function(rowRef) {
+	var row = null;
+	if(typeof rowRef === "number") {
+		row = this.getRow(rowRef);
+	} else {
+		row = Dom.closestTagName(rowRef, "TR");
+	}
+	return (row) ? row.offsetTop : NaN;
+};
+/** @public
+* @param {Element} cell
+* @param {Object=} ret_obj
+* @return {!Object} Object with x and y property
+*/
+SubTable.prototype.getCellPosition = function(cell, ret_obj) {
+	if(!ret_obj) { ret_obj = {}; }
+	ret_obj["x"] = cell.offsetLeft;
+	var pn = cell.parentNode; // Expecting tr element
+	ret_obj["y"] = (pn) ? pn.offsetTop : NaN;
+	return ret_obj;
+};
+
+/** @public
+* @param {Function} func
+*/
+SubTable.prototype.setCellRenderer = function(func) {
+	this._render = func || SubTable._defaultCellRenderer;
+};
+/** @public
+* @override
+* @param {Element} elem
+* @param {string=} opt_elementType
+*/
+SubTable.prototype.cloak = function(elem, opt_elementType) {
+	SubTable["base"](this, "cloak", elem, "tr");
+	var rows = elem.getElementsByTagName("TR");
+	this._colCount = rows[0] ? rows[0].children.length : 0;
+};
+
+/** @public
+* @param {number} c1
+* @param {number} c2
+* @param {number} r1
+* @param {number} r2
+* @return {Element} Top left cell element
+*/
+SubTable.prototype.spanBlock = function (c1, c2, r1, r2) { // WARNING: It's c c r r
+	var cell = null;
+	for(var c = c2; c >= c1; --c) {
+		for(var r = r2; r >= r1; --r) {
+			cell = this.getCell(c, r);
+			if(cell) {
+				cell.style.display = "none";
+			}
+		}
+	}
+	if(cell) {
+		cell.setAttribute("colspan", (c2 - c1 + 1));
+		cell.setAttribute("rowspan", (r2 - r1 + 1));
+		cell.style.display = "";
+	}
+	return cell;
+};
+
+/** Parse table content into 2d array for table input
+* @public
+* @function
+* @param {Element} tbl
+* @return {Array.<Array.<string>>}
+*/
+SubTable.parseTableContent = function(tbl) {
+	if(!tbl) {
+		return null;
+	}
+
+	var tbody = (tbl.tagName == "TBODY") ? tbl : tbl.getElementsByTagName("TBODY")[0];
+	if(!tbody) {
+		if(tbl.tagName == "TABLE") { // Table element can directly host tr element without tbody element
+			tbody = tbl;
+		}
+	}
+	if(!tbody) {
+		return null;
+	}
+
+	var trs = tbody.getElementsByTagName("TR");
+	var rowCount = trs.length;
+	var rows = new Array(rowCount);
+	for(var i = 0; i < rowCount; ++i) {
+		var tds = trs[i].getElementsByTagName("TD"); // TODO: Handle TH cell
+		var colCount = tds.length;
+		var columns = new Array(colCount);
+
+		rows[i] = columns;
+		for(var j = 0; j < colCount; ++j) {
+			columns[j] = tds[j].textContent;
+		}
+	}
+	return rows;
+};
+
+/** @private
+* @param {!NodeList<!Element>|Array.<Element>} rows
+* @param {string} minHeight
+*/
+SubTable.prototype._applyDefaultRowHeight = function(rows, minHeight) {
+	for(var r = rows.length; --r >= 0;) {
+		rows[r].style.height = minHeight;
+	}
+};
+
+/** @private
+* @function
+* @param {Element} tdCell
+* @param {*} val
+* @param {number=} c
+* @param {number=} r
+*/
+SubTable._defaultCellRenderer = function(tdCell, val, c, r) {
+	if(val != null) {
+		if(val["nodeType"]) {
+			tdCell.appendChild(/** @type{Node} */(val));
+		} else {
+			tdCell.textContent = val;
+		}
+	} else {
+		tdCell.textContent = "";
+	}
+};
+
+export default SubTable;
+export { SubTable };

package/lib/tr-grid-util/es6/Table.d.ts

@@ -0,0 +1,125 @@
+import { Dom } from "./Dom.js";
+import { Ext } from "./Ext.js";
+import { ElementWrapper } from "./ElementWrapper.js";
+import { SubTable } from "./SubTable.js";
+
+declare class Table extends ElementWrapper {
+
+    constructor(elem?: (Element|number), opt_colCount?: (number|any), opt_rowCount?: number);
+
+    public getTableElement(): Element;
+
+    public setCRWH(col: number, row: number, width: number, height: number): void;
+
+    public init(options: any): void;
+
+    public addColumns(opt_count?: number): (Element)[];
+
+    public removeColumns(opt_count?: number): void;
+
+    public removeAllColumns(): void;
+
+    public setColumnCount(val: number): void;
+
+    public addRows(opt_count?: number): (Element)[];
+
+    public removeRows(opt_count?: number): void;
+
+    public removeAllRows(): void;
+
+    public setRowCount(val: number): void;
+
+    public getColumnCount(): number;
+
+    public getRowCount(): number;
+
+    public getCell(c: number, r: number): Element;
+
+    public getCellsInColumn(c: number): (Element)[];
+
+    public getCellsInRow(r: number): (Element)[];
+
+    public getAllCells(): (Element)[];
+
+    public getAllRows(): (Element)[];
+
+    public getRow(r: number): Element;
+
+    public spanBlock(c1: number, c2: number, r1: number, r2: number): Element;
+
+    public spanHorizontally(r: number, bool: boolean): Element;
+
+    public setColMinWidths(val: number|string|(string|number)[], opt_at?: number): void;
+
+    public setColumnWidths(val: number|string|(string|number)[], opt_at?: number): void;
+
+    public setColBackgroundColors(val: string|(string)[], opt_at?: number): void;
+
+    public setColBGColors(val: string|(string)[], opt_at?: number): void;
+
+    public setColBorders(val: number|string|(number|string)[], opt_at?: number): void;
+
+    public setSize(width: number, height: number): void;
+
+    public setCellSize(defaultWidth: number, defaultHeight: number): void;
+
+    public setDefaultColumnWidth(val?: (number|null)): void;
+
+    public setDefaultRowHeight(val?: (number|null)): void;
+
+    public distributeColumnWidth(): void;
+
+    public log(opt_rowLimit?: number): void;
+
+    public getTextContents(): (string)[][];
+
+    public getCellTextContent(c: number, r: number): string;
+
+    public getColumnTextContent(c: number): string;
+
+    public getRowTextContent(r: number): string;
+
+    public getTableTextContent(): string;
+
+    public fixateTableWidth(opt_bool?: boolean): void;
+
+    public loosenTableWidth(opt_bool?: boolean): void;
+
+    public addHeaderRows(opt_count?: number): (Element)[];
+
+    public getHeaderCell(c: number, r: number): Element;
+
+    public getAllHeaderCells(): (Element)[];
+
+    public removeHeaderRows(opt_count?: number): void;
+
+    public addFooterRows(opt_count?: number): (Element)[];
+
+    public getFooterCell(c: number, r: number): Element;
+
+    public getAllFooterCells(): (Element)[];
+
+    public removeFooterRows(opt_count?: number): void;
+
+    public getColumnIndex(e: Event): number;
+
+    public getRowIndex(e: Event): number;
+
+    public getColumnLeft(colIndex: number, rowIndex?: number): number;
+
+    public getRowTop(rowRef: number|Element): number;
+
+    public getCellPosition(cell: Element, ret_obj?: any): any;
+
+    public cloak(tblElem: Element): void;
+
+    public getBody(): SubTable;
+
+    public getHeader(): SubTable;
+
+    public getFooter(): SubTable;
+
+}
+
+export default Table;
+export { Table };