allow toggling criteria on/off - closes #10

also added nicer CSS syntax, h/t @xinsight
garann · Jun 6, 2013 · 5285001 · 5285001
1 parent ad4f1ff
commit 5285001
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 61 deletions.
diff --git a/index.html b/index.html
@@ -9,39 +9,39 @@
 		<a href="https://github.com/garann/template-chooser" class="forkme"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
 		<h1>Template-Engine-Chooser!</h1>
 		<div class="criteria">
-			<fieldset class="off">
+			<fieldset>
 				<legend>Is this for use on the client or the server?</legend>
 				<label>client <input type="radio" name="radSide" value="client-side" /></label>
 				<label>server <input type="radio" name="radSide" value="server-side" /></label>
 				<label>both <input type="radio" name="radSide" value="client-side.server-side" /></label>
 			</fieldset>
-			<fieldset class="off">
+			<fieldset>
 				<legend>How much logic should it have?</legend>
 				<label>the entirety of JS <input type="radio" name="radLogic" value="logicful" /></label>
 				<label>just the basics <input type="radio" name="radLogic" value="logicish" /></label>
 				<label>none at all <input type="radio" name="radLogic" value="logicless" /></label>
 			</fieldset>
-			<fieldset class="off">
+			<fieldset>
 				<legend>Does it need to be one of the very fastest?</legend>
 				<label>yes <input type="radio" name="radSpeed" value="speedy" /></label>
 				<label>no <input type="radio" name="radSpeed" value="" /></label>
 			</fieldset>
-			<fieldset class="off">
+			<fieldset>
 				<legend>Do you need to pre-compile templates?</legend>
 				<label>yes <input type="radio" name="radCompile" value="compile" /></label>
 				<label>no <input type="radio" name="radCompile" value="" /></label>
 			</fieldset>
-			<fieldset class="off">
+			<fieldset>
 				<legend>Do you need partials?</legend>
 				<label>yes <input type="radio" name="radParts" value="parts" /></label>
 				<label>no <input type="radio" name="radParts" value="" /></label>
 			</fieldset>
-			<fieldset class="off">
+			<fieldset>
 				<legend>Do you want a DOM structure, or just a string?</legend>
 				<label>DOM <input type="radio" name="radDom" value="dom" /></label>
 				<label>string <input type="radio" name="radDom" value="string" /></label>
 			</fieldset>
-			<fieldset class="off">
+			<fieldset>
 				<legend>Aside from template tags, should it be the same language before and after rendering?</legend>
 				<label>yes <input type="radio" name="radHtml" value="format" /></label>
 				<label>no <input type="radio" name="radHtml" value="not-format" /></label>

