From 7a09878b021c01d443b61ad212110b540e557ea8 Mon Sep 17 00:00:00 2001 From: Sanjay Bhangar Date: Tue, 6 Mar 2018 18:06:25 +0530 Subject: [PATCH] add a helper PandoraEmbed class, example using the class --- index.html | 4 +-- lib-example.html | 29 ++++++++++++++++++ lib/PandoraEmbed.js | 75 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 106 insertions(+), 2 deletions(-) create mode 100644 lib-example.html create mode 100644 lib/PandoraEmbed.js diff --git a/index.html b/index.html index b35acbe..448fc2c 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Subscribe to events from pad.ma iframe embed - + @@ -41,7 +41,7 @@ document.getElementById('setUrl').addEventListener('click', function(e) { console.log('clicked button'); $iframe.contentWindow.postMessage(JSON.stringify({ data: { - url: '/AGR/editor/00:05:55.800#embed' + url: '/A/editor/00:00:55.800#embed' }, event: 'seturl' }), '*'); diff --git a/lib-example.html b/lib-example.html new file mode 100644 index 0000000..1ef14e9 --- /dev/null +++ b/lib-example.html @@ -0,0 +1,29 @@ + + + + Example using PandoraEmbed class + + + +
+ + + + \ No newline at end of file diff --git a/lib/PandoraEmbed.js b/lib/PandoraEmbed.js new file mode 100644 index 0000000..e39a2bf --- /dev/null +++ b/lib/PandoraEmbed.js @@ -0,0 +1,75 @@ + + +/* + @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; + 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', that.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); + }) + } +} \ No newline at end of file