Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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
2  .htaccess
@@ -2,7 +2,7 @@
2 2 # this allows for urls like this: "/path/to/file.html,path/to/fileb.html=concat"
3 3 # or wrapped, "/path/to/file.html,path/to/fileb.html=concat&wrap"
4 4 RewriteEngine On
5   -RewriteRule ^([^\?]+)=concat(&wrap)?$ _concat/quickconcat.php?files=$1$2
  5 +RewriteRule ^([^\?]+)=concat(&wrap)?$ quickconcat.php?files=$1$2
6 6
7 7 # compress transfer
8 8 <IfModule mod_deflate.c>
2  README.md
Source Rendered
@@ -7,6 +7,4 @@ A progressive enhancement bootstrapping pattern.
7 7
8 8 ## API
9 9
10   -TODO!
11 10
12   -...for now, check out `tmpl.html`, and `_js/_lib/app.js` and `_/js/app.enhance.js`
17 _demo.html
... ... @@ -0,0 +1,17 @@
  1 +<!DOCTYPE html>
  2 +<!--[if (lt IE 8)]><html lang="en" class="ieOld"><![endif]-->
  3 +<!--[if IE 8]><html lang="en" class="ie8"> <![endif]-->
  4 +<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
  5 + <head>
  6 + <meta charset="utf-8">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1">
  8 + <title>Sample template</title>
  9 + <link href="_demo/sample-files/general.css" rel="stylesheet" />
  10 + <script src="app.js,_demo/app.enhance.js=concat"></script>
  11 + </head>
  12 + <body class="tmpl-home">
  13 + <h1>This is a sample template.</h1>
  14 + <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>
  15 + <p class="">
  16 + </body>
  17 +</html>
66 _demo/app.enhance.js
... ... @@ -0,0 +1,66 @@
  1 +/*
  2 + app.enhance: this example file uses the app.js api to:
  3 + * determine whether a browser is qualified for enhancements
  4 + * define available CSS and JS assets
  5 + * test features and device conditions and environment to determine which files to load
  6 + * load those files via a single concatenated call
  7 +*/
  8 +(function( win ){
  9 +
  10 + //re-reference app var locally
  11 + var app = win.app;
  12 +
  13 + // Add your qualifications for major browser experience divisions here.
  14 + // For example, you might choose to only enhance browsers that support document.querySelectorAll (IE8+, etc).
  15 + // Use case will vary, but basic browsers: last stop here!
  16 + if( !"querySelectorAll" in win.document ){
  17 + return;
  18 + }
  19 +
  20 + // Configure css and js paths, if desirable.
  21 + app.basepath.js = app.basepath.css = "_demo/sample-files/";
  22 +
  23 + // Define potential JS files for loading
  24 + app.files.js = {
  25 + general : "generalenhancements.js",
  26 + touch : "touch.js",
  27 + widescreen : "widescreen.js"
  28 + };
  29 +
  30 + // Define potential CSS files for loading
  31 + app.files.css = {
  32 + sample : "sample1.css"
  33 + };
  34 +
  35 + // Start queueing files for load.
  36 + // Pass js or css paths one at a time to app.addFile
  37 +
  38 + // Add general js enhancements to all qualified browsers
  39 + app.addFile( app.files.js.general );
  40 +
  41 + // if touch events are supported, add touch file
  42 + if( "ontouchend" in win.document ){
  43 + app.addFile( app.files.js.touch );
  44 + }
  45 +
  46 + // if screen is wider than 500px, add widescreen file
  47 + if( screen.width > 500 ){
  48 + app.addFile( app.files.js.widescreen );
  49 + }
  50 +
  51 + // add a CSS file if the body has a class of "tmpl-home"
  52 + // (beware: don't rely on loading CSS this way for styles that need to apply at page load or you'll get a FOUC)
  53 +
  54 + // 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
  55 + app.bodyready( function(){
  56 +
  57 + if( app.hasClass( win.document.body, "tmpl-home" ) ){
  58 + app.addFile( app.files.css.sample );
  59 + }
  60 +
  61 + // Load the files, enhance page
  62 + app.enhance();
  63 +
  64 + });
  65 +
  66 +}( window ));
8 _demo/sample-files/general.css
... ... @@ -0,0 +1,8 @@
  1 +body {
  2 + font-family: sans-serif;
  3 + margin: 50px 30%;
  4 +}
  5 +.explain {
  6 + border-bottom: 1px dotted #fff;
  7 + padding-bottom: 2em;
  8 +}
5 _demo/sample-files/generalenhancements.js
... ... @@ -0,0 +1,5 @@
  1 +// NOTE: the real contents of this file would actually do something useful.
  2 +// for demo purposes, it logs a message to the page.
  3 +var p = document.createElement( "p" );
  4 +p.innerHTML = "generalenhancements.js was loaded because it is meant for all enhanced browsers";
  5 +document.body.appendChild( p );
1  _demo/sample-files/sample1.css
... ... @@ -0,0 +1 @@
  1 +body { background: green; color: white; }
