From e17112baba1f45ec638cc2cddba081de22a5140e Mon Sep 17 00:00:00 2001
From: Isaiah Odhner <isaiahodhner@gmail.com>
Date: Mon, 19 Sep 2016 17:05:49 -0400
Subject: [PATCH] Fix <input> elements getting in the way

---
 TODO.md          |  1 -
 src/$ColorBox.js | 10 +++++-----
 src/app.js       |  2 --
 src/functions.js | 15 +++++++++++----
 src/menus.js     |  4 ++--
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/TODO.md b/TODO.md
index cf5ae45..b445daf 100644
--- a/TODO.md
+++ b/TODO.md
@@ -54,7 +54,6 @@
 
 
 * Issues
-	* The `<input type="file">` used for File > Open is showing up (barely) and blocking File, Edit, and View in Chrome
 	* If you open an image it resets the zoom but if you're on the magnification tool it doesn't update the options
 	* If you zoom in with the magnifier without previously changing the magnification on the toolbar,
 	  then switch back to the magnifier, the toolbar doesn't show any magnification highlighted
diff --git a/src/$ColorBox.js b/src/$ColorBox.js
index fc908d1..ce55387 100644
--- a/src/$ColorBox.js
+++ b/src/$ColorBox.js
@@ -119,14 +119,14 @@ function $ColorBox(){
 	
 	var $c = $Component("Colors", "wide", $cb);
 	
-	var $input = $("<input type=color>").appendTo($app).css({width: 0, height: 0, padding: 0, border: 0, position: "absolute"});
-	
 	$c.edit_last_color = function(){
 		// Edit the last color cell that's been selected as the foreground color.
-		$input.click().one("change", function(){
+		create_and_trigger_input({type: "color"}, function(input){
+			console.log(input, input.value);
 			$last_fg_color_button.trigger({type: "pointerdown", ctrlKey: false, button: 0});
-			$last_fg_color_button.find("input").val($input.val()).triggerHandler("change");
-		});
+			$last_fg_color_button.find("input").val(input.value).triggerHandler("change");
+		})
+		.show().css({width: 0, height: 0, padding: 0, border: 0, position: "absolute", pointerEvents: "none", overflow: "hidden"});
 	};
 	
 	$c.rebuild_palette = build_palette;
diff --git a/src/app.js b/src/app.js
index 822b3df..9ac8cfa 100644
--- a/src/app.js
+++ b/src/app.js
@@ -73,8 +73,6 @@ var $status_size = $(E("div")).addClass("jspaint-status-coordinates").appendTo($
 	$status_text.text("For Help, click Help Topics on the Help Menu.");
 })();
 
-var $file_input = $("<input type=file>").appendTo($app).css({width: 0, height: 0, padding: 0, border: 0, position: "absolute"});
-
 var $toolbox = $ToolBox();
 var $colorbox = $ColorBox();
 
diff --git a/src/functions.js b/src/functions.js
index 1b0ca9c..e0d7ead 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -47,15 +47,22 @@ function update_title(){
 	document.title = file_name + " - Paint";
 }
 
-function get_FileList(callback){
-	var $input = $(E("input")).attr({type: "file"})
+function create_and_trigger_input(attrs, callback){
+	var $input = $(E("input")).attr(attrs)
 		.on("change", function(){
-			callback(this.files);
+			callback(this);
 			$input.remove();
 		})
-		.appendTo("body")
+		.appendTo($app)
 		.hide()
 		.click();
+	return $input;
+}
+
+function get_FileList(callback){
+	create_and_trigger_input({type: "file"}, function(input){
+		callback(input.files);
+	});
 }
 
 function open_from_Image(img, callback){
diff --git a/src/menus.js b/src/menus.js
index 3897793..1aa4e45 100644
--- a/src/menus.js
+++ b/src/menus.js
@@ -321,8 +321,8 @@ var menus = {
 		{
 			item: "&Get Colors",
 			action: function(){
-				$file_input.click().one("change", function(){
-					var file = $file_input[0].files[0];
+				get_FileList(function(files){
+					var file = files[0];
 					Palette.load(file, function(err, new_palette){
 						if(err){
 							alert("This file is not in a format the paint recognizes, or no colors were found.");