Make modal wizards work again

This commit is contained in:
Jeremy Ruston 2013-01-03 17:06:14 +00:00
parent bab43fe6c2
commit 5755cd5d3f
3 changed files with 25 additions and 18 deletions

View File

@ -38,6 +38,10 @@ Modal.prototype.display = function(title,options) {
modalFooterButtons = document.createElement("span"),
tiddler = this.wiki.getTiddler(title),
d = $tw.config.preferences.animationDuration + "ms";
// Don't do anything if the tiddler doesn't exist
if(!tiddler) {
return;
}
// Add classes
$tw.utils.addClass(modalBackdrop,"modal-backdrop");
$tw.utils.addClass(modalWrapper,"modal");
@ -61,18 +65,20 @@ Modal.prototype.display = function(title,options) {
} else {
titleText = title;
}
var headerRenderer = this.wiki.parseText("text/vnd.tiddlywiki-run",titleText);
headerRenderer.execute([],title);
headerRenderer.renderInDom(headerTitle);
var headerParser = this.wiki.parseText("text/vnd.tiddlywiki-run",titleText),
headerRenderTree = new $tw.WikiRenderTree(headerParser,{wiki: $tw.wiki});
headerRenderTree.execute({tiddlerTitle: title});
headerRenderTree.renderInDom(headerTitle);
this.wiki.addEventListener("",function(changes) {
headerRenderer.refreshInDom(changes);
headerRenderTree.refreshInDom(changes);
});
// Render the body of the message
var bodyRenderer = this.wiki.parseTiddler(title);
bodyRenderer.execute([],title);
bodyRenderer.renderInDom(modalBody);
var bodyParser = this.wiki.parseTiddler(title),
bodyRenderTree = new $tw.WikiRenderTree(bodyParser,{wiki: $tw.wiki});
bodyRenderTree.execute({tiddlerTitle: title});
bodyRenderTree.renderInDom(modalBody);
this.wiki.addEventListener("",function(changes) {
bodyRenderer.refreshInDom(changes);
bodyRenderTree.refreshInDom(changes);
});
// Setup the link if present
if(options.downloadLink) {
@ -93,13 +99,14 @@ Modal.prototype.display = function(title,options) {
if(tiddler && tiddler.fields && tiddler.fields.footer) {
footerText = tiddler.fields.footer;
} else {
footerText = "<<button close class:'btn btn-primary'><Close>>";
footerText = '<$button message="tw-close" class="btn btn-primary">Close</$button>';
}
var footerRenderer = this.wiki.parseText("text/vnd.tiddlywiki-run",footerText);
footerRenderer.execute([],title);
footerRenderer.renderInDom(modalFooterButtons);
var footerParser = this.wiki.parseText("text/vnd.tiddlywiki-run",footerText),
footerRenderTree = new $tw.WikiRenderTree(footerParser,{wiki: $tw.wiki});
footerRenderTree.execute({tiddlerTitle: title});
footerRenderTree.renderInDom(modalFooterButtons);
this.wiki.addEventListener("",function(changes) {
footerRenderer.refreshInDom(changes);
footerRenderTree.refreshInDom(changes);
});
// Add the close event handler
wrapper.addEventListener("tw-close",function(event) {

View File

@ -5,9 +5,9 @@ Here are a few features of TiddlyWiki that you can explore:
* Try editing some tiddlers here on five.tiddlywiki.com to try out the new WikiText. Your changes will not be visible to other users
* Download an empty copy of TiddlyWiki5 from http://five.tiddlywiki.com/empty.html
* Invoke a demonstration wizard: <<button modal param:[[SampleWizard]] class:"btn btn-inverse"><demo>>
* Invoke a demonstration wizard: <$button message="tw-modal" param="SampleWizard" class="btn btn-inverse">demo</$button>
* Use TiddlySpot to host an instance of TiddlyWiki5
* Save this wiki as a static HTML file: <<button save-wiki param:"$:/core/templates/static.template.html" class:"btn"><Save Static>>
* Save this wiki as a static HTML file: <$button message="tw-save-wiki" param="$:/core/templates/static.template.html" class="btn">Save Static</$button>
* Browse the list of AllTiddlers or the ShadowTiddlers
* Examine the example [[bitmap images|Motovun Jack.jpg]] and [[SVG images|Motovun Jack.svg]]
* Check out the TaskManagementExample

View File

@ -1,10 +1,10 @@
title: SampleWizard
tags: demo
subtitle: I'm a modal wizard
footer: <<button close class:"btn btn-primary"><Close>>
footer: <$button message="tw-close" class="btn btn-primary">Close</$button>
This is a modal wizard dialogue, stored in the tiddler SampleWizard.
[img[Motovun Jack.jpg]]
{{Motovun Jack.jpg}}
You can <<button modal param:[[Introduction]] class:"btn btn-inverse"><nest wizards>>.
You can <$button message="tw-modal" param="Introduction" class="btn btn-inverse">nest wizards</$button>.