From 6c8253e5d599b1719c3db4f83ec2006efb0094d1 Mon Sep 17 00:00:00 2001
From: yaisog <m@rcuswinter.de>
Date: Sat, 29 Mar 2025 08:07:35 +0100
Subject: [PATCH] Distinguish right/bottom/both/none

---
 core/modules/widgets/reveal.js                | 31 +++++++++++--------
 .../RevealWidget (Popup Clamping Example).tid | 13 +++++---
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/core/modules/widgets/reveal.js b/core/modules/widgets/reveal.js
index b582695cc..2cd7a0de1 100755
--- a/core/modules/widgets/reveal.js
+++ b/core/modules/widgets/reveal.js
@@ -92,25 +92,30 @@ RevealWidget.prototype.positionPopup = function(domNode) {
 			top = this.popup.top + this.popup.height;
 			break;
 	}
-	if(!this.positionAllowNegative) {
-		left = Math.max(0,left);
-		top = Math.max(0,top);
-	}
-	if(this.clampToParent) {
-		var offsetParentDomNode = domNode.offsetParent,
-			parentWidth = offsetParentDomNode.offsetWidth,
-			parentHeight = offsetParentDomNode.offsetHeight,
-			right = left + domNode.offsetWidth,
+	// if requested, clamp the popup so that it will always be fully inside its parent (the first upstream element with position:relative), as long as the popup is smaller than its parent
+	// if position is absolute then clamping is done to the canvas boundary, since there is no "parent"
+	if(this.clampToParent !== "none") {
+		if(this.popup.absolute) {
+			var parentWidth = window.innerWidth,
+				parentheight = window.innerHeight;
+		} else {
+			var parentWidth = domNode.offsetParent.offsetWidth,
+				parentHeight = domNode.offsetParent.offsetHeight
+		}
+		var right = left + domNode.offsetWidth,
 			bottom = top + domNode.offsetHeight;
-		if(domNode.offsetWidth <= parentWidth && right > parentWidth) {
+		if((this.clampToParent === "both" || this.clampToParent === "right") && right > parentWidth) {
 			left = parentWidth - domNode.offsetWidth;
 		}
-		if(domNode.offsetHeight <= parentHeight && bottom > parentHeight) {
+		if((this.clampToParent === "both" || this.clampToParent === "bottom") && bottom > parentHeight) {
 			top = parentHeight - domNode.offsetHeight;
 		}
 		// clamping on left and top sides is taken care of by positionAllowNegative
 	}
-	// TODO: clampToParent handling for absolute positions
+	if(!this.positionAllowNegative) {
+		left = Math.max(0,left);
+		top = Math.max(0,top);
+	}
 	if (this.popup.absolute) {
 		// Traverse the offsetParent chain and correct the offset to make it relative to the parent node.
 		for (var offsetParentDomNode = domNode.offsetParent; offsetParentDomNode; offsetParentDomNode = offsetParentDomNode.offsetParent) {
@@ -141,7 +146,7 @@ RevealWidget.prototype.execute = function() {
 	this.openAnimation = this.animate === "no" ? undefined : "open";
 	this.closeAnimation = this.animate === "no" ? undefined : "close";
 	this.updatePopupPosition = this.getAttribute("updatePopupPosition","no") === "yes";
-	this.clampToParent = this.getAttribute("clamp","no") === "yes";
+	this.clampToParent = this.getAttribute("clamp","none");
 	// Compute the title of the state tiddler and read it
 	this.stateTiddlerTitle = this.state;
 	this.stateTitle = this.getAttribute("stateTitle");
diff --git a/editions/tw5.com/tiddlers/widgets/examples/RevealWidget (Popup Clamping Example).tid b/editions/tw5.com/tiddlers/widgets/examples/RevealWidget (Popup Clamping Example).tid
index 4c37a684b..45983b6c3 100644
--- a/editions/tw5.com/tiddlers/widgets/examples/RevealWidget (Popup Clamping Example).tid	
+++ b/editions/tw5.com/tiddlers/widgets/examples/RevealWidget (Popup Clamping Example).tid	
@@ -1,5 +1,5 @@
 created: 20231218192649874
-modified: 20231219125925918
+modified: 20250329070425220
 tags: RevealWidget
 title: Popup Clamping Demo
 
@@ -34,7 +34,7 @@ title: Popup Clamping Demo
 	         position={{{ [{$:/temp/clamp-demo-position}else[below]] }}}
 			 state="$:/state/popup-clamping"
 			 class="grid-popup"
-			 clamp={{{ [{$:/temp/clamp-demo-active}else[no]] }}}
+			 clamp={{{ [{$:/temp/clamp-demo-active}else[none]] }}}
 			 positionAllowNegative={{{ [{$:/temp/clamp-demo-allow-negative}else[no]] }}}>
 		<div class="tc-drop-down">
 
@@ -44,11 +44,16 @@ title: Popup Clamping Demo
 	</$reveal>
 </div>
 
-<$checkbox tiddler="$:/temp/clamp-demo-active" field="text" checked="yes" unchecked="no" default="no"> Enable clamping</$checkbox>
+clamp=<$select tiddler="$:/temp/clamp-demo-active" field="text" default="none">
+<option value="none">none</option>
+<option value="right">right</option>
+<option value="bottom">bottom</option>
+<option value="both">both</option>
+</$select>
 
 <$checkbox tiddler="$:/temp/clamp-demo-allow-negative" field="text" checked="yes" unchecked="no" default="no"> positionAllowNegative</$checkbox>
 
-<$select tiddler="$:/temp/clamp-demo-position" field="text" default="below">
+position=<$select tiddler="$:/temp/clamp-demo-position" field="text" default="below">
 <option value="left">left</option>
 <option value="above">above</option>
 <option value="aboveleft">aboveleft</option>