open.html

<!DOCTYPE html>
<html>
<head>
    <title>Open Diagram</title>
    <link rel="stylesheet" type="text/css" href="styles/grapheditor.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<script type="text/javascript">
	// Reads files locally
	function handleFiles(files)
	{
		for (var i = 0; i < files.length; i++)
		{
			(function(file)
			{
				// Small hack to support import
				if (window.parent.openNew)
				{
					window.parent.open(window.parent.location.href);
				}
				
				var reader = new FileReader();
				reader.onload = function(e)
				{
					window.parent.openFile.setData(e.target.result, file.name);
				};
				reader.onerror = function(e)
				{
					console.log(e);
				};
				reader.readAsText(file);
			})(files[i]);
		}
	};

	// Handles form-submit by preparing to process response
	function handleSubmit()
	{
		var form = window.openForm || document.getElementById('openForm');
		
		// Checks for support of the File API for local file access
		// except for files where the parse is on the server
		if (window.parent.Graph.fileSupport && form.upfile.files.length > 0)
		{
			handleFiles(form.upfile.files);
			
			return false;
		}
		else
		{
			if (/(\.xml)$/i.test(form.upfile.value) || /(\.txt)$/i.test(form.upfile.value) ||
				/(\.mxe)$/i.test(form.upfile.value))
			{
				// Small hack to support import
				if (window.parent.openNew)
				{
					window.parent.open(window.parent.location.href);
				}
				
				// NOTE: File is loaded via JS injection into the iframe, which in turn sets the
				// file contents in the parent window. The new window asks its opener if any file
				// contents are available or waits for the contents to become available.
				return true;
			}
			else
			{
				window.parent.mxUtils.alert(window.parent.mxResources.get('invalidOrMissingFile'));
				
				return false;
			}
		}
	};
	
	// Hides this dialog
	function hideWindow(cancel)
	{
		window.parent.openFile.cancel(cancel);
	}
	
	function fileChanged()
	{
		var form = window.openForm || document.getElementById('openForm');
		var openButton = document.getElementById('openButton');
		
		if (form.upfile.value.length > 0)
		{
			openButton.removeAttribute('disabled');
		}
		else
		{
			openButton.setAttribute('disabled', 'disabled');
		}		
	}

	function main()
	{
		if (window.parent.Editor.useLocalStorage)
		{
			document.body.innerHTML = '';
			var div = document.createElement('div');
			div.style.fontFamily = 'Arial';
			
			if (localStorage.length == 0)
			{
				window.parent.mxUtils.write(div, window.parent.mxResources.get('noFiles'));
			}
			else
			{
				var keys = [];
				
				for (var i = 0; i < localStorage.length; i++)
				{
					keys.push(localStorage.key(i));
				}
				
				// Sorts the array by filename (key)
				keys.sort(function (a, b)
				{
				    return a.toLowerCase().localeCompare(b.toLowerCase());
				});
				
				for (var i = 0; i < keys.length; i++)
				{
					var link = document.createElement('a');
					link.style.fontDecoration = 'none';
					link.style.fontSize = '14pt';
					var key = keys[i];
					window.parent.mxUtils.write(link, key);
					link.setAttribute('href', 'javascript:void(0);');
					div.appendChild(link);
					
					var img = document.createElement('span');
					img.className = 'geSprite geSprite-delete';
					img.style.position = 'relative';
					img.style.cursor = 'pointer';
					img.style.display = 'inline-block';
					div.appendChild(img);
					
					window.parent.mxUtils.br(div);
					
					window.parent.mxEvent.addListener(img, 'click', (function(k)
					{
						return function()
						{
							if (window.parent.mxUtils.confirm(window.parent.mxResources.get('delete') + ' "' + k + '"?'))
							{
								localStorage.removeItem(k);
								window.location.reload();
							}
						};
					})(key));

					window.parent.mxEvent.addListener(link, 'click', (function(k)
					{
						return function()
						{
							try
							{
								window.parent.open(window.parent.location.href);
								window.parent.openFile.setData(localStorage.getItem(k), k);
							}
							catch (e)
							{
								window.parent.mxUtils.alert(e.message);
							}
						};
					})(key));
				}
			}

			window.parent.mxUtils.br(div);
			window.parent.mxUtils.br(div);
			
			var cancelBtn = window.parent.mxUtils.button(window.parent.mxResources.get('cancel'), function()
			{
				hideWindow(true);
			});
			cancelBtn.className = 'geBtn';
			div.appendChild(cancelBtn);
			
			document.body.appendChild(div);
		}
		else
		{
			var editLink = document.getElementById('editLink');
			var openButton = document.getElementById('openButton');
			openButton.value = window.parent.mxResources.get(window.parent.openKey || 'open');
			var cancelButton = document.getElementById('cancelButton');
			cancelButton.value = window.parent.mxResources.get('cancel');
			var supportedText = document.getElementById('openSupported');
			supportedText.innerHTML = window.parent.mxResources.get('openSupported');
			var form = window.openForm || document.getElementById('openForm');

			form.setAttribute('action', window.parent.OPEN_URL);
		}
	};
</script>
<body onload="main();">
<form method="POST" enctype="multipart/form-data" action="" name="openForm"
	id="openForm" onsubmit="return handleSubmit();" accept-charset="UTF-8">
<table style="width:100%;">
<tr>
<td style="height:40px;vertical-align:top;" colspan="2">
<input type="file" name="upfile" onchange="fileChanged()">
</td>
</tr>
<tr>
<td colspan="2" height="120px" id="openSupported" style="font-family:arial;color:grey;font-size:9pt;vertical-align:top;text-align:left;">
</td>
</tr>
<tr>
<td>
</td>
<td style="vertical-align:middle;text-align:right;white-space:nowrap;">
<input type="button" id="cancelButton" class="geBtn" value="Cancel" onclick="hideWindow(true);">
<input type="submit" id="openButton" class="geBtn gePrimaryBtn" value="Open" disabled="disabled">
</td>
</tr>
</table>
</form>
</body>
</html>