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:
parent
376d24ff39
commit
854a9d6d1c
@ -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);
|
||||
});
|
||||
|
@ -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;
|
||||
|
||||
})();
|
||||
|
Loading…
Reference in New Issue
Block a user