mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-12 10:20:26 +00:00
Switch the notifier and modal mechanisms to use the new widget mechanism
Note the use of the `$tw.rootWidget` to collect together the root event handlers
This commit is contained in:
parent
48dbacc88a
commit
2a571b4f5f
@ -63,29 +63,38 @@ exports.startup = function() {
|
|||||||
$tw.popup = new $tw.utils.Popup({
|
$tw.popup = new $tw.utils.Popup({
|
||||||
rootElement: document.body
|
rootElement: document.body
|
||||||
});
|
});
|
||||||
|
// Install the animator
|
||||||
|
$tw.anim = new $tw.utils.Animator();
|
||||||
|
// Kick off the stylesheet manager
|
||||||
|
$tw.stylesheetManager = new $tw.utils.StylesheetManager($tw.wiki);
|
||||||
|
// Create a root widget for attaching event handlers. By using it as the parentWidget for another widget tree, one can reuse the event handlers
|
||||||
|
$tw.rootWidget = new widget.widget({type: "widget", children: []},{
|
||||||
|
wiki: $tw.wiki,
|
||||||
|
document: document
|
||||||
|
});
|
||||||
// Install the modal message mechanism
|
// Install the modal message mechanism
|
||||||
$tw.modal = new $tw.utils.Modal($tw.wiki);
|
$tw.modal = new $tw.utils.Modal($tw.wiki);
|
||||||
document.addEventListener("tw-modal",function(event) {
|
$tw.rootWidget.addEventListener("tw-modal",function(event) {
|
||||||
$tw.modal.display(event.param);
|
$tw.modal.display(event.param);
|
||||||
},false);
|
});
|
||||||
// Install the notification mechanism
|
// Install the notification mechanism
|
||||||
$tw.notifier = new $tw.utils.Notifier($tw.wiki);
|
$tw.notifier = new $tw.utils.Notifier($tw.wiki);
|
||||||
document.addEventListener("tw-notify",function(event) {
|
$tw.rootWidget.addEventListener("tw-notify",function(event) {
|
||||||
$tw.notifier.display(event.param);
|
$tw.notifier.display(event.param);
|
||||||
},false);
|
});
|
||||||
// Install the scroller
|
// Install the scroller
|
||||||
$tw.pageScroller = new $tw.utils.PageScroller();
|
$tw.pageScroller = new $tw.utils.PageScroller();
|
||||||
document.addEventListener("tw-scroll",$tw.pageScroller,false);
|
$tw.rootWidget.addEventListener("tw-scroll",$tw.pageScroller);
|
||||||
// Install the save action handler
|
// Install the save action handler
|
||||||
$tw.wiki.initSavers();
|
$tw.wiki.initSavers();
|
||||||
document.addEventListener("tw-save-wiki",function(event) {
|
$tw.rootWidget.addEventListener("tw-save-wiki",function(event) {
|
||||||
$tw.wiki.saveWiki({
|
$tw.wiki.saveWiki({
|
||||||
template: event.param,
|
template: event.param,
|
||||||
downloadType: "text/plain"
|
downloadType: "text/plain"
|
||||||
});
|
});
|
||||||
},false);
|
});
|
||||||
// Install the crypto event handlers
|
// Install the crypto event handlers
|
||||||
document.addEventListener("tw-set-password",function(event) {
|
$tw.rootWidget.addEventListener("tw-set-password",function(event) {
|
||||||
$tw.passwordPrompt.createPrompt({
|
$tw.passwordPrompt.createPrompt({
|
||||||
serviceName: "Set a new password for this TiddlyWiki",
|
serviceName: "Set a new password for this TiddlyWiki",
|
||||||
noUserName: true,
|
noUserName: true,
|
||||||
@ -96,19 +105,16 @@ exports.startup = function() {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
document.addEventListener("tw-clear-password",function(event) {
|
$tw.rootWidget.addEventListener("tw-clear-password",function(event) {
|
||||||
$tw.crypto.setPassword(null);
|
$tw.crypto.setPassword(null);
|
||||||
});
|
});
|
||||||
// Install the animator
|
|
||||||
$tw.anim = new $tw.utils.Animator();
|
|
||||||
// Kick off the stylesheet manager
|
|
||||||
$tw.stylesheetManager = new $tw.utils.StylesheetManager($tw.wiki);
|
|
||||||
// Display the PageTemplate
|
// Display the PageTemplate
|
||||||
var templateTitle = "$:/core/ui/PageTemplate",
|
var templateTitle = "$:/core/ui/PageTemplate",
|
||||||
parser = $tw.wiki.new_parseTiddler(templateTitle),
|
parser = $tw.wiki.new_parseTiddler(templateTitle),
|
||||||
parseTreeNode = parser ? {type: "widget", children: parser.tree} : undefined,
|
parseTreeNode = parser ? {type: "widget", children: parser.tree} : undefined,
|
||||||
widgetNode = new widget.widget(parseTreeNode,{
|
widgetNode = new widget.widget(parseTreeNode,{
|
||||||
wiki: $tw.wiki,
|
wiki: $tw.wiki,
|
||||||
|
parentWidget: $tw.rootWidget,
|
||||||
document: document
|
document: document
|
||||||
});
|
});
|
||||||
$tw.new_pageContainer = document.createElement("div");
|
$tw.new_pageContainer = document.createElement("div");
|
||||||
@ -118,18 +124,6 @@ exports.startup = function() {
|
|||||||
$tw.wiki.addEventListener("change",function(changes) {
|
$tw.wiki.addEventListener("change",function(changes) {
|
||||||
widgetNode.refresh(changes,$tw.new_pageContainer,null);
|
widgetNode.refresh(changes,$tw.new_pageContainer,null);
|
||||||
});
|
});
|
||||||
// // Display the old PageTemplate
|
|
||||||
// var old_templateTitle = "$:/core/ui/PageTemplate",
|
|
||||||
// old_parser = $tw.wiki.parseTiddler(old_templateTitle),
|
|
||||||
// renderTree = new $tw.WikiRenderTree(old_parser,{wiki: $tw.wiki, context: {tiddlerTitle: old_templateTitle}, document: document});
|
|
||||||
// renderTree.execute();
|
|
||||||
// $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);
|
|
||||||
// });
|
|
||||||
// If we're being viewed on a data: URI then give instructions for how to save
|
// If we're being viewed on a data: URI then give instructions for how to save
|
||||||
if(document.location.protocol === "data:") {
|
if(document.location.protocol === "data:") {
|
||||||
$tw.utils.dispatchCustomEvent(document,"tw-modal",{
|
$tw.utils.dispatchCustomEvent(document,"tw-modal",{
|
||||||
|
@ -12,6 +12,8 @@ Modal message mechanism
|
|||||||
/*global $tw: false */
|
/*global $tw: false */
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
var widget = require("$:/core/modules/new_widgets/widget.js");
|
||||||
|
|
||||||
var Modal = function(wiki) {
|
var Modal = function(wiki) {
|
||||||
this.wiki = wiki;
|
this.wiki = wiki;
|
||||||
this.modalCount = 0;
|
this.modalCount = 0;
|
||||||
@ -71,20 +73,28 @@ Modal.prototype.display = function(title,options) {
|
|||||||
} else {
|
} else {
|
||||||
titleText = title;
|
titleText = title;
|
||||||
}
|
}
|
||||||
var headerParser = this.wiki.parseText("text/vnd.tiddlywiki",titleText,{parseAsInline: true}),
|
var headerParser = this.wiki.new_parseText("text/vnd.tiddlywiki",titleText,{parseAsInline: true}),
|
||||||
headerRenderTree = new $tw.WikiRenderTree(headerParser,{wiki: $tw.wiki, context: {tiddlerTitle: title}, document: document});
|
headerParseTreeNode = headerParser ? {type: "widget", children: headerParser.tree} : undefined,
|
||||||
headerRenderTree.execute();
|
headerWidgetNode = new widget.widget(headerParseTreeNode,{
|
||||||
headerRenderTree.renderInDom(headerTitle);
|
wiki: this.wiki,
|
||||||
|
parentWidget: $tw.rootWidget,
|
||||||
|
document: document
|
||||||
|
});
|
||||||
|
headerWidgetNode.render(modalHeader,null);
|
||||||
this.wiki.addEventListener("change",function(changes) {
|
this.wiki.addEventListener("change",function(changes) {
|
||||||
headerRenderTree.refreshInDom(changes);
|
headerWidgetNode.refresh(changes,modalHeader,null);
|
||||||
});
|
});
|
||||||
// Render the body of the message
|
// Render the body of the message
|
||||||
var bodyParser = this.wiki.parseTiddler(title),
|
var bodyParser = this.wiki.new_parseTiddler(title),
|
||||||
bodyRenderTree = new $tw.WikiRenderTree(bodyParser,{wiki: $tw.wiki, context: {tiddlerTitle: title}, document: document});
|
bodyParseTreeNode = bodyParser ? {type: "widget", children: bodyParser.tree} : undefined,
|
||||||
bodyRenderTree.execute();
|
bodyWidgetNode = new widget.widget(bodyParseTreeNode,{
|
||||||
bodyRenderTree.renderInDom(modalBody);
|
wiki: this.wiki,
|
||||||
|
parentWidget: $tw.rootWidget,
|
||||||
|
document: document
|
||||||
|
});
|
||||||
|
bodyWidgetNode.render(modalBody,null);
|
||||||
this.wiki.addEventListener("change",function(changes) {
|
this.wiki.addEventListener("change",function(changes) {
|
||||||
bodyRenderTree.refreshInDom(changes);
|
bodyWidgetNode.refresh(changes,modalBody,null);
|
||||||
});
|
});
|
||||||
// Setup the link if present
|
// Setup the link if present
|
||||||
if(options.downloadLink) {
|
if(options.downloadLink) {
|
||||||
@ -107,15 +117,19 @@ Modal.prototype.display = function(title,options) {
|
|||||||
} else {
|
} else {
|
||||||
footerText = '<$button message="tw-close-tiddler" class="btn btn-primary">Close</$button>';
|
footerText = '<$button message="tw-close-tiddler" class="btn btn-primary">Close</$button>';
|
||||||
}
|
}
|
||||||
var footerParser = this.wiki.parseText("text/vnd.tiddlywiki",footerText,{parseAsInline: true}),
|
var footerParser = this.wiki.new_parseText("text/vnd.tiddlywiki",footerText,{parseAsInline: true}),
|
||||||
footerRenderTree = new $tw.WikiRenderTree(footerParser,{wiki: $tw.wiki, context: {tiddlerTitle: title}, document: document});
|
footerParseTreeNode = footerParser ? {type: "widget", children: footerParser.tree} : undefined,
|
||||||
footerRenderTree.execute();
|
footerWidgetNode = new widget.widget(footerParseTreeNode,{
|
||||||
footerRenderTree.renderInDom(modalFooterButtons);
|
wiki: this.wiki,
|
||||||
|
parentWidget: $tw.rootWidget,
|
||||||
|
document: document
|
||||||
|
});
|
||||||
|
footerWidgetNode.render(modalFooterButtons,null);
|
||||||
this.wiki.addEventListener("change",function(changes) {
|
this.wiki.addEventListener("change",function(changes) {
|
||||||
footerRenderTree.refreshInDom(changes);
|
footerWidgetNode.refresh(changes,modalFooterButtons,null);
|
||||||
});
|
});
|
||||||
// Add the close event handler
|
// Add the close event handler
|
||||||
wrapper.addEventListener("tw-close-tiddler",function(event) {
|
var closeHandler = function(event) {
|
||||||
// Decrease the modal count and adjust the body class
|
// Decrease the modal count and adjust the body class
|
||||||
self.modalCount--;
|
self.modalCount--;
|
||||||
self.adjustPageClass();
|
self.adjustPageClass();
|
||||||
@ -136,9 +150,11 @@ Modal.prototype.display = function(title,options) {
|
|||||||
}
|
}
|
||||||
},duration);
|
},duration);
|
||||||
// Don't let anyone else handle the tw-close-tiddler message
|
// Don't let anyone else handle the tw-close-tiddler message
|
||||||
event.stopPropagation();
|
|
||||||
return false;
|
return false;
|
||||||
},false);
|
};
|
||||||
|
headerWidgetNode.addEventListener("tw-close-tiddler",closeHandler,false);
|
||||||
|
bodyWidgetNode.addEventListener("tw-close-tiddler",closeHandler,false);
|
||||||
|
footerWidgetNode.addEventListener("tw-close-tiddler",closeHandler,false);
|
||||||
// Set the initial styles for the message
|
// Set the initial styles for the message
|
||||||
$tw.utils.setStyle(modalBackdrop,[
|
$tw.utils.setStyle(modalBackdrop,[
|
||||||
{opacity: "0"}
|
{opacity: "0"}
|
||||||
|
@ -12,6 +12,8 @@ Notifier mechanism
|
|||||||
/*global $tw: false */
|
/*global $tw: false */
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
var widget = require("$:/core/modules/new_widgets/widget.js");
|
||||||
|
|
||||||
var Notifier = function(wiki) {
|
var Notifier = function(wiki) {
|
||||||
this.wiki = wiki;
|
this.wiki = wiki;
|
||||||
};
|
};
|
||||||
@ -35,12 +37,16 @@ Notifier.prototype.display = function(title,options) {
|
|||||||
// Add classes
|
// Add classes
|
||||||
$tw.utils.addClass(notification,"tw-notification");
|
$tw.utils.addClass(notification,"tw-notification");
|
||||||
// Render the body of the notification
|
// Render the body of the notification
|
||||||
var bodyParser = this.wiki.parseTiddler(title),
|
var parser = this.wiki.new_parseTiddler(title),
|
||||||
bodyRenderTree = new $tw.WikiRenderTree(bodyParser,{wiki: $tw.wiki, context: {tiddlerTitle: title}, document: document});
|
parseTreeNode = parser ? {type: "widget", children: parser.tree} : undefined,
|
||||||
bodyRenderTree.execute();
|
widgetNode = new widget.widget(parseTreeNode,{
|
||||||
bodyRenderTree.renderInDom(notification);
|
wiki: this.wiki,
|
||||||
|
parentWidget: $tw.rootWidget,
|
||||||
|
document: document
|
||||||
|
});
|
||||||
|
widgetNode.render(notification,null);
|
||||||
this.wiki.addEventListener("change",function(changes) {
|
this.wiki.addEventListener("change",function(changes) {
|
||||||
bodyRenderTree.refreshInDom(changes);
|
widgetNode.refresh(changes,notification,null);
|
||||||
});
|
});
|
||||||
// Set the initial styles for the notification
|
// Set the initial styles for the notification
|
||||||
$tw.utils.setStyle(notification,[
|
$tw.utils.setStyle(notification,[
|
||||||
|
Loading…
Reference in New Issue
Block a user