Fix <input> elements getting in the way

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

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;

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();
 

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){

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.");