mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

Initial commit

This commit is contained in:
yaisog 2023-12-19 14:21:52 +01:00
parent d2d00ffa4d
commit 5818fb9602
3 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,6 +96,21 @@ RevealWidget.prototype.positionPopup = function(domNode) {
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,
bottom = top + domNode.offsetHeight;
if(domNode.offsetWidth <= parentWidth && right > parentWidth) {
left = parentWidth - domNode.offsetWidth;
}
if(domNode.offsetHeight <= parentHeight && 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.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) {
@ -126,6 +141,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";
// Compute the title of the state tiddler and read it
this.stateTiddlerTitle = this.state;
this.stateTitle = this.getAttribute("stateTitle");

3
editions/tw5.com/tiddlers/$__DefaultTiddlers.tid Normal file
View File

@ -0,0 +1,3 @@
title: $:/DefaultTiddlers
[[Popup Clamping Demo]] GettingStarted

60
editions/tw5.com/tiddlers/widgets/examples/RevealWidget (Popup Clamping Example) Normal file
View File

@ -0,0 +1,60 @@
created: 20231218192649874
modified: 20231219125925918
tags:
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[no]] }}}
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>
<$checkbox tiddler="$:/temp/clamp-demo-active" field="text" checked="yes" unchecked="no" default="no"> Enable clamping</$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">
<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>