padmaEmbeds/lib/PandoraEmbed.js

/*
    @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);
        })
    }
}