Skip to content
Browse files

changed the namespace of the toolkit from "app" to "ejs"

  • Loading branch information...
1 parent e6cef10 commit f2eda78685e36a2fa814b4d9ae4bf9e3d81f552f scottjehl committed
Showing with 62 additions and 62 deletions.
  1. +23 −23 README.md
  2. +18 −18 _demo/app.enhance.js
  3. +21 −21 app.js
View
46 README.md
@@ -1,8 +1,8 @@
-# app
+# Enhance
A progressive enhancement bootstrapping utility and pattern.
-App is a small framework designed to determine if a browser is qualified for enhancements, and load specific enhancements for that browser via a single, concatenated request (one for CSS and one for JavaScript).
+Enhance is a small framework designed to determine if a browser is qualified for enhancements, and load specific enhancements for that browser via a single, concatenated request (one for CSS and one for JavaScript).
* Copyright 2012 @scottjehl, @beep, @wilto, @maggiewachs, Filament Group, Inc.
@@ -10,7 +10,7 @@ App is a small framework designed to determine if a browser is qualified for enh
## API
-All of `app`'s api is available via `window.app` or just `app`. From `app`, you can access the following publicly:
+All of the Enhance api is available via `window.ejs` or just `ejs`. From `ejs`, you can access the following publicly:
@@ -19,25 +19,25 @@ All of `app`'s api is available via `window.app` or just `app`. From `app`, you
- `files`: an object consisting of two empty child objects: `js` and `css`. These two objects are empty by default, and are intended for storing references to CSS** and JavaScript files that will potentially be loaded. You can reference them like so:
// list of available JS files
- app.files.js = {
+ ejs.files.js = {
jQuery: "js/jquery.js",
touchNormalization: "touch.js",
uiLogic: "js/myapp.js"
};
// list of available CSS files
- app.files.css = {
+ ejs.files.css = {
accountPanel: "css/account.css"
};
-- `basepath`: an object consisting of two empty strings: `js` and `css`. These can be used to store optional base file paths to CSS and JS directories. When in use, you can exclude those paths from references to files in `app.files.js` and `app.files.css`. Example:
+- `basepath`: an object consisting of two empty strings: `js` and `css`. These can be used to store optional base file paths to CSS and JS directories. When in use, you can exclude those paths from references to files in `ejs.files.js` and `ejs.files.css`. Example:
// reference to base javascript filepath
- app.basepath.js = "assets/js/";
+ ejs.basepath.js = "assets/js/";
// reference to base CSS filepath
- app.basepath.css = "assets/css/";
+ ejs.basepath.css = "assets/css/";
@@ -48,13 +48,13 @@ All of `app`'s api is available via `window.app` or just `app`. From `app`, you
- `hasClass`: check whether an element has a particular class or not. Returns a boolean result. Example:
// check if HTML element has class of "ie8"
- app.hasClass( document.documentElement, "home" );
+ ejs.hasClass( document.documentElement, "home" );
--> true | false
- `onDefine`: run a callback function as soon as a JS property is defined. Accepts 2 arguments: a string to be evaluated for definition, and a callback function to execute when that first string becomes defined. `onDefine` might be used to run a script when an element is ready for manipulation, such as checking if the `body` element has a particular class. Example:
- app.onDefine( "document.body", function(){
- if( app.hasClass( document.body, "home" ) ){
+ ejs.onDefine( "document.body", function(){
+ if( ejs.hasClass( document.body, "home" ) ){
// the body element has a class of "home"...
}
});
@@ -62,47 +62,47 @@ All of `app`'s api is available via `window.app` or just `app`. From `app`, you
- `bodyready`: run a callback function when the body element is defined. Accepts one argument: a callback function to execute when the `body` element becomes defined. This is merely a shortcut to the `onDefine` example above. Example:
- app.bodyReady( function(){
- if( app.hasClass( document.body, "home" ) ){
+ ejs.bodyready( function(){
+ if( ejs.hasClass( document.body, "home" ) ){
// the body element has a class of "home"...
}
} );
- `addFile`: add a CSS or JavaScript file to the queue for loading. This method accepts one argument, a string reference to a file. Example:
- app.addFile( "js/foo.js" );
- app.addFile( "css/foo.css" );
+ ejs.addFile( "js/foo.js" );
+ ejs.addFile( "css/foo.css" );
- `enhance`: load all queued CSS and JavaScript files via a single, concatenated request (per language). Example:
- app.enhance();
+ ejs.enhance();
### Additional Methods
-App has a few more methods that you might use.
+Enhance has a few more methods that you might use.
- `load`: Load a single CSS** or JavaScript file. This method accepts one argument, a string reference to a file. The type of file is determined by file extension. Example:
// Load a single css file
- app.load( "files/css/foo.css" );
+ ejs.load( "files/css/foo.css" );
// Load a single JavaScript file
- app.load( "files/js/foo.js" );
+ ejs.load( "files/js/foo.js" );
- `js`: Load a single JavaScript file. Useful if JS filetype can not be guessed by filetype. Example:
// Load a single JavaScript file
- app.css( "files/js/foo.php" );
+ ejs.css( "files/js/foo.php" );
- `css`: Load a single CSS file**. Useful if JS filetype can not be guessed by filetype. Example:
// Load a single CSS file
- app.css( "files/css/foo.php" );
+ ejs.css( "files/css/foo.php" );
** Note: dynamically loaded CSS is not guaranteed to render before the page content begins visually rendering (and thus, can cause a FOUC). Don't depend on it for styles that need to be there during initial page load.
@@ -110,9 +110,9 @@ App has a few more methods that you might use.
## Typical workflow
-While the `app` utility is very simple by itself; its real value is in the workflows it enables.
+While the Enhance core utility is very simple by itself; its real value is in the workflows it enables.
-Typically, a site that uses `app` will have two files driving the progressive enhancement process: `app.js`, and a custom file that uses the `app` API to configure and enhance the user experience: for example purposes, `app.enhance.js`. The role of `app.enhance.js` is to determine if – and with which files – a browser's experience should be enhanced. Within `app.enhance.js`, any of the following steps might be taken:
+Typically, a site that uses Enhance will have at least two files driving the progressive enhancement process: `app.js`, and a custom file that uses the `ejs` API to configure and enhance the user experience: for example purposes, `app.enhance.js`. The role of `app.enhance.js` is to determine if – and with which files – a browser's experience should be enhanced. Within `app.enhance.js`, any of the following steps might be taken:
* Determine if a browser is generally qualified enhancements and if not, exit early (perhaps by testing `document.querySelectorAll` support, or CSS3 Media Queries, or otherwise)
* Establish the CSS and JS files available for loading.
View
36 _demo/app.enhance.js
@@ -1,5 +1,5 @@
/*
- app.enhance: this example file uses the app.js api to:
+ ejs.enhance: this example file uses the ejs.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
@@ -7,13 +7,13 @@
*/
(function( win ){
- //re-reference app var locally
- var app = win.app,
+ //re-reference ejs var locally
+ var ejs = win.ejs,
docElem = win.document.documentElement;
// IE browser flags, based on conditional comments
- app.oldIE = app.hasClass( docElem, "ieOld" );
- app.ie8 = app.hasClass( docElem, "ie8" );
+ ejs.oldIE = ejs.hasClass( docElem, "ieOld" );
+ ejs.ie8 = ejs.hasClass( docElem, "ie8" );
// Add your qualifications for major browser experience divisions here.
// For example, you might choose to only enhance browsers that support document.querySelectorAll (IE8+, etc).
@@ -26,48 +26,48 @@
docElem.className += " enhanced";
// Configure css and js paths, if desirable.
- app.basepath.js = app.basepath.css = "_demo/sample-files/";
+ ejs.basepath.js = ejs.basepath.css = "_demo/sample-files/";
// Define potential JS files for loading
- app.files.js = {
+ ejs.files.js = {
general : "generalenhancements.js",
touch : "touch.js",
widescreen : "widescreen.js"
};
// Define potential CSS files for loading
- app.files.css = {
+ ejs.files.css = {
sample : "sample1.css"
};
// Start queueing files for load.
- // Pass js or css paths one at a time to app.addFile
+ // Pass js or css paths one at a time to ejs.addFile
// Add general js enhancements to all qualified browsers
- app.addFile( app.files.js.general );
+ ejs.addFile( ejs.files.js.general );
// if touch events are supported, add touch file
if( "ontouchend" in win.document ){
- app.addFile( app.files.js.touch );
+ ejs.addFile( ejs.files.js.touch );
}
// if screen is wider than 500px, add widescreen file
if( screen.width > 500 ){
- app.addFile( app.files.js.widescreen );
+ ejs.addFile( ejs.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)
+ // (beware: don't rely on loading CSS this way for styles that need to ejsly 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(){
+ // 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 ejs.isDefined
+ ejs.bodyready( function(){
- if( app.hasClass( win.document.body, "tmpl-home" ) ){
- app.addFile( app.files.css.sample );
+ if( ejs.hasClass( win.document.body, "tmpl-home" ) ){
+ ejs.addFile( ejs.files.css.sample );
}
// Load the files, enhance page
- app.enhance();
+ ejs.enhance();
});
View
42 app.js
@@ -1,4 +1,4 @@
-/*! app: a progressive enhancement bootstrapper. Copyright 2012 @scottjehl, Filament Group, Inc. Licensed MIT/GPLv2 */
+/*! EnhanceJS: a progressive enhancement bootstrejser. Copyright 2012 @scottjehl, Filament Group, Inc. Licensed MIT/GPLv2 */
(function( w, undefined ) {
// Enable JS strict mode
@@ -8,11 +8,11 @@
docElem = doc.documentElement,
head = doc.head || doc.getElementsByTagName( "head" )[ 0 ];
- //app object for app-specific functions
- w.app = {};
+ //ejs object for ejs-specific functions
+ w.ejs = {};
// hasClass function - check if element has a class
- app.hasClass = function( elem, cls ){
+ ejs.hasClass = function( elem, cls ){
return elem.className.indexOf( cls ) >= -1
}
@@ -20,7 +20,7 @@
// 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 ){
+ ejs.onDefine = function( prop, callback ){
var callbackStack = [];
if( callback ){
@@ -42,8 +42,8 @@
};
// shortcut of isDefine body-specific
- app.bodyready = function( callback ){
- app.onDefine( "document.body", callback );
+ ejs.bodyready = function( callback ){
+ ejs.onDefine( "document.body", callback );
};
@@ -82,41 +82,41 @@
};
// Define base directory paths for referencing js, css, img files. Optional.
- app.basepath = {
+ ejs.basepath = {
js : "",
css : ""
};
// Define arrays to contain JS and CSS files that are available
- app.files = {
+ ejs.files = {
js: {},
css: {}
};
// Define arrays to contain JS and CSS files that will be loaded
- app.jsToLoad = [];
- app.cssToLoad = [];
+ ejs.jsToLoad = [];
+ ejs.cssToLoad = [];
// Function for adding files to the queue for loading.
// CSS or JS is discovered by file path.
- // Files should not include base paths, if already defined in app.basepath.
- app.addFile = function( file ){
+ // Files should not include base paths, if already defined in ejs.basepath.
+ ejs.addFile = function( file ){
var js = file.indexOf( ".js" ) > -1;
- app[ js ? "jsToLoad" : "cssToLoad" ].push( app.basepath[ js ? "js" : "css" ] + file );
+ ejs[ js ? "jsToLoad" : "cssToLoad" ].push( ejs.basepath[ js ? "js" : "css" ] + file );
};
- // CSS and JS loading functions: load CSS or JS via single app.load method
- app.load = function ( url ){
+ // CSS and JS loading functions: load CSS or JS via single ejs.load method
+ ejs.load = function ( url ){
return ( url.indexOf( ".js" ) > -1 ? js : css )( url );
};
// Function for triggering the CSS and JS requests
- app.enhance = function(){
- if( app.jsToLoad.length ){
- app.load( app.jsToLoad.join(",") + "=concat" );
+ ejs.enhance = function(){
+ if( ejs.jsToLoad.length ){
+ ejs.load( ejs.jsToLoad.join(",") + "=concat" );
}
- if( app.cssToLoad.length ){
- app.load( app.cssToLoad.join(",") + "=concat" );
+ if( ejs.cssToLoad.length ){
+ ejs.load( ejs.cssToLoad.join(",") + "=concat" );
}
};

0 comments on commit f2eda78

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