add a helper PandoraEmbed class, example using the class

6 years ago · 7a09878b02
3 changed files with 106 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -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'
 	}), '*');
--- a/lib-example.html
+++ b/lib-example.html
@ -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>
--- a/lib/PandoraEmbed.js
+++ 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);
+        })
+    }
+}