Fixed PR to fix popup position if popup is triggered from within an offsetParent element (#7013)

* Fix popup location for tables

This commit introduces the `popupAbsCoords` option to the $button widget
and implements an absolut coordinate format.

Coordinates for popups are stored in the format `(x,y,w,h)`. These
coordinates are relative to the offset parent of the element that
defines the popup.

This commits adds a second format `@(x,y,w,h)`. Coordinates specified in
this format a relative to the pages root element.

The `popupAbsCoords` option of the $button widget enables the use of
this coordinates.

* Unify the declaration of the RegEx for parsing the popup-position

The regular expression was declared in three locations with the same
content. This commit supplies a new function `parseCoordinates` in
`popup.js`. This function returns the parsed coordinates and understands
the classic/absolute coordinates.

This function is used in `reveal.js` and `action-popup.js` to parse the
coordinates.

* Add documentation for coordinate systems

* Consolidate creating coordinate strings

The Popup object now contains a `buildCoordinates` method that can be
used to build coordinate strings. It takes an "enum" for the coordinate-
system to use. This makes everything easily extensible and prevents the
use of magic values.

* Add tests for `parseCoordinates` and `buildCoordinates`

* Add `tv-popup-abs-coords` to `collectDOMVariables`

This will make the absolute coordinates available for the
`DraggableWidget` and the `EventCatcherWidget`.

* Add documentation for the `tv-popup-abs-coords`

... to the `DraggableWidget` and the `EventCatcherWidget`.

* Fix crash when generating a static version of the TW

The Popup class is not initialized in `startup.js` if `$tw.browser` is
not true. After having consolidated the facilities for parsing
coordinate strings into `popup.js` this breaks because the static build
needs to parse coordinate stings even if no Popup module is initialized.
This commit solves this problem by making `readPopupState`,
`parseCoordinates` and `buildCoordinates` static methods of `popup.js`.
It also adds a comment to these functions to show that these can be called
safely even if the Popup-Class is not initialized.

core/modules/utils/dom/dom.js

@@ -12,6 +12,8 @@ Various static DOM-related utility functions.
 /*global $tw: false */
 "use strict";
 
+var Popup = require("$:/core/modules/utils/dom/popup.js");
+
 /*
 Determines whether element 'a' contains element 'b'
 Code thanks to John Resig, http://ejohn.org/blog/comparing-document-position/
@@ -294,8 +296,21 @@ exports.collectDOMVariables = function(selectedNode,domNode,event) {
 		});
 		
 		if(selectedNode.offsetLeft) {
-			// Add a variable with a popup coordinate string for the selected node
-			variables["tv-popup-coords"] = "(" + selectedNode.offsetLeft + "," + selectedNode.offsetTop +"," + selectedNode.offsetWidth + "," + selectedNode.offsetHeight + ")";
+			// Add variables with a (relative and absolute) popup coordinate string for the selected node
+			var nodeRect = {
+				left: selectedNode.offsetLeft,
+				top: selectedNode.offsetTop,
+				width: selectedNode.offsetWidth,
+				height: selectedNode.offsetHeight
+			};
+			variables["tv-popup-coords"] = Popup.buildCoordinates(Popup.coordinatePrefix.csOffsetParent,nodeRect);
+
+			var absRect = $tw.utils.extend({}, nodeRect);
+			for (var currentNode = selectedNode.offsetParent; currentNode; currentNode = currentNode.offsetParent) {
+				absRect.left += currentNode.offsetLeft;
+				absRect.top += currentNode.offsetTop;
+			}
+			variables["tv-popup-abs-coords"] = Popup.buildCoordinates(Popup.coordinatePrefix.csAbsolute,absRect);
 
 			// Add variables for offset of selected node
 			variables["tv-selectednode-posx"] = selectedNode.offsetLeft.toString();

core/modules/utils/dom/popup.js

@@ -22,6 +22,19 @@ var Popup = function(options) {
 	this.popups = []; // Array of {title:,wiki:,domNode:} objects
 };
 
+/*
+Global regular expression for parsing the location of a popup.
+This is also used by the Reveal widget.
+*/
+exports.popupLocationRegExp = /^(@?)\((-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+)\)$/
+
+/*
+Objekt containing the available prefixes for coordinates build with the `buildCoordinates` function:
+ - csOffsetParent: Uses a coordinate system based on the offset parent (no prefix).
+ - csAbsolute: Use an absolute coordinate system (prefix "@").
+*/
+exports.coordinatePrefix = { csOffsetParent: "", csAbsolute: "@" }
+
 /*
 Trigger a popup open or closed. Parameters are in a hashmap:
 	title: title of the tiddler where the popup details are stored
@@ -136,8 +149,17 @@ Popup.prototype.show = function(options) {
 			height: options.domNode.offsetHeight
 		};
 	}
-	var popupRect = "(" + rect.left + "," + rect.top + "," + 
-				rect.width + "," + rect.height + ")";
+	if(options.absolute && options.domNode) {
+		// Walk the offsetParent chain and add the position of the offsetParents to make
+		// the position absolute to the root node of the page.
+		var currentNode = options.domNode.offsetParent;
+		while(currentNode) {
+			rect.left += currentNode.offsetLeft;
+			rect.top += currentNode.offsetTop;
+			currentNode = currentNode.offsetParent;
+		}
+	}
+	var popupRect = exports.buildCoordinates(options.absolute?exports.coordinatePrefix.csAbsolute:exports.coordinatePrefix.csOffsetParent,rect);
 	if(options.noStateReference) {
 		options.wiki.setText(options.title,"text",undefined,popupRect);
 	} else {
@@ -172,13 +194,54 @@ Popup.prototype.cancel = function(level) {
 };
 
 /*
-Returns true if the specified title and text identifies an active popup
+Returns true if the specified title and text identifies an active popup.
+This function is safe to call, even if the popup class was not initialized.
 */
-Popup.prototype.readPopupState = function(text) {
-	var popupLocationRegExp = /^\((-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+)\)$/;
-	return popupLocationRegExp.test(text);
+exports.readPopupState = function(text) {
+	return exports.popupLocationRegExp.test(text);
 };
 
+/*
+Parses a coordinate string in the format `(x,y,w,h)` or `@(x,y,z,h)` and returns
+an object containing the position, width and height. The absolute-Mark is boolean
+value that indicates the coordinate system of the coordinates. If they start with
+an `@`, `absolute` is set to true and the coordinates are relative to the root
+element. If the initial `@` is missing, they are relative to the offset parent
+element and `absoute` is false.
+This function is safe to call, even if the popup class was not initialized.
+*/
+exports.parseCoordinates = function(coordinates) {
+	var match = exports.popupLocationRegExp.exec(coordinates);
+	if(match) {
+		return {
+			absolute: (match[1] === "@"),
+			left: parseFloat(match[2]),
+			top: parseFloat(match[3]),
+			width: parseFloat(match[4]),
+			height: parseFloat(match[5])
+		};
+	} else {
+		return false;
+	}
+}
+
+/*
+Builds a coordinate string from a coordinate system identifier and an object
+containing the left, top, width and height values.
+Use constants defined in coordinatePrefix to specify a coordinate system.
+If one of the parameters is invalid for building a coordinate string `(0,0,0,0)`
+will be returned.
+This function is safe to call, even if the popup class was not initialized.
+*/
+exports.buildCoordinates = function(prefix,position) {
+	var coord = prefix + "(" + position.left + "," + position.top + "," + position.width + "," + position.height + ")";
+	if (exports.popupLocationRegExp.test(coord)) {
+		return coord;
+	} else {
+		return "(0,0,0,0)";
+	}
+}
+
 exports.Popup = Popup;
 
 })();