add a timer and update docs

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
+

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()
-

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%;