From e5bbad50764a3fdc12fb9d39550e288d9812ac6a Mon Sep 17 00:00:00 2001 From: Matt Karl Date: Sat, 24 Jan 2015 10:31:55 -0500 Subject: [PATCH] Added an example for typed object sending --- bower.json | 2 +- dist/bellhop.js | 24 +++++++++++++++-- dist/bellhop.min.js | 2 +- examples/child-object.html | 53 ++++++++++++++++++++++++++++++++++++++ examples/js/User.js | 47 +++++++++++++++++++++++++++++++++ examples/object.html | 51 ++++++++++++++++++++++++++++++++++++ library.json | 2 +- package.json | 2 +- src/Bellhop.js | 24 +++++++++++++++-- 9 files changed, 199 insertions(+), 8 deletions(-) create mode 100644 examples/child-object.html create mode 100644 examples/js/User.js create mode 100644 examples/object.html diff --git a/bower.json b/bower.json index c6b67c3..5c68ff1 100644 --- 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 index f152e7f..4aada35 100644 --- 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 index 82b108d..99ce701 100644 --- a/dist/bellhop.min.js +++ b/dist/bellhop.min.js @@ -1,2 +1,2 @@ /*! Bellhop 1.1.0 */ -!function(){"use strict";!function(a,b){var c=function(){this.onReceive=this.receive.bind(this),this.target=null,this.connected=!1,this.name="",this.isChild=!0,this.connecting=!1,this.origin="*",this._listeners={},this._sendLater=[],this.supported=null},d=c.prototype={};d.receive=function(a){if(a.source===this.target){var b=a.data;if("connected"===b){this.connecting=!1,this.connected=!0,this.trigger("connected"),this.isChild||this.target.postMessage(b,this.origin);var d,e=this._sendLater.length;if(e>0){for(d=0;e>d;d++){var f=this._sendLater[d];this.send(f.type,f.data)}this._sendLater.length=0}}else{if(!this.connected)return;try{b=JSON.parse(b,c.reviver)}catch(g){return}"object"==typeof b&&b.type&&this.trigger(b)}}},d.trigger=function(a){"string"==typeof a&&(a={type:a});var c=this._listeners[a.type];if(c!==b)for(var d=0,e=c.length;e>d;d++)c[d](a)},d.toString=function(){return"[Bellhop '"+this.name+"']"},d.connect=function(c,d){if(this.connecting)return this;this.disconnect(),this.connecting=!0;var e=this.isChild=c===b,f=this.target=e?a.top:c.contentWindow||c;return this.supported=e?!!f&&a!=f:!!f,this.origin=d===b?"*":d,a.attachEvent?a.attachEvent("onmessage",this.onReceive):a.addEventListener("message",this.onReceive),e&&(a===f?this.trigger("failed"):a.onload=function(){f.postMessage("connected",this.origin)}.bind(this)),this},d.disconnect=function(){return this.connected=!1,this.connecting=!1,this.origin=null,this.target=null,this._listeners={},this._sendLater.length=0,this.isChild=!0,a.detachEvent?a.detachEvent("onmessage",this.onReceive):a.removeEventListener("message",this.onReceive),this},d.on=function(a,c){if("string"!=typeof a)for(var d in a)this.on(d,a[d]);else for(var e=a.split(" "),f=0,g=e.length;g>f;f++)a=e[f],this._listeners[a]===b&&(this._listeners[a]=[]),this._listeners[a].push(c);return this},d.off=function(a,c){if(this._listeners[a]===b)return this;if(c===b)delete this._listeners[a];else for(var d=this._listeners[a],e=0,f=d.length;f>e;e++)if(d[e]===c){d.splice(e,1);break}return this},d.send=function(a,c){if("string"!=typeof a)throw"The event type must be a string";if(a={type:a},c!==b&&(a.data=c),this.connecting)this._sendLater.push(a);else{if(!this.connected)return this;this.target.postMessage(JSON.stringify(a),this.origin)}return this},d.fetch=function(a,c,d,e){var f=this;if(!this.connecting&&!this.connected)throw"No connection, please call connect() first";e=e===b?!1:e;var g=function(a){e&&f.off(a.type,g),c(a)};return this.on(a,g),this.send(a,d),this},d.respond=function(a,c,d){d=d===b?!1:d;var e=this,f=function(b){d&&e.off(b.type,f),e.send(a,c)};return this.on(a,f),this},d.destroy=function(){this.disconnect(),this._listeners=null,this._sendLater=null},c.reviver=function(a,b){if(b&&"string"==typeof b.__classname){var c=include(b.__classname,!1);if(c){var d=new c;if(d.fromJSON)return d.fromJSON(b),d}}return b},a.Bellhop=c}(window);}(); \ No newline at end of file +!function(){"use strict";!function(a,b){var c=function(){this.onReceive=this.receive.bind(this),this.target=null,this.connected=!1,this.name="",this.isChild=!0,this.connecting=!1,this.origin="*",this._listeners={},this._sendLater=[],this.supported=null},d=c.prototype={};d.receive=function(a){if(a.source===this.target){var b=a.data;if("connected"===b){this.connecting=!1,this.connected=!0,this.trigger("connected"),this.isChild||this.target.postMessage(b,this.origin);var d,e=this._sendLater.length;if(e>0){for(d=0;e>d;d++){var f=this._sendLater[d];this.send(f.type,f.data)}this._sendLater.length=0}}else{if(!this.connected)return;try{b=JSON.parse(b,c.reviver)}catch(g){return}"object"==typeof b&&b.type&&this.trigger(b)}}},d.trigger=function(a){"string"==typeof a&&(a={type:a});var c=this._listeners[a.type];if(c!==b)for(var d=0,e=c.length;e>d;d++)c[d](a)},d.toString=function(){return"[Bellhop '"+this.name+"']"},d.connect=function(c,d){if(this.connecting)return this;this.disconnect(),this.connecting=!0;var e=this.isChild=c===b,f=this.target=e?a.top:c.contentWindow||c;return this.supported=e?!!f&&a!=f:!!f,this.origin=d===b?"*":d,a.attachEvent?a.attachEvent("onmessage",this.onReceive):a.addEventListener("message",this.onReceive),e&&(a===f?this.trigger("failed"):a.onload=function(){f.postMessage("connected",this.origin)}.bind(this)),this},d.disconnect=function(){return this.connected=!1,this.connecting=!1,this.origin=null,this.target=null,this._listeners={},this._sendLater.length=0,this.isChild=!0,a.detachEvent?a.detachEvent("onmessage",this.onReceive):a.removeEventListener("message",this.onReceive),this},d.on=function(a,c){if("string"!=typeof a)for(var d in a)this.on(d,a[d]);else for(var e=a.split(" "),f=0,g=e.length;g>f;f++)a=e[f],this._listeners[a]===b&&(this._listeners[a]=[]),this._listeners[a].push(c);return this},d.off=function(a,c){if(this._listeners[a]===b)return this;if(c===b)delete this._listeners[a];else for(var d=this._listeners[a],e=0,f=d.length;f>e;e++)if(d[e]===c){d.splice(e,1);break}return this},d.send=function(a,c){if("string"!=typeof a)throw"The event type must be a string";if(a={type:a},c!==b&&(a.data=c),this.connecting)this._sendLater.push(a);else{if(!this.connected)return this;this.target.postMessage(JSON.stringify(a),this.origin)}return this},d.fetch=function(a,c,d,e){var f=this;if(!this.connecting&&!this.connected)throw"No connection, please call connect() first";e=e===b?!1:e;var g=function(a){e&&f.off(a.type,g),c(a)};return this.on(a,g),this.send(a,d),this},d.respond=function(a,c,d){d=d===b?!1:d;var e=this,f=function(b){d&&e.off(b.type,f),e.send(a,c)};return this.on(a,f),this},d.destroy=function(){this.disconnect(),this._listeners=null,this._sendLater=null},c.reviver=function(a,b){if(b&&"string"==typeof b.__classname){var c=e(b.__classname);if(c){var d=new c;if(d.fromJSON)return d.fromJSON(b),d}}return b};var e=function(b){for(var c=b.split("."),d=a;c.length;)if(d=d[c.shift()],!d)return;return d};a.Bellhop=c}(window);}(); \ No newline at end of file diff --git a/examples/child-object.html b/examples/child-object.html new file mode 100644 index 0000000..50308c3 --- /dev/null +++ b/examples/child-object.html @@ -0,0 +1,53 @@ + + + + + + Parent Window + + + + + + + +

Example App

+
+ + + diff --git a/examples/js/User.js b/examples/js/User.js new file mode 100644 index 0000000..2ca2820 --- /dev/null +++ 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; + +}()); \ No newline at end of file diff --git a/examples/object.html b/examples/object.html new file mode 100644 index 0000000..b2d3bba --- /dev/null +++ b/examples/object.html @@ -0,0 +1,51 @@ + + + + + + Bellhop Example + + + + + + + + +

Object Bellhop Example

+ +

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.

+ + + +
+ + + + diff --git a/library.json b/library.json index 63cb9d0..aed810a 100644 --- 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 index 0457ef3..b78eb50 100644 --- 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 index 6c0c3d2..e11ded3 100644 --- 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;