Reveal widget allow re-positioning (#5087)

* 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

core/modules/widgets/reveal.js

@@ -70,6 +70,10 @@ RevealWidget.prototype.positionPopup = function(domNode) {
 			left = this.popup.left + this.popup.width;
 			top = this.popup.top + this.popup.height - domNode.offsetHeight;
 			break;
+		case "belowright":
+			left = this.popup.left + this.popup.width;
+			top = this.popup.top + this.popup.height;
+			break;			
 		case "right":
 			left = this.popup.left + this.popup.width;
 			top = this.popup.top;
@@ -78,6 +82,10 @@ RevealWidget.prototype.positionPopup = function(domNode) {
 			left = this.popup.left + this.popup.width - domNode.offsetWidth;
 			top = this.popup.top + this.popup.height;
 			break;
+		case "aboveleft":
+			left = this.popup.left - domNode.offsetWidth;
+			top = this.popup.top - domNode.offsetHeight;
+			break;			
 		default: // Below
 			left = this.popup.left;
 			top = this.popup.top + this.popup.height;
@@ -109,6 +117,7 @@ RevealWidget.prototype.execute = function() {
 	this.retain = this.getAttribute("retain","no");
 	this.openAnimation = this.animate === "no" ? undefined : "open";
 	this.closeAnimation = this.animate === "no" ? undefined : "close";
+	this.updatePopupPosition = this.getAttribute("updatePopupPosition","no") === "yes";
 	// Compute the title of the state tiddler and read it
 	this.stateTiddlerTitle = this.state;
 	this.stateTitle = this.getAttribute("stateTitle");
@@ -212,6 +221,8 @@ RevealWidget.prototype.refresh = function(changedTiddlers) {
 				this.refreshSelf();
 				return true;
 			}
+		} else if(this.type === "popup" && this.updatePopupPosition && (changedTiddlers[this.state] || changedTiddlers[this.stateTitle])) {
+			this.positionPopup(this.domNodes[0]);
 		}
 		return this.refreshChildren(changedTiddlers);
 	}

editions/tw5.com/tiddlers/widgets/RevealWidget.tid

@@ -1,7 +1,7 @@
 caption: reveal
 created: 20131024141900000
 jeremy: tiddlywiki
-modified: 20190910150520583
+modified: 20201121100908827
 tags: Widgets
 title: RevealWidget
 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'' |
 |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 |
-|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 |
 |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") |
 |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]].
 This is useful for edge-cases where titles may contain characters that are used to denote Tiddler fields or indices (`!!`, `##`)""">>