1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-16 10:29:54 +00:00

Introduce messagecatcher widget

This commit is contained in:
jeremy@jermolene.com 2021-03-09 18:07:07 +00:00
parent 8980927b54
commit 9eda02868f
2 changed files with 142 additions and 0 deletions

View File

@ -0,0 +1,100 @@
/*\
title: $:/core/modules/widgets/messagecatcher.js
type: application/javascript
module-type: widget
Message catcher widget
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var MessageCatcherWidget = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
};
/*
Inherit from the base widget class
*/
MessageCatcherWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
MessageCatcherWidget.prototype.render = function(parent,nextSibling) {
var self = this;
// Remember parent
this.parentDomNode = parent;
// Compute attributes and execute state
this.computeAttributes();
this.execute();
// Add our message handler
if(this.messageType) {
this.addEventListeners([
{type: this.messageType, handler: "handleEvent"}
]);
}
// Render children
this.renderChildren(parent,null);
};
/*
Compute the internal state of the widget
*/
MessageCatcherWidget.prototype.execute = function() {
var self = this;
// Get attributes that require a refresh on change
this.messageType = this.getAttribute("type");
this.messageActions = this.getAttribute("actions");
// Make child widgets
this.makeChildWidgets();
};
/*
Handle an event
*/
MessageCatcherWidget.prototype.handleEvent = function(event) {
if(this.messageActions) {
// Collect all the event properties into variables
var collectProps = function(obj,prefix) {
prefix = prefix || "";
var props = {};
$tw.utils.each(obj,function(value,name) {
if(["string","boolean","number"].indexOf(typeof value) !== -1) {
props[prefix + name] = value.toString();
}
});
return props;
};
var variables = $tw.utils.extend(
{},
collectProps(event.paramObject,"event-paramObject-"),
collectProps(event,"event-"),
{
modifier: $tw.keyboardManager.getEventModifierKeyDescriptor(event)
});
this.invokeActionString(this.messageActions,this,event,variables);
}
return false;
};
/*
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
*/
MessageCatcherWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes();
if(changedAttributes["type"]) {
this.refreshSelf();
return true;
}
return this.refreshChildren(changedTiddlers);
};
exports.messagecatcher = MessageCatcherWidget;
})();

View File

@ -0,0 +1,42 @@
created: 20210309133636211
modified: 20210309133636211
tags: Widgets
title: MessageCatcherWidget
type: text/vnd.tiddlywiki
! Introduction
<<.from-version "5.1.24">>
The message catcher widget traps [[messages|Messages]] dispatched within its child content, and allows invoking a series of ActionWidgets in response to those messages.
! Content and Attributes
The content of the `<$messagecatcher>` widget is displayed normally.
|!Attribute |!Description |
|type |Name of the message be trapped, for example "tm-scroll" or "tm-navigate" |
|actions |Action string to be invoked when a matching message is trapped |
! Variables
The message catcher widget
|!Variables |!Description |
|`event-*` |All string-based properties of the `event` object, with the names prefixed with `event-` |
|`event-paramObject-*` |All string-based properties of the `event.paramObject` object, with the names prefixed with `event-paramObject-` |
|`modifier` |For messages that originated with browser events, the modifier keys that were pressed when the event was fired. The possible modifiers are ''norma'' (no modifiers), ''ctrl'', ''ctrl-alt'', ''ctrl-shift'', ''alt'', ''alt-shift'', ''shift'' and ''ctrl-alt-shift'' |
! Example
<$macrocall $name="wikitext-example-without-html" src="""
\define actions()
<$action-log/>
\end
<$messagecatcher type="tm-navigate" actions=<<actions>>>
Click on [[this link]] to fire an action. See the browser JavaScript console for the output
</$messagecatcher>
"""/>