sanj/padmaEmbeds
1
0
Fork 0
Code Issues 4 Pull Requests 1 Releases Wiki Activity

add a helper PandoraEmbed class, example using the class

Browse Source
This commit is contained in:
Sanjay Bhangar 2018-03-06 18:06:25 +05:30
parent 132511b3a2
commit 7a09878b02
3 changed files with 106 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -4,7 +4,7 @@
<title>Subscribe to events from pad.ma iframe embed</title>
</head>
<body>
<iframe id="padembed" width="640" height="360" name="iframename" src="https://pad.ma/AGR/editor/00:04:55.800,00:00:21.880,00:04:55.800#embed" frameborder="0" allowfullscreen></iframe>
<iframe width="640" height="360" src="http://10.0.3.230/A/editor/C#embed" frameborder="0" allowfullscreen id="padembed"></iframe>
<button id="setUrl">
Set Iframe URL
</button>
@ -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'
}), '*');

29
lib-example.html Normal file
View File

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<title>Example using PandoraEmbed class</title>
<script src="lib/PandoraEmbed.js"></script>
</head>
<body>
<div id="iframeContainer"></div>
<script>
var container = document.getElementById('iframeContainer');
var embed = new PandoraEmbed({
id: 'test',
url: 'https://pad.ma/A/editor/C#embed',
container: container
});
embed.on('init', function(data) {
console.log('embed initted');
});
embed.on('playing', function(data) {
console.log('playing callback called');
});
embed.on('paused', function(data) {
console.log('pause fired', data);
});
</script>
</body>
</html>

75
lib/PandoraEmbed.js Normal file
View File

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