FND/jquery_syslog.html

## jquery_syslog.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Testcase</title>
	<link rel="stylesheet" type="text/css" href="styles/main.css">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
	<script src="scripts/main.js" type="text/javascript"></script>
	<script type="text/javascript">
//-------------------------

/*
 * msg: log message
 * type: "info" (default), "warning", "error" or "debug" (not enforced)
 */
$.syslog = function(msg, type) {
	if(arguments.length == 0) { // shortcut for log access
		return $.syslog.log;
	}
	$.syslog.log.push({
		type: type || "info",
		timestamp: new Date(),
		message: msg
	});
};

$.syslog.log = [];

/*
 * msg: log message
 * options.container: container element
 * options.className: custom class
 * options.fadeDelay: time in milliseconds after which the message disappears
 */
$.syslog.notify = function(msg, options) { // XXX: separate plugin!?
	options = options || {};
	var container = options.container || document.body;
	var className = options.className || null;
	var fadeDelay = options.fadeDelay || null; // TODO: rename?
	var el = $("<div />").addClass(className).text(msg). // XXX: allow for HTML text (or at least a link)
		click(function() { $(this).fadeOut() }). // TODO: allow for custom animation?
		appendTo(container);
	if(fadeDelay) {
		setTimeout(function(ev) { el.fadeOut() }, fadeDelay); // TODO: allow for custom animation?
	}
};

//-------------------------

// DEBUG
$(function() {
	$.syslog("foo", "info");
	$.syslog("bar", "warning");
	$.syslog("baz", "error");
	$.syslog("xxx", "debug");
	var log = $.syslog();
	for(var i = 0; i < log.length; i++) {
		var item = log[i];
		$.syslog.notify(item.message, {
			className: item.type,
			fadeDelay: item.type == "info" ? 2000 : null
		});
	}
});

//-------------------------
	</script>
</head>

<body>
</body>

</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="en">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Testcase</title>
	<link rel="stylesheet" type="text/css" href="styles/main.css">
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
	<script src="scripts/main.js" type="text/javascript"></script>
	<script type="text/javascript">
	//-------------------------

	/*
	* msg: log message
	* type: "info" (default), "warning", "error" or "debug" (not enforced)
	*/
	$.syslog = function(msg, type) {
	if(arguments.length == 0) { // shortcut for log access
	return $.syslog.log;
	}
	$.syslog.log.push({
	type: type \|\| "info",
	timestamp: new Date(),
	message: msg
	});
	};

	$.syslog.log = [];

	/*
	* msg: log message
	* options.container: container element
	* options.className: custom class
	* options.fadeDelay: time in milliseconds after which the message disappears
	*/
	$.syslog.notify = function(msg, options) { // XXX: separate plugin!?
	options = options \|\| {};
	var container = options.container \|\| document.body;
	var className = options.className \|\| null;
	var fadeDelay = options.fadeDelay \|\| null; // TODO: rename?
	var el = $("<div />").addClass(className).text(msg). // XXX: allow for HTML text (or at least a link)
	click(function() { $(this).fadeOut() }). // TODO: allow for custom animation?
	appendTo(container);
	if(fadeDelay) {
	setTimeout(function(ev) { el.fadeOut() }, fadeDelay); // TODO: allow for custom animation?
	}
	};

	//-------------------------

	// DEBUG
	$(function() {
	$.syslog("foo", "info");
	$.syslog("bar", "warning");
	$.syslog("baz", "error");
	$.syslog("xxx", "debug");
	var log = $.syslog();
	for(var i = 0; i < log.length; i++) {
	var item = log[i];
	$.syslog.notify(item.message, {
	className: item.type,
	fadeDelay: item.type == "info" ? 2000 : null
	});
	}
	});

	//-------------------------
	</script>
	</head>

	<body>
	</body>

	</html>