/* @param {Object} options @param {String} options.id -- id of embed @param {String} options.url - URL of pan.do/ra embed @param {DOMNode} options.container -- DOM element in which to put embed @param {Number} options.width - width of iframe @param {Number} options.height - height of iframe */ var PandoraEmbed = function(options) { var that = this; this.id = options.id || 'padmaembed'; this.isInitted = false; this.boundFns = {}; var width = options.width || 640; var height = options.height || 360; var container = options.container || document.body; if (!options.url) { alert('no embed url specified'); return; } var $iframe = this.iframe = document.createElement('iframe'); $iframe.width = width; $iframe.height = height; $iframe.src = options.url; $iframe.addEventListener('load', function() { var timeout; function init() { if (that.isInitted) { clearTimeout(timeout); return; } that.postMessage('init', { oxid: that.id }); timeout = setTimeout(init, 250); } init(); }); window.addEventListener('message', this.listener.bind(this), false); container.appendChild($iframe); return this; }; PandoraEmbed.prototype.listener = function(event) { var data = JSON.parse(event.data); if (data.target !== this.id) return; // this message is not for us if (data.event === 'init') this.isInitted = true; this.trigger(data.event, data); }; PandoraEmbed.prototype.on = function(event, fn) { if (!this.boundFns.hasOwnProperty(event)) this.boundFns[event] = []; this.boundFns[event].push(fn); return this; } PandoraEmbed.prototype.postMessage = function(event, data) { this.iframe.contentWindow.postMessage(JSON.stringify({ data: data, event: event }), '*'); } PandoraEmbed.prototype.trigger = function(event, data) { if (this.boundFns.hasOwnProperty(event)) { this.boundFns[event].forEach(function(fn) { fn(data); }) } }