From 30925ee7bf8bb419fdc841738c50ef63a344ead6 Mon Sep 17 00:00:00 2001 From: Saq Imtiaz Date: Sun, 11 Jul 2021 21:21:35 +0200 Subject: [PATCH] Update syntax for Eventcatcher (#5868) * Update syntax for Eventcatcher to be consistent with MessageCatcher while being backwards compatible * Update docs * Update docs --- core/modules/widgets/eventcatcher.js | 21 +++++++++++++------ .../tiddlers/widgets/EventCatcherWidget.tid | 13 +++++++----- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/core/modules/widgets/eventcatcher.js b/core/modules/widgets/eventcatcher.js index 75f60379a..f72c2a012 100644 --- a/core/modules/widgets/eventcatcher.js +++ b/core/modules/widgets/eventcatcher.js @@ -46,7 +46,7 @@ EventWidget.prototype.render = function(parent,nextSibling) { $tw.utils.each(this.types,function(type) { domNode.addEventListener(type,function(event) { var selector = self.getAttribute("selector"), - actions = self.getAttribute("actions-"+type), + actions = self.getAttribute("$"+type) || self.getAttribute("actions-"+type), stopPropagation = self.getAttribute("stopPropagation","onaction"), selectedNode = event.target, selectedNodeRect, @@ -135,7 +135,15 @@ Compute the internal state of the widget EventWidget.prototype.execute = function() { var self = this; // Get attributes that require a refresh on change - this.types = this.getAttribute("events","").split(" "); + this.types = []; + $tw.utils.each(this.attributes,function(value,key) { + if(key.charAt(0) === "$") { + self.types.push(key.slice(1)); + } + }); + if(!this.types.length) { + this.types = this.getAttribute("events","").split(" "); + } this.elementTag = this.getAttribute("tag"); // Make child widgets this.makeChildWidgets(); @@ -151,12 +159,13 @@ EventWidget.prototype.assignDomNodeClasses = function() { Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering */ EventWidget.prototype.refresh = function(changedTiddlers) { - var changedAttributes = this.computeAttributes(); - if(changedAttributes["events"] || changedAttributes["tag"]) { + var changedAttributes = this.computeAttributes(), + changedAttributesCount = $tw.utils.count(changedAttributes); + if(changedAttributesCount === 1 && changedAttributes["class"]) { + this.assignDomNodeClasses(); + } else if(changedAttributesCount > 0) { this.refreshSelf(); return true; - } else if(changedAttributes["class"]) { - this.assignDomNodeClasses(); } return this.refreshChildren(changedTiddlers); }; diff --git a/editions/tw5.com/tiddlers/widgets/EventCatcherWidget.tid b/editions/tw5.com/tiddlers/widgets/EventCatcherWidget.tid index aeda1450f..980bd3fdb 100644 --- a/editions/tw5.com/tiddlers/widgets/EventCatcherWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/EventCatcherWidget.tid @@ -1,5 +1,5 @@ created: 20201123113532200 -modified: 20210520162813234 +modified: 20210711165425543 tags: Widgets title: EventCatcherWidget type: text/vnd.tiddlywiki @@ -25,12 +25,16 @@ Use of the event catcher widget is beneficial when using large numbers of other The content of the `<$eventcatcher>` widget is displayed normally. |!Attribute |!Description | -|events |Space separated list of JavaScript events to be trapped, for example "click" or "click dblclick" | + |selector |A CSS selector. Only events originating inside a DOM node with this selector will be trapped | -|actions-* |Action strings to be invoked when a matching event is trapped. Each event is mapped to an action attribute name of the form actions-event where event represents the type of the event. For example: `actions-click` or `actions-dblclick` | +|//{any attributes starting with $}// |<<.from-version "5.1.24">> Each attribute name (excluding the $) specifies the name of an event, and the value specifies the action string to be invoked. For example: `$click=<>` | |tag |Optional. The HTML element the widget creates to capture the events, defaults to:
» `span` when parsed in inline-mode
» `div` when parsed in block-mode | |class |Optional. A CSS class name (or names) to be assigned to the widget HTML element | |stopPropagation |<<.from-version "5.1.24">> Optional. Set to "always" to always stop event propagation even if there are no corresponding actions to invoke, "never" to never stop event propagation, or the default value "onaction" with which event propagation is only stopped if there are corresponding actions that are invoked. | +|events |//(deprecated – see below)// Space separated list of JavaScript events to be trapped, for example "click" or "click dblclick" | +|actions-* |//(deprecated – see below)// Action strings to be invoked when a matching event is trapped. Each event is mapped to an action attribute name of the form actions-event where event represents the type of the event. For example: `actions-click` or `actions-dblclick` | + +<<.from-version "5.1.24">> Note that the attributes `events` and `actions-*` are no longer needed. Instead you can use attributes starting with $ where the attribute name (excluding the $) specifies the name of the event and the value specifies the action string to be invoked. If any attributes with the prefix $ are present then the `types` attribute is ignored. ! Variables @@ -65,7 +69,7 @@ This example uses the ActionLogWidget and will log the `data-item-id` attribute <$action-log item=<> event=<>/> \end -<$eventcatcher events="click contextmenu" selector=".item" actions-click=<> actions-contextmenu=<> tag="div"> +<$eventcatcher selector=".item" $click=<> $contextmenu=<> tag="div">
Click events here will be trapped @@ -85,4 +89,3 @@ And here ``` -