diff --git a/README.md b/README.md index 310bb07..e366d6a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ Attentive is a new take on Ruby presentation software. It provides lots of smart things already set up for you: -* A simple slide transition system using a slightly hacked up version of Fathom.js. +* A simple slide transition system written from scratch with no jQuery (oh snap!) * Sass, Compass, and CoffeeScript all plugged into Sprockets and ready to generate your presentation's CSS and JavaScripts. * Pygments for syntax highlighting. * Simple slide syntax, really really similar to how Showoff does it. @@ -19,4 +19,16 @@ Run the presentation that's in the current directory on port 9393. Run the current presentation on another port. +`attentive static` + +Generate a static copy of the presentation and dependent files into `_site`. + Edit `presentation.rb` and start adding `.slides` files in `presentation/`. The files are processed in sort order. + +While the presentation is running: + +* Click a slide, use the spacebar, or the right arrow to advance +* Use the left arrow to go back +* Hit [ Shift ]-T to toggle a timer on and off, then lowercase t to turn it on and off +* Hit \ to reset the timer + diff --git a/lib/assets/javascripts/attentive.js.coffee b/lib/assets/javascripts/attentive.js.coffee index d64b8bf..6d09cc2 100644 --- a/lib/assets/javascripts/attentive.js.coffee +++ b/lib/assets/javascripts/attentive.js.coffee @@ -1,3 +1,56 @@ +class PresentationTimer + constructor: -> + @time = 0 + @el = document.createElement('div') + @el.classList.add('timer') + + this.render() + + render: -> + @el.innerHTML = this.formattedTime() + + start: -> + @_runner = this.runner() + + runner: -> + setTimeout( + => + this.render() + @time += 1 + this.runner() if @_runner? + , 1000 + ) + + stop: -> + clearTimeout(@_runner) + @_runner = null + + reset: -> + this.stop() + @time = 0 + this.render() + + toggle: -> + if @_runner? + this.stop() + else + this.start() + + toggleVisible: -> + @el.classList.toggle('hide') + + isVisible: -> + !@el.classList.contains('hide') + + hide: -> + @el.classList.add('hide') + + formattedTime: -> + minute = "00#{Math.floor(@time / 60)}".slice(-2) + second = "00#{@time % 60}".slice(-2) + + "#{minute}:#{second}" + class this.Attentive @setup: (identifier) -> starter = -> (new Attentive(identifier)).start() @@ -8,6 +61,11 @@ class this.Attentive @priorSlide = null @initialRender = true + @timer = new PresentationTimer() + @timer.hide() + + document.querySelector('body').appendChild(@timer.el) + bodyClassList: -> @_bodyClassList ||= document.querySelector('body').classList @@ -45,10 +103,19 @@ class this.Attentive handleKeyDown: (e) => switch e.keyCode + when 72 + this.advanceTo(0) when 37 this.advance(-1) when 39, 32 this.advance() + when 220 + @timer.reset() + when 84 + if e.shiftKey + @timer.toggleVisible() + else + @timer.toggle() if @timer.isVisible() advance: (offset = 1) => this.advanceTo(Math.max(Math.min(@currentSlide + offset, @length - 1), 0)) @@ -88,8 +155,3 @@ class this.Attentive @initialRender = false - if this.isFile() - setTimeout(this.calculate, 200) - else - this.calculate() - diff --git a/lib/assets/stylesheets/attentive.css.scss b/lib/assets/stylesheets/attentive.css.scss index ab48b5f..d9b7e94 100644 --- a/lib/assets/stylesheets/attentive.css.scss +++ b/lib/assets/stylesheets/attentive.css.scss @@ -5,6 +5,21 @@ body, html { padding: 0; } +.timer { + position: absolute; + top: 10px; + left: 10px; + opacity: 0.5; + + font-size: 30px; + + font-family: Courier New, monospace; + + &.hide { + display: none; + } +} + #slides-container { position: absolute; width: 100%; @@ -64,6 +79,12 @@ body.loading { } } + &.style-smaller { + div.highlight { + font-size: 125%; + } + } + &.style-larger { div.highlight { font-size: 200%;