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

package/lib/core/es6/grid/components/Column.js

@@ -0,0 +1,612 @@
+/* eslint-disable */
+import Ext from "../../../../tr-grid-util/es6/Ext.js";
+import Util from "../util/util.js";
+import ElementWrapper from "../components/ElementWrapper.js";
+import Cell from "../components/Cell.js";
+import ILayoutGrid from "../ILayoutGrid.js";
+/* eslint-enable */
+
+/** @constructor
+* @ignore
+* @extends {ElementWrapper}
+* @param {ILayoutGrid} section Parent section
+*/
+var Column = function (section) {
+	var elem = this._element = document.createElement("div");
+	elem.className = "column";
+	this._cells = [];
+	this._section = section;
+};
+Ext.inherits(Column, ElementWrapper);
+
+/** @type {Column}
+* @private
+*/
+Column.prototype._nextSibling = null;
+
+/** @type {Node}
+* @private
+*/
+Column.prototype._parent = null;
+/** @type {ILayoutGrid}
+* @private
+*/
+Column.prototype._section = null;
+/** @type {Array.<!Cell>}
+* @private
+*/
+Column.prototype._cells = null;
+/** @type {number}
+* @private
+*/
+Column.prototype._cellStart = 0;
+/** @type {number}
+* @private
+*/
+Column.prototype._cellEnd = 0;
+/** @type {boolean}
+* @private
+*/
+Column.prototype._autoStyleUpdating = false;
+/** @type {boolean}
+* @description In some use case column cannot be deactivated, e.g. column is stretched or spanned
+* @private
+*/
+Column.prototype._deactivation = false;
+/** @type {Array}
+* @private
+*/
+Column.prototype._sizeClasses = null;
+/** @type {number}
+* @private
+*/
+Column.prototype._colLeft = 0;
+/** @type {boolean}
+* @private
+*/
+Column.prototype._absolute = false;
+/** @type {Node}
+* @description Scroll pane, only the left pinned column will have this property,
+*              used to keep order of inline-block element.
+* @private
+*/
+Column.prototype._scrollFrame = null;
+
+/** @type {number}
+* @description Each bit represents visibility state as the followings:
+* Bit 0 is used for normal show/hide method
+* Bit 1 is used for zero width
+* Bit 2 is used for zero height
+* Bit 3 is used for active/inactive state of virtualization
+* @private
+*/
+Column.prototype._invisibility = 0;
+/**
+* @type {!Array.<number>}
+* @private
+*/
+Column.prototype._bits = [1, 2, 4, 8]; // Static variable
+/** @type {boolean}
+* @private
+*/
+Column.prototype._pinned = true;
+
+/** @public
+*/
+Column.prototype.clearContent = function() {
+	for(var r = this._cells.length; --r >= 0;) {
+		this._cells[r].setContent(null);
+	}
+};
+
+/** {@link ElementWrapper#setLeft}
+* @override
+*/
+Column.prototype.setLeft = function (val) {
+	this._colLeft = val;
+	if(this._absolute) {
+		this._element.style.left = val + "px";
+	}
+	return true;
+};
+/** @public
+* @ignore
+* @param {boolean=} bool
+*/
+Column.prototype.enableAbsolutePosition = function (bool) {
+	bool = bool !== false;
+	if(bool !== this._absolute) {
+		this._absolute = bool;
+		if(bool) {
+			this._element.style.left = this._colLeft + "px";
+		} else {
+			this._element.style.left = "";
+		}
+	}
+};
+/** {@link ElementWrapper#dispose}
+* @override
+*/
+Column.prototype.dispose = function () {
+	this._dispose();
+	for(var r = this._cells.length; --r >= 0;) {
+		this._cells[r].dispose();
+	}
+	this._scrollFrame = this._nextSibling = this._parent = this._cells = this._section = null;
+};
+/** {@link ElementWrapper#setStyle}
+* @override
+*/
+Column.prototype.setStyle = function (str, val) {
+	var elem = this._element;
+	elem.style[str] = val;
+
+	var bgc = elem.style.backgroundColor;
+	if(bgc) {
+		if(!elem.classList.contains("no-shading")) { elem.classList.add("no-shading"); }
+	} else {
+		if(elem.classList.contains("no-shading")) { elem.classList.remove("no-shading"); }
+	}
+};
+/** {@link ElementWrapper#setStyles}
+* @override
+*/
+Column.prototype.setStyles = function (json) {
+	var elem = this._element;
+	var styles = elem.style;
+	for (var key in json) {
+		styles[key] = json[key];
+	}
+
+	var bgc = elem.style.backgroundColor;
+	if(bgc) {
+		if(!elem.classList.contains("no-shading")) { elem.classList.add("no-shading"); }
+	} else {
+		if(elem.classList.contains("no-shading")) { elem.classList.remove("no-shading"); }
+	}
+};
+
+/** {@link ElementWrapper#show}
+* @override
+*/
+Column.prototype.show = function (opt_shown) {
+	this.setVisibility(0, opt_shown !== false);
+};
+
+/** {@link ElementWrapper#setWidth}
+* @override
+*/
+Column.prototype.setWidth = function (val) {
+	this._element.style.width = val + "px";
+	var magnitude = (val > 0 && val <= 60) ? 3 - Math.floor((val - 0.01) / 20) : 0;
+	if(magnitude < 0 || magnitude > 3) {
+		magnitude = 3;
+	}
+
+	var i;
+	var sc = this._sizeClasses;
+	if(sc) {
+		if(sc.length > magnitude) {
+			for(i = sc.length; --i >= magnitude;) {
+				this.removeClass(sc[i]);
+			}
+			sc.length = magnitude;
+		}
+		if(!magnitude) {
+			this._sizeClasses = null;
+		}
+	}
+
+	if(magnitude) {
+		if(!sc) {
+			sc = [];
+			this._sizeClasses = sc;
+		}
+		for(i = sc.length; i < magnitude; ++i) {
+			sc[i] = Column._sizeClasses[i];
+			this.addClass(sc[i]);
+		}
+	}
+
+	this.setVisibility(1, val > 0);
+	return true;
+};
+/** @type {Array.<string>}
+* @private
+*/
+Column._sizeClasses = ["small-col", "very-small-col", "tiny-col"];
+
+/** {@link ElementWrapper#setHeight}
+* @override
+*/
+Column.prototype.setHeight = function (val) {
+	this._element.style.height = val + "px";
+	this.setVisibility(2, val > 0);
+	return true;
+};
+/** {@link ElementWrapper#getParent}
+* @override
+*/
+Column.prototype.getParent = function () {
+	return this._parent;
+};
+/** {@link ElementWrapper#setParent}
+* @override
+*/
+Column.prototype.setParent = function (parent, opt_prepend) {
+	var el = this._element;
+	if(!el) { return; }
+
+	this._parent = Util.getElement(parent);
+	var hidingMethod = this._section ? this._section.getHidingMethod() : "";
+
+	// hidden column with hidingMethod should appear in tree
+	// to prevent from unability of showing
+	if(!this._invisibility || hidingMethod) {
+		this._setParent(this._parent, opt_prepend);
+	}
+};
+/** {@link ElementWrapper#insertBefore}
+* @override
+*/
+Column.prototype.insertBefore = function (nextSibling) {
+	if(this._parent) {
+		if(this._scrollFrame) { // Only left pinned columns have this property
+			// This column must be moved within the same parent and before its scroll frame sibling.
+			if(nextSibling && this._parent === nextSibling.getParent()) {
+				this._insertBefore(nextSibling);
+			} else {
+				this._insertBefore(this._scrollFrame);
+			}
+		} else if(nextSibling) {
+			if(this._parent === nextSibling.getParent()) { // Move column, only if their parents are the same
+				this._insertBefore(nextSibling);
+			}
+			// else {
+			// cannot move this column to differrent parent
+			// }
+		} else { // Place the column at the end when there is no next sibling
+			this._setParent(this._parent);
+		}
+	} else {
+		this._insertBefore(nextSibling); // TODO: Perform: column virtualization
+		this._parent = nextSibling.getParent(); // TODO: Check if this is necessary
+	}
+};
+//#endregion Public Methods
+
+//#region Internal Public Methods
+/** @public
+* @ignore
+* @param {boolean=} enabled
+*/
+Column.prototype.enableAutoStyleUpdating = function (enabled) {
+	enabled = enabled !== false;
+
+	if(this._autoStyleUpdating !== enabled) {
+		this._autoStyleUpdating = enabled;
+		// if(this._autoStyleUpdating) {
+		// this.updateStyle();
+		// }
+	}
+};
+/** @public
+* @param {Column} sibling
+*/
+Column.prototype.setNextSibling = function (sibling) {
+	this._nextSibling = sibling;
+};
+/** @public
+* @return {boolean}
+*/
+Column.prototype.isActive = function () {
+	return !(this._invisibility & this._bits[3]); // Bit 3 has value, then column is inactive
+};
+/** @public
+* @ignore
+* @param {boolean=} opt_disabled
+*/
+Column.prototype.disableDeactivation = function (opt_disabled) {
+	this._deactivation = opt_disabled !== false;
+	if(this._deactivation) {
+		if(!this.isActive()) {
+			this.activate();
+		}
+	}
+};
+/** @public
+* @ignore
+* @param {boolean=} opt_enabled
+* @return {boolean} Return true if there is any change
+*/
+Column.prototype.activate = function (opt_enabled) {
+	opt_enabled = this._pinned || this._deactivation || (opt_enabled !== false);
+	if (this.isActive() !== opt_enabled) {
+		this.setVisibility(3, opt_enabled);
+		return true;
+	}
+	return false;
+};
+/** @public
+* @ignore
+* @param {boolean=} opt_disabled
+*/
+Column.prototype.deactivate = function (opt_disabled) {
+	this.activate(opt_disabled === false);
+};
+/** @public
+* @ignore
+* @param {number} count
+*/
+Column.prototype.setCellCount = function (count) {
+	var r;
+	for(r = this._cells.length; r < count; ++r) {
+		this._cells.push(new Cell(null, this._section));
+	}
+	for(r = this._cells.length; --r >= count;) {
+		this._cells[r].dispose();
+	}
+	this._cells.length = count;
+	if(this._cellStart > count) {
+		this._cellStart = this._cellEnd = count;
+	} else if(this._cellEnd > count) {
+		this._cellEnd = count;
+	}
+};
+/** @public
+* @ignore
+* @param {number} rowIndex
+* @return {Cell}
+*/
+Column.prototype.getCell = function (rowIndex) {
+	return this._cells[rowIndex] || null;
+};
+/** @public
+* @ignore
+* @param {number} from
+* @param {number} length
+* @param {boolean} collapsed
+* @param {boolean} excludeFirstCell
+* @param {boolean} keptInDoc
+*/
+Column.prototype.collapseCells = function (from, length, collapsed, excludeFirstCell, keptInDoc) {
+	if(length <= 0) { return; }
+
+	var dirty = false;
+	var cell = this._cells[from];
+	if(cell && !excludeFirstCell) { // If we need to process the first cell
+		dirty |= cell.collapse(collapsed, keptInDoc); // If we have multiple rows kept the cell in the doc for positioning
+	}
+	for(var i = 1; i < length; ++i) {
+		cell = this._cells[from + i];
+		if(cell) {
+			dirty |= cell.collapse(collapsed, keptInDoc);
+		} else {
+			break;
+		}
+	}
+	if(dirty) {
+		if(collapsed) {
+			if(length > 1) {
+				this._hasCollapsedCells = true;
+			}
+		} else {
+			this.updateCellOrders(); // WARNING: Re-inserting all cells is slow
+		}
+	}
+};
+/** @public
+* @deprecated
+* @ignore
+*/
+Column.prototype.uncollapseAllCells = Util._deprecatedFunction;
+
+/** @public
+* @ignore
+* @param {number} from
+* @param {number} to
+*/
+Column.prototype.activateCells = function (from, to) {
+	var r;
+	var parent = this._element;
+	if(this._hasCollapsedCells) { // There is a vertical span and no row virtualization. We only need to appendChild incrementally
+		from = this._cellEnd;
+		if(to > this._cellEnd) {
+			this._cellEnd = to;
+		}
+	} else {
+		if(this._cellStart === from) {
+			var diff = this._cellEnd - to;
+			if(diff > 0) {
+				for(r = this._cellEnd; --r >= to;) {
+					this._cells[r].removeParent();
+				}
+				this._cellEnd = to;
+				return;
+			} else if(diff < 0) {
+				from = this._cellEnd; // Append new cells without removing any child
+				this._cellEnd = to;
+			} else {
+				return; // Activate the same range
+			}
+		} else {
+			for(r = this._cellEnd; --r >= this._cellStart;) {
+				this._cells[r].removeParent();
+			}
+			this._cellStart = from;
+			this._cellEnd = to;
+		}
+	}
+
+	for(r = from; r < to; ++r) {
+		var cell = this._cells[r];
+		if(cell.isKeptInDoc()) {
+			cell.initialize();
+			parent.appendChild(cell.getElement());
+		}
+	}
+};
+/** @public
+* @ignore
+* @param {number} numCells Index of the first cell to be moved to the top
+*/
+Column.prototype.moveCellsToTop = function (numCells) {
+	if(!this.isActive()) {
+		return; // There is no point in cycling cells when the column is inactive
+	}
+
+	var parent = this._element;
+	for(var i = 0; i < numCells; ++i) {
+		var cell = this._cells[i];
+		if(cell.isKeptInDoc()) {
+			parent.appendChild(cell.getElement());
+		}
+	}
+	this._cells = Util.cycleArray(this._cells, numCells);
+};
+/** @public
+* @ignore
+*/
+Column.prototype.updateCellOrders = function () {
+	this._hasCollapsedCells = false;
+	var parent = this._element;
+	for(var i = this._cellStart; i < this._cellEnd; ++i) {
+		var cell = this._cells[i];
+		if(cell.isKeptInDoc()) {
+			parent.appendChild(cell.getElement());
+		} else {
+			this._hasCollapsedCells = true;
+		}
+	}
+};
+/** @public
+* @ignore
+* @return {boolean}
+*/
+Column.prototype.hasCollapsedCells = function () {
+	return this._hasCollapsedCells;
+};
+/** @public
+* @ignore
+* @param {Element} cellElem
+* @returns {number}
+*/
+Column.prototype.getCellIndex = function (cellElem) {
+	if(!cellElem) { return -1; }
+	for(var i = this._cellStart; i < this._cellEnd; ++i) {
+		var cell = this._cells[i];
+		if(cell.getElement() === cellElem) {
+			return i;
+		}
+	}
+	return -1;
+};
+/**
+* Get section instance (ILayoutGrid) which is the parent of this column
+* @public
+* @return {ILayoutGrid}
+*/
+Column.prototype.getSection = function () {
+	return this._section;
+};
+
+/**
+* @public
+* @ignore
+* @return {Array.<string>}
+*/
+Column.prototype.log = function () {
+	var ary = [];
+	var len = this._cells.length;
+	for(var i = 0; i < len; ++i) {
+		ary.push(this._cells[i].getTextContent());
+	}
+	return ary;
+};
+
+/** @public
+* @ignore
+* @return {boolean}
+*/
+Column.prototype.getVisibility = function () {
+	return !this._invisibility;
+};
+/** @public
+* @ignore
+* @param {number} bitIndex
+* @param {*} shown
+*/
+Column.prototype.setVisibility = function (bitIndex, shown) {
+	var prevVis = !this._invisibility;
+
+	var bit = this._bits[bitIndex] || 1;
+	if(shown) {
+		this._invisibility &= ~bit; // Remove invisibility bit
+	} else {
+		this._invisibility |= bit; // Add invisibility bit
+	}
+
+	var newVis = !this._invisibility;
+	if (prevVis === newVis) {
+		return; // Nothing has changed
+	}
+
+	var hidingMethod = this._section ? this._section.getHidingMethod() : "";
+	if(hidingMethod) {
+		this.enableClass("hidden", !newVis); // Custom class method
+		// this._element.style.display = (newVis !== false) ? "" : "none";
+	} else {
+		if(newVis) { // Find a proper place to insert (show)
+			// this._element.style.display = "";
+			var curParent = this._parent;
+			if(!curParent) {
+				return; // WARNING: It could possibly be a bug, if there is no parent at this moment
+			}
+			var nextSibling = this._nextSibling; // Next sibling can be an empty object
+			while(nextSibling) {
+				if (nextSibling._parent !== curParent) {
+					// This could mean either this is pinned left column or column within the scroll frame (i.e. any column that is not pinned to the right)
+					nextSibling = null;
+					break;
+				}
+				if(!nextSibling._invisibility) {
+					break;
+				}
+				nextSibling = nextSibling._nextSibling;
+			}
+			this.insertBefore(nextSibling);
+		} else { // Hide by removing from the DOM
+			this._setParent(null);
+		}
+	}
+};
+/** @public
+* @ignore
+*/
+Column.prototype.updateLayout = function () {};
+
+/** @public
+* @ignore
+* @param {Node} pane Scroll pane is required by pinned column on the left side to maintain the order
+* @param {Node} slider
+* @param {boolean} absolutePos
+*/
+Column.prototype.setScrollState = function (pane, slider, absolutePos) {
+	this._scrollFrame = pane;
+
+	this.enableAbsolutePosition(absolutePos);
+
+	this.setParent(slider || this._section.getColumnHost());
+
+	if(!slider) {
+		// Re-activate any column that is not inside the scroll slider (pinned columns on either left or right side)
+		this.activate(); // This may change invisibility state
+	}
+
+	this._pinned = !slider;
+};
+
+Column._proto = Column.prototype;
+
+export default Column;
+export { Column };