2013-09-22 12:07:42 +00:00
|
|
|
// asciinema.org - embeddable player
|
2013-06-12 19:33:30 +00:00
|
|
|
|
|
|
|
(function() {
|
2014-01-18 14:35:24 +00:00
|
|
|
var apiUrl = "<%= request.protocol %><%= request.host_with_port %>";
|
2013-12-14 13:54:01 +00:00
|
|
|
var iframe;
|
|
|
|
|
2013-06-12 19:33:30 +00:00
|
|
|
function receiveSize(e) {
|
2014-01-18 14:35:24 +00:00
|
|
|
if (e.origin === apiUrl) {
|
2013-06-12 19:33:30 +00:00
|
|
|
var event = e.data[0];
|
|
|
|
var data = e.data[1];
|
|
|
|
if (event == 'asciicast:size' && data.id == <%= @asciicast.id %>) {
|
2013-12-14 13:54:01 +00:00
|
|
|
iframe.style.width = '' + data.width + 'px';
|
|
|
|
iframe.style.height = '' + data.height + 'px';
|
2013-06-12 19:33:30 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2013-06-12 20:47:39 +00:00
|
|
|
function insertAfter(referenceNode, newNode) {
|
|
|
|
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
|
|
|
|
}
|
|
|
|
|
2013-12-14 13:54:01 +00:00
|
|
|
function params(container, script) {
|
2014-01-18 13:53:15 +00:00
|
|
|
var params = '?max_width=' + container.offsetWidth;
|
2013-06-12 21:50:31 +00:00
|
|
|
|
2013-12-14 13:54:01 +00:00
|
|
|
var size = script.getAttribute('data-size');
|
|
|
|
if (size) {
|
|
|
|
params += '&size=' + size;
|
|
|
|
}
|
|
|
|
var speed = script.getAttribute('data-speed');
|
|
|
|
if (speed) {
|
|
|
|
params += '&speed=' + speed;
|
|
|
|
}
|
2014-01-18 14:17:12 +00:00
|
|
|
var autoplay = script.getAttribute('data-autoplay');
|
|
|
|
if (autoplay === '1') {
|
|
|
|
params += '&autoplay=' + autoplay;
|
|
|
|
}
|
2013-12-14 13:54:01 +00:00
|
|
|
|
|
|
|
return params;
|
|
|
|
}
|
|
|
|
|
|
|
|
function insertPlayer(script) {
|
2013-06-12 20:47:39 +00:00
|
|
|
var container = document.createElement('div');
|
2013-12-14 13:54:01 +00:00
|
|
|
container.id = "asciicast-container-<%= @asciicast.id %>";
|
2013-06-12 20:47:39 +00:00
|
|
|
container.className = 'asciicast';
|
|
|
|
container.style.display = 'block';
|
|
|
|
container.style.float = 'none';
|
|
|
|
container.style.overflow = 'hidden';
|
2013-12-14 13:54:01 +00:00
|
|
|
container.style.padding = 0;
|
|
|
|
container.style.margin = '20px 0';
|
2013-10-13 09:40:15 +00:00
|
|
|
|
2013-12-14 13:54:01 +00:00
|
|
|
insertAfter(script, container);
|
2013-10-13 09:40:15 +00:00
|
|
|
|
2013-12-14 13:54:01 +00:00
|
|
|
iframe = document.createElement('iframe');
|
2014-01-18 14:35:24 +00:00
|
|
|
iframe.src = apiUrl + "/a/<%= @asciicast.id %>/bare" + params(container, script);
|
2013-12-14 13:54:01 +00:00
|
|
|
iframe.id = "asciicast-iframe-<%= @asciicast.id %>";
|
|
|
|
iframe.name = "asciicast-iframe-<%= @asciicast.id %>";
|
|
|
|
iframe.scrolling = "no";
|
|
|
|
iframe.style.overflow = "hidden";
|
|
|
|
iframe.style.margin = 0;
|
|
|
|
iframe.style.border = 0;
|
|
|
|
iframe.style.display = "block";
|
|
|
|
iframe.style.float = "none";
|
|
|
|
iframe.style.visibility = "hidden";
|
|
|
|
iframe.onload = function() { this.style.visibility = 'visible' };
|
2013-10-13 09:40:15 +00:00
|
|
|
|
2013-12-14 13:54:01 +00:00
|
|
|
container.appendChild(iframe);
|
|
|
|
}
|
2013-10-13 09:40:15 +00:00
|
|
|
|
2013-12-14 13:54:01 +00:00
|
|
|
var script = document.getElementById("asciicast-<%= @asciicast.id %>");
|
|
|
|
|
|
|
|
if (script) {
|
|
|
|
insertPlayer(script);
|
|
|
|
window.addEventListener("message", receiveSize, false);
|
2013-06-12 20:47:39 +00:00
|
|
|
}
|
2013-06-12 19:33:30 +00:00
|
|
|
})();
|