Merge pull request #110 from sickill/embed

Embedding
openid
Marcin Kulik 11 years ago
commit a0e84709d4

@ -15,4 +15,8 @@
$(function() {
$('abbr.timeago').timeago();
$("input[data-behavior=auto-select]").click(function() {
this.select();
});
});

@ -0,0 +1,2 @@
//= require application
//= require player

@ -14,6 +14,7 @@ class AsciiIo.AbstractPlayer
hud: @options.hud
rendererClass: @options.rendererClass
snapshot: @options.snapshot
containerWidth: @options.containerWidth
createVT: ->
throw 'not implemented'

@ -4,6 +4,7 @@ class AsciiIo.PlayerView extends Backbone.View
initialize: (options) ->
@createRendererView()
@setupClipping()
@createHudView() if options.hud
@showLoadingOverlay()
@ -17,6 +18,14 @@ class AsciiIo.PlayerView extends Backbone.View
@rendererView.afterInsertedToDom()
@rendererView.renderSnapshot @options.snapshot
setupClipping: ->
if @options.containerWidth
rendererWidth = @rendererView.elementWidth()
min = Math.min(@options.containerWidth, rendererWidth)
@rightClipWidth = rendererWidth - min
else
@rightClipWidth = 0
createHudView: ->
@hudView = new AsciiIo.HudView(cols: @options.cols)
@ -39,14 +48,19 @@ class AsciiIo.PlayerView extends Backbone.View
onSeekClicked: (percent) ->
@trigger 'seek-clicked', percent
showOverlay: (html) ->
element = $(html)
element.css('margin-right': "#{@rightClipWidth}px") if @rightClipWidth
@$el.append(element)
showLoadingOverlay: ->
@$el.append('<div class="loading">')
@showOverlay('<div class="loading">')
hideLoadingOverlay: ->
@$('.loading').remove()
showPlayOverlay: ->
@$el.append('<div class="start-prompt"><div class="play-button"><div class="arrow">►</div></div></div>')
@showOverlay('<div class="start-prompt"><div class="play-button"><div class="arrow">►</div></div></div>')
hidePlayOverlay: ->
@$('.start-prompt').remove()

@ -10,6 +10,15 @@ class AsciiIo.Renderer.Base extends Backbone.View
@clearState()
requestAnimationFrame @render
width: ->
@cols * @cellWidth
height: ->
@lines * @cellHeight
elementWidth: ->
@$el.outerWidth()
clearState: ->
@state =
changes: {}

@ -12,11 +12,8 @@ class AsciiIo.Renderer.Canvas extends AsciiIo.Renderer.Base
@cursorVisible = true
fixTerminalElementSize: ->
width = @cols * @cellWidth
height = @lines * @cellHeight
@$el.attr('width', width)
@$el.attr('height', height)
@$el.attr('width', @width())
@$el.attr('height', @height())
@setFont()

@ -18,10 +18,7 @@ class AsciiIo.Renderer.Pre extends AsciiIo.Renderer.Base
i++
fixTerminalElementSize: ->
width = @cols * @cellWidth
height = @lines * @cellHeight
@$el.css(width: width + 'px', height: height + 'px')
@$el.css(width: @width() + 'px', height: @height() + 'px')
render: ->
if @state.dirty

@ -96,3 +96,8 @@ div.presentation
.other-asciicasts
margin-top: 70px
.extras
.embed-script
width: 100%
margin: 5px 0

@ -0,0 +1,4 @@
//= require player
body.iframe
background-color: transparent

@ -5,7 +5,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

@ -99,6 +99,12 @@ class AsciicastDecorator < ApplicationDecorator
end
end
def embed_script
src = h.asciicast_url(model, :format => :js)
id = "asciicast-#{id}"
%(<script type="text/javascript" src="#{src}" id="#{id}" async></script>)
end
private
def prepare_lines(lines, width, height)

@ -20,6 +20,7 @@ module AsciicastsHelper
speed: (options[:speed] || params[:speed] || 1).to_f,
benchmark: !!params[:bm],
asciicast_id: asciicast.id,
container_width: params[:container_width],
renderer_class: renderer_class,
auto_play: options.key?(:auto_play) ? !!options[:auto_play] : false,
hud: options.key?(:hud) ? !!options[:hud] : true,

