Added Facebook JSONP plugin that basically gets Facebook Connect all …

…setup for you. Also, some bug fixes and the addition of the "manual ready" state in order to make Facebook work.
harborhoffer · Oct 19, 2010 · b1e0bb2 · b1e0bb2
1 parent fb32444
commit b1e0bb2
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -6,16 +6,30 @@
 	<script type="text/javascript" src="jsonp-fu/jsonp-fu.js"></script>
 	<script type="text/javascript">
 		jfu.set_path('/jsonpfu/jsonp-fu/');
-		jfu.load('twitpic', {});
+
+		jfu.load({
+			twitpic: {},
+			facebook: {
+				app_id: '123456789'
+			}
+		});
 
 		jfu.ready('twitpic', function () {
-			jfu.lib('twitpic').users.show({username: 'meltingice'}, function (user) {
+			this.users.show({username: 'meltingice'}, function (user) {
 				console.log(user);
 			});
 		});
+
+		jfu.ready('facebook', function () {
+			this.api('/rlefevre/feed', function (resp) {
+				console.log(resp);
+			});
+		});
 	</script>
 </head>
 <body>
+<div id="content">
 
+</div>
 </body>
 </html>
diff --git a/jsonp-fu/jsonp-fu.js b/jsonp-fu/jsonp-fu.js
@@ -174,9 +174,14 @@ var jsonpfu = {},
 				lib_opts[lib] = opts;
 
 				script.include_lib(lib, function () {
+					// Library requires manual ready state (e.g. Facebook)
+					if (!libs[lib]) {
+						return;
+					}
+
 					if (ready_callbacks[lib]) {
 						for (i = 0; i < ready_callbacks[lib].length; i++) {
-							ready_callbacks[lib].pop()();
+							ready_callbacks[lib].pop().call(libs[lib]);
 						}
 					}
 				});
@@ -193,8 +198,18 @@ var jsonpfu = {},
 		}
 	};
 
+	jsonpfu.manual_ready = function (lib, obj) {
+		libs[lib] = obj;
+
+		if (ready_callbacks[lib]) {
+			for (i = 0; i < ready_callbacks[lib].length; i++) {
+				ready_callbacks[lib].pop().call(libs[lib]);
+			}
+		}
+	};
+
 	jsonpfu.extend = function (name, lib) {
-		libs[name] = lib.call(this, script);
+		libs[name] = lib.call(this, lib_opts[name], script);
 	};
 
 	jsonpfu.lib = function (lib) {
@@ -211,7 +226,7 @@ var jsonpfu = {},
 		}
 
 		if (libs.hasOwnProperty(lib)) {
-			callback.call(window);
+			callback.call(libs[lib]);
 		} else {
 			if (!ready_callbacks[lib]) {
 				ready_callbacks[lib] = [];

diff --git a/jsonp-fu/lib/facebook.js b/jsonp-fu/lib/facebook.js
@@ -0,0 +1,67 @@
+/*global window, jsonpfu, FB */
+
+/**
+ * Name: Facebook
+ * Desc: Used to query Facebook Connect. Facebook is tricky because it
+ *		 requires some extra works due to its asynchronous library loading.
+ * Usage:
+ *	jfu.lib('facebook').connect_method();
+ *
+ * Example:
+ *	jfu.ready('facebook', function () {
+ *		this.api('/rlefevre/feed', function (resp) {
+ *			console.log(resp);
+ *		});
+ *	});
+ */
+jsonpfu.extend('facebook', function (opts, script) {
+	var options = {
+		app_id: '',
+		status: true,
+		cookie: true,
+		xfbml: false
+	}, fbroot;
+
+	/*
+	 * Do some special initialization when we are loaded that Facebook
+	 * Connect needs.
+	 */
+	(function () {
+		var i, e;
+
+		for (i in options) {
+			if (options.hasOwnProperty(i)) {
+				if (opts[i]) {
+					options[i] = opts[i];
+				}
+			}
+		}
+
+		/*
+		 * Callback function to call when the Facebook Connect library
+		 * is finished loading.
+		 */
+		window.fbAsyncInit = function () {
+			FB.init({appId: options.app_id, status: options.status, cookie: options.cookie, xfbml: options.xfbml});
+			jsonpfu.manual_ready('facebook', window.FB);
+		};
+
+		fbroot = document.getElementById('fb-root');
+		if (!fbroot) {
+			fbroot = document.createElement('div');
+			fbroot.id = 'fb-root';
+			document.getElementsByTagName('body')[0].appendChild(fbroot);
+		}
+
+		e = document.createElement('script');
+		e.async = true;
+		e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
+		document.getElementById('fb-root').appendChild(e);
+	}());
+
+	/*
+	 * Since we need to do a manual ready callback, we return nothing here.
+	 */
+	return;
+
+});
diff --git a/jsonp-fu/lib/twitpic.js b/jsonp-fu/lib/twitpic.js
@@ -12,7 +12,7 @@
  *	});
  */
 
-jsonpfu.extend('twitpic', function (script) {
+jsonpfu.extend('twitpic', function (opts, script) {
 	// API helper methods for validation and querying
 	var API = {
 		validate: function (args, required) {