[WIP] added connected callback

README.md

@@ -1,5 +1,43 @@
 # Pym.js
 
+## BBC-specific modifications
+* We added the ability to init a pym Parent with a sourcedoc attribute rather than an iFrame URL.
+* We added a way of accessing host information:
+
+1. When creating pym Parent, pass a `config` property with whatever you like (e.g. host URL, cookies, etc)
+2. When creating pym Child, pass a `connectedCallback` function, which is invoked once a connection has been made with the pym Parent.
+3. Anything inside the callback can safely call pym Child.getHostInformation() - this provides a nice easy way for pym Childs to access host information.
+
+Example:
+
+```js
+var myConf = {
+    hostInformation: {
+        onBbcDomain: true,
+        category:    'news'
+    },
+    applicationHtml: coreContentContainer.innerHTML
+};
+var pymParent = new pym.Parent(iframeUid, iframeUrl, {config: myConf});
+```
+
+...and the child:
+
+```js
+new pym.Child({
+    polling: 100,
+    connectedCallback: function downloadApplication(self) {
+        console.log(self.getHostInformation().hostInformation);
+    }
+});
+```
+
+---
+
+The original README is below.
+
+---
+
 ## About
 
 Using iframes in a responsive page can be frustrating. It’s easy enough to make an iframe’s width span 100% of its container, but sizing its height is tricky — especially if the content of the iframe changes height depending on page width (for example, because of text wrapping or media queries) or events within the iframe.

dist/pym.js

@@ -1,4 +1,4 @@
-/*! pym.js - v0.4.6 - 2016-05-18 */
+/*! pym.js - v0.4.6 - 2016-07-23 */
 /*
 * Pym.js is library that resizes an iframe based on the width of the parent and the resulting height of the child.
 * Check out the docs at http://blog.apps.npr.org/pym.js/ or the readme at README.md for usage.
@@ -209,7 +209,7 @@
         * @method _constructIframe
         */
         this._srcdocIframe = function() {
-            
+
             this.iframe = this.el.getElementsByTagName('iframe')[0];
 
             // Set some attributes to this proto-iframe.
@@ -381,6 +381,12 @@
             this.settings[key] = config[key];
         }
 
+        this._sendHostInfo = function() {
+            this.sendMessage('config', JSON.stringify(this.settings.config));
+        };
+
+        this.onMessage('loaded', this._sendHostInfo);
+
         // Bind required message handlers
         this.onMessage('height', this._onHeightMessage);
         this.onMessage('navigateTo', this._onNavigateToMessage);
@@ -595,14 +601,28 @@
             this.settings[key] = config[key];
         }
 
-        // Set up a listener to handle any incoming messages.
-        window.addEventListener('message', this._processMessage, false);
+        this._cacheHostInfo = function(config) {
+            this.config = JSON.parse(config);
+            if (this.settings.connectedCallback) {
+                this.settings.connectedCallback(this);
+            }
+        };
+
+        this.getHostInformation = function() {
+            return this.config;
+        };
+
+        this.onMessage('config', this._cacheHostInfo);
+        this.sendMessage('loaded', true);
 
         // If there's a callback function, call it.
         if (this.settings.renderCallback) {
             this.settings.renderCallback(width);
         }
 
+        // Set up a listener to handle any incoming messages.
+        window.addEventListener('message', this._processMessage, false);
+
         // Send the initial height to the parent.
         this.sendHeight();
 

package.json

@@ -27,10 +27,11 @@
     "url": "https://github.com/nprapps/pym.js/issues"
   },
   "devDependencies": {
-    "grunt-contrib-concat": "^0.5.0",
-    "grunt-contrib-jshint": "~0.10.0",
-    "grunt-contrib-uglify": "^0.6.0",
-    "grunt-contrib-watch": "~0.6.1",
-    "grunt-jsdoc": "~0.5.6"
+    "grunt": ">=0.4.5 <1.0.0",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-jshint": "~1.0.0",
+    "grunt-contrib-uglify": "^2.0.0",
+    "grunt-contrib-watch": "~1.0.0",
+    "grunt-jsdoc": "~2.1.0"
   }
 }

src/pym.js

@@ -208,7 +208,7 @@
         * @method _constructIframe
         */
         this._srcdocIframe = function() {
-            
+
             this.iframe = this.el.getElementsByTagName('iframe')[0];
 
             // Set some attributes to this proto-iframe.
@@ -380,6 +380,12 @@
             this.settings[key] = config[key];
         }
 
+        this._sendHostInfo = function() {
+            this.sendMessage('config', JSON.stringify(this.settings.config));
+        };
+
+        this.onMessage('loaded', this._sendHostInfo);
+
         // Bind required message handlers
         this.onMessage('height', this._onHeightMessage);
         this.onMessage('navigateTo', this._onNavigateToMessage);
@@ -594,14 +600,28 @@
             this.settings[key] = config[key];
         }
 
-        // Set up a listener to handle any incoming messages.
-        window.addEventListener('message', this._processMessage, false);
+        this._cacheHostInfo = function(config) {
+            this.config = JSON.parse(config);
+            if (this.settings.connectedCallback) {
+                this.settings.connectedCallback(this);
+            }
+        };
+
+        this.getHostInformation = function() {
+            return this.config;
+        };
+
+        this.onMessage('config', this._cacheHostInfo);
+        this.sendMessage('loaded', true);
 
         // If there's a callback function, call it.
         if (this.settings.renderCallback) {
             this.settings.renderCallback(width);
         }
 
+        // Set up a listener to handle any incoming messages.
+        window.addEventListener('message', this._processMessage, false);
+
         // Send the initial height to the parent.
         this.sendHeight();