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

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

editor/svg-editor.html

@@ -85,11 +85,9 @@ 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 id="fileinputs" class="push_button">
-			<div class="fakefile">
 			<div id="tool_open" title="Open Image [O]" ></div>
 		</div>
-		</div>
   	
 		<div class="push_button" id="tool_save" title="Save Image [S]"></div>
 		<div class="push_button" id="tool_docprops" title="Document Properties [I]"></div>

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 inp = $('<input type="file">').change(function() {
-		var fi = document.getElementById("fileinputs");
+			if(this.files.length==1) {
-		var svgns = "http://www.w3.org/2000/svg";
+				var reader = new FileReader();
-		// we dynamically create an SVG with a foreignObject with a file input
+				reader.onloadend = function(e) {
-		// then we stretch and clip that file input so that it takes up exactly 24x24
+					console.log(e.target.result);
-		// this is all thanks to there being no other way to bring up a file picker :(
+					svgCanvas.open(e.target.result);
-		// 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
+				reader.readAsText(this.files[0]);
-		var fi_holder = document.createElementNS(svgns, "svg");
+			}
-		fi_holder.setAttribute("viewBox", "0 0 24 24");
+		});
-		fi_holder.setAttribute("className", "svg_icon");
+		$("#fileinputs").show().prepend(inp);
-		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);
 		
+		// This doesn't appear to be necessary...
 		svgCanvas.setCustomHandlers( {open: fileOpen} );
 	}