1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 17:10:29 +00:00

Update modal message mechanism to support custom footers

This commit is contained in:
Jeremy Ruston 2012-07-16 12:57:44 +01:00
parent a689abf0c1
commit d21a70f085
4 changed files with 49 additions and 8 deletions

View File

@ -1,6 +1,7 @@
title: $:/messages/EnterEditMode
type: text/x-tiddlywiki
subtitle: Editing this wiki
footer: <<button close class:"btn btn-primary"><Close>>
help: http://alpha.tiddlywiki.com/#help:EditMode
You can edit this wiki and save your changes. You are strongly advised to verify that saving is working properly before trusting ~TiddlyWiki with your data.

View File

@ -1,6 +1,7 @@
title: $:/messages/SaveInstructions
type: text/x-tiddlywiki
subtitle: Save your work
footer: <<button close class:"btn btn-primary"><Close>>
help: http://alpha.tiddlywiki.com/#help:SavingChanges
Your changes to this wiki need to be saved as a ~TiddlyWiki HTML file.

View File

@ -45,7 +45,7 @@ exports.startup = function() {
rootElement: document.body
});
// Install the modal message mechanism
$tw.modal = new $tw.utils.Modal(this);
$tw.modal = new $tw.utils.Modal($tw.wiki);
document.addEventListener("tw-modal",function(event) {
$tw.modal.display(event.param);
},false);

View File

@ -17,20 +17,59 @@ var Modal = function(wiki) {
};
Modal.prototype.display = function(title) {
// Create the wrapper divs
var wrapper = document.createElement("div"),
template,renderer;
template = "$:/templates/ModalMessage";
renderer = $tw.wiki.parseTiddler(template);
renderer.execute([],title);
renderer.renderInDom(wrapper);
$tw.wiki.addEventListener("",function(changes) {
renderer.refreshInDom(changes);
modalBackdrop = document.createElement("div"),
modalWrapper = document.createElement("div"),
modalHeader = document.createElement("div"),
headerTitle = document.createElement("h1"),
modalBody = document.createElement("div"),
modalFooter = document.createElement("div"),
modalFooterHelp = document.createElement("div"),
modalFooterButtons = document.createElement("div");
// Add classes
$tw.utils.addClass(modalBackdrop,"modal-backdrop");
$tw.utils.addClass(modalWrapper,"modal");
$tw.utils.addClass(modalHeader,"modal-header");
$tw.utils.addClass(modalBody,"modal-body");
$tw.utils.addClass(modalFooter,"modal-footer");
// Join them together
wrapper.appendChild(modalBackdrop);
wrapper.appendChild(modalWrapper);
modalHeader.appendChild(headerTitle);
modalWrapper.appendChild(modalHeader);
modalWrapper.appendChild(modalBody);
modalFooter.appendChild(modalFooterHelp);
modalFooter.appendChild(modalFooterButtons);
modalWrapper.appendChild(modalFooter);
// Render the title of the message
var headerRenderer = this.wiki.parseText("text/x-tiddlywiki-run","<<view subtitle wikified>>");
headerRenderer.execute([],title);
headerRenderer.renderInDom(headerTitle);
this.wiki.addEventListener("",function(changes) {
headerRenderer.refreshInDom(changes);
});
// Render the body of the message
var bodyRenderer = this.wiki.parseTiddler(title);
bodyRenderer.execute([],title);
bodyRenderer.renderInDom(modalBody);
this.wiki.addEventListener("",function(changes) {
bodyRenderer.refreshInDom(changes);
});
// Render the footer of the message
var footerRenderer = this.wiki.parseText("text/x-tiddlywiki-run","<<view footer wikified>>");
footerRenderer.execute([],title);
footerRenderer.renderInDom(modalFooterButtons);
this.wiki.addEventListener("",function(changes) {
footerRenderer.refreshInDom(changes);
});
// Add the close event handler
wrapper.addEventListener("tw-close",function(event) {
document.body.removeChild(wrapper);
event.stopPropagation();
return false;
},false);
// Put the message into the document
document.body.appendChild(wrapper);
};