basic updates to things

attentive.gemspec

@@ -30,5 +30,6 @@ Gem::Specification.new do |gem|
   gem.add_dependency 'pygments.rb'
 
   gem.add_dependency 'thor'
+  gem.add_dependency 'backbone-rails'
 end
 

lib/assets/javascripts/attentive.js.coffee

@@ -1,3 +1,5 @@
+#= require underscore
+#
 class PresentationTimer
   constructor: ->
     @time = 0
@@ -11,6 +13,7 @@ class PresentationTimer
 
   start: ->
     @_runner = this.runner()
+    @el.classList.add('running')
 
   runner: ->
     setTimeout(
@@ -23,6 +26,7 @@ class PresentationTimer
 
   stop: ->
     clearTimeout(@_runner)
+    @el.classList.remove('running')
     @_runner = null
 
   reset: ->
@@ -51,6 +55,28 @@ class PresentationTimer
 
     "#{minute}:#{second}"
 
+class Slide
+  @fromList: (list) ->
+    result = (new Slide(slide) for slide in list)
+
+  constructor: (@dom) ->
+
+  recalculate: =>
+    @dom.style['width'] = "#{window.innerWidth}px"
+
+    currentMarginTop = Number(@dom.style['marginTop'].replace(/[^\d\.]/g, ''))
+    height = (window.innerHeight - @dom.querySelector('.content').clientHeight) / 2
+
+    if height != currentMarginTop
+      @dom.style['marginTop'] = "#{height}px"
+      true
+
+  activate: =>
+    @dom.classList.add('active')
+
+  deactivate: =>
+    @dom.classList.remove('active')
+
 class this.Attentive
   @setup: (identifier) ->
     starter = -> (new Attentive(identifier)).start()
@@ -64,13 +90,15 @@ class this.Attentive
     @timer = new PresentationTimer()
     @timer.hide()
 
+    @currentWindowHeight = null
+
     document.querySelector('body').appendChild(@timer.el)
 
   bodyClassList: ->
     @_bodyClassList ||= document.querySelector('body').classList
 
   allSlides: ->
-    @_allSlides ||= @slidesViewer().querySelectorAll('.slide')
+    @_allSlides ||= Slide.fromList(@slidesViewer().querySelectorAll('.slide'))
 
   slidesViewer: ->
     @_slidesViewer ||= document.querySelector(@identifier)
@@ -83,7 +111,7 @@ class this.Attentive
 
     document.addEventListener('click', @handleClick, false)
     document.addEventListener('keydown', @handleKeyDown, false)
-    window.addEventListener('resize', @calculate, false)
+    window.addEventListener('resize', _.throttle(@calculate, 500), false)
 
     this.advanceTo(this.slideFromLocation())
 
@@ -134,19 +162,29 @@ class this.Attentive
       history.pushState({ index: @currentSlide }, '', @currentSlide)
 
   calculate: =>
-    for slide in @allSlides()
+    if @currentWindowHeight != window.innerHeight
-      slide.style['width'] = "#{window.innerWidth}px"
+      recalculate = true
+      times = 3
 
-      height = (window.innerHeight - slide.querySelector('.content').clientHeight) / 2
+      while recalculate and times > 0
+        recalculate = false
+        times -= 1
 
-      slide.style['marginTop'] = "#{height}px"
+        for slide in @allSlides()
+          recalculate = true if slide.recalculate()
+
+      @currentWindowHeight = window.innerHeight
+
+      @slidesViewer().style['width'] = "#{window.innerWidth * @allSlides().length}px"
 
-    @slidesViewer().style['width'] = "#{window.innerWidth * @allSlides().length}px"
     this.align()
 
+  getCurrentSlide: =>
+    @allSlides()[@currentSlide]
+
   align: =>
-    @allSlides()[@priorSlide].classList.remove('active') if @priorSlide
+    @allSlides()[@priorSlide].deactivate() if @priorSlide
-    @allSlides()[@currentSlide].classList.add('active')
+    this.getCurrentSlide().activate()
 
     @slidesViewer().style['left'] = "-#{@currentSlide * window.innerWidth}px"
 

lib/assets/stylesheets/attentive.css.scss

@@ -19,6 +19,10 @@ body, html {
   &.hide {
     display: none;
   }
+
+  &.running {
+    color: #c00;
+  }
 }
 
 #slides-container {
@@ -51,20 +55,24 @@ body.loading {
       left: 5%;
       width: 90%;
 
+      * {
+        line-height: 105%;
+      }
+
       h1, h2, h3 {
         margin: 0;
       }
 
       h1 {
-        font-size: 5em;
+        font-size: 6.5em;
       }
 
       h2 {
-        font-size: 3em;
+        font-size: 4em;
       }
 
       h3 {
-        font-size: 1.75em;
+        font-size: 2em;
       }
 
       div.highlight {

skel/Gemfile

@@ -1,2 +1,4 @@
+source :rubygems
+
 gem 'attentive'