zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added extension to offer server-based import/open ability to browsers without File API support 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1621 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-07-01 20:14:12 +00:00
parent d96ddad902
commit f679554ce4
6 changed files with 131 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@ -1 +1 @@
<html><head><meta http-equiv="Refresh" CONTENT="0; URL=files/extensions/ext-foreignobject-js.html"></head></html> <html><head><meta http-equiv="Refresh" CONTENT="0; URL=files/svgcanvas-js.html"></head></html>

94
editor/extensions/ext-server_open.js Normal file
View File

@ -0,0 +1,94 @@
/*
* ext-server_open.js
*
* Licensed under the Apache License, Version 2
*
* Copyright(c) 2010 Alexis Deveria
*
*/
svgEditor.addExtension("server_open", {
callback: function() {
// Do nothing if client support is found
if(window.FileReader) return;
// Change these to appropriate script file
var open_svg_action = 'extensions/fileopen.php?type=load_svg';
var import_svg_action = 'extensions/fileopen.php?type=import_svg';
var import_img_action = 'extensions/fileopen.php?type=import_img';
// Set up function for PHP uploader to use
svgEditor.processFile = function(str64, type) {
var xmlstr = svgCanvas.Utils.decode64(str64);
switch ( type ) {
case 'load_svg':
svgCanvas.clear();
svgCanvas.setSvgString(xmlstr);
svgEditor.updateCanvas();
break;
case 'import_svg':
svgCanvas.importSvgString(xmlstr);
svgEditor.updateCanvas();
break;
}
}
// Create upload form
var open_svg_form = $('<form>');
open_svg_form.attr({
enctype: 'multipart/form-data',
method: 'post',
action: open_svg_action,
target: 'upload_target'
});
// Create import form
var import_svg_form = open_svg_form.clone().attr('action', import_svg_action);
// Create image form
var import_img_form = open_svg_form.clone().attr('action', import_img_action);
// It appears necessory to rebuild this input every time a file is
// selected so the same file can be picked and the change event can fire.
function rebuildInput(form) {
form.empty();
var inp = $('<input type="file" name="svg_file">').appendTo(form);
if(form[0] == open_svg_form[0]) {
inp.change(function() {
// This takes care of the "are you sure" dialog box
svgEditor.openPrep(function(ok) {
if(!ok) {
rebuildInput(form);
return;
}
// This submits the form, which returns the file data using svgEditor.uploadSVG
form.submit();
rebuildInput(form);
});
});
} else {
inp.change(function() {
// This submits the form, which returns the file data using svgEditor.uploadSVG
form.submit();
rebuildInput(form);
});
}
}
// Create the input elements
rebuildInput(open_svg_form);
rebuildInput(import_svg_form);
rebuildInput(import_img_form);
// Create upload target (hidden iframe)
var target = $('<iframe name="upload_target" src="#"/>').hide().appendTo('body');
// Add forms to buttons
$("#tool_open").show().prepend(open_svg_form);
$("#tool_import").show().prepend(import_svg_form);
}
});

9
editor/extensions/fileopen.php Normal file
View File

@ -0,0 +1,9 @@
<!doctype html>
<?php
// Very minimal PHP file, all we do is Base64 encode the uploaded file and
// return it to the editor
$output = file_get_contents($_FILES['svg_file']['tmp_name']);
?>
<script>
window.top.window.svgEditor.processFile("<?php echo base64_encode($output); ?>", "<?php echo $_REQUEST['type'] ?>");
</script>

6
editor/svg-editor.css
View File

@ -603,12 +603,12 @@ span.zoom_tool {
} }
#tool_open input, #tool_import input { #tool_open input, #tool_import input {
-moz-transform: scale(4,2); /* Not entirely necessary, but keeps it nice and big for OS X*/
height: 100%; height: 100%;
position: absolute; position: absolute;
opacity: 0; opacity: 0;
top: -3px; font-size: 10em;
right: 270px; top: -5px;
right: -5px;
margin: 0; margin: 0;
cursor: pointer; /* Sadly doesn't appear to have an effect */ cursor: pointer; /* Sadly doesn't appear to have an effect */
} }

24
editor/svg-editor.js
View File

