mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00
Code Issues Releases Wiki Activity

Reveal widget allow re-positioning (#5087)

Browse Source 
* Jeremy's original version of the event widget

* Renamed to eventcatcher, added modifier key support and mouse button support as variables

* Reveal widget: update popup position when state tiddler updates
This commit is contained in:
saqimtiaz 2020-11-21 18:19:52 +01:00 committed by GitHub
parent a0f145197c
commit d2f87d6200
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,6 +70,10 @@ RevealWidget.prototype.positionPopup = function(domNode) {
left = this.popup.left + this.popup.width; left = this.popup.left + this.popup.width;
top = this.popup.top + this.popup.height - domNode.offsetHeight; top = this.popup.top + this.popup.height - domNode.offsetHeight;
break; break;
case "belowright":
left = this.popup.left + this.popup.width;
top = this.popup.top + this.popup.height;
break;
case "right": case "right":
left = this.popup.left + this.popup.width; left = this.popup.left + this.popup.width;
top = this.popup.top; top = this.popup.top;
@ -78,6 +82,10 @@ RevealWidget.prototype.positionPopup = function(domNode) {
left = this.popup.left + this.popup.width - domNode.offsetWidth; left = this.popup.left + this.popup.width - domNode.offsetWidth;
top = this.popup.top + this.popup.height; top = this.popup.top + this.popup.height;
break; break;
case "aboveleft":
left = this.popup.left - domNode.offsetWidth;
top = this.popup.top - domNode.offsetHeight;
break;
default: // Below default: // Below
left = this.popup.left; left = this.popup.left;
top = this.popup.top + this.popup.height; top = this.popup.top + this.popup.height;
@ -109,6 +117,7 @@ RevealWidget.prototype.execute = function() {
this.retain = this.getAttribute("retain","no"); this.retain = this.getAttribute("retain","no");
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";
// 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");
@ -212,6 +221,8 @@ RevealWidget.prototype.refresh = function(changedTiddlers) {
this.refreshSelf(); this.refreshSelf();
return true; return true;
} }
} else if(this.type === "popup" && this.updatePopupPosition && (changedTiddlers[this.state] || changedTiddlers[this.stateTitle])) {
this.positionPopup(this.domNodes[0]);
} }
return this.refreshChildren(changedTiddlers); return this.refreshChildren(changedTiddlers);
} }

5
editions/tw5.com/tiddlers/widgets/RevealWidget.tid
View File

@ -1,7 +1,7 @@
caption: reveal caption: reveal
created: 20131024141900000 created: 20131024141900000
jeremy: tiddlywiki jeremy: tiddlywiki
modified: 20190910150520583 modified: 20201121100908827
tags: Widgets tags: Widgets
title: RevealWidget title: RevealWidget
type: text/vnd.tiddlywiki type: text/vnd.tiddlywiki
@ -33,11 +33,12 @@ The content of the `<$reveal>` widget is displayed according to the rules given
|text |The text to match when the type is ''match'', ''nomatch'', ''lt'', ''gt'', ''lteq'' or ''gteq'' | |text |The text to match when the type is ''match'', ''nomatch'', ''lt'', ''gt'', ''lteq'' or ''gteq'' |
|class |An optional CSS class name to be assigned to the HTML element<br/>&raquo; Set to `tc-popup-keep` to make a popup "sticky", so it won't close when you click inside of it| |class |An optional CSS class name to be assigned to the HTML element<br/>&raquo; Set to `tc-popup-keep` to make a popup "sticky", so it won't close when you click inside of it|
|style |An optional CSS style attribute to be assigned to the HTML element | |style |An optional CSS style attribute to be assigned to the HTML element |
|position |The position used for the popup when the type is ''popup''. Can be ''left'', ''above'', ''aboveright'', ''right'', ''belowleft'' or ''below'' | |position |The position used for the popup when the type is ''popup''. Can be ''left'', ''above'', ''aboveleft'', ''aboveright'', ''right'', ''belowleft'', ''belowright'' or ''below'' |
|positionAllowNegative |Set to "yes" to prevent computed popup positions from being clamped to be above zero | |positionAllowNegative |Set to "yes" to prevent computed popup positions from being clamped to be above zero |
|default |Default value to use when the state tiddler is missing | |default |Default value to use when the state tiddler is missing |
|animate |Set to "yes" to animate opening and closure (defaults to "no"; requires "retain" to be set to "yes") | |animate |Set to "yes" to animate opening and closure (defaults to "no"; requires "retain" to be set to "yes") |
|retain |Set to "yes" to force the content to be retained even when hidden (defaults to "no") | |retain |Set to "yes" to force the content to be retained even when hidden (defaults to "no") |
|updatePopupPosition|<<.from-version "5.1.23">>Set to "yes" to update the popup position when the state tiddler is updated (defaults to "no")|
<<.tip """<$macrocall $name=".from-version" version="5.1.18"/> <$macrocall $name=".attr" _="stateTitle"/>, <$macrocall $name=".attr" _="stateField"/> and <$macrocall $name=".attr" _="stateIndex"/> attributes allow specifying Tiddler states ''directly'', without interpreting them as [[TextReferences|TextReference]]. <<.tip """<$macrocall $name=".from-version" version="5.1.18"/> <$macrocall $name=".attr" _="stateTitle"/>, <$macrocall $name=".attr" _="stateField"/> and <$macrocall $name=".attr" _="stateIndex"/> attributes allow specifying Tiddler states ''directly'', without interpreting them as [[TextReferences|TextReference]].
This is useful for edge-cases where titles may contain characters that are used to denote Tiddler fields or indices (`!!`, `##`)""">> This is useful for edge-cases where titles may contain characters that are used to denote Tiddler fields or indices (`!!`, `##`)""">>