Issue 392: Can now open local files in SVG-edit in Firefox 3.6 (File API).

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1196 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/svg-editor.css

@@ -307,7 +307,7 @@ body {
 }
 
 #svg_editor div.toolset,
-#svg_editor div.toolset > *{
+#svg_editor div.toolset > * {
 	float: left;
 }
 
@@ -442,6 +442,35 @@ span.zoom_tool {
 	cursor: pointer;
 }
 
+div.fileinputs {
+	position: relative;
+}
+
+div.fakefile {
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	z-index: 0;
+}
+
+div.fileinputs svg {
+	position: relative;
+	width: 24px;
+	height: 24px;
+	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;
+	-moz-opacity: 0;
+	filter:alpha(opacity: 0);
+	opacity: 0;
+}
+
 #svg_editor .tool_button_current,
 #svg_editor .push_button_pressed {
 	border-left: 1px solid #808080;
@@ -608,6 +637,7 @@ span.zoom_tool {
 /*	width: 450px;*/
 	font-family: Verdana, Helvetica, sans-serif;
 	font-size: .8em;
+	z-index: 20001;
 }
 
 #svg_docprops #resolution {
@@ -723,6 +753,7 @@ span.zoom_tool {
 	bottom: 0px;
 	background-color: black;
 	opacity: 0.6;
+	z-index: 20000;
 }
 
 button#tool_source_save,

editor/svg-editor.html

@@ -84,7 +84,13 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<!-- File-like buttons: New, Save, Source -->
 	<div id="file_panel">
 		<div class="push_button" id="tool_clear" title="New Image [N]"></div>
-		<div class="push_button" id="tool_open" title="Open Image [O]" style="display:none"></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>
+  	
 		<div class="push_button" id="tool_save" title="Save Image [S]"></div>
 		<div class="push_button" id="tool_docprops" title="Document Properties [I]"></div>
 		<div class="push_button" id="tool_source" title="Edit Source [U]"></div>

editor/svg-editor.js

@@ -1081,7 +1081,6 @@ function svg_edit_setup() {
 	
 	$('#svg_docprops_container').draggable({cancel:'button,fieldset'});
 	
-	
 	var showDocProperties = function(){
 		if (docprops) return;
 		docprops = true;
@@ -1212,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')
+		$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button, #url_notice, #fileinputs, #tool_open')
 		.find('> svg, > img').each(function() {
 			this.setAttribute('width',size_num);
 			this.setAttribute('height',size_num);
@@ -1948,6 +1947,11 @@ function svg_edit_setup() {
 		}
 	};
 	
+	var fileOpen = function(window, str) {
+		svgCanvas.setSvgString(str);
+		populateLayers();
+	};
+
 	$(window).resize( centerCanvasIfNeeded );
 
 	function stepFontSize(elem, step) {
@@ -2006,7 +2010,6 @@ function svg_edit_setup() {
 			w_area[0].scrollLeft = scroll_x;
 		}
 	}
-	
 
 	$('#resolution').change(function(){
 		var wh = $('#canvas_width,#canvas_height');
@@ -2200,7 +2203,7 @@ function svg_edit_setup() {
 	
 	svgCanvas.setCustomHandlers = function(opts) {
 		if(opts.open) {
-			$('#tool_open').show();
+//			$('#tool_open').show();
 			svgCanvas.bind("opened", opts.open);
 		}
 		if(opts.save) {
@@ -2208,6 +2211,43 @@ function svg_edit_setup() {
 		}
 	}
 	
+	// use HTML5 File API: http://www.w3.org/TR/FileAPI/
+	// if browser has HTML5 File API support, then provide the Open button
+	// clicking the button will bring up a file chooser dialog, once a file is chosen
+	// then the change() event will fire on the file input, will call svgCanvas.open()
+	// 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);
+		
+		svgCanvas.setCustomHandlers( {open: fileOpen} );
+	}
+	
 	// set starting resolution (centers canvas)
 	setResolution(640,480);