Initial version of iframe-based embedding
parent
7a3bc80340
commit
d1dcd08861
@ -1 +1,11 @@
|
|||||||
<%= player @asciicast %>
|
<%= 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