Merge 6c8253e5d599b1719c3db4f83ec2006efb0094d1 into 961e74f73d230d0028efb586db07699120eac888

core/modules/widgets/reveal.js

@@ -89,6 +89,26 @@ RevealWidget.prototype.positionPopup = function(domNode) {
 			top = this.popup.top + this.popup.height;
 			break;
 	}
+	// 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((this.clampToParent === "both" || this.clampToParent === "right") && right > parentWidth) {
+			left = parentWidth - domNode.offsetWidth;
+		}
+		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
+	}
 	if(!this.positionAllowNegative) {
 		left = Math.max(0,left);
 		top = Math.max(0,top);
@@ -123,6 +143,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","none");
 	// Compute the title of the state tiddler and read it
 	this.stateTiddlerTitle = this.state;
 	this.stateTitle = this.getAttribute("stateTitle");

editions/tw5.com/tiddlers/system/DefaultTiddlers.tid

@@ -3,6 +3,7 @@ modified: 20140912135951542
 title: $:/DefaultTiddlers
 type: text/vnd.tiddlywiki
 
+[[Popup Clamping Demo]]
 HelloThere
 [[Quick Start]]
 [[Find Out More]]

editions/tw5.com/tiddlers/widgets/examples/RevealWidget (Popup Clamping Example).tid

@@ -0,0 +1,65 @@
+created: 20231218192649874
+modified: 20250329070425220
+tags: RevealWidget
+title: Popup Clamping Demo
+
+<style>
+.container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  width: 500px;
+  height: 500px;
+  overflow: hidden;
+  background-color: #F8F8F8;
+  position: relative;
+}
+.grid-item {
+    justify-self: center;
+    align-self: center;
+}
+.grid-popup .tc-drop-down {
+	padding: 1em;
+	min-width: 15em;
+}
+</style>
+
+<div class="container">
+	<$list filter="[range[25]]">
+		<div class="grid-item">
+			<$button popup="$:/state/popup-clamping">POP</$button>
+		</div>
+	</$list>
+	<$reveal type="popup"
+	         position={{{ [{$:/temp/clamp-demo-position}else[below]] }}}
+			 state="$:/state/popup-clamping"
+			 class="grid-popup"
+			 clamp={{{ [{$:/temp/clamp-demo-active}else[none]] }}}
+			 positionAllowNegative={{{ [{$:/temp/clamp-demo-allow-negative}else[no]] }}}>
+		<div class="tc-drop-down">
+
+		!! This is the popup
+		And this is some text
+		</div>
+	</$reveal>
+</div>
+
+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>
+
+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>
+<option value="aboveright">aboveright</option>
+<option value="right">right</option>
+<option value="belowleft">belowleft</option>
+<option value="belowright">belowright</option>
+<option value="below">below</option>
+</$select>