npm - fit-ui - Versions diffs - 3.2.2 → 3.2.4 - Mend

fit-ui 3.2.2 → 3.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/Fit.UI.js CHANGED Viewed

@@ -682,7 +682,7 @@ Fit._internal =
 {
 	Core:
 	{
-		VersionInfo: { Major: 3, Minor: 2, Patch: 2 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
+		VersionInfo: { Major: 3, Minor: 2, Patch: 4 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
 	}
 };
@@ -6713,6 +6713,38 @@ Fit.Dom.GetBoundingPosition = function(elm)
 	return { X: Math.round(bcr.x || bcr.left), Y: Math.round(bcr.y || bcr.top) }; // Several legacy browsers use top/left instead of x/y
 }
+/// <function container="Fit.Dom" name="PositionFixedConstrained" access="public" static="true" returns="boolean">
+/// 	<description>
+/// 		Determines whether position:fixed is constrained by CSS properties
+/// 		such as animation or transform which will cause positioning to become
+/// 		relative to animated/transformed parent, rather than relative to viewport.
+/// 	</description>
+/// 	<param name="elm" type="DOMElement"> Element to check for constraint </param>
+/// </function>
+Fit.Dom.PositionFixedConstrained = function(elm)
+{
+	Fit.Validation.ExpectDomElement(elm);
+	if (Fit.Dom.IsRooted(elm) === false)
+	{
+		return true; // Report constrained as position:fixed will not work unless element is rooted
+	}
+    var d = document.createElement("div");
+    d.style.cssText = "position:fixed; top: -10px; left: -10px;";
+    var p = elm.parentElement;
+    p.appendChild(d);
+    var rect = d.getBoundingClientRect();
+    p.removeChild(d);
+    var positionedRelativeToViewport = ((rect.x || rect.left) === -10 && (rect.y || rect.top) === -10);
+	var positionFixedConstrained = positionedRelativeToViewport === false;
+	return positionFixedConstrained;
+}
 /// <function container="Fit.Dom" name="GetPosition" access="public" static="true" returns="Fit.TypeDefs.Position | null">
 /// 	<description>
 /// 		Get position for visible element.
@@ -17924,7 +17956,8 @@ Fit.Controls.DropDown = function(ctlId)
 						return; // Do not close DropDown if target no longer exists - this may happen if something is removed within DropDown (e.g. an item in the WSDropDown's action menu)
 					}
-					if (me.IsDropDownOpen() === true && target !== me.GetDomElement() && Fit.Dom.Contained(me.GetDomElement(), target) === false)
+					// Notice that dropdownMenu might be rooted in <body> if it is constrained by CSS properties preventing reliable use of position:fixed - see optimizeDropDownPosition(..) for details
+					if (me.IsDropDownOpen() === true && target !== me.GetDomElement() && Fit.Dom.Contained(me.GetDomElement(), target) === false && target !== dropDownMenu && Fit.Dom.Contained(dropDownMenu, target) === false)
 					{
 						me.CloseDropDown();
 					}
@@ -17949,7 +17982,8 @@ Fit.Controls.DropDown = function(ctlId)
 						return; // Do not close DropDown if target no longer exists - this may happen if something is removed within DropDown (e.g. an item in the WSDropDown's action menu)
 					}
-					if (me.IsDropDownOpen() === true && target !== me.GetDomElement() && Fit.Dom.Contained(me.GetDomElement(), target) === false)
+					// Notice that dropdownMenu might be rooted in <body> if it is constrained by CSS properties preventing reliable use of position:fixed - see optimizeDropDownPosition(..) for details
+					if (me.IsDropDownOpen() === true && target !== me.GetDomElement() && Fit.Dom.Contained(me.GetDomElement(), target) === false && target !== dropDownMenu && Fit.Dom.Contained(dropDownMenu, target) === false)
 					{
 						coords = Fit.Events.GetPointerState().Coordinates.Document;
 					}
@@ -20331,6 +20365,18 @@ Fit.Controls.DropDown = function(ctlId)
 			// as this creates a new stacking context to which position:fixed
 			// becomes relative.
+			// Move dropdown to document root if position:fixed won't work
+			// due to e.g. animation or transform in CSS (see note above).
+			if (Fit.Dom.PositionFixedConstrained(dropDownMenu) === true)
+			{
+				// Copy styles to ensure that dropdown menu assume styles identical to control itself
+				dropDownMenu.style.fontSize = Fit.Dom.GetComputedStyle(dropDownMenu, "font-size");
+				dropDownMenu.style.color = Fit.Dom.GetComputedStyle(dropDownMenu, "color");
+				dropDownMenu.style.fontFamily = Fit.Dom.GetComputedStyle(dropDownMenu, "font-family");
+				Fit.Dom.Add(document.body, dropDownMenu); // Moved back in resetDropDownPosition() when dropdown is closed
+			}
 			var viewPortDimensions = Fit.Browser.GetViewPortDimensions();											// Returns { Width, Height } - actual space available (scrollbars are not included in these dimensions)
 			var controlPositionY = Fit.Dom.GetBoundingPosition(itemContainer).Y;									// Position from top
 			var controlPositionX = Fit.Dom.GetBoundingPosition(itemContainer).X;									// Position from left
@@ -20458,6 +20504,18 @@ Fit.Controls.DropDown = function(ctlId)
 	function resetDropDownPosition()
 	{
+		// Move dropdown menu back if it was moved to document
+		// root due to position:fixed being constrained by CSS
+		// animation, transform or similar. See optimizeDropDownPosition(..)
+		if (dropDownMenu.parentElement === document.body)
+		{
+			dropDownMenu.style.fontSize = "";
+			dropDownMenu.style.color = "";
+			dropDownMenu.style.fontFamily = "";
+			me._internal.AddDomElement(dropDownMenu);
+		}
 		// Reset changes made by optimizeDropDownPosition()
 		dropDownMenu.style.position = "";
 		dropDownMenu.style.width = (maxWidth.Value > -1 ? dropDownMenu.style.width : ""); // Preserve width if DropDownMaxWidth is enabled since it also modifies this property