mirror of
				https://github.com/Jermolene/TiddlyWiki5
				synced 2025-10-26 05:07:39 +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:
		| @@ -63,29 +63,38 @@ exports.startup = function() { | ||||
| 		$tw.popup = new $tw.utils.Popup({ | ||||
| 			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 | ||||
| 		$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); | ||||
| 		},false); | ||||
| 		}); | ||||
| 		// Install the notification  mechanism | ||||
| 		$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); | ||||
| 		},false); | ||||
| 		}); | ||||
| 		// Install the scroller | ||||
| 		$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 | ||||
| 		$tw.wiki.initSavers(); | ||||
| 		document.addEventListener("tw-save-wiki",function(event) { | ||||
| 		$tw.rootWidget.addEventListener("tw-save-wiki",function(event) { | ||||
| 			$tw.wiki.saveWiki({ | ||||
| 				template: event.param, | ||||
| 				downloadType: "text/plain" | ||||
| 			}); | ||||
| 		},false); | ||||
| 		}); | ||||
| 		// Install the crypto event handlers | ||||
| 		document.addEventListener("tw-set-password",function(event) { | ||||
| 		$tw.rootWidget.addEventListener("tw-set-password",function(event) { | ||||
| 			$tw.passwordPrompt.createPrompt({ | ||||
| 				serviceName: "Set a new password for this TiddlyWiki", | ||||
| 				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); | ||||
| 		}); | ||||
| 		// 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 | ||||
| 		var templateTitle = "$:/core/ui/PageTemplate", | ||||
| 			parser = $tw.wiki.new_parseTiddler(templateTitle), | ||||
| 			parseTreeNode = parser ? {type: "widget", children: parser.tree} : undefined, | ||||
| 			widgetNode = new widget.widget(parseTreeNode,{ | ||||
| 				wiki: $tw.wiki, | ||||
| 				parentWidget: $tw.rootWidget, | ||||
| 				document: document | ||||
| 			}); | ||||
| 		$tw.new_pageContainer = document.createElement("div"); | ||||
| @@ -118,18 +124,6 @@ exports.startup = function() { | ||||
| 		$tw.wiki.addEventListener("change",function(changes) { | ||||
| 			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(document.location.protocol === "data:") { | ||||
| 			$tw.utils.dispatchCustomEvent(document,"tw-modal",{ | ||||
|   | ||||
| @@ -12,6 +12,8 @@ Modal message mechanism | ||||
| /*global $tw: false */ | ||||
| "use strict"; | ||||
|  | ||||
| var widget = require("$:/core/modules/new_widgets/widget.js"); | ||||
|  | ||||
| var Modal = function(wiki) { | ||||
| 	this.wiki = wiki; | ||||
| 	this.modalCount = 0; | ||||
| @@ -71,20 +73,28 @@ Modal.prototype.display = function(title,options) { | ||||
| 	} else { | ||||
| 		titleText = title; | ||||
| 	} | ||||
| 	var headerParser = this.wiki.parseText("text/vnd.tiddlywiki",titleText,{parseAsInline: true}), | ||||
| 		headerRenderTree = new $tw.WikiRenderTree(headerParser,{wiki: $tw.wiki, context: {tiddlerTitle: title}, document: document}); | ||||
| 	headerRenderTree.execute(); | ||||
| 	headerRenderTree.renderInDom(headerTitle); | ||||
| 	var headerParser = this.wiki.new_parseText("text/vnd.tiddlywiki",titleText,{parseAsInline: true}), | ||||
| 		headerParseTreeNode = headerParser ? {type: "widget", children: headerParser.tree} : undefined, | ||||
| 		headerWidgetNode = new widget.widget(headerParseTreeNode,{ | ||||
| 			wiki: this.wiki, | ||||
| 			parentWidget: $tw.rootWidget, | ||||
| 			document: document | ||||
| 		}); | ||||
| 	headerWidgetNode.render(modalHeader,null); | ||||
| 	this.wiki.addEventListener("change",function(changes) { | ||||
| 		headerRenderTree.refreshInDom(changes); | ||||
| 		headerWidgetNode.refresh(changes,modalHeader,null); | ||||
| 	}); | ||||
| 	// Render the body of the message | ||||
| 	var bodyParser = this.wiki.parseTiddler(title), | ||||
| 		bodyRenderTree = new $tw.WikiRenderTree(bodyParser,{wiki: $tw.wiki, context: {tiddlerTitle: title}, document: document}); | ||||
| 	bodyRenderTree.execute(); | ||||
| 	bodyRenderTree.renderInDom(modalBody); | ||||
| 	var bodyParser = this.wiki.new_parseTiddler(title), | ||||
| 		bodyParseTreeNode = bodyParser ? {type: "widget", children: bodyParser.tree} : undefined, | ||||
| 		bodyWidgetNode = new widget.widget(bodyParseTreeNode,{ | ||||
| 			wiki: this.wiki, | ||||
| 			parentWidget: $tw.rootWidget, | ||||
| 			document: document | ||||
| 		}); | ||||
| 	bodyWidgetNode.render(modalBody,null); | ||||
| 	this.wiki.addEventListener("change",function(changes) { | ||||
| 		bodyRenderTree.refreshInDom(changes); | ||||
| 		bodyWidgetNode.refresh(changes,modalBody,null); | ||||
| 	}); | ||||
| 	// Setup the link if present | ||||
| 	if(options.downloadLink) { | ||||
| @@ -107,15 +117,19 @@ Modal.prototype.display = function(title,options) { | ||||
| 	} else { | ||||
| 		footerText = '<$button message="tw-close-tiddler" class="btn btn-primary">Close</$button>'; | ||||
| 	} | ||||
| 	var footerParser = this.wiki.parseText("text/vnd.tiddlywiki",footerText,{parseAsInline: true}), | ||||
| 		footerRenderTree = new $tw.WikiRenderTree(footerParser,{wiki: $tw.wiki, context: {tiddlerTitle: title}, document: document}); | ||||
| 	footerRenderTree.execute(); | ||||
| 	footerRenderTree.renderInDom(modalFooterButtons); | ||||
| 	var footerParser = this.wiki.new_parseText("text/vnd.tiddlywiki",footerText,{parseAsInline: true}), | ||||
| 		footerParseTreeNode = footerParser ? {type: "widget", children: footerParser.tree} : undefined, | ||||
| 		footerWidgetNode = new widget.widget(footerParseTreeNode,{ | ||||
| 			wiki: this.wiki, | ||||
| 			parentWidget: $tw.rootWidget, | ||||
| 			document: document | ||||
| 		}); | ||||
| 	footerWidgetNode.render(modalFooterButtons,null); | ||||
| 	this.wiki.addEventListener("change",function(changes) { | ||||
| 		footerRenderTree.refreshInDom(changes); | ||||
| 		footerWidgetNode.refresh(changes,modalFooterButtons,null); | ||||
| 	}); | ||||
| 	// 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 | ||||
| 		self.modalCount--; | ||||
| 		self.adjustPageClass(); | ||||
| @@ -136,9 +150,11 @@ Modal.prototype.display = function(title,options) { | ||||
| 			} | ||||
| 		},duration); | ||||
| 		// Don't let anyone else handle the tw-close-tiddler message | ||||
| 		event.stopPropagation(); | ||||
| 		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 | ||||
| 	$tw.utils.setStyle(modalBackdrop,[ | ||||
| 		{opacity: "0"} | ||||
|   | ||||
| @@ -12,6 +12,8 @@ Notifier mechanism | ||||
| /*global $tw: false */ | ||||
| "use strict"; | ||||
|  | ||||
| var widget = require("$:/core/modules/new_widgets/widget.js"); | ||||
|  | ||||
| var Notifier = function(wiki) { | ||||
| 	this.wiki = wiki; | ||||
| }; | ||||
| @@ -35,12 +37,16 @@ Notifier.prototype.display = function(title,options) { | ||||
| 	// Add classes | ||||
| 	$tw.utils.addClass(notification,"tw-notification"); | ||||
| 	// Render the body of the notification | ||||
| 	var bodyParser = this.wiki.parseTiddler(title), | ||||
| 		bodyRenderTree = new $tw.WikiRenderTree(bodyParser,{wiki: $tw.wiki, context: {tiddlerTitle: title}, document: document}); | ||||
| 	bodyRenderTree.execute(); | ||||
| 	bodyRenderTree.renderInDom(notification); | ||||
| 	var parser = this.wiki.new_parseTiddler(title), | ||||
| 		parseTreeNode = parser ? {type: "widget", children: parser.tree} : undefined, | ||||
| 		widgetNode = new widget.widget(parseTreeNode,{ | ||||
| 			wiki: this.wiki, | ||||
| 			parentWidget: $tw.rootWidget, | ||||
| 			document: document | ||||
| 		}); | ||||
| 	widgetNode.render(notification,null); | ||||
| 	this.wiki.addEventListener("change",function(changes) { | ||||
| 		bodyRenderTree.refreshInDom(changes); | ||||
| 		widgetNode.refresh(changes,notification,null); | ||||
| 	}); | ||||
| 	// Set the initial styles for the notification | ||||
| 	$tw.utils.setStyle(notification,[ | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Jeremy Ruston
					Jeremy Ruston