diff --git a/core/modules/startup/rootwidget.js b/core/modules/startup/rootwidget.js index 986742519..fdc6c738e 100644 --- a/core/modules/startup/rootwidget.js +++ b/core/modules/startup/rootwidget.js @@ -23,7 +23,7 @@ exports.startup = function() { // Install the modal message mechanism $tw.modal = new $tw.utils.Modal($tw.wiki); $tw.rootWidget.addEventListener("tm-modal",function(event) { - $tw.modal.display(event.param); + $tw.modal.display(event.param,{variables: event.paramObject}); }); // Install the notification mechanism $tw.notifier = new $tw.utils.Notifier($tw.wiki); diff --git a/core/modules/utils/dom/modal.js b/core/modules/utils/dom/modal.js index 1c4e30c1c..fb975fd0d 100644 --- a/core/modules/utils/dom/modal.js +++ b/core/modules/utils/dom/modal.js @@ -35,6 +35,8 @@ Modal.prototype.display = function(title,options) { if(!tiddler) { return; } + // Create the variables + var variables = $tw.utils.extend({currentTiddler: title},options.variables); // Create the wrapper divs var wrapper = document.createElement("div"), modalBackdrop = document.createElement("div"), @@ -76,7 +78,8 @@ Modal.prototype.display = function(title,options) { value: title }}}], parentWidget: $tw.rootWidget, - document: document + document: document, + variables: variables }); headerWidgetNode.render(headerTitle,null); this.wiki.addEventListener("change",function(changes) { @@ -85,7 +88,8 @@ Modal.prototype.display = function(title,options) { // Render the body of the message var bodyWidgetNode = this.wiki.makeTranscludeWidget(title,{ parentWidget: $tw.rootWidget, - document: document + document: document, + variables: variables }); bodyWidgetNode.render(modalBody,null); this.wiki.addEventListener("change",function(changes) { @@ -125,7 +129,8 @@ Modal.prototype.display = function(title,options) { }}} ]}], parentWidget: $tw.rootWidget, - document: document + document: document, + variables: variables }); footerWidgetNode.render(modalFooterButtons,null); this.wiki.addEventListener("change",function(changes) { diff --git a/editions/prerelease/tiddlers/SampleModal.tid b/editions/prerelease/tiddlers/SampleModal.tid new file mode 100644 index 000000000..5fb770baf --- /dev/null +++ b/editions/prerelease/tiddlers/SampleModal.tid @@ -0,0 +1,12 @@ +created: 20140912145537860 +footer: <$button message="tm-close-tiddler">Close +modified: 20140912145537861 +subtitle: This is a modal created especially for <> +title: SampleModal +type: text/vnd.tiddlywiki + +! Hello, <> + +This is an example modal containing the following message: + +<> diff --git a/editions/prerelease/tiddlers/WidgetMessage_ tm-modal.tid b/editions/prerelease/tiddlers/WidgetMessage_ tm-modal.tid new file mode 100644 index 000000000..aa0b40067 --- /dev/null +++ b/editions/prerelease/tiddlers/WidgetMessage_ tm-modal.tid @@ -0,0 +1,32 @@ +created: 20140811112133701 +modified: 20141107142803042 +tags: Messages +title: WidgetMessage: tm-modal +type: text/vnd.tiddlywiki +caption: tm-modal + +The modal message displays a specified tiddler in a modal overlay that dims the main page. It requires the following properties on the `event` object: + +|!Name |!Description | +|param |Title of the tiddler to be displayed | +|paramObject |Hashmap of variables to be provided to the modal | + +The "currentTiddler" variable is set to the title of the modal tiddler, but can be overridden by specifying a different value in `paramObject`. + +The modal message is usually generated with the ButtonWidget. The modal message is handled by the TiddlyWiki core. + +! Example + +Here is an example of displaying a modal and passing parameters to it: + +<$macrocall $name='wikitext-example-without-html' +src='Your name: <$edit-text tiddler="$:/temp/yourName" tag="input" default="Your name"/> + +Your message: +<$edit-text tiddler="$:/temp/yourMessage" default="Your message"/> + +<$button> +<$action-sendmessage $message="tm-modal" $param="SampleModal" yourName={{$:/temp/yourName}} yourMessage={{$:/temp/yourMessage}}/> +Click me! +'/> +