mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-04-06 10:46:57 +00:00
Code Issues Releases Wiki Activity

Distinguish right/bottom/both/none

Browse Source
This commit is contained in:
yaisog 2025-03-29 08:07:35 +01:00
parent 2501a099da
commit 6c8253e5d5
2 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
core/modules/widgets/reveal.js
View File

@ -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");

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

@ -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>