@ -9,6 +9,7 @@
speed: <%= speed %>,
benchmark: <%= benchmark %>,
model: new AsciiIo.Asciicast({ id: <%= asciicast_id %> }),
containerWidth: <%= container_width || 'null' %>,
rendererClass: <%= renderer_class.html_safe %>,
autoPlay: <%= auto_play %>,
hud: <%= hud %>,

@ -1,7 +0,0 @@
<h1>Share</h1>
<ul class="delimited">
<li>
Twitter
</li>
</ul>

@ -0,0 +1,6 @@
h1 Share
ul.delimited
li
' Embed on your page
input[type="text" class="embed-script" value=@asciicast.embed_script data-behavior="auto-select" readonly]

@ -1 +0,0 @@
<%= player @asciicast %>

@ -0,0 +1,11 @@
= player @asciicast
javascript:
$(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 }], '*');
}
});

@ -1,25 +0,0 @@
<section id="presentation" class="feature">
<div class="asciicast-wrapper">
<%= player @asciicast %>
</div>
</section>
<section class="supplimental">
<div class="wrapper">
<div class="main">
<h1><%= @asciicast.title %></h1>
<div class="description">
<%= @asciicast.description %>
</div>
<%= render :partial => 'other_by_user' %>
</div>
<div class="extras">
<%= render :partial => 'author' %>
<%= render :partial => 'actions' %>
<%= render :partial => 'info' %>
</div>
</div>
</section>

@ -0,0 +1,15 @@
section#presentation.feature
.asciicast-wrapper
= player @asciicast
section.supplimental
.wrapper
.main
h1 = @asciicast.title
.description = @asciicast.description
= render :partial => 'other_by_user'
.extras
= render :partial => 'author'
= render :partial => 'actions'
= render :partial => 'info'
= render :partial => 'share'

@ -0,0 +1,36 @@
// ascii.io - embeddable player
(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-iframe-<%= @asciicast.id %>");
if (player) {
player.style.width = data.width;
player.style.height = data.height;
}
}
}
}
function insertAfter(referenceNode, newNode) {
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);
var containerWidth = container.offsetWidth;
container.innerHTML = '<iframe src="http://<%= request.host_with_port %>/a/<%= @asciicast.id %>/raw?container_width=' + containerWidth + '" name="asciicast-iframe-<%= @asciicast.id %>" id="asciicast-iframe-<%= @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>';
}
})();

@ -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,12 @@
doctype html
html[lang="en"]
head
meta[charset="utf-8"]
title = page_title
= stylesheet_link_tag 'embed', :media => 'all'
= javascript_include_tag 'embed'
script
| window.unpackWorkerPath = '#{javascript_path "unpack_worker"}';
window.mainWorkerPath = '#{javascript_path "main_worker"}';
body.iframe
= yield

@ -43,7 +43,7 @@ AsciiIo::Application.configure do
# config.action_controller.asset_host = "http://assets.example.com"
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w( player.css player.js unpack_worker.js main_worker.js )
config.assets.precompile += %w( player.css player.js unpack_worker.js main_worker.js embed.css embed.js )
config.action_mailer.delivery_method = :sendmail

@ -94,6 +94,18 @@ describe AsciicastsController do
it { should be_success }
end
context 'for js request' do
let(:asciicast) { FactoryGirl.build(:asciicast, :id => 666) }
before do
ViewCounter.should_not_receive(:new)
get :show, :id => asciicast.id, :format => :js
end
it { should be_success }
end
end
describe '#edit' do

@ -240,4 +240,14 @@ describe AsciicastDecorator do
describe '#other_by_user' do
pending
end
describe '#embed_script' do
before do
asciicast.stub!(:id => 123)
end
it 'should be an async script tag including asciicast id' do
expect(decorated.embed_script).to match(/^<script[^>]+\b123\b[^>]+><\/script>/)
end
end
end

Loading…
Cancel
Save