diff --git a/core/modules/widgets/reveal.js b/core/modules/widgets/reveal.js index f57f1cf42..4e5a191f8 100755 --- a/core/modules/widgets/reveal.js +++ b/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"); diff --git a/editions/tw5.com/tiddlers/system/DefaultTiddlers.tid b/editions/tw5.com/tiddlers/system/DefaultTiddlers.tid index 7b9e94cbc..e1668d021 100644 --- a/editions/tw5.com/tiddlers/system/DefaultTiddlers.tid +++ b/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]] 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 new file mode 100644 index 000000000..45983b6c3 --- /dev/null +++ b/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 + + + +
+ <$list filter="[range[25]]"> +
+ <$button popup="$:/state/popup-clamping">POP +
+ + <$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]] }}}> +
+ + !! This is the popup + And this is some text +
+ +
+ +clamp=<$select tiddler="$:/temp/clamp-demo-active" field="text" default="none"> + + + + + + +<$checkbox tiddler="$:/temp/clamp-demo-allow-negative" field="text" checked="yes" unchecked="no" default="no"> positionAllowNegative + +position=<$select tiddler="$:/temp/clamp-demo-position" field="text" default="below"> + + + + + + + + + \ No newline at end of file