pages/settings.html

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="../css/base.css?bust=$GIT_COMMIT" />
		<style>
			td {
				background-color: #eeeeee;
			}
		</style>

		<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

		<script type="text/javascript">
			"use strict";

			var mainSchema = "CSLEDIT.mainSchema",
				subSchemas = "CSLEDIT.subSchemas";

			var updateView = function () {
				var mainList = $('#mainSchemaList'),
					subList = $('#subSchemasList'),
					mainSchemaData = JSON.parse(localStorage.getItem(mainSchema)),
					subSchemasData = JSON.parse(localStorage.getItem(subSchemas));

				mainList.children().remove();
				subList.children().remove();

				if (mainSchemaData === null) {
					mainList.append("<li>Main schema file not specified</li>");
				} else {
					$.each(mainSchemaData, function (name, data) {
						mainList.append("<li>" + name + "</li>");
					});
				}

				if (subSchemasData === null) {
					subList.append("<li>No sub schemas specified</li>");
				} else {
					$.each(subSchemasData, function (name, data) {
						subList.append("<li>" + name + "</li>");
					});
				}

				displayLocalStorage();
			}

			var displayLocalStorage = function () {
				var table = $('<table>'),
					key,
					value,
					totalCharacters = 0;

				if (localStorage.length > 0) {
					table.append(
						$('<tr>')
							.append($('<td>').append("<strong>key</strong>"))
							.append($('<td>').append("<strong>value</strong>"))
					);
				}

				// list local storage contents
				for (var i = 0; i < localStorage.length; i++) {
					key = localStorage.key(i);
					value = localStorage.getItem(key);

					totalCharacters += value.length + key.length;

					// elide value
					if (value.length > 400) {
						value = value.substring(0, 400) + "...";
					}

					console.log(sanitize(value));

					table.append(
						$('<tr>')
							.append($('<td>').append(key))
							.append($('<td>').append(sanitize(value)))
					);
				}

				console.log("total = " + totalCharacters);
				var thousandsOfCharacters = Math.round(totalCharacters / 1000);

				$('#localStorage')
					.html("")
					.append("<p>Using " + thousandsOfCharacters + "k characters out of a possible 2500k (see " +
							"<a href=http://dev-test.nemikor.com/web-storage/support-test>reference</a>)</p>")
					.append(table);

			};

			var sanitize = function (input) {
				return input
					.replace(/&/g, "&amp;")
					.replace(/</g, "&lt")
					.replace(/>/g, "&gt;")
					.replace(/"/g, "&quot;");
			};

			var readSchemaFiles = function (schemaKey, files) {
				var schemaData = {};

				$.each(files, function (i, file) {
					var reader = new FileReader();

					reader.onload = function (event) {
						schemaData[file.name] = event.target.result;
					
						localStorage.setItem(schemaKey, JSON.stringify(schemaData));
						updateView();
					};
					reader.readAsText(file);
				});

				return schemaData;
			};

			$(document).ready(function () {
				if (typeof(localStorage) === "undefined" || localStorage === null) {
					$('body').html("localStorage not available in this environment");
				}

				$("#mainSchemaFile").change(function (event) {
					readSchemaFiles(mainSchema, event.target.files);
				});
				$("#subSchemasFiles").change(function (event) {
					readSchemaFiles(subSchemas, event.target.files);
				});

				$("#deleteSchema").click(function () {
					localStorage.removeItem(mainSchema);
					localStorage.removeItem(subSchemas);

					updateView();
				});
				
				$("#resetEverything").click(function () {
					localStorage.clear();
					updateView();
				});

				updateView();
			});

		</script>
		
	</head>
	<body>
		<h3>Current CSL schema files</h3>

		<label for="mainSchemaFile">Main CSL Schema RNG File:</label><input id="mainSchemaFile" type="file"></input><br />
		<ul id="mainSchemaList"></ul>

		<label for="subSchemasFiles">Other CSL Schema RNG Files:</label><input id="subSchemasFiles" type="file" multiple="multiple"></input><br />
		<ul id="subSchemasList"></ul>

		<button id="deleteSchema">Delete All Files (reset schema to default)</button>

		<h3>Current local storage</h3>
		<div id=localStorage>
		</div>
		<button id="resetEverything">Delete all local settings (your style will be lost)</button>
		<p>
	</body>
</html>