cleaned up some core app methods, and separated the demo and demo fil…

…es to make a more realistic example scenario
filamentgroup · Apr 10, 2012 · 65aa130 · 65aa130
1 parent fe4a192
commit 65aa130
Show file tree

Hide file tree

Showing 13 changed files with 138 additions and 79 deletions.
diff --git a/.htaccess b/.htaccess
@@ -2,7 +2,7 @@
 # this allows for urls like this: "/path/to/file.html,path/to/fileb.html=concat"
 # or wrapped, "/path/to/file.html,path/to/fileb.html=concat&wrap"
 RewriteEngine On
-RewriteRule ^([^\?]+)=concat(&wrap)?$ _concat/quickconcat.php?files=$1$2
+RewriteRule ^([^\?]+)=concat(&wrap)?$ quickconcat.php?files=$1$2
 
 # compress transfer
 <IfModule mod_deflate.c>

diff --git a/README.md b/README.md
@@ -7,6 +7,4 @@ A progressive enhancement bootstrapping pattern.
 
 ## API
 
-TODO!
 
-...for now, check out `tmpl.html`, and `_js/_lib/app.js` and `_/js/app.enhance.js`
diff --git a/_demo.html b/_demo.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<!--[if (lt IE 8)]><html lang="en" class="ieOld"><![endif]-->
+<!--[if IE 8]><html lang="en" class="ie8"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Sample template</title>
+		<link href="_demo/sample-files/general.css" rel="stylesheet" />
+		<script src="app.js,_demo/app.enhance.js=concat"></script>
+	</head>
+	<body class="tmpl-home">
+		<h1>This is a sample template.</h1>
+		<p class="explain">It includes app.js and an example file: app.enhance.js, which uses app.js to determine whether - and which - files should be added to enhance this browser's experience.</p>
+		<p class="">
+	</body>
+</html>
diff --git a/_demo/app.enhance.js b/_demo/app.enhance.js
@@ -0,0 +1,66 @@
+/*
+	app.enhance: this example file uses the app.js api to:
+		 * determine whether a browser is qualified for enhancements
+		 * define available CSS and JS assets
+		 * test features and device conditions and environment to determine which files to load
+		 * load those files via a single concatenated call
+*/
+(function( win ){
+
+	//re-reference app var locally
+	var app = win.app;
+
+	// Add your qualifications for major browser experience divisions here.
+	// For example, you might choose to only enhance browsers that support document.querySelectorAll (IE8+, etc).
+	// Use case will vary, but basic browsers: last stop here!
+	if( !"querySelectorAll" in win.document ){
+		return;
+	}
+
+	// Configure css and js paths, if desirable.
+	app.basepath.js = app.basepath.css = "_demo/sample-files/";
+
+	// Define potential JS files for loading
+	app.files.js = {
+		general	: "generalenhancements.js",
+		touch	: "touch.js",
+		widescreen	: "widescreen.js"
+	};
+
+	// Define potential CSS files for loading
+	app.files.css = {
+		sample		: "sample1.css"
+	};
+
+	// Start queueing files for load. 
+	// Pass js or css paths one at a time to app.addFile 
+
+	// Add general js enhancements to all qualified browsers
+	app.addFile( app.files.js.general );
+
+	// if touch events are supported, add touch file
+	if( "ontouchend" in win.document ){
+		app.addFile( app.files.js.touch );
+	}
+
+	// if screen is wider than 500px, add widescreen file
+	if( screen.width > 500 ){
+		app.addFile( app.files.js.widescreen );
+	}
+
+	// add a CSS file if the body has a class of "tmpl-home" 
+	// (beware: don't rely on loading CSS this way for styles that need to apply at page load or you'll get a FOUC)
+
+	// Note: since we're using hasClass to check if the body element has a class or not, we need to wrap all remaining logic in a call to app.isDefined
+	app.bodyready( function(){
+
+		if( app.hasClass( win.document.body, "tmpl-home" ) ){
+			app.addFile( app.files.css.sample );
+		}
+
+		// Load the files, enhance page
+		app.enhance();
+
+	});
+
+}( window ));
diff --git a/_demo/sample-files/general.css b/_demo/sample-files/general.css
@@ -0,0 +1,8 @@
+body {
+	font-family: sans-serif;
+	margin: 50px 30%;
+}
+.explain {
+	border-bottom: 1px dotted #fff;
+	padding-bottom: 2em;
+}
diff --git a/_demo/sample-files/generalenhancements.js b/_demo/sample-files/generalenhancements.js
@@ -0,0 +1,5 @@
+// NOTE: the real contents of this file would actually do something useful.
+// for demo purposes, it logs a message to the page.
+var p = document.createElement( "p" );
+p.innerHTML = "generalenhancements.js was loaded because it is meant for all enhanced browsers";
+document.body.appendChild( p );
diff --git a/_demo/sample-files/sample1.css b/_demo/sample-files/sample1.css
@@ -0,0 +1 @@
+body { background: green; color: white; }
diff --git a/_demo/sample-files/touch.js b/_demo/sample-files/touch.js
@@ -0,0 +1,5 @@
+// NOTE: the real contents of this file would actually do something useful.
+// for demo purposes, it logs a message to the page.
+var p = document.createElement( "p" );
+p.innerHTML = "generalenhancements.js was loaded because touch events are supported";
+document.body.appendChild( p );
diff --git a/_demo/sample-files/widescreen.js b/_demo/sample-files/widescreen.js
@@ -0,0 +1,5 @@
+// NOTE: the real contents of this file would actually do something useful.
+// for demo purposes, it logs a message to the page.
+var p = document.createElement( "p" );
+p.innerHTML = "widescreen.js was loaded because the screen width is greater than 500px";
+document.body.appendChild( p );
diff --git a/_js/app.enhance.js b/_js/app.enhance.js
diff --git a/_js/_lib/app.js → app.js b/_js/_lib/app.js → app.js
@@ -20,24 +20,36 @@
 	app.oldIE = app.hasClass( docElem, "ieOld" );
 	app.ie8 = app.hasClass( docElem, "ie8" );
 