@ -1643,7 +1643,7 @@
button.removeClass('buttondown'); button.removeClass('buttondown');
// do not hide if it was the file input as that input needs to be visible // do not hide if it was the file input as that input needs to be visible
// for its change event to fire // for its change event to fire
if (evt.target.localName != "input") { if (evt.target.tagName.toLowerCase() != "input") {
list.fadeOut(200); list.fadeOut(200);
} else if(!set_click) { } else if(!set_click) {
set_click = true; set_click = true;
@ -3415,6 +3415,15 @@
} }
}; };
Editor.openPrep = function(func) {
$('#main_menu').hide();
if(undoMgr.getUndoStackSize() === 0) {
func(true);
} else {
$.confirm(uiStrings.QwantToOpen, func);
}
}
// use HTML5 File API: http://www.w3.org/TR/FileAPI/ // use HTML5 File API: http://www.w3.org/TR/FileAPI/
// if browser has HTML5 File API support, then we will show the open menu item // if browser has HTML5 File API support, then we will show the open menu item
// and provide a file input to click. When that change event fires, it will // and provide a file input to click. When that change event fires, it will
@ -3422,7 +3431,7 @@
if (window.FileReader) { if (window.FileReader) {
var inp = $('<input type="file">').change(function() { var inp = $('<input type="file">').change(function() {
var f = this; var f = this;
var openFile = function(ok) { Editor.openPrep(function(ok) {
if(!ok) return; if(!ok) return;
svgCanvas.clear(); svgCanvas.clear();
if(f.files.length==1) { if(f.files.length==1) {
@ -3433,14 +3442,7 @@
}; };
reader.readAsText(f.files[0]); reader.readAsText(f.files[0]);
} }
} });
$('#main_menu').hide();
if(undoMgr.getHistoryPosition() === 0) {
openFile(true);
} else {
$.confirm(uiStrings.QwantToOpen, openFile);
}
}); });
$("#tool_open").show().prepend(inp); $("#tool_open").show().prepend(inp);
var inp2 = $('<input type="file">').change(function() { var inp2 = $('<input type="file">').change(function() {
@ -3457,7 +3459,7 @@
$("#tool_import").show().prepend(inp2); $("#tool_import").show().prepend(inp2);
} }
var updateCanvas = function(center, new_ctr) { var updateCanvas = Editor.updateCanvas = function(center, new_ctr) {
var w = workarea.width(), h = workarea.height(); var w = workarea.width(), h = workarea.height();
var w_orig = w, h_orig = h; var w_orig = w, h_orig = h;
var zoom = svgCanvas.getZoom(); var zoom = svgCanvas.getZoom();

12
editor/svgcanvas.js
View File

@ -1598,6 +1598,12 @@ var SVGEditTransformList = function(elem) {
var xform = svgroot.createSVGTransform(); var xform = svgroot.createSVGTransform();
var fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1); var fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1);
var values = name=='matrix'?[mtx]:val_arr; var values = name=='matrix'?[mtx]:val_arr;
if(name == 'scale' && values.length == 1) {
values.push(values[0]);
} else if(name == 'translate' && values.length == 1) {
values.push(0);
}
xform[fname].apply(xform, values); xform[fname].apply(xform, values);
this._list.appendItem(xform); this._list.appendItem(xform);
} }
@ -1950,12 +1956,17 @@ var runExtensions = this.runExtensions = function(action, vars, returnArray) {
this.addExtension = function(name, ext_func) { this.addExtension = function(name, ext_func) {
if(!(name in extensions)) { if(!(name in extensions)) {
// Provide private vars/funcs here. Is there a better way to do this? // Provide private vars/funcs here. Is there a better way to do this?
if($.isFunction(ext_func)) {
var ext = ext_func($.extend(canvas.getPrivateMethods(), { var ext = ext_func($.extend(canvas.getPrivateMethods(), {
svgroot: svgroot, svgroot: svgroot,
svgcontent: svgcontent, svgcontent: svgcontent,
nonce: nonce, nonce: nonce,
selectorManager: selectorManager selectorManager: selectorManager
})); }));
} else {
var ext = ext_func;
}
extensions[name] = ext; extensions[name] = ext;
call("extension_added", ext); call("extension_added", ext);
} else { } else {
@ -10293,4 +10304,3 @@ this.getPrivateMethods = function() {
}()); }());
} }