diff --git a/core/modules/widgets/button.js b/core/modules/widgets/button.js index da4ba5a01..b53ca2e15 100644 --- a/core/modules/widgets/button.js +++ b/core/modules/widgets/button.js @@ -86,6 +86,9 @@ ButtonWidget.prototype.render = function(parent,nextSibling) { self.setTiddler(); handled = true; } + if(self.actions) { + self.invokeActionString(self.actions,self,event); + } if(handled) { event.preventDefault(); event.stopPropagation(); @@ -153,6 +156,7 @@ Compute the internal state of the widget */ ButtonWidget.prototype.execute = function() { // Get attributes + this.actions = this.getAttribute("actions"); this.to = this.getAttribute("to"); this.message = this.getAttribute("message"); this.param = this.getAttribute("param"); diff --git a/core/modules/widgets/keyboard.js b/core/modules/widgets/keyboard.js index e8c197940..8d2c105a7 100644 --- a/core/modules/widgets/keyboard.js +++ b/core/modules/widgets/keyboard.js @@ -42,7 +42,10 @@ KeyboardWidget.prototype.render = function(parent,nextSibling) { // Add a keyboard event handler domNode.addEventListener("keydown",function (event) { if($tw.keyboardManager.checkKeyDescriptors(event,self.keyInfoArray)) { - self.invokeActions(this,event); + self.invokeActions(self,event); + if(self.actions) { + self.invokeActionString(self.actions,self,event); + } self.dispatchMessage(event); event.preventDefault(); event.stopPropagation(); @@ -65,6 +68,7 @@ Compute the internal state of the widget */ KeyboardWidget.prototype.execute = function() { // Get attributes + this.actions = this.getAttribute("actions"); this.message = this.getAttribute("message"); this.param = this.getAttribute("param"); this.key = this.getAttribute("key"); diff --git a/core/modules/widgets/select.js b/core/modules/widgets/select.js index b0d7385cb..4d1111730 100644 --- a/core/modules/widgets/select.js +++ b/core/modules/widgets/select.js @@ -51,6 +51,7 @@ SelectWidget.prototype.render = function(parent,nextSibling) { Handle a change event */ SelectWidget.prototype.handleChangeEvent = function(event) { + // Get the new value and assign it to the tiddler if(this.selectMultiple == false) { var value = this.getSelectDomNode().value; } else { @@ -58,6 +59,10 @@ SelectWidget.prototype.handleChangeEvent = function(event) { value = $tw.utils.stringifyList(value); } this.wiki.setText(this.selectTitle,this.selectField,this.selectIndex,value); + // Trigger actions + if(this.selectActions) { + this.invokeActionString(this.selectActions,this,event); + } }; /* @@ -132,6 +137,7 @@ Compute the internal state of the widget */ SelectWidget.prototype.execute = function() { // Get our parameters + this.selectActions = this.getAttribute("actions"); this.selectTitle = this.getAttribute("tiddler",this.getVariable("currentTiddler")); this.selectField = this.getAttribute("field","text"); this.selectIndex = this.getAttribute("index"); diff --git a/core/modules/widgets/widget.js b/core/modules/widgets/widget.js index 679433071..cf51fcbe4 100755 --- a/core/modules/widgets/widget.js +++ b/core/modules/widgets/widget.js @@ -504,6 +504,23 @@ Widget.prototype.invokeActions = function(triggeringWidget,event) { return handled; }; +/* +Invoke the action widgets defined in a string +*/ +Widget.prototype.invokeActionString = function(actions,triggeringWidget,event) { + actions = actions || ""; + var parser = this.wiki.parseText("text/vnd.tiddlywiki",actions,{ + parentWidget: this, + document: this.document + }), + widgetNode = this.wiki.makeWidget(parser,{ + parentWidget: this, + document: this.document + }); + var container = this.document.createElement("div"); + widgetNode.render(container,null); + return widgetNode.invokeActions(this,event); +}; Widget.prototype.allowActionPropagation = function() { return true; diff --git a/editions/tw5.com/tiddlers/widgets/ActionWidgets.tid b/editions/tw5.com/tiddlers/widgets/ActionWidgets.tid index 5a6301b14..a8ae466ed 100644 --- a/editions/tw5.com/tiddlers/widgets/ActionWidgets.tid +++ b/editions/tw5.com/tiddlers/widgets/ActionWidgets.tid @@ -1,12 +1,38 @@ created: 20141008134425548 -modified: 20150128163157192 +modified: 20160429165240169 tags: Widgets title: ActionWidgets type: text/vnd.tiddlywiki -Action widgets are a special type of widget that perform an action such as sending a message, navigating to a tiddler, or changing the value of a tiddler. They are used in association with other widgets that trigger those actions (for example, the ButtonWidget). +Action widgets are a special type of widget that have no visual appearance but perform an action when triggered (such as sending a message, navigating to a tiddler, or changing the value of a tiddler). Action widgets are used in association with other widgets that trigger those actions (for example, the ButtonWidget). -Action widgets are invisible. They need not be immediate children of their triggering widget, but they must be descendents of it. The actions are performed in sequence. For example, here is a button that triggers two actions of sending different messages: +The following action widgets are provided: + +<> + +There are two ways to use action widgets: + +* Using the `actions` attribute of the triggering widget (this is the preferred way) +* Embedding the actions within the triggering widget (an older technique that is now deprecated) + +!! Assigning action widgets with the `actions` attribute + +The action widgets are passed as a string to the `actions` attribute of the triggering widget. Usually, it is more convenient to use a macro to assign the action widgets to a variable. For example, here is a button that triggers two actions of sending different messages: + +``` +\define my-actions() +<$action-sendmessage $message="tm-home"/> +<$action-sendmessage $message="tm-full-screen"/> +\end + +<$button actions=<>> +Click me! + +``` + +!! Assigning action widgets by embedding + +The action widgets need not be immediate children of their triggering widget, but they must be descendents of it. The actions are performed in sequence. Here is the above example rewritten to use embedding: ``` <$button> @@ -16,6 +42,3 @@ Click me! ``` -The following action widgets are provided: - -<> diff --git a/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid b/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid index 28c1f6822..d7ec5335b 100644 --- a/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid @@ -1,6 +1,6 @@ caption: button created: 20131024141900000 -modified: 20150619111219516 +modified: 20160429175044822 tags: Widgets title: ButtonWidget type: text/vnd.tiddlywiki @@ -9,6 +9,7 @@ type: text/vnd.tiddlywiki The button widget displays an HTML `