-	// Callback for running body-element-dependent logic
-	app.bodyready = (function(){
-		var callbackStack = [],
-			checkRun = function( callback ){
-				if( callback ){
-					callbackStack.push( callback );
-				}
-				if( doc.body ){
-					while( callbackStack[0] && typeof( callbackStack[0] ) === "function" ){
-						callbackStack.shift().call( w );
-					}
-				}
-				else{
-					setTimeout(checkRun, 15); 
+	// Callback for running logic dependent on a property being defined
+	// You can use isDefined to run code as soon as the document.body is defined, for example, for body-dependent scripts
+	// or, for a script that's loaded asynchronously that depends on other scripts, such as jQuery.
+	// First argument is the property that must be defined, second is the callback function
+	app.onDefine = function( prop, callback ){
+		var callbackStack 	= [];
+
+		if( callback ){
+			callbackStack.push( callback );
+		}
+
+		function checkRun(){
+			if( eval( prop ) ){
+				while( callbackStack[0] && typeof( callbackStack[0] ) === "function" ){
+					callbackStack.shift().call( w );
 				}
-			};
-			return checkRun;
-	})();
+			}
+			else{
+				setTimeout(checkRun, 15); 
+			}
+		};
+
+		checkRun();
+	};
+
+	// shortcut of isDefine body-specific 
+	app.bodyready = function( callback ){
+		app.onDefine( "document.body", callback );
+	};
+
 
 	//private style load function
 	function css( href, media ){

diff --git a/_concat/quickconcat.php → quickconcat.php b/_concat/quickconcat.php → quickconcat.php
@@ -9,7 +9,7 @@
 // List of files, comma-separated paths
 $filelist = $_REQUEST[ "files" ];
 // If needed, you can add a url prefix here for files, like "../"
-$baseurl = "../";
+$baseurl = "";
 
 // Enclose each result in an element node with url attribute?
 $wrap = isset( $_REQUEST[ "wrap" ] );

diff --git a/sample.html b/sample.html