padmaEmbeds/lib/PandoraEmbed.js

75 lines
2.1 KiB
JavaScript
Raw Normal View History

/*
@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;
2018-03-06 14:10:03 +00:00
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();
});
2018-03-06 14:10:03 +00:00
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);
})
}
}