basic updates to things

This commit is contained in:
John Bintz 2012-02-20 16:53:48 -05:00
parent fdae3d033e
commit f3a48c4ec6
4 changed files with 61 additions and 12 deletions

View File

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

View File

@ -1,3 +1,5 @@
#= require underscore
#
class PresentationTimer class PresentationTimer
constructor: -> constructor: ->
@time = 0 @time = 0
@ -11,6 +13,7 @@ class PresentationTimer
start: -> start: ->
@_runner = this.runner() @_runner = this.runner()
@el.classList.add('running')
runner: -> runner: ->
setTimeout( setTimeout(
@ -23,6 +26,7 @@ class PresentationTimer
stop: -> stop: ->
clearTimeout(@_runner) clearTimeout(@_runner)
@el.classList.remove('running')
@_runner = null @_runner = null
reset: -> reset: ->
@ -51,6 +55,28 @@ class PresentationTimer
"#{minute}:#{second}" "#{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 class this.Attentive
@setup: (identifier) -> @setup: (identifier) ->
starter = -> (new Attentive(identifier)).start() starter = -> (new Attentive(identifier)).start()
@ -64,13 +90,15 @@ class this.Attentive
@timer = new PresentationTimer() @timer = new PresentationTimer()
@timer.hide() @timer.hide()
@currentWindowHeight = null
document.querySelector('body').appendChild(@timer.el) document.querySelector('body').appendChild(@timer.el)
bodyClassList: -> bodyClassList: ->
@_bodyClassList ||= document.querySelector('body').classList @_bodyClassList ||= document.querySelector('body').classList
allSlides: -> allSlides: ->
@_allSlides ||= @slidesViewer().querySelectorAll('.slide') @_allSlides ||= Slide.fromList(@slidesViewer().querySelectorAll('.slide'))
slidesViewer: -> slidesViewer: ->
@_slidesViewer ||= document.querySelector(@identifier) @_slidesViewer ||= document.querySelector(@identifier)
@ -83,7 +111,7 @@ class this.Attentive
document.addEventListener('click', @handleClick, false) document.addEventListener('click', @handleClick, false)
document.addEventListener('keydown', @handleKeyDown, false) document.addEventListener('keydown', @handleKeyDown, false)
window.addEventListener('resize', @calculate, false) window.addEventListener('resize', _.throttle(@calculate, 500), false)
this.advanceTo(this.slideFromLocation()) this.advanceTo(this.slideFromLocation())
@ -134,19 +162,29 @@ class this.Attentive
history.pushState({ index: @currentSlide }, '', @currentSlide) history.pushState({ index: @currentSlide }, '', @currentSlide)
calculate: => 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() this.align()
getCurrentSlide: =>
@allSlides()[@currentSlide]
align: => 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" @slidesViewer().style['left'] = "-#{@currentSlide * window.innerWidth}px"

View File

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

View File

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