diff --git a/app/assets/stylesheets/embed.sass b/app/assets/stylesheets/embed.sass index cf1c844..2e2142f 100644 --- a/app/assets/stylesheets/embed.sass +++ b/app/assets/stylesheets/embed.sass @@ -1,7 +1,17 @@ //= require bootstrap //= require player +//= require source-sans-pro body.iframe background-color: transparent padding: 0 margin: 0 + + .powered + margin: 4px 0 0 0 + text-align: right + font-size: 12px + font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif + + a + font-weight: 600 diff --git a/app/views/asciicasts/raw.html.slim b/app/views/asciicasts/raw.html.slim index 1d45865..4c03092 100644 --- a/app/views/asciicasts/raw.html.slim +++ b/app/views/asciicasts/raw.html.slim @@ -1,11 +1,14 @@ = player @asciicast +p.powered + ' Powered by + a href=root_url target="_top" asciinema javascript: $(function() { var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined); if (typeof target != "undefined" && window !== window.parent) { - var w = $('.player').outerWidth(); - var h = $('.player').outerHeight(); + var w = $(document).width(); + var h = $(document).height(); target.postMessage(['asciicast:size', { id: #{@asciicast.id}, width: w, height: h }], '*'); } diff --git a/app/views/asciicasts/show.js.erb b/app/views/asciicasts/show.js.erb index a2e6ad7..fd063c0 100644 --- a/app/views/asciicasts/show.js.erb +++ b/app/views/asciicasts/show.js.erb @@ -1,16 +1,15 @@ // asciinema.org - embeddable player (function() { + var iframe; + function receiveSize(e) { if (e.origin === document.location.protocol + "//<%= request.host_with_port %>") { var event = e.data[0]; var data = e.data[1]; if (event == 'asciicast:size' && data.id == <%= @asciicast.id %>) { - var player = document.getElementById("asciicast-iframe-<%= @asciicast.id %>"); - if (player) { - player.style.width = '' + data.width + 'px'; - player.style.height = '' + data.height + 'px'; - } + iframe.style.width = '' + data.width + 'px'; + iframe.style.height = '' + data.height + 'px'; } } } @@ -19,30 +18,54 @@ referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } - var scriptTag = document.getElementById("asciicast-<%= @asciicast.id %>"); - - if (scriptTag) { - window.addEventListener("message", receiveSize, false); - var container = document.createElement('div'); - container.className = 'asciicast'; - container.style.display = 'block'; - container.style.float = 'none'; - container.style.overflow = 'hidden'; - container.style.padding = '0'; - insertAfter(scriptTag, container); - + function params(container, script) { var params = '?container_width=' + container.offsetWidth; - var size = scriptTag.getAttribute('data-size'); + var size = script.getAttribute('data-size'); if (size) { params += '&size=' + size; } - - var speed = scriptTag.getAttribute('data-speed'); + var speed = script.getAttribute('data-speed'); if (speed) { params += '&speed=' + speed; } - container.innerHTML = ''; + return params; + } + + 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.width = '100%'; + container.style.padding = 0; + container.style.margin = '20px 0'; + + insertAfter(script, container); + + iframe = document.createElement('iframe'); + iframe.src = "<%= request.protocol %><%= request.host_with_port %>/a/<%= @asciicast.id %>/raw" + params(container, script); + 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' }; + + container.appendChild(iframe); + } + + var script = document.getElementById("asciicast-<%= @asciicast.id %>"); + + if (script) { + insertPlayer(script); + window.addEventListener("message", receiveSize, false); } })(); diff --git a/app/views/layouts/example.html.slim b/app/views/layouts/example.html.slim index 5971073..46c9971 100644 --- a/app/views/layouts/example.html.slim +++ b/app/views/layouts/example.html.slim @@ -7,6 +7,7 @@ head background-color: #ddd; padding: 20px } + p { font-family: serif; font-size: 16px } body div.content = yield