Fakerator test page

Fakerator is a fake data generator library. https://github.com/icebob/fakerator

by icebob

HTML

<script src="https://rawgit.com/icebob/fakerator/master/dist/fakerator.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script src="https://buttons.github.io/buttons.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css">
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/google/code-prettify/master/src/prettify.css">
<h1>
	Fakerator test page
	<div>
		<a class="github-button" href="https://github.com/icebob/fakerator" data-icon="octicon-star" data-count-href="/icebob/fakerator/stargazers" data-count-api="/repos/icebob/fakerator#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star icebob/fakerator on GitHub">Star</a>
		<a class="github-button" href="https://github.com/icebob/fakerator/fork" data-icon="octicon-repo-forked" data-count-href="/icebob/fakerator/network" data-count-api="/repos/icebob/fakerator#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork icebob/fakerator on GitHub">Fork</a>
	</div>
</h1>
<a href="https://github.com/icebob/fakerator"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
<div id="container">
	<div class="install">
		<h2>
			Initialize
		</h2>
		<pre>&lt;script src="https://rawgit.com/icebob/fakerator/master/dist/fakerator.js"&gt;&lt;/script&gt;</pre>
		<pre>var fakerator = new Fakerator();</pre>
	
	</div>
	
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&subset=latin,latin-ext);

html {
	font-family: "Source Sans Pro";
	font-size: 14px;
}

h1 {
	text-align: center;
	
	div {
		display: block;
		font-size: 0.7em;
		color: Black;
		font-weight: 400;
	}
}

#container {
	margin: 2em;
}

.install {
		pre {
			display: block;
			margin-left: 1em;		
			padding: 0.5em;
			border: 1px solid #999;
			background-color: #EEE;
			border-radius: 4px;
		}	
}

.category {
	margin-bottom: 4em;
	
	h2 {
		border-bottom: 1px solid #333;
	}
	
	.test {
		margin-left: 1em;
		margin-bottom: 2em;
		
		h3 {
			
		}
		
		.syntax {
			span {
				display: block;
			}
			pre {
				display: inline-block;
				margin-left: 1em;		
				padding: 0.5em;
				border: 1px solid #999;
				background-color: #EEE;
				border-radius: 4px;
			}
		}
		
		.result {
			> span {
				display: block;
			}
			pre {
				margin-left: 1em;		
				padding: 0.5em;
				border: 1px solid #BBB;
				background-color: #F0F0F0;
				border-radius: 4px;
				
				white-space: pre-wrap;
				
        .string { color: #885800; }
        .number { color: blue; }
        .boolean { color: magenta; }
        .null { color: red; }
        .key { color: green; }  
				
			}
		}		
	}	
}

JavaScript

function prettyJSON(json) {
		if (json) {
				json = JSON.stringify(json, undefined, 4);
				json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
				return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
						var cls = 'number';
						if (/^"/.test(match)) {
								if (/:$/.test(match)) {
										cls = 'key';
								} else {
										cls = 'string';
								}
						} else if (/true|false/.test(match)) {
								cls = 'boolean';
						} else if (/null/.test(match)) {
								cls = 'null';
						}
						return '<span class="' + cls + '">' + match + '</span>';
				});
		}
}

$(function() {
	var fakerator = new Fakerator();

	var container = $("#container");
	$.each(Object.keys(fakerator.locale), function(i, category) {
		if (category !== "_meta") {
			var catDiv = $("<div/>").addClass("category");
			catDiv.append( $("<h2/>").text(category) );

			$.each(Object.keys(fakerator.locale[category]), function(i, item) {
				var itemDiv = $("<div/>").addClass("test").appendTo(catDiv);
				itemDiv.append( $("<h3/>").text(item) );
				itemDiv.append( 
					$("<div/>").addClass("syntax").append([
						$("<span/>").text("Syntax:"),
						$("<pre/>").append(
							$("<code/>").addClass("prettyprint").text("fakerator." + category + "." + item + "();")
						)
					])
				);				

				var res = fakerator[category][item]();
				var resType = typeof(res);
				if (resType == "object")
					res = prettyJSON(res);

				itemDiv.append( 
					$("<div/>").addClass("result").append([
						$("<span/>").text("Result (" + resType + "):"),
						$("<pre/>").html(res)
					])
				);
			});

			catDiv.appendTo(container);
		}
	});

});