Initial version of iframe-based embedding
parent
7a3bc80340
commit
d1dcd08861
@ -1 +1,11 @@
|
||||
<%= player @asciicast %>
|
||||
<script>
|
||||
$(function() {
|
||||
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
|
||||
if (typeof target != "undefined" && window !== window.parent) {
|
||||
var w = $('.player').css('width');
|
||||
var h = $('.player').css('height');
|
||||
target.postMessage(['asciicast:size', { id: <%= @asciicast.id %>, width: w, height: h }], '*');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
@ -0,0 +1,21 @@
|
||||
// ascii.io - embeddable widget
|
||||
|
||||
(function() {
|
||||
function receiveSize(e) {
|
||||
if (e.origin === document.location.protocol + "//<%= request.host %>") {
|
||||
var event = e.data[0];
|
||||
var data = e.data[1];
|
||||
if (event == 'asciicast:size' && data.id == <%= @asciicast.id %>) {
|
||||
var player = document.getElementById("asciicast-player-<%= @asciicast.id %>");
|
||||
if (player) {
|
||||
player.style.width = data.width;
|
||||
player.style.height = data.height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("message", receiveSize, false);
|
||||
|
||||
document.writeln('<div class="asciicast" style="display: block; float: none; overflow: hidden"><iframe src="http://<%= request.host_with_port %>/a/<%= @asciicast.id %>/raw" name="asciicast-player-<%= @asciicast.id %>" id="asciicast-player-<%= @asciicast.id %>" width="600" height="300" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="display: block; float: none; visibility: hidden;" onload="this.style.visibility=\'visible\';"></iframe></div>');
|
||||
})();
|
@ -1,25 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title><%= page_title %></title>
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
|
||||
<%= stylesheet_link_tag "player", :media => "all" %>
|
||||
<%= javascript_include_tag "application" %>
|
||||
<%= javascript_include_tag "player" %>
|
||||
|
||||
<script>
|
||||
window.unpackWorkerPath = '<%= javascript_path "unpack_worker" %>';
|
||||
window.mainWorkerPath = '<%= javascript_path "main_worker" %>';
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%= yield %>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,13 @@
|
||||
doctype html
|
||||
html[lang="en"]
|
||||
head
|
||||
meta[charset="utf-8"]
|
||||
title = page_title
|
||||
= stylesheet_link_tag "player", :media => "all"
|
||||
= javascript_include_tag "application"
|
||||
= javascript_include_tag "player"
|
||||
script
|
||||
| window.unpackWorkerPath = '#{javascript_path "unpack_worker"}';
|
||||
window.mainWorkerPath = '#{javascript_path "main_worker"}';
|
||||
body.iframe
|
||||
= yield
|
Loading…
Reference in New Issue