diff --git a/README.md b/README.md index 451f1a5..2fbbebb 100644 --- a/README.md +++ b/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. diff --git a/dist/pym.js b/dist/pym.js index 161cc8c..6888607 100644 --- a/dist/pym.js +++ b/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(); diff --git a/dist/pym.min.js b/dist/pym.min.js index 0a3f8a8..4d96d98 100644 --- a/dist/pym.min.js +++ b/dist/pym.min.js @@ -1,2 +1,2 @@ -/*! pym.js - v0.4.6 - 2016-05-18 */ -!function(a){"function"==typeof define&&define.amd?define(a):"undefined"!=typeof module&&module.exports?module.exports=a():window.pym=a.call(this)}(function(){var a="xPYMx",b={},c=function(a){var b=new RegExp("[\\?&]"+a.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]")+"=([^&#]*)"),c=b.exec(location.search);return null===c?"":decodeURIComponent(c[1].replace(/\+/g," "))},d=function(a,b){return"*"===b.xdomain||a.origin.match(new RegExp(b.xdomain+"$"))?!0:void 0},e=function(b,c,d){var e=["pym",b,c,d];return e.join(a)},f=function(b){var c=["pym",b,"(\\S+)","(.+)"];return new RegExp("^"+c.join(a)+"$")},g=function(){for(var a=document.querySelectorAll("[data-pym-src]:not([data-pym-auto-initialized])"),c=a.length,d=0;c>d;++d){var e=a[d];e.setAttribute("data-pym-auto-initialized",""),""===e.id&&(e.id="pym-"+d);var f=e.getAttribute("data-pym-src"),g=e.getAttribute("data-pym-xdomain"),h={};g&&(h.xdomain=g),new b.Parent(e.id,f,h)}};return b.Parent=function(a,b,c){this.id=a,this.url=b,this.el=document.getElementById(a),this.iframe=null,this.settings={xdomain:"*"},this.messageRegex=f(this.id),this.messageHandlers={},c=c||{},this._constructIframe=function(){var a=this.el.offsetWidth.toString();this.iframe=document.createElement("iframe");var b="",c=this.url.indexOf("#");c>-1&&(b=this.url.substring(c,this.url.length),this.url=this.url.substring(0,c)),this.url.indexOf("?")<0?this.url+="?":this.url+="&",this.iframe.src=this.url+"initialWidth="+a+"&childId="+this.id+"&parentUrl="+encodeURIComponent(window.location.href)+b,this.iframe.setAttribute("width","100%"),this.iframe.setAttribute("scrolling","no"),this.iframe.setAttribute("marginheight","0"),this.iframe.setAttribute("frameborder","0"),this.settings.title&&this.iframe.setAttribute("title",this.settings.title),this.el.appendChild(this.iframe),window.addEventListener("resize",this._onResize)},this._srcdocIframe=function(){this.iframe=this.el.getElementsByTagName("iframe")[0],this.iframe.setAttribute("width","100%"),this.iframe.setAttribute("scrolling","no"),this.iframe.setAttribute("marginheight","0"),this.iframe.setAttribute("frameborder","0"),this.settings.title&&this.iframe.setAttribute("title",this.settings.title),window.addEventListener("resize",this._onResize)},this._onResize=function(){this.sendWidth()}.bind(this),this._fire=function(a,b){if(a in this.messageHandlers)for(var c=0;c-1&&(b=this.url.substring(c,this.url.length),this.url=this.url.substring(0,c)),this.url.indexOf("?")<0?this.url+="?":this.url+="&",this.iframe.src=this.url+"initialWidth="+a+"&childId="+this.id+"&parentUrl="+encodeURIComponent(window.location.href)+b,this.iframe.setAttribute("width","100%"),this.iframe.setAttribute("scrolling","no"),this.iframe.setAttribute("marginheight","0"),this.iframe.setAttribute("frameborder","0"),this.settings.title&&this.iframe.setAttribute("title",this.settings.title),this.el.appendChild(this.iframe),window.addEventListener("resize",this._onResize)},this._srcdocIframe=function(){this.iframe=this.el.getElementsByTagName("iframe")[0],this.iframe.setAttribute("width","100%"),this.iframe.setAttribute("scrolling","no"),this.iframe.setAttribute("marginheight","0"),this.iframe.setAttribute("frameborder","0"),this.settings.title&&this.iframe.setAttribute("title",this.settings.title),window.addEventListener("resize",this._onResize)},this._onResize=function(){this.sendWidth()}.bind(this),this._fire=function(a,b){if(a in this.messageHandlers)for(var c=0;c=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" } } diff --git a/src/pym.js b/src/pym.js index b977c74..30ee39f 100644 --- a/src/pym.js +++ b/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();