@refinitiv-ui/efx-grid 6.0.30 → 6.0.32

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -75,6 +75,10 @@ var RowDraggingPlugin = function (options) {
 	t._onDragEnd = t._onDragEnd.bind(t);
 	t._onThemeLoaded = t._onThemeLoaded.bind(t);
 
+	t._onJETDrop = t._onJETDrop.bind(t);
+	t._onJETDragOver = t._onJETDragOver.bind(t);
+	t._delayStart = t._delayStart.bind(t);
+
 	t._hosts = [];
 
 	t._guideline = document.createElement("div"); // Test IE mouse event, guildline close mouse event
@@ -198,6 +202,30 @@ RowDraggingPlugin.prototype._autoScroll = true;
 * @private
 */
 RowDraggingPlugin.prototype._dragUI = null;
+/** @type {number}
+* @private
+*/
+RowDraggingPlugin.prototype._timerId = -1;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._jetDnD = false;
+/** @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._jetDragContent = null;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._jetContentHasRic = false;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._jetContentHasField = false;
+/** @type {string}
+* @private
+*/
+RowDraggingPlugin.prototype._entryPoint = "";
 
 /** @private Applied theme color in row dragging and dragUI
 * @param {Object} host core grid instance
@@ -337,7 +365,11 @@ RowDraggingPlugin.prototype.config = function (options) {
 
 	if (typeof extOptions["dragBoxRenderer"] === "function") {
 		this._dragBoxRenderer = extOptions["dragBoxRenderer"];
-		this._dragBox.className = "drag-box"; // set disable drag-box
+		var className = "drag-box";
+		if (ElfUtil.getElfVersion() < 3) {
+			className = "tr-dragbox content-dragging"; // Keep backward compatibility
+		}
+		this._dragBox.className = className;
 	} else {
 		this._dragBox.className = "drag-box-disabled"; // set disable drag-box
 	}
@@ -389,38 +421,10 @@ RowDraggingPlugin.prototype.getConfigObject = function (out_obj) {
 };
 
 /** @public
-* @param {*} startRef
-* @param {boolean=} opt_suppressEvent
+* @param {*=} startRef
 */
 RowDraggingPlugin.prototype.startDrag = function (startRef) {
-	if (this._dragging || this._hosts.length <= 0) { return; }
-	if (this._disabled) {
-		return;
-	}
-
-	var pos;
-	if (startRef) {
-		if (startRef.type === "dragstart") {
-			if(startRef["preventDefault"]) {
-				Dom.preventDefault(startRef);
-			}
-			var host = this.getRelativeGrid(startRef);
-			if (host) {
-				pos = host.getRelativePosition(this._dragTarget);
-			}
-		} else {
-			pos = this._hitTest(startRef);
-		}
-	} else {
-		var target = this._dragTarget || this._hosts[0].getSection("content").getCell(0, 0);
-		pos = this._hitTest(target);
-	}
-
-	if (_isInContentSection(pos)) {
-		this._clearCache();
-		this._pos = pos;
-		this._onDragStart(startRef);
-	}
+	this._startDrag(false, startRef); // Start without delay start
 };
 /** @public */
 RowDraggingPlugin.prototype.stopDrag = function () {
@@ -469,6 +473,114 @@ RowDraggingPlugin.prototype.disableUIs = function (disabled) {
 	this._uiDisabled = disabled !== false;
 };
 
+/** @public
+* @param {boolean=} allowed
+*/
+RowDraggingPlugin.prototype.allowDrag = function (allowed) {
+	if(this._pos) {// WARNING: Please note that this method is intent to be used by client, and not for internal use
+		this._pos["invalidTarget"] = (allowed === false);
+	}
+};
+
+/** @public
+* @function
+* @param {boolean=} allowed
+*/
+RowDraggingPlugin.prototype.allowDrop = RowDraggingPlugin.prototype.allowDrag;
+
+/** @public
+* @param {*} content Element, Node, string, number, or everything else.
+*/
+RowDraggingPlugin.prototype.setDragContent = function (content) {
+	this._dragUI.setContent(content);
+};
+
+/** @public
+* @return {Element}
+*/
+RowDraggingPlugin.prototype.getDragBox = function () {
+	return this._dragBox;
+};
+
+/** @public
+* @return {string}
+*/
+RowDraggingPlugin.prototype.getDragSource = function () {
+	return this._entryPoint;
+};
+
+/** @public
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype.isDragging = function () {
+	return this._dragging;
+};
+
+/** @public
+* @param {boolean=} disabled
+*/
+RowDraggingPlugin.prototype.disableDragging = function (disabled) {
+	this._disabled = disabled !== false;
+};
+
+/** @public
+* @param {boolean=} enabled
+*/
+RowDraggingPlugin.prototype.enableJETDragAndDrop = function (enabled) {
+	var val = enabled !== false;
+	if(this._jetDnD === val) { return; }
+
+	this._jetDnD = val;
+
+	var jet = window["JET"];
+	if (jet) {
+		//If ContainerDescription is undefined, that means JET is not initalized. Mostlikely the app
+		//is running the local development mode without container. Disable dnd in this case
+		if (jet["ContainerDescription"] && (jet["ContainerDescription"]["name"] !== "EikonNowContainer")) {
+			if (this._jetDnD) {
+				jet["onDrop"](this._onJETDrop);
+				jet["onDragOver"](this._onJETDragOver);
+				jet["onDragLeave"](this.stopDrag);
+			} else {
+				jet["onDrop"](null);
+				jet["onDragOver"](null);
+				jet["onDragLeave"](null);
+			}
+		} else {
+			this._jetDnD = false;
+		}
+	}
+};
+
+/** @public
+* @return {Object}
+*/
+RowDraggingPlugin.prototype.getJETDragContent = function () {
+	return this._jetDragContent;
+};
+
+/** @public
+* @param {Object} content
+*/
+RowDraggingPlugin.prototype.setJETDragContent = function (content) {
+	this._jetDragContent = content;
+
+	var tr = window["tr"];
+	var grid = (tr) ? tr["grid"] : null;
+	var JetDragContent = (grid) ? grid["JetDragContent"] : null;
+	if (content && JetDragContent) {
+		var jetDragContentMgr = new JetDragContent(content);
+		var rics = jetDragContentMgr["getRicsToDrop"]();
+		var fields = jetDragContentMgr["getFieldsToDrop"]();
+
+		this._jetContentHasRic = (rics && rics.length > 0) ? true : false;
+		this._jetContentHasField = (fields && fields.length > 0) ? true : false;
+	} else {
+		this._jetContentHasRic = false;
+		this._jetContentHasField = false;
+	}
+};
+
 /** @private
 * @param {*} e
 * @return {!Object}
@@ -503,25 +615,41 @@ RowDraggingPlugin.prototype._onMouseDown = function (e) {
 		this._touchMode = true;
 	}
 	this._dragTarget = /** @type{Element} */(e.target);
+	this._setEntryPoint("grid");
 };
 /** @private
 * @param {*=} e
+* @param {boolean=} fromJET
 */
-RowDraggingPlugin.prototype._onDragStart = function (e) {
+RowDraggingPlugin.prototype._onDragStart = function (e, fromJET) {
 	if (this._dragging) { return; }
 	if (!this._pos) { return; }
 
-	this._dispatch("dragStart", this._pos);
-	if (this._isDragCancelled()) {
-		return;
+	this._listenAbortActions(false); // Unlisen abort action
+
+	var useJetDragStart = false;
+	var jet = window["JET"];
+	if (fromJET) {
+		useJetDragStart = true;
+	} else {
+		this._dispatch("dragStart", /** @type{!Object} */(this._pos));
+		if(this._isDragCancelled()) {
+			return; // User does not allow this drag to happen
+		}
+		if (jet && this._jetDnD && this._jetDragContent) {
+			useJetDragStart = true;
+			jet["dragStart"](this._jetDragContent);
+		}
 	}
 
 	this._dragging = true;
 	// Event listeners
 	document.body.classList.add("tr-dragging"); // Prevent text selection
 
-	window.addEventListener("mousemove", this._onMouseMove, false);
-	window.addEventListener("touchmove", this._onMouseMove, false);
+	if (!useJetDragStart) { // WARNING: JET wrongly intercepts all mouse events without app's consent
+		window.addEventListener("mousemove", this._onMouseMove, false);
+		window.addEventListener("touchmove", this._onMouseMove, false);
+	}
 	window.addEventListener("mouseup", this._onDragEnd, false);
 	window.addEventListener("touchend", this._onDragEnd, false);
 	window.addEventListener("touchcancel", this._onDragEnd, false);
@@ -601,12 +729,20 @@ RowDraggingPlugin.prototype._onMouseMove = function (e) {
 
 	this._pos = this._hitTest(e); // A new object is created
 
-	this._updateGuidePosition(e);
+	var dropable = true;
+	if(this._entryPoint === 'JET' && !this._jetContentHasRic) {
+		dropable = false;
+	}
+
+	if(dropable) {
+		this._updateGuidePosition(e);
+	}
+
 	this._pos.dragBox = this._dragBox; // assign dragBox for user determine valid target
 
 	// Dispatch drag event to let user determine valid drop target using allowDrag (allowDrop) method
 	this._dispatch("drag", this._pos);
-	if(!this._uiDisabled) {
+	if(!this._uiDisabled && dropable) {
 		e.dragBoxIcon = this._pos.dragBoxIcon; // access event object instread of element for prevent element persistence
 		var drop = this._dragUI.renderDragBox(e, this._startingGrid);
 		if(!drop) { // can not be drop or not allow to drop or insertion
@@ -655,7 +791,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 		 // WARNING: dropTarget is not correct for element in a shadow root
 		destPos["dropTarget"] = e ? e.target : null;
 
-		if (this._dataTransfer && _isInContentSection(this._pos)) {
+		if (!this._jetDnD && this._dataTransfer && _isInContentSection(this._pos)) {
 			var destGrid = destPos["grid"] || srcGrid;
 			var destRowIndex = destPos["rowIndex"];
 
@@ -668,10 +804,26 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 
 			this._moveRows(srcRowIndices, destRowIndex, srcGrid, destGrid, destPos);
 		}
+
+		// Extend event property
+		var cellElement = destPos["cellElement"];
+		var isRight = 0;
+
+		if (e && cellElement) {
+			var rect = cellElement.getBoundingClientRect();
+			var offsetX = (e["clientX"] - rect["left"]) / destPos["zoomFactor"];
+			isRight = Math.round(offsetX / cellElement.offsetWidth);
+		}
+
+		destPos["colIndex"] += isRight;
+		destPos["currentPosition"] = destPos; // To support JET requirement
+		destPos["data"] = this._jetDragContent;
+		destPos["dropTarget"] = e.target;
 	}
 
 	this._dispatch("dragEnd", destPos || {}); // Always fire drag end for client to clean up its resource
 	this._clearCache();
+	this._jetDragContent = null;
 };
 /** @private
 * @param {Array.<number>|string} srcRowRef
@@ -840,6 +992,153 @@ RowDraggingPlugin.prototype._onDragPulse = function () {
 	}
 };
 
+/** @public
+* @param {Object} content
+*/
+RowDraggingPlugin.prototype.setJETDragContent = function (content) {
+	this._jetDragContent = content;
+
+	var t = window["tr"];
+	var g = (t) ? t["grid"] : null;
+	var jdc = (g) ? g["JetDragContent"] : null;
+	if (content && jdc) {
+		var jetDragContentMgr = new jdc(content);
+		var rics = jetDragContentMgr["getRicsToDrop"]();
+		var fields = jetDragContentMgr["getFieldsToDrop"]();
+
+		this._jetContentHasRic = (rics && rics.length > 0) ? true : false;
+		this._jetContentHasField = (fields && fields.length > 0) ? true : false;
+	} else {
+		this._jetContentHasRic = false;
+		this._jetContentHasField = false;
+	}
+};
+/** @private
+ * @param {string} str
+ */
+RowDraggingPlugin.prototype._setEntryPoint = function (str) {
+	this._entryPoint = str;
+	this.setDragContent(null); // Clear original content
+};
+
+/** @private
+ * @param {Object} e
+ */
+RowDraggingPlugin.prototype._onMouseOut = function (e) {
+	e = e ? e : window.event;
+	var from = e.relatedTarget || e.toElement;
+	if (!from || from.nodeName == "HTML") {
+		// window.console.warn("Left window");
+
+		/*
+		 * TRGRID-1493
+		 * The DragStart is delayed using a timer (_timerId created by _delayStart )
+		 * The mouse may left the window before the drag start
+		 * In this case we should force the stopDrag to stop the drag on the source
+		 * Because the mouse up will not be handled by the source
+		 */
+
+		// cancel the timer - _onDragStart will not be called by the timer
+		if(this._timerId >= 0) {
+			clearTimeout(this._timerId);
+			this._timerId = -1;
+		}
+
+		this._onDragStart();
+		this.stopDrag();
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+RowDraggingPlugin.prototype._delayStart = function (e) {
+	this._startingGrid.unlisten("mousemove", this._delayStart);
+
+	if (this._timerId < 0) {
+		this._timerId = window.setTimeout(this._onDragStart, 200);
+	}
+	if (this._jetDnD) {
+		document.addEventListener("mouseout", this._onMouseOut, false);
+	}
+};
+/** @private
+* @param {boolean=} bool
+*/
+RowDraggingPlugin.prototype._listenAbortActions = function (bool) {
+	if (bool !== false) {
+		window.addEventListener("mouseup", this._clearCache, false);
+	} else {
+		window.removeEventListener("mouseup", this._clearCache, false);
+	}
+};
+/** @private
+* @param {boolean=} delayStart
+* @param {*=} startRef
+* @param {boolean=} fromJET
+*/
+RowDraggingPlugin.prototype._startDrag = function (delayStart, startRef, fromJET) {
+	if (this._dragging || this._hosts.length <= 0) { return; }
+	if (this._disabled) { return; }
+
+	var pos;
+	if (startRef) {
+		if (startRef.type === "dragstart") {
+			if (startRef["preventDefault"]) {
+				Dom.preventDefault(startRef);
+			}
+			var host = this.getRelativeGrid(startRef);
+			if (host) {
+				pos = host.getRelativePosition(this._dragTarget);
+			}
+		} else {
+			pos = this._hitTest(startRef);
+		}
+	} else {
+		var target = this._dragTarget || this._hosts[0].getSection("content").getCell(0, 0);
+		pos = this._hitTest(target);
+	}
+
+	if (_isInContentSection(pos)) {
+		this._clearCache();
+		this._pos = pos;
+		this._startingGrid = pos["grid"];
+
+		if (delayStart) {
+			this._startingGrid.listen("mousemove", this._delayStart);
+			this._listenAbortActions();
+		} else { // Start immediately
+			this._onDragStart(startRef, fromJET);
+		}
+	}
+};
+/** @private
+* @param {Object} clientPos
+*/
+RowDraggingPlugin.prototype._onJETDragOver = function (clientPos) {
+	if (!clientPos) { return; }
+
+	if (!this._dragging) {
+		if (!clientPos["dropData"]) { return; }
+		this._setEntryPoint("JET");
+		this.setJETDragContent(clientPos["dropData"]); // WARNING: We have no way to distinguish between dropData from grid and other apps
+		this._startDrag(false, clientPos["e"], true); // Event is suppressed
+	} else {
+		this._onDrag(clientPos["e"]);
+	}
+};
+/** @private
+* @param {Object} jetObj
+*/
+RowDraggingPlugin.prototype._onJETDrop = function (jetObj) {
+	if (!this._dragging) { return; }
+
+	if (!this._jetDragContent) {
+		this._jetDragContent = jetObj; // To maintain original client signature
+	}
+	this._onDragEnd(jetObj["mouse"]["srcEvent"]);
+};
+
 
 
 export default RowDraggingPlugin;

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

@@ -10,6 +10,8 @@ declare class DragUI {
 
     public onThemeLoaded(colors: any): void;
 
+    public setContent(content: any): void;
+
 }
 
 export default DragUI;

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

@@ -9,7 +9,9 @@ import ElfUtil from "./ElfUtil.js";
 var DragUI = function(options) {
 	this._dragBox = options.dragBox;
 	this._dragBoxIcon = options.dragBoxIcon;
-
+	this._dragBoxContent = document.createElement("div");
+	this._dragBoxContent.className = "drag-box-content";
+	this._dragBox.appendChild(this._dragBoxContent);
 };
 
 /** @type {string}
@@ -60,6 +62,10 @@ DragUI.applyThemeColor = function(grid) {
 */
 DragUI.prototype.onThemeLoaded = function(colors) {
 	if(!DragUI._styles) {
+		var cursor = "grabbing";
+		if (ElfUtil.getElfVersion() < 3) {
+			cursor = "move";
+		}
 		var styles = [ // Main Styles without theme
 			".tr-row-guideline", [ // Backward compatability of row dragging
 				"position: absolute;",
@@ -104,6 +110,10 @@ DragUI.prototype.onThemeLoaded = function(colors) {
 				"top: 0;",
 				"position: absolute;"
 			],
+			".drag-box-content", [
+				"overflow-x: clip;",
+				"text-overflow: ellipsis;"
+			],
 			".drag-box-icon", [
 				"top: -4px;",
 				"left: 12px;",
@@ -128,7 +138,7 @@ DragUI.prototype.onThemeLoaded = function(colors) {
 				"--grid-void-icon-color: #FFFFFF;"
 			],
 			".mouse-dragging .cell:hover", [ // for change mouse cursor when hover header while dragging
-				"cursor: grabbing !important;"
+				"cursor: " + cursor + " !important;"
 			],
 			".tr-grid .column .cell.drag-indicator", [ // --grid-drag-indicator defualt is "none"
 				"border-top: var(--grid-drag-indicator) !important;",
@@ -175,27 +185,31 @@ DragUI.prototype.renderDragBox = function (e, grid) {
 	}
 
 	var gridElem = grid.getElement();
+	var dragBoxHost = gridElem;
 	var gridParent = grid.getParent().parentNode;
-	var pn = this._dragBox.parentNode;
-	if(!pn) {
-		gridParent.appendChild(this._dragBox);
+	if (gridParent.nodeType === 11) {
+		dragBoxHost = gridParent;
 	}
 
-	var iconParent = this._dragBoxIcon.parentNode;
+	var parent = this._dragBox.parentNode;
+	if(!parent) {
+		dragBoxHost.appendChild(this._dragBox);
+	}
 
-	var dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon;
+	var dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon; // The user-supplied icon
 	this._dragBoxIcon.style.visibility = "visible";
+	parent = this._dragBoxIcon.parentNode;
 	var drop = true;
 	if(dragBoxIcon === "insertion") {
 		drop = false;
 		this._dragBoxIcon.icon = "add";
-		if(!iconParent) {
+		if(!parent) {
 			this._dragBox.appendChild(this._dragBoxIcon);
 		}
 	} else if (dragBoxIcon === "not-allowed" || dragBoxIcon === "no-drop" || dragBoxIcon === "void" ) {
 		drop = false;
 		this._dragBoxIcon.icon = "void";
-		if(!iconParent) {
+		if(!parent) {
 			this._dragBox.appendChild(this._dragBoxIcon);
 		}
 	} else {
@@ -213,5 +227,21 @@ DragUI.prototype.renderDragBox = function (e, grid) {
 	return drop;
 };
 
+/** @public
+* @param {*} content Element, Node, string, number, or everything else.
+*/
+DragUI.prototype.setContent = function(content) {
+	if (content && content["getElement"]) {
+		content = content["getElement"]();
+	}
+
+	var dragBoxContent = this._dragBoxContent;
+	var currentContent = dragBoxContent._content;
+	if (content !== currentContent) {
+		dragBoxContent._content = content;
+		Dom.setContent(dragBoxContent, content);
+	}
+};
+
 export default DragUI;
 export {DragUI};

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

@@ -69,11 +69,13 @@ declare class Popup extends EventDispatcher {
 
     public disableAutoHiding(opt_disabled?: boolean|null): void;
 
+    public disableAutoRepositioning(opt_disabled?: boolean|null): void;
+
     public disableAutoClipping(opt_disabled?: boolean|null): void;
 
     public disableHideOnScroll(opt_disabled?: boolean|null): void;
 
-    public updatePosition(): void;
+    public updatePosition(fallback?: boolean|null): void;
 
     public enableUIBlocking(bool?: boolean|null): boolean;