From 5bd91643bd099281ab19a85ac27526d4f7cd487b Mon Sep 17 00:00:00 2001 From: Jeff Schiller Date: Tue, 12 Jan 2010 08:09:08 +0000 Subject: [PATCH] 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 | 33 ++++++++++++++++++++++++++++- editor/svg-editor.html | 8 ++++++- editor/svg-editor.js | 48 ++++++++++++++++++++++++++++++++++++++---- 3 files changed, 83 insertions(+), 6 deletions(-) diff --git a/editor/svg-editor.css b/editor/svg-editor.css index 3b6ee221..107bcbde 100644 --- a/editor/svg-editor.css +++ b/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, diff --git a/editor/svg-editor.html b/editor/svg-editor.html index e5965f2f..6e96fff4 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -84,7 +84,13 @@ script type="text/javascript" src="locale/locale.min.js">
- + + +
diff --git a/editor/svg-editor.js b/editor/svg-editor.js index abce1fac..796a541c 100644 --- a/editor/svg-editor.js +++ b/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);