5 _demo/sample-files/touch.js
... ... @@ -0,0 +1,5 @@
  1 +// NOTE: the real contents of this file would actually do something useful.
  2 +// for demo purposes, it logs a message to the page.
  3 +var p = document.createElement( "p" );
  4 +p.innerHTML = "generalenhancements.js was loaded because touch events are supported";
  5 +document.body.appendChild( p );
5 _demo/sample-files/widescreen.js
... ... @@ -0,0 +1,5 @@
  1 +// NOTE: the real contents of this file would actually do something useful.
  2 +// for demo purposes, it logs a message to the page.
  3 +var p = document.createElement( "p" );
  4 +p.innerHTML = "widescreen.js was loaded because the screen width is greater than 500px";
  5 +document.body.appendChild( p );
43 _js/app.enhance.js
... ... @@ -1,43 +0,0 @@
1   -/*
2   - app.enhance: this site-specific file uses the app.js api to:
3   - * determine whether a browser is qualified for enhancements
4   - * define available CSS and JS assets
5   - * test features and device conditions and environment to determine which files to load
6   - * load those files via a single concatenated call
7   -*/
8   -(function( win ){
9   - //re-reference app var locally
10   - var app = win.app;
11   -
12   - //basic browsers: last stop here!
13   - if( !"querySelectorAll" in win.document ){
14   - return;
15   - }
16   -
17   - // Configure css and js paths
18   - app.basepath.js = "_js/";
19   - app.basepath.css = "_css/";
20   -
21   - // Define potential JS files for loading
22   - app.files.js = {
23   - //foo : "bar.js"
24   - };
25   -
26   - // Define potential CSS files for loading
27   - app.files.css = {
28   - //foo : "bar.css"
29   - };
30   -
31   - // Start queueing files for load.
32   - // Pass js or css paths one at a time to app.addFile
33   - // Example:
34   - // app.addFile( app.files.js.foo );
35   - // app.addFile( app.files.css.foo );
36   -
37   - // Note: if you need to use hasClass to check if the body element has a class or not,
38   - // wrap all remaining logic in a call to app.bodyready
39   -
40   - // Load the files
41   - app.enhance();
42   -
43   -}( window ));
46 _js/_lib/app.js → app.js
@@ -20,24 +20,36 @@
20 20 app.oldIE = app.hasClass( docElem, "ieOld" );
21 21 app.ie8 = app.hasClass( docElem, "ie8" );
22 22
23   - // Callback for running body-element-dependent logic
24   - app.bodyready = (function(){
25   - var callbackStack = [],
26   - checkRun = function( callback ){
27   - if( callback ){
28   - callbackStack.push( callback );
29   - }
30   - if( doc.body ){
31   - while( callbackStack[0] && typeof( callbackStack[0] ) === "function" ){
32   - callbackStack.shift().call( w );
33   - }
34   - }
35   - else{
36   - setTimeout(checkRun, 15);
  23 + // Callback for running logic dependent on a property being defined
  24 + // You can use isDefined to run code as soon as the document.body is defined, for example, for body-dependent scripts
  25 + // or, for a script that's loaded asynchronously that depends on other scripts, such as jQuery.
  26 + // First argument is the property that must be defined, second is the callback function
  27 + app.onDefine = function( prop, callback ){
  28 + var callbackStack = [];
  29 +
  30 + if( callback ){
  31 + callbackStack.push( callback );
  32 + }
  33 +
  34 + function checkRun(){
  35 + if( eval( prop ) ){
  36 + while( callbackStack[0] && typeof( callbackStack[0] ) === "function" ){
  37 + callbackStack.shift().call( w );
37 38 }
38   - };
39   - return checkRun;
40   - })();
  39 + }
  40 + else{
  41 + setTimeout(checkRun, 15);
  42 + }
  43 + };
  44 +
  45 + checkRun();
  46 + };
  47 +
  48 + // shortcut of isDefine body-specific
  49 + app.bodyready = function( callback ){
  50 + app.onDefine( "document.body", callback );
  51 + };
  52 +
41 53
42 54 //private style load function
43 55 function css( href, media ){
2  _concat/quickconcat.php → quickconcat.php
@@ -9,7 +9,7 @@
9 9 // List of files, comma-separated paths
10 10 $filelist = $_REQUEST[ "files" ];
11 11 // If needed, you can add a url prefix here for files, like "../"
12   -$baseurl = "../";
  12 +$baseurl = "";
13 13
14 14 // Enclose each result in an element node with url attribute?
15 15 $wrap = isset( $_REQUEST[ "wrap" ] );
15 sample.html
... ... @@ -1,15 +0,0 @@
1   -<!DOCTYPE html>
2   -<!--[if (lt IE 8)]><html lang="en" class="ieOld"><![endif]-->
3   -<!--[if IE 8]><html lang="en" class="ie8"> <![endif]-->
4   -<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
5   - <head>
6   - <meta charset="utf-8">
7   - <meta name="viewport" content="width=device-width, initial-scale=1">
8   - <title>Sample template</title>
9   - <script src="_js/_lib/app.js,_js/app.enhance.js=concat"></script>
10   - </head>
11   - <body class="type-test type-test2">
12   -
13   -
14   - </body>
15   -</html>

0 comments on commit 65aa130

Please sign in to comment.
Something went wrong with that request. Please try again.