Source

Outliner / outliner.html

<html>
<head>
<title>(Unnamed)</title>
<link rel="stylesheet" href="outliner.css" type="text/css"/>
<style type="text/css">
#outliner > ul {
	margin-top: 0;
	margin-bottom: 0;
}
#outliner .outliner-header {
	top: 0;
	left: 0;
	position: fixed;
	margin: 0;
	padding: 3px;
	background-color: white;
	width: 100%;
	border-bottom: 1px solid #B0B0B0;
	-moz-box-shadow: 0 0 3px #999999;
	-webkit-box-shadow: 0 0 3px #999999;
	box-shadow: 0 0 3px #999999;
}
html, body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
}
</style>
<script type="text/javascript" src="classList.min.js"></script>
<script type="text/javascript" src="compat.js"></script>
<script type="text/javascript" src="outliner.js"></script>
<script type="text/javascript">
// <!--
"use strict";

function position () {
	var header = document.querySelector("#outliner .outliner-header");
	var editor = document.querySelector("#outliner > ul");
	if (header && editor) {
		editor.style.paddingTop = (header.offsetHeight+10)+'px';
	}
}

function changeHash(newName) {
	var name = Outliner.getDocumentFromHash();
	if (newName !== name) {
		document.location.hash = Outliner.getHashForDocument(newName);
	}
}

try {
	var outliner = new Outliner('outliner', {
		everywhere: true,
		fullPageOverlays: true,
		document: Outliner.getDocumentFromHash(),
		onCreate: function () {
			position();
			this.focus();
			document.title = this.document || this.title || '(Unnamed)';
			if (this.document) {
				changeHash(this.document);
			}
		},
		onChange: function () {
			document.title = (this.document || this.title || '(Unnamed)') + ' [modified]';
		},
		onAutoSave: function (name) {
			document.title = (this.document || this.title || '(Unnamed)') + ' [autosaved]';
		},
		onSave: function (name) {
			changeHash(name);
			document.title = this.document || this.title || '(Unnamed)';
		},
		onOpen: function (name) {
			changeHash(name);
			document.title = this.document || this.title || '(Unnamed)';
		},
		onNew: function () {
			changeHash(null);
			document.title = '(Unnamed)';
		}
	});
}
catch (e) {
	Outliner.showError(e);
}

if (Outliner.SUPPORTS_LOCAL_STORAGE) {
	window.onhashchange = function (event) {
		event = event || window.event;

		var name = Outliner.getDocumentFromHash();
		if (outliner.changed || outliner.document !== name) {
			try {
				outliner.load(name);
			}
			catch (e) {
				changeHash(outliner.document);
				Outliner.showError(e);
			}
		}
	};
}

window.onbeforeunload = function () {
	if (outliner.changed) {
		return 'Do you really want to leave this page and lose all unsaved changes?';
	}
};

if (Outliner.SUPPORTS_LOCAL_STORAGE) {
	window.onunload = function () {
		if (outliner.document) {
			Outliner.setSetting('last', outliner.document);
		}
	};
}

window.addEventListener('resize', position, false);

window.addEventListener('focus', function (event) {
	if (!outliner.disabled &&
			(document.activeElement == document.body ||
			document.activeElement == document.documentElement)) {
		var sel = Outliner.getSelection();
		
		if (sel.length == 0) {
			if (Outliner.lastActive) {
				Outliner.lastActive.focus();
				if (Outliner.lastSelection) {
					Outliner.lastActive.selection = Outliner.lastSelection;
				}
			}
			else {
				outliner.focus();
			}
		}
		else if (sel.length == 1 && sel[0].startNode == sel[0].endNode) {
			// selects whole line in Firefox :/
			Outliner.selectMultiple(sel);
		}
	}
}, false);
// -->
</script>
</head>
<body>
<div id="outliner"></div>
</body>
</html>