From f51f2ea13f6cebf83ed91594cc6fa4179dd6f0c4 Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Tue, 12 Jan 2010 14:50:10 +0000
Subject: [PATCH] Made Open button icon scale by optimizing file opening code

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1198 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.css  | 20 ++++++++++++++++++++
 editor/svg-editor.html |  6 ++----
 editor/svg-editor.js   | 40 +++++++++++++---------------------------
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 107bcbde..06f8316b 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -442,6 +442,7 @@ span.zoom_tool {
 	cursor: pointer;
 }
 
+/*
 div.fileinputs {
 	position: relative;
 }
@@ -460,9 +461,11 @@ div.fileinputs svg {
 	z-index: 2;
 	cursor: pointer;
 }
+*/
 
 /* the file input control is placed on top but made invisible */
 /* TODO: is moz-opacity really needed? filter? */
+/*
 input.file {
 	position: relative;
 	text-align: right;
@@ -470,6 +473,23 @@ input.file {
 	filter:alpha(opacity: 0);
 	opacity: 0;
 }
+*/
+
+#fileinputs {
+	position: relative;
+	overflow: hidden;
+}
+
+#fileinputs input {
+	-moz-transform: scale(2.0); /* Not entirely necessary, but keeps it nice and big for OS X*/
+	height: 100%;
+	position: absolute;
+	opacity: 0;
+	top: -3px;
+	right: 10px;
+	margin: 0;
+	cursor: pointer; /* Sadly doesn't appear to have an effect */
+}
 
 #svg_editor .tool_button_current,
 #svg_editor .push_button_pressed {
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 6e96fff4..e0e310a0 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -85,10 +85,8 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<div id="file_panel">
 		<div class="push_button" id="tool_clear" title="New Image [N]"></div>
 		
-		<div id="fileinputs" class="fileinputs push_button" style="display: none">
-			<div class="fakefile">
-				<div id="tool_open" title="Open Image [O]" ></div>
-			</div>
+		<div id="fileinputs" class="push_button">
+			<div id="tool_open" title="Open Image [O]" ></div>
 		</div>
   	
 		<div class="push_button" id="tool_save" title="Save Image [S]"></div>
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 796a541c..4c89656c 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -1211,7 +1211,7 @@ function svg_edit_setup() {
 		var size_num = icon_sizes[size];
 		
 		// Change icon size
-		$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button, #url_notice, #fileinputs, #tool_open')
+		$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button, #url_notice, #tool_open')
 		.find('> svg, > img').each(function() {
 			this.setAttribute('width',size_num);
 			this.setAttribute('height',size_num);
@@ -2218,33 +2218,19 @@ function svg_edit_setup() {
 	// svgCanvas.open() will fire the 'opened' handler back here, 
 	// which is file_open here
 	if (window.FileReader) {
-		$("#fileinputs").show();
-		var fi = document.getElementById("fileinputs");
-		var svgns = "http://www.w3.org/2000/svg";
-		// we dynamically create an SVG with a foreignObject with a file input
-		// then we stretch and clip that file input so that it takes up exactly 24x24
-		// this is all thanks to there being no other way to bring up a file picker :(
-		// until Mozilla Bug 36619 is fixed, this is the only way I know how to do it
-		// TODO: fix this for when icon size is changed
-		var fi_holder = document.createElementNS(svgns, "svg");
-		fi_holder.setAttribute("viewBox", "0 0 24 24");
-		fi_holder.setAttribute("className", "svg_icon");
-		var fo = document.createElementNS(svgns, "foreignObject");
-		fo.setAttribute("width", "100%");
-		fo.setAttribute("height", "100%");
-		fo.setAttribute("transform", "translate(-5,-30) scale(3)");
-		var input = document.createElementNS("http://www.w3.org/1999/xhtml", "input");
-		input.setAttribute("type", "file");
-
-		input.setAttribute("onchange", "if(this.files.length==1) { \
-								var reader = new FileReader(); \
-								reader.onloadend = function(e) {console.log(e.target.result); svgCanvas.open(e.target.result);}; \
-								reader.readAsText(this.files[0]);}");
-		input.className = "file";
-		fo.appendChild(input);
-		fi_holder.appendChild(fo);
-		fi.insertBefore(fi_holder, fi.firstChild);
+		var inp = $('<input type="file">').change(function() {
+			if(this.files.length==1) {
+				var reader = new FileReader();
+				reader.onloadend = function(e) {
+					console.log(e.target.result);
+					svgCanvas.open(e.target.result);
+				};
+				reader.readAsText(this.files[0]);
+			}
+		});
+		$("#fileinputs").show().prepend(inp);
 		
+		// This doesn't appear to be necessary...
 		svgCanvas.setCustomHandlers( {open: fileOpen} );
 	}