From 1d9bded8ef70b546f5448ebe0698b36fc027569e Mon Sep 17 00:00:00 2001 From: Marcin Kulik Date: Thu, 22 Mar 2012 21:27:05 +0100 Subject: [PATCH] Move player overlays one level up --- .../javascripts/player/player_view.js.coffee | 24 +++++++-- .../player/renderers/base.js.coffee | 13 ----- app/assets/javascripts/player/vt.js.coffee | 5 ++ app/assets/stylesheets/player.css.scss | 49 ++++++++++--------- 4 files changed, 51 insertions(+), 40 deletions(-) diff --git a/app/assets/javascripts/player/player_view.js.coffee b/app/assets/javascripts/player/player_view.js.coffee index a5b1325..141e7d8 100644 --- a/app/assets/javascripts/player/player_view.js.coffee +++ b/app/assets/javascripts/player/player_view.js.coffee @@ -1,4 +1,6 @@ class AsciiIo.PlayerView extends Backbone.View + events: + 'click .start-prompt': 'onStartPromptClick' initialize: (options) -> @movie = new AsciiIo.Movie( @@ -21,13 +23,17 @@ class AsciiIo.PlayerView extends Backbone.View createChildViews: -> @$el.append(@rendererView.$el) @rendererView.afterInsertedToDom() - @rendererView.showLoadingIndicator() + @showLoadingIndicator() @hudView = new AsciiIo.HudView() @$el.append(@hudView.$el) + onStartPromptClick: -> + @hideToggleOverlay() + $(@rendererView.el).click() + onMovieLoaded: (asciicast) -> - @rendererView.hideLoadingIndicator() + @hideLoadingIndicator() @hudView.setDuration(asciicast.get('duration')) @bindEvents() @@ -35,7 +41,7 @@ class AsciiIo.PlayerView extends Backbone.View if @options.autoPlay @movie.play() else - @rendererView.showToggleOverlay() + @showToggleOverlay() bindEvents: -> @rendererView.on 'terminal-click', => @@ -65,3 +71,15 @@ class AsciiIo.PlayerView extends Backbone.View @movie.on 'movie-finished', => @rendererView.stopCursorBlink() @hudView.setProgress(100) + + showLoadingIndicator: -> + @$el.append('
') + + hideLoadingIndicator: -> + @$('.loading').remove() + + showToggleOverlay: -> + @$el.append('
') + + hideToggleOverlay: -> + @$('.start-prompt').remove() diff --git a/app/assets/javascripts/player/renderers/base.js.coffee b/app/assets/javascripts/player/renderers/base.js.coffee index f91f8e7..cea166d 100644 --- a/app/assets/javascripts/player/renderers/base.js.coffee +++ b/app/assets/javascripts/player/renderers/base.js.coffee @@ -10,7 +10,6 @@ class AsciiIo.Renderer.Base extends Backbone.View onClick: -> @trigger('terminal-click') - @hideToggleOverlay() render: (changes, cursorX, cursorY) -> for n, fragments of changes @@ -22,18 +21,6 @@ class AsciiIo.Renderer.Base extends Backbone.View afterInsertedToDom: -> - showLoadingIndicator: -> - @$el.append('
') - - hideLoadingIndicator: -> - @$('.loading').remove() - - showToggleOverlay: -> - @$el.append('
') - - hideToggleOverlay: -> - @$('.start-prompt').remove() - showCursor: (show) -> throw '#showCursor not implemented' diff --git a/app/assets/javascripts/player/vt.js.coffee b/app/assets/javascripts/player/vt.js.coffee index e2b02c2..492e3a9 100644 --- a/app/assets/javascripts/player/vt.js.coffee +++ b/app/assets/javascripts/player/vt.js.coffee @@ -379,5 +379,10 @@ class AsciiIo.VT @buffer.setCharset('special') +# References: +# http://en.wikipedia.org/wiki/ANSI_escape_code +# http://ttssh2.sourceforge.jp/manual/en/about/ctrlseq.html +# http://real-world-systems.com/docs/ANSIcode.html # http://www.shaels.net/index.php/propterm/documents # http://manpages.ubuntu.com/manpages/lucid/man7/urxvt.7.html +# http://vt100.net/docs/vt102-ug/chapter5.html diff --git a/app/assets/stylesheets/player.css.scss b/app/assets/stylesheets/player.css.scss index 5bd9927..2a131dd 100644 --- a/app/assets/stylesheets/player.css.scss +++ b/app/assets/stylesheets/player.css.scss @@ -49,30 +49,6 @@ $color5: #EDC951; color: #ccc; cursor: pointer; - .loading { - background-image: url(image-path('loader.gif')); - background-repeat: no-repeat; - background-position: center; - z-index: 10; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - - .start-prompt { - background-image: url(image-path('play-button-1.png')); - background-repeat: no-repeat; - background-position: center; - z-index: 20; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - .line { /* background-color: black;*/ /* padding: 0;*/ @@ -88,6 +64,31 @@ $color5: #EDC951; } } + .loading { + background-image: url(image-path('loader.gif')); + background-repeat: no-repeat; + background-position: center; + z-index: 10; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + .start-prompt { + background-image: url(image-path('play-button-1.png')); + background-repeat: no-repeat; + background-position: center; + z-index: 20; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + cursor: pointer; + } + .hud { background-color: #333; opacity: 0;