From e878239be57aea19d2bce39187eeb006b81d4e51 Mon Sep 17 00:00:00 2001
From: Isaiah Odhner <isaiahodhner@gmail.com>
Date: Tue, 1 Oct 2019 14:25:33 -0400
Subject: [PATCH] Implement View > Zoom > Custom...

---
 TODO.md          |  1 -
 src/functions.js | 72 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/menus.js     |  2 +-
 3 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/TODO.md b/TODO.md
index 6390f3b..bdade68 100644
--- a/TODO.md
+++ b/TODO.md
@@ -10,7 +10,6 @@
 	* Related topics (I'd probably make this a heading with links instead of the weird context menu thing)
 * Update topics
 	* "To use black and white instead of color" ("If you change back to color, only new work will be in color." only applies if converting to black and white when switching to black and white mode)
-	* "To display gridlines" - View > Zoom > Custom?
 	* "To use a picture as the desktop background":
 	add a third step? It's not quite that easy (at least in the browser)
 	* "To create custom colors": way too OS-specific
diff --git a/src/functions.js b/src/functions.js
index e017667..b2d8539 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -83,6 +83,78 @@ function reset_magnification(){
 	set_magnification(1);
 }
 
+var $custom_zoom_window;
+function show_custom_zoom_window() {
+	if ($custom_zoom_window) {
+		$custom_zoom_window.close();
+	}
+	var $w = new $FormWindow("Custom Zoom");
+	$custom_zoom_window = $w;
+
+	// TODO: show Current zoom: blah% ?
+	var $fieldset = $(E("fieldset")).appendTo($w.$main);
+	$fieldset.append("<legend>Zoom to</legend>");
+	$fieldset.append("<label><input type='radio' name='custom-zoom-radio' value='1'/>100%</label>");
+	$fieldset.append("<label><input type='radio' name='custom-zoom-radio' value='2'/>200%</label>");
+	$fieldset.append("<label><input type='radio' name='custom-zoom-radio' value='4'/>400%</label>");
+	$fieldset.append("<label><input type='radio' name='custom-zoom-radio' value='6'/>600%</label>");
+	$fieldset.append("<label><input type='radio' name='custom-zoom-radio' value='8'/>800%</label>");
+	$fieldset.append("<label><input type='radio' name='custom-zoom-radio' value='really-custom'/><input type='number' min='10' max='1000' name='really-custom-zoom-input' value=''/>%</label>");
+	var is_custom = true;
+	$fieldset.find("input[type=radio]").get().forEach((el)=> {
+		if (parseFloat(el.value) === magnification) {
+			el.checked = true;
+			is_custom = false;
+		}
+	});
+	var $really_custom_radio_option = $fieldset.find("input[value='really-custom']");
+	var $really_custom_input = $fieldset.find("input[name='really-custom-zoom-input']");
+
+	$really_custom_input.closest("label").on("click", function(e){
+		$really_custom_radio_option.prop("checked", true);
+		$really_custom_input[0].focus();
+	});
+
+	if (is_custom) {
+		$really_custom_input.val(magnification * 100);
+		$really_custom_radio_option.prop("checked", true);
+	}
+
+	$fieldset.find("label").css({display: "block"});
+
+	$w.$Button("Okay", function(){
+		var option_val = $fieldset.find("input[name='custom-zoom-radio']:checked").val();
+		var mag;
+		if(option_val === "really-custom"){
+			option_val = $really_custom_input.val();
+			if(`${option_val}`.match(/\dx$/)) { // ...you can't actually type an x; oh well...
+				mag = parseFloat(option_val);
+			}else if(`${option_val}`.match(/\d%?$/)) {
+				mag = parseFloat(option_val) / 100;
+			}
+			if(isNaN(mag)){
+				var $msgw = new $FormWindow("Invalid Value").addClass("dialogue-window");
+				$msgw.$main.text("The value specified for custom zoom was invalid.");
+				$msgw.$Button("Okay", function(){
+					$msgw.close();
+				});
+				return;
+			}
+		}else{
+			mag = parseFloat(option_val);
+		}
+
+		set_magnification(mag);
+
+		$w.close();
+	})[0].focus();
+	$w.$Button("Cancel", function(){
+		$w.close();
+	});
+
+	$w.center();
+}
+
 function toggle_grid() {
 	show_grid = !show_grid;
 	// $G.trigger("option-changed");
diff --git a/src/menus.js b/src/menus.js
index c2a4263..d4e9d74 100644
--- a/src/menus.js
+++ b/src/menus.js
@@ -278,8 +278,8 @@ var menus = {
 				},
 				{
 					item: "C&ustom...",
-					enabled: false, // @TODO
 					description: "Zooms the picture.",
+					action: show_custom_zoom_window,
 				},
 				$MenuBar.DIVIDER,
 				{