asciinema.org/app/views/api/asciicasts/show.js.erb
2014-08-09 13:10:07 +02:00

87 lines
2.6 KiB
Plaintext

// asciinema.org - embeddable player
(function() {
var apiHost = "<%= request.protocol %><%= request.host_with_port %>";
var apiUrl = apiHost + '/api';
var iframe;
function receiveSize(e) {
if (e.origin === apiHost) {
var event = e.data[0];
var data = e.data[1];
if (event == 'asciicast:size' && data.id == <%= @asciicast.id %>) {
iframe.style.width = '' + data.width + 'px';
iframe.style.height = '' + data.height + 'px';
}
}
}
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function params(container, script) {
var params = [];
var size = script.getAttribute('data-size');
if (size) {
params = params.concat(['size=' + size]);
}
var speed = script.getAttribute('data-speed');
if (speed) {
params = params.concat(['speed=' + speed]);
}
var autoplay = script.getAttribute('data-autoplay');
if (autoplay) {
params = params.concat(['autoplay=' + autoplay]);
}
var loop = script.getAttribute('data-loop');
if (loop) {
params = params.concat(['loop=' + loop]);
}
var theme = script.getAttribute('data-theme');
if (theme) {
params = params.concat(['theme=' + theme]);
}
return '?' + params.join('&');
}
function insertPlayer(script) {
var container = document.createElement('div');
container.id = "asciicast-container-<%= @asciicast.id %>";
container.className = 'asciicast';
container.style.display = 'block';
container.style.float = 'none';
container.style.overflow = 'hidden';
container.style.padding = 0;
container.style.margin = '20px 0';
insertAfter(script, container);
iframe = document.createElement('iframe');
iframe.src = apiUrl + "/asciicasts/<%= @asciicast.id %>" + params(container, script);
iframe.id = "asciicast-iframe-<%= @asciicast.id %>";
iframe.name = "asciicast-iframe-<%= @asciicast.id %>";
iframe.scrolling = "no";
iframe.setAttribute('allowFullScreen', 'true');
iframe.style.overflow = "hidden";
iframe.style.margin = 0;
iframe.style.border = 0;
iframe.style.display = "inline-block";
iframe.style.width = "100%";
iframe.style.float = "none";
iframe.style.visibility = "hidden";
iframe.onload = function() { this.style.visibility = 'visible' };
container.appendChild(iframe);
}
var script = document.getElementById("asciicast-<%= @asciicast.id %>");
if (script) {
insertPlayer(script);
window.addEventListener("message", receiveSize, false);
}
})();