Port over help viewer from jspaint

classic.css

@@ -107,6 +107,43 @@
 	z-index: 1;
 }
 
+.help-window .item {
+	font-family: 'Segoe UI', sans-serif;
+	font-size: 12px;
+	padding: 0 2px;
+	position: relative; /* for ::after */
+}
+.help-window .item:hover {
+	text-decoration: underline;
+	color: #0000FF;
+	cursor: pointer;
+}
+.help-window li:before {
+	background-image: url("../../images/help-icons.png");
+}
+.help-window:not(.focused) .item.selected {
+	background-color: var(--ButtonFace);
+	color: var(--ButtonText); /* ?? */
+}
+.help-window.focused .item.selected {
+	background-color: var(--Hilight);
+	color: var(--HilightText);
+	/* @TODO: separate focus state of the item */
+	outline: 1px dotted black;
+	outline-offset: -1px;
+}
+/* @TODO: separate focus state of the item; while mouse down, the main highlight does not move with the arrow keys but this does, among other differences */
+/* .help-window.focused .item.selected::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	border: 1px dotted white;
+	mix-blend-mode: difference;
+} */
+
 * {
 	image-rendering: crisp-edges;
 	image-rendering: pixelated;

help/vaporwave.js

@@ -3,8 +3,8 @@ const clouds_img = document.createElement("img");
 clouds_img.src = "clouds.jpg";
 const mask_img = document.createElement("img");
 mask_img.src = "cloud-mask.png";
-const something_img = document.createElement("img");
-something_img.src = "../images/icons/32x32.png";
+// const something_img = document.createElement("img");
+// something_img.src = "../images/icons/32x32.png";
 
 const canvas = document.createElement("canvas");
 document.getElementById("background-animation").append(canvas);
@@ -41,16 +41,16 @@ const animate = () => {
 		clouds_width,
 		clouds_height
 	);
-	if(something_img.complete && something_img.naturalWidth > 1){
-		let t = now / 5000;
-		ctx.globalAlpha = 0.3 + Math.max(0, Math.sin(-t) * 1);
-		ctx.drawImage(
-			something_img,
-			~~(Math.sin(-t) * canvas.width * 0.7),
-			~~(Math.cos(-t) * 70)
-		);
-		ctx.globalAlpha = 1;
-	}
+	// if(something_img.complete && something_img.naturalWidth > 1){
+	// 	let t = now / 5000;
+	// 	ctx.globalAlpha = 0.3 + Math.max(0, Math.sin(-t) * 1);
+	// 	ctx.drawImage(
+	// 		something_img,
+	// 		~~(Math.sin(-t) * canvas.width * 0.7),
+	// 		~~(Math.cos(-t) * 70)
+	// 	);
+	// 	ctx.globalAlpha = 1;
+	// }
 	ctx.globalCompositeOperation = "screen";
 	ctx.drawImage(mask_img, 0, 0);
 	ctx.globalCompositeOperation = "source-over";

layout.css

@@ -187,6 +187,56 @@ html, body {
 	padding: 3px 5px;
 }
 
+.help-window .window-content {
+	display: flex;
+	flex-flow: row;
+}
+.help-window .contents {
+	background: white;
+	background: var(--Window);
+	color: var(--WindowText);
+	flex-basis: 300px; /* normally the default is 200px, but that leaves a scrollbar and we don't have rollover viewing of longer titles (@TODO) */
+	flex-grow: 0;
+	flex-shrink: 0;
+	overflow: auto;
+}
+.help-window ul {
+	margin: 0;
+	padding: 0;
+}
+.help-window li {
+	display: block;
+	white-space: nowrap;
+}
+.help-window .item {
+	display: inline-block;
+}
+.help-window .folder:not(.expanded) ul {
+	display: none;
+}
+.help-window iframe {
+	flex: 1;
+	width: 0;
+}
+.help-window li ul {
+	padding-left: 16px;
+}
+.help-window li:before {
+	content: "";
+	display: inline-block;
+	vertical-align: middle;
+	width: 16px;
+	height: 16px;
+	background-position: 0 0;
+	margin-right: 2px;
+}
+.help-window .folder.expanded:before {
+	background-position: -16px 0;
+}
+.help-window .page:before {
+	background-position: -32px 0;
+}
+
 ::before, ::after {
 	pointer-events: none;
 }

programs/minesweeper/menus.js

@@ -120,7 +120,17 @@ var menus = {
 		{
 			item: "&Help Topics",
 			action: function(){
-				alert("Click anywhere on the field to start the timer.\nNumbers show the number of mines in the surrounding 8 tiles.\nTry to find all the mines without uncovering them.");
+				var show_help = window.show_help;
+				try {
+					show_help = parent.show_help;
+				} catch(e) {}
+				if (show_help === undefined) {
+					return alert("Help Topics only works when inside of the 98.js.org desktop.");
+				}
+				show_help({
+					contentsFile: "help/minesweeper-help/winmine.hhc",
+					root: "help/minesweeper-help",
+				});
 			},
 		},
 		MENU_DIVIDER,

programs/notepad/src/menus.js

@@ -225,11 +225,20 @@ var menus = {
 		// },
 	],
 	"&Help": [
-		// TODO: help options
 		{
 			item: "&Help Topics",
 			action: function(){
-				alert("Help isn't implemented, sorry!");
+				var show_help = window.show_help;
+				try {
+					show_help = parent.show_help;
+				} catch(e) {}
+				if (show_help === undefined) {
+					return alert("Help Topics only works when inside of the 98.js.org desktop.");
+				}
+				show_help({
+					contentsFile: "help/notepad-help/notepad.hhc",
+					root: "help/notepad-help",
+				});
 			},
 			description: "Lists Help topics.",
 			// WordPad: "Lists Help topics"
@@ -240,6 +249,7 @@ var menus = {
 		{
 			item: "&About Notepad",
 			action: function(){
+				// TODO: dialog
 				window.open("https://github.com/1j01/98/tree/master/programs/notepad");
 			},
 			description: "Displays information about this application."

programs/sound-recorder/src/menus.js

@@ -169,7 +169,17 @@ var menus = {
 		{
 			item: "&Help Topics",
 			action: function(){
-				alert("Help isn't implemented, sorry!");
+				var show_help = window.show_help;
+				try {
+					show_help = parent.show_help;
+				} catch(e) {}
+				if (show_help === undefined) {
+					return alert("Help Topics only works when inside of the 98.js.org desktop.");
+				}
+				show_help({
+					contentsFile: "help/sound-recorder-help/soundrec.hhc",
+					root: "help/sound-recorder-help",
+				});
 			},
 			description: "Displays Help for the current task or command.",
 		},

src/programs.js

@@ -1,3 +1,94 @@
+// TODO: window per program's documentation
+let $help_window;
+
+function show_help(options){
+	if($help_window){
+		$help_window.close();
+	}
+	$help_window = $Window({
+		title: "Help Topics", // "<Program Name> Help" // "Windows Help"
+		icon: "help",
+	})
+	$help_window.addClass("help-window");
+	// $toolbar = $(E("div")).addClass("toolbar");
+	// $help_window.$content.append($toolbar);
+
+	$iframe = $(E("iframe"));
+	$contents = $(E("ul")).addClass("contents");
+	$help_window.$content.append($contents, $iframe);
+	$help_window.css({width: 800, height: 600});
+	$iframe.attr({name: "help-frame", src: "help/default.html"});
+	$iframe.css({backgroundColor: "white"});
+	$help_window.center();
+
+	const parse_object_params = $object => {
+		// parse an $(<object>) to a plain object of key value pairs
+		const object = {};
+		for (const param of $object.children("param").get()) {
+			object[param.name] = param.value;
+		}
+		return object;
+	};
+
+	let $last_expanded;
+
+	const $Item = text => {
+		const $item = $(E("div")).addClass("item").text(text);
+		$item.on("mousedown", () => {
+			$contents.find(".item").removeClass("selected");
+			$item.addClass("selected");
+		});
+		$item.on("click", () => {
+			const $li = $item.parent();
+			if($li.is(".folder")){
+				if($last_expanded){
+					$last_expanded.not($li).removeClass("expanded");
+				}
+				$li.toggleClass("expanded");
+				$last_expanded = $li;
+			}
+		});
+		return $item;
+	};
+
+	const $default_item_li = $(E("li")).addClass("page");
+	$default_item_li.append($Item("Welcome to Help").on("click", ()=> {
+		$iframe.attr({src: "help/default.html"});
+	}));
+	$contents.append($default_item_li);
+
+	$.get(options.contentsFile, hhc => {
+		$($.parseHTML(hhc)).filter("ul").children().get().forEach((li) => {
+
+			const object = parse_object_params($(li).children("object"));
+
+			const $folder_li = $(E("li")).addClass("folder");
+			$folder_li.append($Item(object.Name));
+			$contents.append($folder_li);
+
+			const $folder_items_ul = $(E("ul"));
+			$folder_li.append($folder_items_ul);
+
+			$(li).children("ul").children().get().forEach((li) => {
+				const object = parse_object_params($(li).children("object"));
+				const $item_li = $(E("li")).addClass("page");
+				$item_li.append($Item(object.Name).on("click", ()=> {
+					$iframe.attr({src: `${options.root}/${object.Local}`});
+				}));
+				$folder_items_ul.append($item_li);
+			});
+		});
+	});
+
+	// @TODO: keyboard accessability
+	// $help_window.on("keydown", (e)=> {
+	// 	switch(e.keyCode){
+	// 		case 37:
+	// 			show_error_message("MOVE IT");
+	// 			break;
+	// 	}
+	// });
+}
 
 function Notepad(file_path){
 	// TODO: DRY the default file names and title code (use document.title of the page in the iframe, in $IframeWindow)