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

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

@@ -0,0 +1,740 @@
+/* eslint-disable */
+import Ext from "../../../../tr-grid-util/es6/Ext.js";
+import ElementWrapper from "./ElementWrapper.js";
+import Util from "../util/util.js";
+import ILayoutGrid from "../ILayoutGrid.js";
+import CellFloatingPanel from "../components/CellFloatingPanel.js";
+/* eslint-enable */
+
+/** Cell container. Please see {@link ElementWrapper} for full APIs and parameter lists
+* @constructor
+* @extends {ElementWrapper}
+* @param {Element=} opt_element
+* @param {ILayoutGrid=} opt_section Parent section
+*/
+var Cell = function (opt_element, opt_section) {
+	this._onFocus = this._onFocus.bind(this);
+
+	this._id = Cell._runningId++;
+	this._element = document.createElement("div");
+	this._element.className = "cell";
+	if (opt_section) {
+		this._section = opt_section;
+	}
+};
+Ext.inherits(Cell, ElementWrapper);
+
+/** Cell's aligner
+* @private
+* @type {Element}
+*/
+Cell.prototype._aligner = null;
+/** @type {number}
+* @private
+*/
+Cell._runningId = 0;
+
+/** @type {number}
+* @private
+*/
+Cell.prototype._id = 0;
+/** @type {number}
+* @private
+*/
+Cell.prototype._width = -1;  // Negative value to allow using actual element size
+/** @type {number}
+* @private
+*/
+Cell.prototype._height = -1;  // Negative value to allow using actual element size
+/** @type {boolean}
+* @private
+*/
+Cell.prototype._visible = true;
+
+/**
+* @private
+* @type {*}
+*/
+Cell.prototype._rawContent;
+
+/** Parent section of the cell
+* @private
+* @type {ILayoutGrid}
+*/
+Cell.prototype._section = null;
+/** @private
+* @type {boolean}
+*/
+Cell.prototype._contentLocked = false;
+/** @private
+* @type {number}
+*/
+Cell.prototype._collapsedState = 0;
+/** @private
+* @type {CellFloatingPanel}
+*/
+Cell.prototype._floatingPanel = null;
+/** @private
+* @type {CellFloatingPanel}
+*/
+Cell.prototype._frontIcon = null;
+
+//#region ElementWrapper
+/** {@link ElementWrapper#getContent}
+* @override
+*/
+Cell.prototype.getContent = function (opt_allContent) {
+	if(opt_allContent) {
+		if(this._element) {
+			return this._element.children;
+		}
+	}
+	return /** @type{Node} */(this._content) || null;
+};
+/** {@link ElementWrapper#setContent}
+* @override
+*/
+Cell.prototype.setContent = function (content, opt_tooltip) {
+	if (this._contentLocked) { return null; }
+
+	if (content == null || content !== content) { // null or NaN
+		content = null;
+	} else if (content.nodeType !== 1 && content.nodeType !== 11) { // Element type checking (1 = DOM, 11 = DocumentFragment)
+		if (content["getElement"] == null) {
+			if (!(typeof content === "string")) { content = content + ""; }
+		} else {
+			content = /** @type{Element} */(content["getElement"]());
+		}
+	}
+
+	if(this._aligner) {// Hack: Someone has changed the content without notice
+		var fc = this._aligner.firstChild;
+		if(fc !== this._content) {
+			this._rawContent = fc;
+			this._content = /** @type{Element} */(fc);
+		}
+	}
+
+	var ret = this._setRawContent(content);
+
+	if (opt_tooltip != null && this._content) { // Apply tooltip after the real content has been populated
+		this._content.setAttribute("title", opt_tooltip);
+	}
+	return ret;
+};
+/** Fastest way to set simple text to the Cell
+* @override
+* @public
+* @param {string} str
+*/
+Cell.prototype.setTextContent = function (str) {
+	if (str == null) { str = ""; }
+	if(this._rawContent === str) { return; }
+
+	if(typeof this._rawContent !== "string") {
+		if(this._rawContent == null && !this._textSpan) { // First time initialization
+			this.initialize();
+			this._rawContent = str;
+			this._textSpan = document.createElement("span");
+			this._textSpan.className = "text";
+			this._textSpan.textContent = str;
+			this._content = this._textSpan;
+			this._aligner.className = "valigner";
+			this._aligner.appendChild(this._textSpan);
+		} else {
+			this.setContent(str);
+		}
+		return;
+	}
+	this._rawContent = str;
+	this._textSpan.textContent = str;
+};
+
+
+/** {@link ElementWrapper#dispose}
+* @override
+*/
+Cell.prototype.dispose = function () {
+	this.removeParent();
+	this.unlistenAll();
+
+	this._element = this._section = this._aligner = null;
+	this._textSpan = this._rawContent = this._content = null;
+
+	this._frontIcon = this._floatingPanel = null;
+};
+
+/** {@link ElementWrapper#getNextSibling}
+* @override
+*/
+Cell.prototype.getNextSibling = function () {
+	return (this._element !== null) ? this._element.nextSibling : null;
+};
+/** {@link ElementWrapper#getParent}
+* @override
+*/
+Cell.prototype.getParent = function () {
+	return (this._element !== null) ? this._element.parentNode : null;
+};
+/** {@link ElementWrapper#setParent}
+* @override
+*/
+Cell.prototype.setParent = function (obj, opt_prepend) {
+	var parent = Util.getElement(obj);
+	if (parent) {
+		this.initialize();
+		if(this._collapsedState === 1) {
+			return; // Cell is being collapsed and not in the document
+		}
+
+		var sibling;
+		if (opt_prepend === true) {
+			sibling = parent.firstChild;
+		}
+		if (sibling) {
+			parent.insertBefore(this._element, sibling);
+		} else {
+			parent.appendChild(this._element);
+		}
+	} else {
+		this.removeParent();
+	}
+};
+/** @public
+* @ignore
+*/
+Cell.prototype.removeParent = function () {
+	var el = this._element;
+	if (el && el.parentNode) {
+		el.parentNode.removeChild(el);
+	}
+};
+/** {@link ElementWrapper#insertBefore}
+* @override
+*/
+Cell.prototype.insertBefore = function (nextSibling) {
+	var nextNode = Util.getElement(nextSibling);
+	if (nextNode == null) {
+		this.setParent(this.getParent());
+		return;
+	}
+
+	var parent = nextNode.parentNode;
+	if (parent == null) { return; }
+
+	this.initialize();
+	parent.insertBefore(this._element, nextNode);
+};
+
+
+/** {@link ElementWrapper#getTextContent}
+* @override
+*/
+Cell.prototype.getTextContent = function () {
+	if(this._rawContent) {
+		return (typeof this._rawContent == "string") ? /** @type{string} */(this._rawContent) : this._rawContent.textContent;
+	}
+	return "";
+};
+/** @public
+* @return {Element} return the element of the text content
+*/
+Cell.prototype.getTextElement = function () {
+	return this._textSpan;
+};
+
+/** {@link ElementWrapper#getWidth}
+* @override
+*/
+Cell.prototype.getWidth = function () {
+	if(this._width >= 0) {
+		return this._width;
+	}
+
+	return this._element.offsetWidth;
+};
+/** {@link ElementWrapper#setWidth}
+* @override
+*/
+Cell.prototype.setWidth = function (px) {
+	if(px < 0) { px = -1; }
+	if(this._width !== px) {
+		this._width = px;
+		this._element.style.width = (px >= 0) ? px + "px" : "";
+		this._updateDisplay();
+		return true;
+	}
+	return false;
+};
+
+/** {@link ElementWrapper#getHeight}
+* @description WARNING: Even if this element is hidden, its height is still returned as positive value
+* @override
+*/
+Cell.prototype.getHeight = function () {
+	if(this._height >= 0) {
+		return this._height;
+	}
+
+	return this._element.offsetHeight;
+};
+/** {@link ElementWrapper#setHeight}
+* @override
+*/
+Cell.prototype.setHeight = function (px) {
+	if(px < 0) { px = -1; }
+	if(this._height !== px) {
+		this._height = px;
+		this._element.style.height = (px >= 0) ? px + "px" : "";
+		this._updateDisplay();
+		return true;
+	}
+	return false;
+};
+
+/** Cell cannot be resized by this way {@link ElementWrapper#fillParentWidth}
+* @override
+*/
+Cell.prototype.fillParentWidth = function (percent) { return false; };
+/** Cell cannot be resized by this way {@link ElementWrapper#fillParentHeight}
+* @override
+*/
+Cell.prototype.fillParentHeight = function (percent) { return false; };
+/** {@link ElementWrapper#show}
+* @override
+*/
+Cell.prototype.show = function (opt_shown) {
+	var shown = opt_shown !== false;
+	if(shown !== this._visible) {
+		this._visible = shown;
+		this._updateDisplay();
+	}
+};
+/** {@link ElementWrapper#isVisible}
+* @override
+*/
+Cell.prototype.isVisible = function () {
+	return this._visible;
+};
+
+/** @deprecated
+ * @returns {number}
+*/
+Cell.prototype.getScrollLeft = function() { return 0; };
+/** @deprecated
+ * @returns {number}
+ */
+Cell.prototype.getScrollTop = function() { return 0; };
+/** @deprecated
+ * @returns {boolean}
+ */
+Cell.prototype.isEndOfHorizontalScroll = function() { return true; };
+/** @deprecated
+ * @returns {boolean}
+ */
+Cell.prototype.isEndOfVerticalScroll = function() { return true; };
+//#endregion ElementWrapper
+
+//#region Cell Specific Methods
+/** @public
+* @return {boolean}
+*/
+Cell.prototype.hasElement = function () {
+	return this._element !== null;
+};
+/** @public
+* @return {ILayoutGrid}
+*/
+Cell.prototype.getSection = function () {
+	return this._section;
+};
+/** Use for lazy initialization only. Force an element to be created, if it does not exist.
+* @public
+* @return {!Element}
+*/
+Cell.prototype.initialize = function () {
+	if(this._aligner == null) {
+		if (Util.isIE) {
+			this._aligner = document.createElement("div");
+		} else {
+			this._aligner = document.createElement("button");
+			this._aligner.addEventListener('focus', this._onFocus);
+		}
+		this._aligner.className = "valigner";
+		if(this._frontIcon) {
+			this._element.appendChild(this._frontIcon.getElement());
+		}
+		this._element.appendChild(this._aligner);
+		if(this._floatingPanel) {
+			this._element.appendChild(this._floatingPanel.getElement());
+		}
+	}
+	return /** @type{!Element} */(this._element);
+};
+
+/** @public
+* @param {Element} icon
+*/
+Cell.prototype.updateIcon = function(icon) {
+	if (!icon) {
+		return;
+	}
+
+	var fi = this._frontIcon;
+	if (fi) {
+		fi.clearItems();
+	}
+	this.insertFrontIcon(icon, 0);
+};
+/** @public
+*/
+Cell.prototype.removeIcon = function() {
+	var fi = this._frontIcon;
+	if (fi) {
+		fi.clearItems();
+		this._element.removeChild(fi.getElement());
+		fi = this._frontIcon = null;
+	}
+};
+
+/** @public
+* @deprecated
+*/
+Cell.prototype.isFrozen = Util._deprecatedFunction;
+/** @public
+* @deprecated
+* @param {boolean=} opt_bool
+*/
+Cell.prototype.freezeLayout = Util._deprecatedFunction;
+
+/** @public
+* @deprecated
+* @param {boolean=} opt_bool
+*/
+Cell.prototype.setAutoContentClipping = Util._deprecatedFunction;
+
+/** @public
+* @param {string} str
+* @return {boolean}
+*/
+Cell.prototype.setContentTooltip = function (str) {
+	if (str != null && this._content) {
+		this._content.setAttribute("title", str);
+		return true;
+	}
+	return false;
+};
+
+/** @public
+* @param {boolean} opt_locked
+*/
+Cell.prototype.lockContent = function (opt_locked) {
+	this._contentLocked = (opt_locked !== false);
+};
+
+/** Reset all styles, classes, and content in this cell and restore its default classes
+* @public
+*/
+Cell.prototype.reset = function() {
+	if(!this._element) { return; }
+
+	var width = this._element.style.width;
+	var height = this._element.style.height;
+	this.removeAttribute("style");
+	if(width) {
+		this._element.style.width = width;
+	}
+	if(height) {
+		this._element.style.height = height;
+	}
+	this.resetClass();
+
+	// HACK!!
+	var blinkState = this["blinkState"];
+	if(blinkState) {
+		if (blinkState.timerId >= 0) {
+			clearInterval(blinkState.timerId);
+		}
+		delete this["blinkState"];
+	}
+	delete this["trendState"];
+	var scope = this["blinking"];
+	if(scope) {
+		if(scope["blinking"] >= 0) {
+			clearTimeout(scope["blinking"]);
+		}
+		scope["cell"] = null;
+		scope["styles"] = null;
+		delete this["blinking"];
+	}
+
+	this.removeIcon();
+
+	this.setContent(null);
+	if(this._textSpan) {
+		this._textSpan.className = "text";
+		this._textSpan.textContent = "";
+	}
+};
+
+/** Reset all classes in this cell and restore its default classes
+ * @public
+ */
+Cell.prototype.resetClass = function() {
+	var className = "cell";
+	if(this.hasClass("spanned")) {
+		className += " spanned";
+	}
+	if(this.hasClass("selected-row")) {
+		className += " selected-row";
+	}
+	if(this.hasClass("highlighted-row")) {
+		className += " highlighted-row";
+	}
+	this.setClass(className);
+};
+/** Reset everything to initial state
+ * @public
+ */
+Cell.prototype.resetToInitialState = function() {
+	if(!this._element) { return; }
+
+	this.setParent(null);
+	this.unlistenAll();
+
+	this._element.className = "cell";
+	this.removeIcon();
+	this.setContent(null);
+	this._contentLocked = false;
+	this._collapsedState = 0;
+};
+
+/** @public
+* @param {Element} elem
+* @param {number=} opt_order The greater the order, the farther the position to the right
+*/
+Cell.prototype.insertFloatingIcon = function (elem, opt_order) {
+	if(!elem) {
+		return;
+	}
+
+	var fp = this._floatingPanel;
+	if(!fp) {
+		fp = this._floatingPanel = new CellFloatingPanel();
+	}
+	fp.insertItem(elem, opt_order);
+	fp.addClass("floating-panel");
+
+	var element = this._element;
+	if (!element.contains(fp.getElement())) {
+		element.appendChild(fp.getElement());
+	}
+};
+/** @public
+* @param {Element|string} elemRef This can be the element or className (string) of the icon
+* @return {Element|null} removed element
+*/
+Cell.prototype.removeFloatingIcon = function (elemRef) {
+	var fp = this._floatingPanel;
+	if (!fp) {
+		return null;
+	}
+
+	var removeElem = fp.removeItem(elemRef);
+	if (!fp.hasItem()) {
+		this._element.removeChild(fp.getElement());
+		this._floatingPanel = null;
+	}
+	return removeElem;
+};
+
+/** @public
+* @param {Element} elem
+* @param {number=} opt_order The greater the order, the farther the position to the right
+*/
+Cell.prototype.insertFrontIcon = function (elem, opt_order) {
+	if(!elem) {
+		return;
+	}
+
+	var fi = this._frontIcon;
+	if(!fi) {
+		fi = this._frontIcon = new CellFloatingPanel();
+	}
+	fi.insertItem(elem, opt_order);
+	fi.addClass("front-panel");
+
+	var element = this._element;
+	if (!element.contains(fi.getElement())) {
+		element.insertBefore(fi.getElement(), element.firstChild);
+	}
+};
+/** @public
+* @param {Element|string} elemRef This can be the element or className (string) of the icon
+* @return {Element|null} removed element
+*/
+Cell.prototype.removeFrontIcon = function (elemRef) {
+	var fi = this._frontIcon;
+	if (!fi) {
+		return null;
+	}
+
+	var removeElem = fi.removeItem(elemRef);
+	if (!fi.hasItem()) {
+		removeElem = fi.getElement();
+		this._element.removeChild(removeElem);
+		this._frontIcon = null;
+	}
+	return removeElem;
+};
+//#endregion Cell Specific Methods
+
+//#region Internal Public Methods
+/** @public
+* @ignore
+* @return {number}
+*/
+Cell.prototype.getCellId = function () {
+	return this._id;
+};
+/** Force updating cell padding due to the floating icons in the cell
+* @public
+* @deprecated
+*/
+Cell.prototype.updatePadding = function() {
+	// Do nothing
+};
+
+/** @public
+* @ignore
+* @param {boolean=} opt_collapsed
+* @param {boolean=} opt_remainedInDoc
+* @return {boolean}
+*/
+Cell.prototype.collapse = function (opt_collapsed, opt_remainedInDoc) {
+	var collapsed = opt_collapsed !== false;
+	(opt_remainedInDoc ? 2 : 1);
+	var collapsedState;
+	if (collapsed) {
+		collapsedState = (opt_remainedInDoc ? 2 : 1);
+	} else {
+		collapsedState = 0;
+	}
+	if(this._collapsedState === collapsedState) {
+		return false;
+	}
+
+	if(collapsed) {
+		if(opt_remainedInDoc) {
+			this.addClass("spanned");
+		} else {
+			this.setParent(null);
+		}
+	} else {
+		if(this._collapsedState === 2) {
+			this.removeClass("spanned");
+		}
+	}
+	this._collapsedState = collapsedState;
+	return true;
+};
+/** @public
+* @ignore
+* @return {boolean}
+*/
+Cell.prototype.isCollapsed = function () {
+	return this._collapsedState !== 0;
+};
+/** @public
+* @ignore
+* @return {boolean}
+*/
+Cell.prototype.isKeptInDoc = function () {
+	return this._collapsedState !== 1;
+};
+
+/** @public
+* @ignore
+* @return {number}
+*/
+Cell.prototype.getClientWidth = function () {
+	return (this._element) ? this._element.clientWidth : this.getWidth();
+};
+/** @public
+* @ignore
+* @return {number}
+*/
+Cell.prototype.getClientHeight = function () {
+	return (this._element) ? this._element.clientHeight : this.getHeight();
+};
+//#region Internal Public Methods
+
+//#region Private Methods
+/** @private
+* @param {*} value
+* @return {Element}
+*/
+Cell.prototype._setRawContent = function (value) {
+	if (this._rawContent !== value) {
+		this._rawContent = value;
+
+		var actualContent = /** @type{Element|NodeList} */(this._rawContent);
+		if (typeof this._rawContent == "string") {
+			if (!this._textSpan) {
+				this._textSpan = document.createElement("span");
+				this._textSpan.className = "text";
+			}
+			this._textSpan.textContent = this._rawContent;
+			actualContent = this._textSpan;
+		}
+
+		if (this._content !== actualContent) { // Compare with previous element
+			this._content = actualContent;
+
+			this.initialize();
+
+			var aligner = this._aligner;
+			while (aligner.lastChild ) {
+				aligner.removeChild(aligner.lastChild);
+			}
+			if (this._content) {
+				aligner.appendChild(/** @type{Element} */(this._content));
+			}
+		}
+
+	}
+	return /** @type{Element} */(this._content);
+};
+
+/** @private
+*/
+Cell.prototype._updateDisplay = function () {
+	var visibility = false;
+	if(this.isVisible()) {
+		if(this._width && this._height) {
+			visibility = true;
+		}
+	}
+	if (visibility) {
+		this._element.style.display = "";
+	} else {
+		this._element.style.display = "none";
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+Cell.prototype._onFocus = function (e) {
+	if (!this._section) return;
+
+	var core = this._section._getContext();
+	core.getElement().focus({ preventScroll: true });
+};
+//#endregion Private Methods
+
+
+Cell._proto = Cell.prototype;
+
+export default Cell;
+export { Cell };