Added an example for typed object sending

SpringRoll · Jan 24, 2015 · e5bbad5 · e5bbad5
1 parent 5c1aef8
commit e5bbad5
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 8 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
 	"name": "Bellhop",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"main": "dist/bellhop.min.js",
 	"dependencies": {
 		"bind-polyfill": "*"

diff --git a/dist/bellhop.js b/dist/bellhop.js
@@ -460,9 +460,9 @@
 	 */
 	Bellhop.reviver = function(key, value)
 	{
-		if(value && typeof value.__classname == "string")
+		if (value && typeof value.__classname == "string")
 		{
-			var _class = include(value.__classname, false);
+			var _class = include(value.__classname);
 			if(_class)
 			{
 				var rtn = new _class();
@@ -479,6 +479,26 @@
 		return value;
 	};
 
+	/**
+	 * Simple return function
+	 * @method include
+	 * @private
+	 * @param {string} classname Qualified class name as a string.
+	 *        for example "cloudkid.MyClass" would return a reference
+	 *        to the function window.cloudkid.MyClass.
+	 */
+	var include = function(classname)
+	{
+		var parts = classname.split('.');
+		var parent = window;
+		while(parts.length)
+		{
+			parent = parent[parts.shift()];
+			if (!parent) return;
+		}
+		return parent;
+	};
+
 	// Assign to the global namespace
 	window.Bellhop = Bellhop;
 

diff --git a/dist/bellhop.min.js b/dist/bellhop.min.js
diff --git a/examples/child-object.html b/examples/child-object.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title>Parent Window</title>
+		<meta name="description" content="">
+		<style type="text/css">
+			body {
+				background-color:#ccc;
+			}
+		</style>
+		<script src="../components/jquery/dist/jquery.js"></script>
+		<script src="../dist/bellhop.js"></script>
+		<script src="js/User.js"></script>
+	</head>
+	<body>
+		<h1>Example App</h1>
+		<button id="userButton">Send User</button><br>
+		<script>
+
+			// User is an example class included
+			// in the examples/js folder
+			var user = new examples.User("Matt", 1);
+
+			var body = $('body');
+
+			// Create the bellhop object
+			var bellhop = new Bellhop();
+
+			// Give it a name, easier for debugging purposes
+			bellhop.name = "[child]";
+
+			// Try to connect to the parent window, assuming we're an iframe
+			bellhop.connect();
+
+			// Not required, but a good way to see if the
+			// communication layer is current supported
+			// must call connect() before this can be checked
+			if (!bellhop.supported)
+			{
+				body.append("No parent to connect to.");
+			}
+			else
+			{
+				$("#userButton").click(function(){
+					bellhop.send('user', user);
+				});
+			}
+
+		</script>
+	</body>
+</html>
diff --git a/examples/js/User.js b/examples/js/User.js
@@ -0,0 +1,47 @@
+(function(){
+
+	/**
+	 * Example for sending a typed object
+	 * using Bellhop
+	 * @class User
+	 * @namespace examples
+	 */
+	var User = function(name, id)
+	{
+		this.name = name;
+		this.id = id;
+	};
+
+	/**
+	 * JSON.stringify will convert this into
+	 * a special data representation
+	 */
+	User.prototype.toJSON = function()
+	{
+		return {
+			name : this.name,
+			id : this.id,
+			// This is important and is requied
+			// to reconstruct the class
+			// It must contain the full class namespace
+			// don't include "window"
+			__classname : 'examples.User' 
+		};
+	};
+
+	/**
+	 * Bellhop can use fromJSON to reconstruct
+	 * the object based on the serialized version
+	 * of the data from the toJSON function.
+	 */
+	User.prototype.fromJSON = function(data)
+	{
+		this.name = data.name;
+		this.id = data.id;
+	};
+
+	// Assign to namespace
+	window.examples = {};
+	window.examples.User = User;
+
+}());
diff --git a/examples/object.html b/examples/object.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title>Bellhop Example</title>
+		<meta name="description" content="">
+		<script src="../components/jquery/dist/jquery.js"></script>
+		<script src="../dist/bellhop.js"></script>
+
+		<!-- The typed class must exist for both the child/parent -->
+		<script src="js/User.js"></script>
+	</head>
+	<body>
+		<h1>Object Bellhop Example</h1>
+
+		<p>Send a strictly typed object using Bellhop. In this example the child will send an instance of "examples.User" object. This is a custom class that can be found in the "js" folder.</p>
+
+		<iframe id="child" 
+			src="child-object.html" 
+			width="400" 
+			height="130" 
+			style="border:none;" 
+			frameborder="0"></iframe>
+
+		<div id="output"></div>
+
+		<script>
+
+			// Create the bellhop and give it a name, for debugging purposes
+			var bellhop = new Bellhop();
+			bellhop.name = "[parent]";
+
+			var output = $("#output");
+
+			// Connect to the iframe by padding the dom to the connect() method
+			bellhop.connect($("#child").get(0));
+
+			// Request a highscore from the iframe and handle the response
+			bellhop.on('user', function(e){
+				console.log(e.data);
+				if (e.data instanceof examples.User)
+				{
+					output.append("Received the typed object<br>");
+					output.append(JSON.stringify(e.data)+"<br>");
+				}
+			});
+
+		</script>
+	</body>
+</html>
diff --git a/library.json b/library.json
@@ -1,6 +1,6 @@
 {
 	"name": "Bellhop",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"description": "Javascript event-based communication layer between DOM and iframe.",
 	"url": "https://github.com/CloudKidStudio/Bellhop",
 	"output": "bellhop",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"private": true,
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"dependencies": {
 		"grunt": "~0.4.5",
 		"library-grunt": "*"

diff --git a/src/Bellhop.js b/src/Bellhop.js
@@ -459,9 +459,9 @@
 	 */
 	Bellhop.reviver = function(key, value)
 	{
-		if(value && typeof value.__classname == "string")
+		if (value && typeof value.__classname == "string")
 		{
-			var _class = include(value.__classname, false);
+			var _class = include(value.__classname);
 			if(_class)
 			{
 				var rtn = new _class();
@@ -478,6 +478,26 @@
 		return value;
 	};
 
+	/**
+	 * Simple return function
+	 * @method include
+	 * @private
+	 * @param {string} classname Qualified class name as a string.
+	 *        for example "cloudkid.MyClass" would return a reference
+	 *        to the function window.cloudkid.MyClass.
+	 */
+	var include = function(classname)
+	{
+		var parts = classname.split('.');
+		var parent = window;
+		while(parts.length)
+		{
+			parent = parent[parts.shift()];
+			if (!parent) return;
+		}
+		return parent;
+	};
+
 	// Assign to the global namespace
 	window.Bellhop = Bellhop;