preparing to merge master and gh-pages

Prinzhorn · Apr 23, 2012 · cf7f36f · cf7f36f
1 parent f99e284
commit cf7f36f
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 22 deletions.
diff --git a/demo-content/console-raw.png b/demo-content/console-raw.png
diff --git a/demo-content/console-this.png b/demo-content/console-this.png
diff --git a/demo-content/console-verbose-not.png b/demo-content/console-verbose-not.png
diff --git a/demo-content/console.png b/demo-content/console.png
diff --git a/demo-content/jquery.min.js b/demo-content/jquery.min.js
diff --git a/demo-content/style.css b/demo-content/style.css
@@ -0,0 +1,53 @@
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+	margin:0;
+	padding:0;
+}
+
+body {
+	background:#bbb fixed;
+	font-family:Arial,Helvetica,Verdana,sans-serif;
+
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#bbb)); /* Saf4+, Chrome */
+	background-image: -webkit-linear-gradient(top, #666 0%, #bbb 500px);
+	background-image:	 -moz-linear-gradient(top, #666 0%, #bbb 500px);
+	background-image:	  -ms-linear-gradient(top, #666 0%, #bbb 500px);
+	background-image:	   -o-linear-gradient(top, #666 0%, #bbb 500px);
+	background-image:		  linear-gradient(top, #666 0%, #bbb 500px);
+}
+
+p {margin:.5em 0;}
+
+a {color:#00f;}
+a:hover, a:visited:hover {color:#f00;}
+a:visited {color:#61c;}
+
+img {border:none;}
+
+h1, h2, h3, h4, h5, h6 {
+	margin:1em 0;
+}
+
+h1 {
+	padding-top:.5em;
+	border-top:1px dashed #999;
+}
+
+ol, ul {
+	padding-left:1.5em;
+}
+
+#wrapper {
+	position:relative;
+	width:940px;
+	margin:1em auto;
+	padding:1em;
+	background:#fff;
+
+	-moz-border-radius: 1em;
+	-webkit-border-radius: 1em;
+	border-radius: 1em;
+
+	-moz-box-shadow: 5px 5px 15px #333;
+	-webkit-box-shadow: 5px 5px 15px #333;
+	box-shadow: 5px 5px 15px #333;
+}
diff --git a/index.html b/index.html
@@ -3,39 +3,99 @@
 <head>
 	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
-	<title>jQuery inlog proof of concept</title>
+	<title>jQuery-inlog</title>
+
+	<link href="demo-content/style.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
-	<p>This file is just my playground while developing. Open your console to see some output.</p>
-	<div class="bar">
-		<div class="bar">
-			<div id="foo"></div>
-		</div>
+	<div id="wrapper">
+		<a href="https://github.com/Prinzhorn/jquery-inlog"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
+		<ul>
+			<li><a href="#about">About</a></li>
+			<li><a href="#live-example">tl;dr Example</a></li>
+			<li><a href="#example">Example</a></li>
+			<li><a href="#docs">Documentation / Reference</a></li>
+		</ul>
+
+
+		<h1 id="about">jQuery-inlog</h1>
+		<p><em>jQuery-inlog</em> allows you to easily debug your jQuery code. See <strong>exactly</strong> what you pass to functions, what they return and in which context (this-value) they were executed.</p>
+		<ul>
+			<li>No more alert($obj.length) to see if your selector worked.</li>
+			<li>No more pain when chaining many calls and figuring out which one fails</li>
+		</ul>
+		<p><strong><em>NEW: </em></strong>See nested or recursive calls in the right order. Wooot.</p>
+		<p>
+			<strong>Without changing any of your code!</strong>
+			I call it black-box magic. Or short: black magic. Or even shorter: js
+		</p>
+		<p>
+			The original idea came from <a href="https://github.com/fmsf/jQueryLog">https://github.com/fmsf/jQueryLog</a>,
+			which was a modified version of the jQuery core rather than a plugin at the time I started with jQuery-inlog.
+		</p>
+
+
+		<h1 id="live-example">tl;dr Example</h1>
+		<p>For those of you who can't wait or don't want to read the example.</p>
+		<ol>
+			<li>Open the Firebug console (hint: F12)</li>
+			<li>
+				Press this button <input type="button" id="btnExample" value="Hi, I'm a button" />
+				<input type="checkbox" id="cbHardcore" /><label for="cbHardcore">I'm hardcore (raw output)</label>
+			</li>
+			<li>The following code will then be run</li>
+		</ol>
+		<br />
+		<script src="https://gist.github.com/1528556.js?file=live-sample.js"></script>
+
+		<h1 id="example">Example</h1>
+
+		<p>Some random example with demo code</p>
+
+		<h2>The markup</h2>
+		<script src="https://gist.github.com/1528556.js?file=sample.html"></script>
+		<h2>The jQuery code</h2>
+		<script src="https://gist.github.com/1528556.js?file=sample.js"></script>
+
+		<h2>The magic on your console (default settings)</h2>
+		<img src="demo-content/console-verbose-not.png" alt="Console output with default settings" />
+
+		<h2>Verbose magic {maxDepth: -1}</h2>
+		<p><em>The last branch was expanded to see how much is getting logged</em></p>
+		<img src="demo-content/console.png" alt="Console output with maxDepth of -1" />
+
+		<h2>More verbose magic {maxDepth: -1, thisValue: true}</h2>
+		<img src="demo-content/console-this.png" alt="Console output with maxDepth of -1 and this-value enabled" />
+
+		<h2>Hardcore raw magic {rawOutput: true}</h2>
+		<img src="demo-content/console-raw.png" alt="Console output with raw-output enabled" />
+
+		<h1 id="docs">Documentation / Reference</h1>
+		<p>Include jquery.inlog.js after jQuery core and enable it by calling $.inlog(true) or $.inlog(options).</p>
+		<p>It's best practice to include $.inlog(false); right after the part you want to inspect.</p>
+		<h2>Options</h2>
+		<p>You can call $.inlog(options) any time to change options. Available options:</p>
+		<script src="https://gist.github.com/1528556.js?file=options.js"></script>
 	</div>
-	<div id="bacon"></div>
 
-	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+	<script type="text/javascript" src="demo-content/jquery.min.js"></script>
 	<script type="text/javascript" src="jquery.inlog.js"></script>
-
 	<script type="text/javascript">
 	/* <![CDATA[ */
-
 	$(function() {
-		$l({
-			enabled: true,
-			thisValue: true,
-			returnValue: true,
-			indent: true
-		});
+		var hardcore = $('#cbHardcore')[0];
 
-		//$('body').find('div');
-		//$('div').fadeOut();
-		$("#foo").parents(".bar").next().prev().parent().fadeOut(function() {
-			$(this).fadeIn();
-		});
+		$('#btnExample').click(function() {
+			$l({
+				enabled: true,
+				rawOutput: hardcore.checked
+			});
 
-		$l(false);
+			$('#about').siblings('h1').add('h2').css('color', 'red').end().text('Oh my! What did you do?');
+
+			$l(false);
+		});
 	});
 	/* ]]> */
 	</script>