1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00

Toggle a style on the page container when a modal is displayed

This commit is contained in:
Jeremy Ruston 2013-06-04 16:19:47 +01:00
parent 376d24ff39
commit 854a9d6d1c
2 changed files with 19 additions and 3 deletions

View File

@ -116,9 +116,10 @@ exports.startup = function() {
parser = $tw.wiki.parseTiddler(templateTitle),
renderTree = new $tw.WikiRenderTree(parser,{wiki: $tw.wiki, context: {tiddlerTitle: templateTitle}, document: document});
renderTree.execute();
var container = document.createElement("div");
document.body.insertBefore(container,document.body.firstChild);
renderTree.renderInDom(container);
$tw.pageContainer = document.createElement("div");
$tw.utils.addClass($tw.pageContainer,"tw-page-container");
document.body.insertBefore($tw.pageContainer,document.body.firstChild);
renderTree.renderInDom($tw.pageContainer);
$tw.wiki.addEventListener("change",function(changes) {
renderTree.refreshInDom(changes);
});

View File

@ -14,6 +14,7 @@ Modal message mechanism
var Modal = function(wiki) {
this.wiki = wiki;
this.modalCount = 0;
};
/*
@ -25,6 +26,10 @@ Options include:
*/
Modal.prototype.display = function(title,options) {
options = options || {};
var self = this;
// Up the modal count and adjust the body class
this.modalCount++;
this.adjustPageClass();
// Create the wrapper divs
var wrapper = document.createElement("div"),
modalBackdrop = document.createElement("div"),
@ -43,6 +48,7 @@ Modal.prototype.display = function(title,options) {
return;
}
// Add classes
$tw.utils.addClass(wrapper,"modal-wrapper");
$tw.utils.addClass(modalBackdrop,"modal-backdrop");
$tw.utils.addClass(modalWrapper,"modal");
$tw.utils.addClass(modalHeader,"modal-header");
@ -110,6 +116,9 @@ Modal.prototype.display = function(title,options) {
});
// Add the close event handler
wrapper.addEventListener("tw-close-tiddler",function(event) {
// Decrease the modal count and adjust the body class
self.modalCount--;
self.adjustPageClass();
// Force layout and animate the modal message away
$tw.utils.forceLayout(modalBackdrop);
$tw.utils.forceLayout(modalWrapper);
@ -159,6 +168,12 @@ Modal.prototype.display = function(title,options) {
]);
};
Modal.prototype.adjustPageClass = function() {
if($tw.pageContainer) {
$tw.utils.toggleClass($tw.pageContainer,"tw-modal-displayed",this.modalCount > 0);
}
};
exports.Modal = Modal;
})();