mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-06-26 07:02:51 +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; top = this.popup.top + this.popup.height;
break; break;
} }
if(!this.positionAllowNegative) { // 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
left = Math.max(0,left); // if position is absolute then clamping is done to the canvas boundary, since there is no "parent"
top = Math.max(0,top); if(this.clampToParent !== "none") {
} if(this.popup.absolute) {
if(this.clampToParent) { var parentWidth = window.innerWidth,
var offsetParentDomNode = domNode.offsetParent, parentheight = window.innerHeight;
parentWidth = offsetParentDomNode.offsetWidth, } else {
parentHeight = offsetParentDomNode.offsetHeight, var parentWidth = domNode.offsetParent.offsetWidth,
right = left + domNode.offsetWidth, parentHeight = domNode.offsetParent.offsetHeight
}
var right = left + domNode.offsetWidth,
bottom = top + domNode.offsetHeight; bottom = top + domNode.offsetHeight;
if(domNode.offsetWidth <= parentWidth && right > parentWidth) { if((this.clampToParent === "both" || this.clampToParent === "right") && right > parentWidth) {
left = parentWidth - domNode.offsetWidth; left = parentWidth - domNode.offsetWidth;
} }
if(domNode.offsetHeight <= parentHeight && bottom > parentHeight) { if((this.clampToParent === "both" || this.clampToParent === "bottom") && bottom > parentHeight) {
top = parentHeight - domNode.offsetHeight; top = parentHeight - domNode.offsetHeight;
} }
// clamping on left and top sides is taken care of by positionAllowNegative // 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) { if (this.popup.absolute) {
// Traverse the offsetParent chain and correct the offset to make it relative to the parent node. // 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) { 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.openAnimation = this.animate === "no" ? undefined : "open";
this.closeAnimation = this.animate === "no" ? undefined : "close"; this.closeAnimation = this.animate === "no" ? undefined : "close";
this.updatePopupPosition = this.getAttribute("updatePopupPosition","no") === "yes"; 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 // Compute the title of the state tiddler and read it
this.stateTiddlerTitle = this.state; this.stateTiddlerTitle = this.state;
this.stateTitle = this.getAttribute("stateTitle"); 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 created: 20231218192649874
modified: 20231219125925918 modified: 20250329070425220
tags: RevealWidget tags: RevealWidget
title: Popup Clamping Demo title: Popup Clamping Demo
@ -34,7 +34,7 @@ title: Popup Clamping Demo
position={{{ [{$:/temp/clamp-demo-position}else[below]] }}} position={{{ [{$:/temp/clamp-demo-position}else[below]] }}}
state="$:/state/popup-clamping" state="$:/state/popup-clamping"
class="grid-popup" 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]] }}}> positionAllowNegative={{{ [{$:/temp/clamp-demo-allow-negative}else[no]] }}}>
<div class="tc-drop-down"> <div class="tc-drop-down">
@ -44,11 +44,16 @@ title: Popup Clamping Demo
</$reveal> </$reveal>
</div> </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> <$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="left">left</option>
<option value="above">above</option> <option value="above">above</option>
<option value="aboveleft">aboveleft</option> <option value="aboveleft">aboveleft</option>