diff --git a/core/modules/widgets/button.js b/core/modules/widgets/button.js index da4ba5a01e..b53ca2e158 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 e8c1979403..8d2c105a7a 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 b0d7385cbf..4d1111730e 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 6794330719..cf51fcbe41 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 5a6301b148..a8ae466ed9 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 28c1f68222..d7ec5335b6 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 `