Create a new utility module system with automatic dependency loader. …

…Simply add a data-require='moduleA moduleB' to the HTML element to load those modules. All modules are loaded in utils/.
Khan · May 16, 2011 · df121f7 · df121f7
1 parent 6bb1d1c
commit df121f7
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 57 deletions.
diff --git a/exercises/rate_problems_1.html b/exercises/rate_problems_1.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-require="math">
 <head>
 	<title>Rate Problems 1</title>
 	<script src="../khan-exercise.js"></script>

diff --git a/exercises/writing_expressions_1.html b/exercises/writing_expressions_1.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-require="math">
 <head>
 	<title>Writing Expressions 1</title>
 	<script src="../khan-exercise.js"></script>

diff --git a/khan-exercise.js b/khan-exercise.js
@@ -4,54 +4,27 @@ link.rel = "stylesheet";
 link.href = "../khan-exercise.css";
 document.documentElement.appendChild( link );
 
-// Load in jQuery if it doesn't exist yet
-if ( typeof jQuery === "undefined" ) {
-	var script = document.createElement("script");
-	script.src = "http://code.jquery.com/jquery.js";
-	script.onload = jQueryLoaded;
-	document.documentElement.appendChild( script );
-}
-
-// Load in the MathJax library if it doesn't exist
-if ( typeof MathJax === "undefined" ) {
-	var script = document.createElement("script");
-	script.src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js";
-
-	// There is no god.
-	// I will personally gut punch whoever thought this was a good API design
-	script.text = 'MathJax.Hub.Config({\
-		messageStyle: "none",\
-		skipStartupTypeset: true,\
-		jax: ["input/TeX","output/HTML-CSS"],\
-		extensions: ["tex2jax.js","MathMenu.js","MathZoom.js"],\
-		TeX: {\
-			extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]\
-		}\
-	});';
-
-	script.onload = function() {
-		// We don't want to use inline script elements, we want to use code blocks
-		MathJax.Hub.elementScripts = function( elem ) {
-			console.log( "process", elem, elem.innerHTML );
-			return elem.nodeName.toLowerCase() === "code" ?
-				[ elem ] :
-				elem.getElementsByTagName( "code" );
-		};
+loadScripts( [
+	"http://code.jquery.com/jquery.js",
+	"http://cdn.mathjax.org/mathjax/latest/MathJax.js"
+], function() {
+	// We don't want to use inline script elements, we want to use code blocks
+	MathJax.Hub.elementScripts = function( elem ) {
+		return elem.nodeName.toLowerCase() === "code" ?
+			[ elem ] :
+			elem.getElementsByTagName( "code" );
 	};
 
-	document.documentElement.appendChild( script );
-}
-
-function jQueryLoaded() {
 	jQuery(function() {
-		// Load MathJax library
-		jQuery.getScript( "" );
-
 		// Inject the site markup, if it doesn't exist
 		injectSite();
-
-		// Generate the initial problem
-		makeProblem();
+
+		// Load in utility module dependencies
+		loadScripts( $.map( ($("html").data("require") || "").split(" "), function( name ) {
+			return "../utils/" + name + ".js";
+
+		// Generate the initial problem when dependencies are done being loaded
+		}), makeProblem );
 
 		// Watch for a solution submission
 		jQuery("form").submit(function() {
@@ -123,16 +96,14 @@ function jQueryLoaded() {
 
 			// Make sure that the old value isn't being displayed anymore
 			this.style.display = "none";
-
-			console.log( this, this.type );
 
 			// Stick the processing request onto the queue
 			MathJax.Hub.Queue([ "Typeset", MathJax.Hub, this ]);
 		}).end();
 	};
 
 	initVARS();
-}
+});
 
 function makeProblem() {			
 	// Load all the variables from the page
@@ -271,7 +242,7 @@ function initVARS() {
 
 			try {
 				// Use the methods provided by the library
-				with ( Util ) {
+				with ( KhanUtil ) {
 					// And the methods from JavaScript's builtin Math methods
 					with ( Math ) {
 						// Use all the computed variables
@@ -287,13 +258,6 @@ function initVARS() {
 			}
 		}
 	}
-
-	var Util = {
-		// A simple random number picker
-		rand: function( num ) {
-			return Math.round( num * Math.random() );
-		}
-	};
 }
 
 function injectSite() {
@@ -316,4 +280,41 @@ function injectSite() {
 		'<div id="workarea"></div>' +
 		'<div id="hintsarea"></div>'
 	);
-}
+}
+
+function loadScripts( urls, callback ) {
+	var loaded = 0;
+
+	for ( var i = 0; i < urls.length; i++ ) (function( url ) {
+		var script = document.createElement("script");
+		script.src = url;
+		script.onload = function() {
+			if ( callback && urls.length === ++loaded ) {
+				callback();
+			}
+		};
+
+		// There is no god.
+		// I will personally gut punch whoever thought this was a good API design
+		if ( /mathjax/i.test( url ) ) {
+			script.text = 'MathJax.Hub.Config({\
+				messageStyle: "none",\
+				skipStartupTypeset: true,\
+				jax: ["input/TeX","output/HTML-CSS"],\
+				extensions: ["tex2jax.js","MathMenu.js","MathZoom.js"],\
+				TeX: {\
+					extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]\
+				}\
+			});';
+		}
+
+		document.documentElement.appendChild( script );
+	})( urls[i] );
+
+	if ( urls.length === 0 && callback ) {
+		callback();
+	}
+}
+
+// Populate this with modules
+var KhanUtil = {};
diff --git a/utils/math.js b/utils/math.js
@@ -0,0 +1,6 @@
+$.extend(KhanUtil, {
+	// A simple random number picker
+	rand: function( num ) {
+		return Math.round( num * Math.random() );
+	}
+});