App Stub

by peterbenoit

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<p>All output in console. No logging method in place for IE</p>
<p>update and some documentation on app method stubs</p>
<ul>
    <li>defer: wait until CDC app is fully initialized before running a function which depends on it.</li>
    <li>$$: wait until Jquery is available...</li>
    <li>requires jQuery, underscore and optionally Modernizr</li>
    <li>TODO:
        <ul>
            <li>defer something other than a function?</li>
            <li>Consider passing modernizr</li>
            <li>App router for events (all tap/clicks, resize, etc...)</li>
        </ul>
    </li>
</ul>Underscore and jQuery extend(merge) object methods
<a href="http://documentcloud.github.io/underscore/#extend">_.extend</a>

<a href="http://documentcloud.github.io/underscore/#defaults">_.defaults</a>

<a href="http://api.jquery.com/jquery.extend/">$.extend</a>
What is loadMethod?
<a href="http://stackoverflow.com/questions/4574940/settimeout-with-zero-delay-used-often-in-web-pages-why/4575011#4575011">loadMethod</a>

CSS

a {
    display:block;
}

JavaScript

// cdc defer
function defer(method) {
	if (typeof (method) === typeof (Function)) {
		if (CDC && CDC.ready) {
			method();
		} else {
			setTimeout(function () {
				defer(method);
			}, 50);
		}
	}
}
 
// jquery defer
function $$(method) {
    console.log(method);
	if (window.$) {
		method();
	} else {
		setTimeout(function () {
			$$(method);
		}, 50);
	}
}
 
// testing both CDC & jQuery defer methods
defer(function () {
	$$($('a').css('font-weight', '700'));
	console.log('CDC is ready:');
	console.log(CDC);
});


// Make sure we have all of the console.* methods:
if (typeof console == 'undefined') {
	console = {};
}
if (! console.log) {
	console.log = function () {};
}
['debug', 'info', 'warn', 'error'].forEach(function (method) {
	if (! console[method]) {
		console[method] = console.log;
	}
});
 
//core.js
var CDC = CDC || {
	// flag for app initialization
	ready: false,
	config: {
		// modules to initialize, in order
		modules: ['Global', 'Constants', 'Dynamic', 'Mobile', 'Responsive', 'Modules', 'BreadCrumbs', 'LeftNav', 'PageOptions', 'Search', 'Policy', 'SocialMedia', 'Gadgets', 'GovDelivery', 'App']
	},
	methods: {
		// function loader
		loadMethod: function (m) {
			try {
				setTimeout(m, 0);
				return true;
			} catch (err) {
				console.log(err);
				return false;
			}
		},
		extend: function (f, s) {
			if ((f && typeof (f) === 'object') && (s && typeof (s) === 'object')) {
				$.extend(f, s);
			}
		}
	}
};
 
// constants.js
CDC.Constants = CDC.Constants || (function (c, $, w, _) {
	'use strict';
 
	// private variables specific to this module
	var config = {
		id: 'constants'
	},
 
	// private methods
 
	// initialization methods
	init = function () {
		console.log(config.id);
	},
	// event driven methods
	setupListeners = function () {
 
	},
	// display driven methods
	setupDisplay = function () {
 
	};
 
	// public variables & functions - this should be used like an interface
	return {
		id: config.id,
		init: init
	};
}(CDC || {}, jQuery,...