Improve affordances for new browser windows (#6498)

* feat: extend tm-open-window to allow opening the same tiddler in multiple templates, and introduce tm-close-window to close browser windows

* fix: use a windowID parameter to uniquely identify a window and introduce tm-close-all-tiddlers

* fix: whitespace

* fix: update variable

core/modules/startup/windows.js

@@ -20,6 +20,8 @@ exports.synchronous = true;
 
 // Global to keep track of open windows (hashmap by title)
 $tw.windows = {};
+// Default template to use for new windows
+var DEFAULT_WINDOW_TEMPLATE = "$:/core/templates/single.tiddler.window";
 
 exports.startup = function() {
 	// Handle open window message
@@ -29,24 +31,25 @@ exports.startup = function() {
 			title = event.param || event.tiddlerTitle,
 			paramObject = event.paramObject || {},
 			windowTitle = paramObject.windowTitle || title,
-			template = paramObject.template || "$:/core/templates/single.tiddler.window",
+			windowID = paramObject.windowID || title,
+			template = paramObject.template || DEFAULT_WINDOW_TEMPLATE,
 			width = paramObject.width || "700",
 			height = paramObject.height || "600",
 			top = paramObject.top,
 			left = paramObject.left,
-			variables = $tw.utils.extend({},paramObject,{currentTiddler: title});
+			variables = $tw.utils.extend({},paramObject,{currentTiddler: title, "tv-window-id": windowID});
 		// Open the window
 		var srcWindow,
 		    srcDocument;
 		// In case that popup blockers deny opening a new window
 		try {
-			srcWindow = window.open("","external-" + title,"scrollbars,width=" + width + ",height=" + height + (top ? ",top=" + top : "" ) + (left ? ",left=" + left : "" )),
+			srcWindow = window.open("","external-" + windowID,"scrollbars,width=" + width + ",height=" + height + (top ? ",top=" + top : "" ) + (left ? ",left=" + left : "" )),
 			srcDocument = srcWindow.document;
 		}
 		catch(e) {
 			return;
 		}
-		$tw.windows[title] = srcWindow;
+		$tw.windows[windowID] = srcWindow;
 		// Check for reopening the same window
 		if(srcWindow.haveInitialisedWindow) {
 			return;
@@ -56,7 +59,7 @@ exports.startup = function() {
 		srcDocument.close();
 		srcDocument.title = windowTitle;
 		srcWindow.addEventListener("beforeunload",function(event) {
-			delete $tw.windows[title];
+			delete $tw.windows[windowID];
 			$tw.wiki.removeEventListener("change",refreshHandler);
 		},false);
 		// Set up the styles
@@ -90,13 +93,21 @@ exports.startup = function() {
 		srcWindow.document.documentElement.addEventListener("click",$tw.popup,true);
 		srcWindow.haveInitialisedWindow = true;
 	});
-	// Close open windows when unloading main window
-	$tw.addUnloadTask(function() {
+	$tw.rootWidget.addEventListener("tm-close-window",function(event) {
+		var windowID = event.param,
+			win = $tw.windows[windowID];
+			if(win) {
+				win.close();
+			}
+	});
+	var closeAllWindows = function() {
 		$tw.utils.each($tw.windows,function(win) {
 			win.close();
 		});
-	});
-
+	}
+	$tw.rootWidget.addEventListener("tm-close-all-windows",closeAllWindows);
+	// Close open windows when unloading main window
+	$tw.addUnloadTask(closeAllWindows);
 };
 
 })();

editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-close-all-windows.tid

@@ -0,0 +1,20 @@
+created: 20220301162305764
+modified: 20220301180818011
+tags: Messages
+title: WidgetMessage: tm-close-all-windows
+type: text/vnd.tiddlywiki
+
+<<.from-version 5.2.2>>
+The `tm-close-all-windows` [[message|Messages]] closes all additional //browser// window that were opened with [[tm-open-window|WidgetMessage: tm-open-window]]. 
+
+The `tm-close-window` message is best generated with the ActionSendMessageWidget, which in turn is triggered by a widget such as the ButtonWidget. It is handled by the core itself.
+
+<$macrocall $name='wikitext-example-without-html'
+src="""
+<$button>Close All Windows
+<$action-sendmessage 
+  $message="tm-close-all-windows" 
+/>
+</$button>
+""" />
+

editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-close-window.tid

@@ -0,0 +1,39 @@
+caption: tm-open-window
+created: 20220228140417116
+modified: 20220301180905777
+tags: Messages
+title: WidgetMessage: tm-close-window
+type: text/vnd.tiddlywiki
+
+<<.from-version 5.2.2>>
+The `tm-close-window` [[message|Messages]] closes an additional //browser// window that was opened with [[tm-open-window|WidgetMessage: tm-open-window]]. Specify which window to close by setting the value of <<.param param>> to the string used as <<.param windowID>> when opening the window.
+
+|!Name |!Description |
+|param //{default param}//  |String used as <<.param windowID>> when opening the window |
+
+The `tm-close-window` message is best generated with the ActionSendMessageWidget, which in turn is triggered by a widget such as the ButtonWidget. It is handled by the core itself.
+
+<<.tip """When used with the ActionSendMessageWidget, <<.param 'param'>> becomes <<.param '$param'>> """>>
+<<.tip """To close all additional browser windows that were opened with [[tm-open-window|WidgetMessage: tm-open-window]] use [[WidgetMessage: tm-close-all-windows]]""">>
+
+<$macrocall $name='wikitext-example-without-html'
+src="""
+<$button>Open Window
+<$action-sendmessage 
+  $message="tm-open-window" 
+  $param="$:/temp/openme" 
+  template="SampleWindowTemplate" 
+  windowTitle="My Window Title"
+  width="400"
+  height="500"
+  windowID="window1"
+  something="I just in over in a variable, and boy is my Hashmap tired." />
+</$button>
+<$button>Close Window
+<$action-sendmessage 
+  $message="tm-close-window" 
+  $param="window1" 
+/>
+</$button>
+""" />
+

editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-open-window.tid

@@ -1,6 +1,6 @@
 caption: tm-open-window
 created: 20160424181447704
-modified: 20220219125413255
+modified: 20220301162140993
 tags: Messages
 title: WidgetMessage: tm-open-window
 type: text/vnd.tiddlywiki
@@ -8,20 +8,22 @@ type: text/vnd.tiddlywiki
 The `tm-open-window` [[message|Messages]] opens a tiddler in a new //browser// window. If no parameters are specified, the current tiddler is opened in a new window. Similiar to `tm-modal` any additional parameters passed via the <<.param "paramObject">> are provided as variables to the new window.
 
 |!Name |!Description |
-|param |Title of the tiddler to be opened in a new browser window, defaults to <<.var "currentTiddler">> if empty |
-|template |Template in which the tiddler will be rendered in |
+|param //{default param}//  |Title of the tiddler to be opened in a new browser window, defaults to <<.var "currentTiddler">> if empty |
+|template |Template in which the tiddler will be rendered |
 |windowTitle |Title string for the opened window |
 |width |Width of the new browser window |
 |height |Height of the new browser window |
 |left|<<.from-version "5.2.2">> Optional, left position of new browser window|
 |top|<<.from-version "5.2.2">> Optional, top position of new browser window|
-|paramObject |Hashmap of variables to be provided to the modal, contains all extra parameters passed to the widget sending the message. |
+|windowID|<<.from-version "5.2.2">> Optional, unique string used to identify the widow. Can be used with [[WidgetMessage: tm-close-window]] to close the window. Defaults to the value of <<.param param>> |
+|//{any other params}// |Any other parameters are made available as variables within the new window |
 
 The `tm-open-window` message is best generated with the ActionSendMessageWidget, which in turn is triggered by a widget such as the ButtonWidget. It is handled by the core itself.
 
 <<.tip """When used with the ActionSendMessageWidget, <<.param 'param'>> becomes <<.param '$param'>> """>>
 <<.tip """Parameters <<.param template>>, <<.param windowTitle>>, <<.param width>>, <<.param height>>, <<.param left>> and <<.param top>> require the ActionSendMessageWidget.""">>
-
+<<.tip """<<.from-version 5.2.2>> To close a window opened with tm-open-window use [[WidgetMessage: tm-close-window]]""">>
+<<.tip """<<.from-version 5.2.2>> To open a tiddler in more than one new window, use a unique value for <<.param windowID>>""">>
 
 <$macrocall $name='wikitext-example-without-html'
 src="""