diff --git a/script.js b/script.js
@@ -111,44 +111,61 @@ var engines = [
 
 $( function () {
 	// render all engines
-	var tmpls = doT.template( $( "#tmplsTmpl" ).text() );
-	$( "div.engines" ).html( tmpls( { all: engines } ) );
+	var tmpls = doT.template( $( "#tmplsTmpl" ).text() ),
+		$eng = $( "div.engines" );
+	$eng.html( tmpls( { all: engines } ) );
 
 	$( "div.criteria" ).on( "click", "fieldset", function() {
 		var $t = $( this );
-		if ( $t.hasClass( "off" ) ) {
-			$t.removeClass( "off" ).addClass( "on" );
+		if ( $t.hasClass( "on" ) ) {
+			$t.removeClass( "on" );
+			removeSibs( $t.find( "label" ) );
+			updateClasses();
 		} else {
-			$t.addClass( "off" ).removeClass( "on" );
+			$t.addClass( "on" );
+			var curr = $t.find( "input:checked" );
+			if ( curr.length ) {
+				setCriteria( curr.parent() );
+			}
 		}
 	});
 	$( "div.criteria" ).on( "click", "label", function( e ) {
 		e.stopPropagation();
-		var $t = $( this ),
+		setCriteria( this );
+	});
+
+	function setCriteria( lbl ) {
+		var $t = $( lbl ),
 			cname = $t.find( "input" ).val(),
-			sibs = $t.siblings( "label" ),
-			removeIndex,
 			classes;
+
+		removeSibs( $t.siblings( "label" ) );
+		if ( cname.length ) {
+			$.each( cname.split( "." ), function( i, nm ) {
+				if ( chooser.choices.indexOf( nm ) === -1 ) {
+					chooser.choices.push( nm );
+				}
+			});
+		}
+		updateClasses();
+	}
+
+	function removeSibs( sibs ) {
+		var removeIndex;
+
 		$( sibs ).each( function() {
 			removeIndex = chooser.choices.indexOf( $( this ).find( "input" ).val() );
 			if ( removeIndex > -1 ) chooser.choices.splice( removeIndex, 1 );
 		});
-		if ( cname.length ) {
-			if ( cname.indexOf( "." ) > -1 ) {
-				$.each( cname.split( "." ), function( i, nm ) {
-					if ( chooser.choices.indexOf( nm ) === -1 ) {
-						chooser.choices.push( nm );
-					}
-				});
-			} else {
-				if ( chooser.choices.indexOf( cname ) === -1 ) {
-					chooser.choices.push( cname );
-				}
-			}
+	}
+
+	function updateClasses() {
+		if ( !chooser.choices.length ) {
+			$eng.find( "div.remove" ).addClass( "add" ).removeClass( "remove" );
+			return;
 		}
-		if ( !chooser.choices.length ) return;
 		classes = chooser.choices.join( "." );
-		$( "div.engines div:not(." + classes + ")" ).addClass( "remove" ).removeClass( "add" );
-		$( "div.engines div." + classes ).addClass( "add" ).removeClass( "remove" );
-	});
+		$eng.find( "div:not(." + classes + ")" ).addClass( "remove" ).removeClass( "add" );
+		$eng.find( "div." + classes ).addClass( "add" ).removeClass( "remove" );
+	}
 });
diff --git a/style.css b/style.css
@@ -29,11 +29,12 @@ body { background-attachment: fixed;
 h1 { padding: 10px; text-align: center; font-size: 72px; color: rgba(255,255,255,.6); text-shadow: 2px 2px 2px rgba(50,50,50,.3); }
 h2 { margin: 5px 0px; text-shadow: 2px 2px 2px rgba(50,50,50,.3); }
 fieldset { margin: 0px; padding: 0px; overflow: hidden; border: none; padding: 0px 10px 10px; }
-legend { background-color: #eee; color: #666; padding: 5px; width: 100%; cursor: pointer; }
+legend { background-color: #ccc; color: #666; padding: 5px; width: 100%; cursor: pointer; }
+legend:before { content: "▶ "; }
+label { display: none; }
+.on legend { background-color: #eee; }
 .on legend:before { content: "▼ "; }
-.off legend:before { content: "▶ "; }
 .on label { display: block; overflow: hidden; }
-.off label { display: none; }
 input { float: left; margin-top: .2em; font-size: 40px; }
 
 .forkme { display: block; position: absolute; top: 0; right: 0; border: 0; }
@@ -44,30 +45,17 @@ input { float: left; margin-top: .2em; font-size: 40px; }
 .engines span { letter-spacing: 0; color: #ccc; font-size: 16px; }
 .engines span { font-size: 14px; color: #666; }
 .engines a:hover { color: #fff; }
-.remove { -webkit-animation: laterz 1s 0s 1 forwards; -moz-animation: laterz 1s 0s 1 forwards; -o-animation: laterz 1s 0s 1 forwards; }
-.add { -webkit-animation: helloz 1s 0s 1 forwards; -moz-animation: helloz 1s 0s 1 forwards; -o-animation: helloz 1s 0s 1 forwards; }
-
-@-webkit-keyframes laterz {
-	from { opacity: 1; }
-	to { opacity: 0; }
-}
-@-webkit-keyframes helloz {
-	from { opacity: 0; }
-	to { opacity: 1; }
-}
-@-o-keyframes laterz {
-	from { opacity: 1; }
-	to { opacity: 0; }
-}
-@-o-keyframes helloz {
-	from { opacity: 0; }
-	to { opacity: 1; }
-}
-@-moz-keyframes laterz {
-	from { opacity: 1; }
-	to { opacity: 0; }
-}
-@-moz-keyframes helloz {
-	from { opacity: 0; }
-	to { opacity: 1; }
-}
+.remove {  
+	-webkit-transition: opacity 1s ease;
+    -moz-transition: opacity 1s ease; 
+    -o-transition: opacity 1s ease;
+    transition: opacity 1s ease; 
+    opacity: 0; 
+}
+.add { 
+	-webkit-transition: opacity 1s ease;
+    -moz-transition: opacity 1s ease; 
+    -o-transition: opacity 1s ease;
+    transition: opacity 1s ease; 
+    opacity: 1;
+}