Change ext-server_opensave.js to work wholly client-side if download attribute supported (and JSLint in process)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2606 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Brett Zamir 2013-10-29 01:26:23 +00:00
parent f8aeacd7a8
commit e5f3e81a07
1 changed files with 59 additions and 36 deletions

View File

@ -1,3 +1,4 @@
/*globals svgEditor, svgCanvas, canvg, $*/
/*
* ext-server_opensave.js
*
@ -9,21 +10,39 @@
svgEditor.addExtension("server_opensave", {
callback: function() {
var save_svg_action = 'extensions/filesave.php';
var save_img_action = 'extensions/filesave.php';
// Create upload target (hidden iframe)
var target = $('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
'use strict';
function getFileNameFromTitle () {
var title = svgCanvas.getDocumentTitle();
return $.trim(title).replace(/[^a-z0-9\.\_\-]+/gi, '_');
}
function clientDownloadSupport (filename, suffix, uri) {
var a,
support = $('<a>')[0].download === '';
if (support) {
a = $('<a>hidden</a>').attr({download: (filename || 'image') + suffix, href: uri}).css('display', 'none').appendTo('body');
a[0].click();
return true;
}
}
var open_svg_action, import_svg_action, import_img_action,
open_svg_form, import_svg_form, import_img_form,
save_svg_action = 'extensions/filesave.php',
save_img_action = 'extensions/filesave.php',
// Create upload target (hidden iframe)
cancelled = false;
$('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
svgEditor.setCustomHandlers({
save: function(win, data) {
var svg = "<?xml version=\"1.0\"?>\n" + data;
var svg = "<?xml version=\"1.0\"?>\n" + data,
filename = getFileNameFromTitle();
//if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml,' + encodeURI(data))) { // Firefox limits size of file
if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml;base64,' + window.btoa(data))) {
return;
}
var title = svgCanvas.getDocumentTitle();
var filename = $.trim(title).replace(/[^a-z0-9\.\_\-]+/gi, '_');
var form = $('<form>').attr({
$('<form>').attr({
method: 'post',
action: save_svg_action,
target: 'output_frame'
@ -33,26 +52,27 @@ svgEditor.addExtension("server_opensave", {
.submit().remove();
},
exportImage: function(win, data) {
var issues = data.issues,
var c,
issues = data.issues,
mimeType = data.mimeType,
quality = data.quality;
if(!$('#export_canvas').length) {
$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
}
var c = $('#export_canvas')[0];
c = $('#export_canvas')[0];
c.width = svgCanvas.contentW;
c.height = svgCanvas.contentH;
canvg(c, data.svg, {renderCallback: function() {
var datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType);
var uiStrings = svgEditor.uiStrings;
var note = '';
var pre, filename, suffix,
datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType),
uiStrings = svgEditor.uiStrings,
note = '';
// Check if there's issues
if(issues.length) {
var pre = "\n \u2022 ";
pre = "\n \u2022 ";
note += ("\n\n" + pre + issues.join(pre));
}
@ -60,10 +80,14 @@ svgEditor.addExtension("server_opensave", {
alert(note);
}
var title = svgCanvas.getDocumentTitle();
var filename = title.replace(/[^a-z0-9\.\_\-]+/gi, '_');
var form = $('<form>').attr({
filename = getFileNameFromTitle();
suffix = '.' + data.type.toLowerCase();
if (clientDownloadSupport(filename, suffix, datauri)) {
return;
}
$('<form>').attr({
method: 'post',
action: save_img_action,
target: 'output_frame'
@ -79,17 +103,16 @@ svgEditor.addExtension("server_opensave", {
});
// Do nothing if client support is found
if(window.FileReader) return;
if(window.FileReader) {return;}
var cancelled = false;
// 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';
open_svg_action = 'extensions/fileopen.php?type=load_svg';
import_svg_action = 'extensions/fileopen.php?type=import_svg';
import_img_action = 'extensions/fileopen.php?type=import_img';
// Set up function for PHP uploader to use
svgEditor.processFile = function(str64, type) {
var xmlstr;
if(cancelled) {
cancelled = false;
return;
@ -97,11 +120,11 @@ svgEditor.addExtension("server_opensave", {
$('#dialog_box').hide();
if(type != 'import_img') {
var xmlstr = svgCanvas.Utils.decode64(str64);
if (type !== 'import_img') {
xmlstr = svgCanvas.Utils.decode64(str64);
}
switch ( type ) {
switch (type) {
case 'load_svg':
svgCanvas.clear();
svgCanvas.setSvgString(xmlstr);
@ -115,10 +138,10 @@ svgEditor.addExtension("server_opensave", {
svgCanvas.setGoodImage(str64);
break;
}
}
};
// Create upload form
var open_svg_form = $('<form>');
open_svg_form = $('<form>');
open_svg_form.attr({
enctype: 'multipart/form-data',
method: 'post',
@ -127,10 +150,10 @@ svgEditor.addExtension("server_opensave", {
});
// Create import form
var import_svg_form = open_svg_form.clone().attr('action', import_svg_action);
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);
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.