svgedit/editor/extensions/ext-server_opensave.js

/* eslint-disable no-var */
/* globals svgEditor, svgedit, svgCanvas, canvg, $ */
/*
 * ext-server_opensave.js
 *
 * Licensed under the MIT License
 *
 * Copyright(c) 2010 Alexis Deveria
 *
 */

svgEditor.addExtension('server_opensave', {
	callback: function () {
		'use strict';
		function getFileNameFromTitle () {
			var title = svgCanvas.getDocumentTitle();
			// We convert (to underscore) only those disallowed Win7 file name characters
			return $.trim(title).replace(/[/\\:*?"<>|]/g, '_');
		}
		function xhtmlEscape (str) {
			return str.replace(/&(?!amp;)/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;'); // < is actually disallowed above anyways
		}
		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 openSvgAction, importSvgAction, importImgAction,
			openSvgForm, importSvgForm, importImgForm,
			saveSvgAction = svgEditor.curConfig.extPath + 'filesave.php',
			saveImgAction = svgEditor.curConfig.extPath + 'filesave.php',
			// Create upload target (hidden iframe)
			cancelled = false,
			Utils = svgedit.utilities;

		$('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
		svgEditor.setCustomHandlers({
			save: function (win, data) {
				var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data, // Firefox doesn't seem to know it is UTF-8 (no matter whether we use or skip the clientDownload code) despite the Content-Disposition header containing UTF-8, but adding the encoding works
					filename = getFileNameFromTitle();

				if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml;charset=UTF-8;base64,' + Utils.encode64(svg))) {
					return;
				}

				$('<form>').attr({
					method: 'post',
					action: saveSvgAction,
					target: 'output_frame'
				}).append('<input type="hidden" name="output_svg" value="' + xhtmlEscape(svg) + '">')
					.append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">')
					.appendTo('body')
					.submit().remove();
			},
			exportPDF: function (win, data) {
				var filename = getFileNameFromTitle(),
					datauri = data.dataurlstring;
				if (clientDownloadSupport(filename, '.pdf', datauri)) {
					return;
				}
				$('<form>').attr({
					method: 'post',
					action: saveImgAction,
					target: 'output_frame'
				}).append('<input type="hidden" name="output_img" value="' + datauri + '">')
					.append('<input type="hidden" name="mime" value="application/pdf">')
					.append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">')
					.appendTo('body')
					.submit().remove();
			},
			// Todo: Integrate this extension with a new built-in exportWindowType, "download"
			exportImage: function (win, data) {
				var c,
					issues = data.issues,
					mimeType = data.mimeType,
					quality = data.quality;

				if (!$('#export_canvas').length) {
					$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
				}
				c = $('#export_canvas')[0];

				c.width = svgCanvas.contentW;
				c.height = svgCanvas.contentH;
				Utils.buildCanvgCallback(function () {
					canvg(c, data.svg, {renderCallback: function () {
						var pre, filename, suffix,
							datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType),
							// uiStrings = svgEditor.uiStrings,
							note = '';

						// Check if there are issues
						if (issues.length) {
							pre = '\n \u2022 ';
							note += ('\n\n' + pre + issues.join(pre));
						}

						if (note.length) {
							alert(note);
						}

						filename = getFileNameFromTitle();
						suffix = '.' + data.type.toLowerCase();

						if (clientDownloadSupport(filename, suffix, datauri)) {
							return;
						}

						$('<form>').attr({
							method: 'post',
							action: saveImgAction,
							target: 'output_frame'
						}).append('<input type="hidden" name="output_img" value="' + datauri + '">')
							.append('<input type="hidden" name="mime" value="' + mimeType + '">')
							.append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">')
							.appendTo('body')
							.submit().remove();
					}});
				})();
			}
		});

		// Do nothing if client support is found
		if (window.FileReader) { return; }

		// Change these to appropriate script file
		openSvgAction = svgEditor.curConfig.extPath + 'fileopen.php?type=load_svg';
		importSvgAction = svgEditor.curConfig.extPath + 'fileopen.php?type=import_svg';
		importImgAction = svgEditor.curConfig.extPath + '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;
			}

			$('#dialog_box').hide();

			if (type !== 'import_img') {
				xmlstr = 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;
			case 'import_img':
				svgCanvas.setGoodImage(str64);
				break;
			}
		};

		// Create upload form
		openSvgForm = $('<form>');
		openSvgForm.attr({
			enctype: 'multipart/form-data',
			method: 'post',
			action: openSvgAction,
			target: 'output_frame'
		});

		// Create import form
		importSvgForm = openSvgForm.clone().attr('action', importSvgAction);

		// Create image form
		importImgForm = openSvgForm.clone().attr('action', importImgAction);

		// It appears necessary 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);

			function submit () {
				// This submits the form, which returns the file data using svgEditor.processFile()
				form.submit();

				rebuildInput(form);
				$.process_cancel('Uploading...', function () {
					cancelled = true;
					$('#dialog_box').hide();
				});
			}

			if (form[0] === openSvgForm[0]) {
				inp.change(function () {
					// This takes care of the "are you sure" dialog box
					svgEditor.openPrep(function (ok) {
						if (!ok) {
							rebuildInput(form);
							return;
						}
						submit();
					});
				});
			} else {
				inp.change(function () {
					// This submits the form, which returns the file data using svgEditor.processFile()
					submit();
				});
			}
		}

		// Create the input elements
		rebuildInput(openSvgForm);
		rebuildInput(importSvgForm);
		rebuildInput(importImgForm);

		// Add forms to buttons
		$('#tool_open').show().prepend(openSvgForm);
		$('#tool_import').show().prepend(importSvgForm);
		$('#tool_image').prepend(importImgForm);
	}
});