Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

…es to make a more realistic example scenario
  • Loading branch information...
commit 65aa130b8cdaa4209ac264a5acabca13c379090e 1 parent fe4a192
scottjehl authored
View
2  .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>
View
2  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`
View
17 _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>
View
66 _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 ));
View
8 _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;
+}
View
5 _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 );
View
1  _demo/sample-files/sample1.css
@@ -0,0 +1 @@
+body { background: green; color: white; }
View
5 _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 );
View
5 _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 );
View
43 _js/app.enhance.js
@@ -1,43 +0,0 @@
-/*
- app.enhance: this site-specific 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;
-
- //basic browsers: last stop here!
- if( !"querySelectorAll" in win.document ){
- return;
- }
-
- // Configure css and js paths
- app.basepath.js = "_js/";
- app.basepath.css = "_css/";
-
- // Define potential JS files for loading
- app.files.js = {
- //foo : "bar.js"
- };
-
- // Define potential CSS files for loading
- app.files.css = {
- //foo : "bar.css"
- };
-
- // Start queueing files for load.
- // Pass js or css paths one at a time to app.addFile
- // Example:
- // app.addFile( app.files.js.foo );
- // app.addFile( app.files.css.foo );
-
- // Note: if you need to use hasClass to check if the body element has a class or not,
- // wrap all remaining logic in a call to app.bodyready
-
- // Load the files
- app.enhance();
-
-}( window ));
View
46 _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 ){
View
2  _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" ] );
View
15 sample.html
@@ -1,15 +0,0 @@
-<!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>
- <script src="_js/_lib/app.js,_js/app.enhance.js=concat"></script>
- </head>
- <body class="type-test type-test2">
-
-
- </body>
-</html>
Please sign in to comment.
Something went wrong with that request. Please try again.