Initial version of iframe-based embedding

openid
Marcin Kulik 11 years ago
parent 7a3bc80340
commit d1dcd08861

@ -18,6 +18,9 @@ $color5: #edc951
right: 0
bottom: 0
body.iframe
background-color: transparent
.player
// float: left;
display: block

@ -6,7 +6,7 @@ class AsciicastsController < ApplicationController
before_filter :ensure_authenticated!, :only => [:edit, :update, :destroy]
before_filter :ensure_owner!, :only => [:edit, :update, :destroy]
respond_to :html, :json
respond_to :html, :json, :js
def index
@asciicasts = PaginatingDecorator.new(
@ -41,6 +41,10 @@ class AsciicastsController < ApplicationController
respond_with AsciicastJSONDecorator.new(@asciicast)
end
end
format.js do
respond_with @asciicast
end
end
end

@ -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…
Cancel
Save