improvements to cheatsheet.

Signed-off-by: Grant Skinner <[email protected]>

Author: gskinner

Gruntfile.js

@@ -79,7 +79,7 @@ module.exports = function (grunt) {
 			run: {
 				options: {
 					compass: true,
-					// In prep-tasks, we change the style for a build, to compressed;
+					// In prep-tasks, we change the style for a build, to nested;
 					style: "nested", // Can be nested, compact, compressed, expanded
 					"line-numbers": true,
 					precision: 2,
@@ -190,7 +190,7 @@ module.exports = function (grunt) {
 				}
 			});
 		}
-
+		
 		if (missing.length) {
 			// \x07 == beep sound in the terminal.
 			grunt.log.warn("\x07Missing ", missing.length + " scripts.\n\t" + missing.join("\n\t"));

index.html

@@ -163,25 +163,31 @@ <h1 class="substitution-title">Substitution</h1>
 	</div>
 	<div id="cheatsheet">
 		<table class="cheatsheet">
-			<tr><td>.</td><td>any char except newline</td></tr>
-			<tr><td>\w \d \s</td><td>word, digit, space char</td></tr>
-			<tr><td>\W \D \S</td><td>NOT word, digit, space char</td></tr>
+			<tr><th colspan="2" onclick="regexr.libView.show('charclasses')">Character classes</th></tr>
+			<tr><td>.</td><td>any except newline</td></tr>
+			<tr><td>\w \d \s</td><td>word, digit, space</td></tr>
+			<tr><td>\W \D \S</td><td>NOT word, digit, space</td></tr>
 			<tr><td>[abc]</td><td>any of a, b, or c</td></tr>
 			<tr><td>[^abc]</td><td>NOT a, b, or c</td></tr>
-			<tr><td>[a-g]</td><td>a char between a & g</td></tr>
+			<tr><td>[a-g]</td><td>between a & g</td></tr>
 
+			<tr><th colspan="2" onclick="regexr.libView.show('anchors')">Anchors</th></tr>
 			<tr><td>^ $</td><td>start / end of the string</td></tr>
 			<tr><td>\b</td><td>word boundary</td></tr>
 
-			<tr><td>\. \* \\</td><td>escaped special chars</td></tr>
+			<tr><th colspan="2" onclick="regexr.libView.show('escchars')">Escaped characters</th></tr>
+			<tr><td>\. \* \\</td><td>escaped special characters</td></tr>
+			<tr><td>\t \n \r</td><td>tab, linefeed, carriage return</td></tr>
 			<tr><td>\u00A9</td><td>unicode escaped &copy;</td></tr>
 
+			<tr><th colspan="2" onclick="regexr.libView.show('groups')">Groups & Lookaround</th></tr>
 			<tr><td>(abc)</td><td>capture group</td></tr>
-			<tr><td>\1 \2</td><td>backreference to capture group</td></tr>
+			<tr><td>\1</td><td>backreference (group 1)</td></tr>
 			<tr><td>(?:abc)</td><td>non-capturing group</td></tr>
 			<tr><td>(?=abc)</td><td>positive lookahead</td></tr>
 			<tr><td>(?!abc)</td><td>negative lookahead</td></tr>
 
+			<tr><th colspan="2" onclick="regexr.libView.show('quants')">Quantifiers & Alternation</th></tr>
 			<tr><td>a+</td><td>one or more</td></tr>
 			<tr><td>a*</td><td>zero or more</td></tr>
 			<tr><td>a?</td><td>zero or one</td></tr>

js/documentation.js

@@ -75,6 +75,7 @@ var library = {
 		kids: [
 			{
 			label: "Character classes",
+			id: "charclasses",
 			desc: "Character classes match a character from a specific set. There are a number of predefined character classes and you can also define your own sets.",
 			kids: [
 				{
@@ -160,6 +161,7 @@ var library = {
 
 			{
 			label:"Anchors",
+			id:"anchors",
 			desc:"Anchors are unique in that they match a position within a string, not a character.",
 			kids:[
 				{
@@ -198,6 +200,7 @@ var library = {
 			},
 			{
 			label: "Escaped characters",
+			id:"escchars",
 			desc: "Some characters have special meaning in regular expressions and must be escaped. All escaped characters begin with the <code>\\</code> character.<br/><br/> Within a character set, only <code>\\</code>, <code>-</code>, and <code>]</code> need to be escaped.",
 			kids: [
 				{
@@ -233,6 +236,7 @@ var library = {
 			},
 			{
 			label: "Groups & Lookaround",
+			id:"groups",
 			desc: "Groups allow you to combine a sequence of tokens to operate on them together. Capture groups can be referenced by a backreference and accessed separately in the results."+
 				 "<hr/>Lookaround lets you match a group without including it in the result.",
 			kids: [
@@ -288,6 +292,7 @@ var library = {
 			},
 			{
 			label: "Quantifiers & Alternation",
+			id:"quants",
 			desc: "Quantifiers indicate that the preceding token must be matched a certain number of times. By default, quantifiers are greedy, and will match as many characters as possible."+
 				"<hr/>Alternation acts like a boolean OR, matching one sequence or another.",
 			kids: [
@@ -419,7 +424,7 @@ var library = {
 		},
 		{
 		id:"cheatsheet",
-		label: "Cheat Sheet",
+		label: "Cheatsheet",
 		max:true,
 		kids:[],
 		icon: "&#xE072;",

js/index.template.js

@@ -34,6 +34,7 @@ SOFTWARE.
 	var p = s.prototype = {};
 	p._ctaAnimation = null;
 	p.docView = null;
+	p.libView = null;
 
 	p.init = function () {
 
@@ -77,6 +78,7 @@ SOFTWARE.
 		docView.resetHistory();
 
 		var libView = new LibView($.el("#libview"), Docs.content.library);
+		this.libView = libView;
 
 		libView.docView = docView;
 		docView.libView = libView;

js/views/LibView.js

@@ -128,7 +128,6 @@ SOFTWARE.
 
 		if (item.max) {
 			$.addClass(this.content, "maximized");
-			console.log("max");
 		} else {
 			$.removeClass(this.content, "maximized");
 		}

scss/views/libView.scss

@@ -144,19 +144,21 @@ table.cheatsheet {
 	position: relative;
 	border-spacing: 0;
 
-	td {
-		margin:0;
-		padding:0;
-		border:0;
+	th {
+		@extend %user-select-none;
+		cursor: pointer;
+		background: rgba(255,255,255,0.06);
+		text-align: left;
+		padding: 0.25rem 0.25rem 0.25rem 0.375rem;
+		
+		&:hover {
+			color:$white;
+		}
 	}
 
 	td:first-child {
 		font-family: $monospace;
 		color: $white;
-		padding-right: 0.5em;
-	}
-	
-	tr:nth-child(odd) {
-		background: rgba(255,255,255,0.02);
+		padding-right: 0.25em;
 	}
 }