Archives/asciinema.org
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Center overlays according to viewport/container width

Browse Source
This commit is contained in:
Marcin Kulik 2013-06-12 23:50:31 +02:00
parent e182cce8ee
commit f0b66b6399
5 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/player/abstract_player.js.coffee
View File

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

18
app/assets/javascripts/player/views/player_view.js.coffee
View File

@ -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.$el.outerWidth()
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()

1
app/helpers/asciicasts_helper.rb
View File

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

1
app/views/asciicasts/_player.html.erb
View File

@ -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 %>,

8
app/views/asciicasts/show.js.erb
View File

@ -19,16 +19,18 @@
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
window.addEventListener("message", receiveSize, false);
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.innerHTML = '<iframe src="http://<%= request.host_with_port %>/a/<%= @asciicast.id %>/raw" 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>';
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>';
}
})();