Countdown clock

counter.coffee

class Counter
  currentdate:new Date()
  enddate:{}
  time:{}
  timedif:0
  timer:0
  clck:".count"
  dom:{
    days:"#days",
    hours:"#hours",
    mins:"#mins",
    secs:"#secs"
  }

  constructor:(date, dom)->
    @enddate = new Date(date)
    @dom = dom if dom
    @timedif = @timeDiff()
    @setCountdown()
    @formatCount()
    @timerStart()
    

  addDays:(d)->
    days = d + @pluralize(d, "day")
    $(@dom.days).html(days)

  addHours:(h)->
    hours = @twodigits(h) + @pluralize(h, "hour")
    $(@dom.hours).html(hours)

  addMinutes:(m)->
    mins = @twodigits(m) + @pluralize(m, "min")
    $(@dom.mins).html(mins)

  addSeconds:(s)->
    secs = @twodigits(s) + @pluralize(s, "sec")
    $(@dom.secs).html(secs)

  makeClickable:(url)->
  
    $("body").on 'click', @clck, ->
      window.location = url if url


  formatCount:()->
     @addDays(@time.days)
     @addHours(@time.hours)
     @addMinutes(@time.mins)
     @addSeconds(@time.secs)


  pluralize:(n, txt)->
    t = txt
    t += if n > 1 then "s" else  ""
    return "<span>"+t+"</span>"


  setCountdown:()->
    diff = @timedif
    secs = Math.floor diff/1000
    mins = Math.floor secs/60
    hours = Math.floor mins/60
    days = Math.floor hours/24

    hours %= 24;
    mins %= 60;
    secs %= 60;


    @time = {
      days:days,
      hours:hours,
      mins:mins,
      secs:secs
    }



  setDate:()->
    @currentdate = new Date()
    # console.log "Date", @currentdate

  ticktock:(t)->
    @setDate() 
    @timedif = @timeDiff()
    @setCountdown()

    if @timedif <= 0
      
      @timerStop()
      
      @time = {
        days:0,
        hours:0,
        mins:0,
        secs:0
      }

    @formatCount()



  timeDiff:()->
    # $("#debug").html @enddate.getTime() + ":" +@currentdate.getTime()
    @timedif = Math.abs @enddate.getTime() - @currentdate.getTime()

    @timedif

  timerStart:()->
    t = this
    @timer = window.setInterval -> 
      t.ticktock()
    , 1000



  timerStop:()->
    window.clearInterval(@timer)

  twodigits:(d)->
    return if d.toString().length < 2 then "0"+d else d


@gll = window.gll ? {}
@gll.Counter = Counter

$(document).ready ->
  if $("#counter").length > 0
    @counter = new gll.Counter("July 27, 2013 9:00 AM")
    @counter.makeClickable("/copper_box")

counter_spec..coffee

describe "Countdown Clock", ->

  beforeEach ->
    @countobj = new gll.Counter("2013-4-27 12:00")
    @countobj.currentdate = new Date("2013-4-25 12:00")
    @aday = (1000 * 60 * 60 * 24)
    @ahour = (1000 * 60 * 60)
    @amin = (1000 * 60)
    @asec = (1000) 

  it "Sets current date", () ->
    expect(@countobj.currentdate).toBeDefined()

  it "Sets end date", () ->
    expect(@countobj.enddate).toBeDefined()

  describe "Works out remaining days, hours, mins, secs", ->

    it "Will work out timediff", ->
      td = @countobj.timeDiff()
      expect(td).toEqual(@aday * 2)

    it "should return time left object", ->
      @countobj.timedif = @aday + @ahour + @amin + @asec
      # spyOn(@countobj, 'timeDiff').andReturn(t)

      @countobj.setCountdown()

      cd = @countobj.time
      expect(cd.days).toEqual(1)
      expect(cd.hours).toEqual(1)
      expect(cd.mins).toEqual(1)
      expect(cd.secs).toEqual(1)

  describe "add utilities", ->
    it 'should pluralize', ->
      plural = @countobj.pluralize(1, "text")
      expect(plural).toMatch("<span>text</span>")

      plural = @countobj.pluralize(2, "text")
      expect(plural).toMatch("<span>texts</span>")

    it 'should add two digits', ->
      digits = @countobj.twodigits(1)
      expect(digits).toMatch("01")

      digits = @countobj.twodigits(10)
      expect(digits).toMatch("10")


  describe "adds countdown to dom", ->

    beforeEach ->
      loadFixtures("countdown")
      @countobj.time = {days:1, hours:2, mins:3, secs:4}

    it "should add days to dom", ->
      @countobj.addDays(2)
      expect($("#days")).toHaveHtml("2<span>days</span>")

      @countobj.addDays(1)
      expect($("#days")).toHaveHtml("1<span>day</span>")


    it "should add hours to dom", ->
      @countobj.addHours(10)
      expect($("#hours")).toHaveHtml("10<span>hours</span>")

      @countobj.addHours(1)
      expect($("#hours")).toHaveHtml("01<span>hour</span>")

    it "should add minutes to dom", ->
      @countobj.addMinutes(10)
      expect($("#mins")).toHaveHtml("10<span>mins</span>")

      @countobj.addMinutes(1)
      expect($("#mins")).toHaveHtml("01<span>min</span>")

    it "should add secs to dom", ->
      @countobj.addSeconds(10)
      expect($("#secs")).toHaveHtml("10<span>secs</span>")

      @countobj.addSeconds(1)
      expect($("#secs")).toHaveHtml("01<span>sec</span>")

    it "should add all to the DOM", ->
      @countobj.formatCount()
      expect($("#days")).toHaveHtml("1<span>day</span>")
      expect($("#hours")).toHaveHtml("02<span>hours</span>")
      expect($("#mins")).toHaveHtml("03<span>mins</span>")
      expect($("#secs")).toHaveHtml("04<span>secs</span>")

  describe "the countdown functionality", ->

    beforeEach ->
      jasmine.Clock.useMock()
      @countobj.timerStart()

    afterEach ->
      window.clearInterval(@countobj.timer)
      

    describe "Time start and stops correctly", ->
      beforeEach ->
        spyOn(@countobj, 'ticktock').andCallThrough()
        spyOn(@countobj, 'timerStop').andCallThrough()
      

      it "checks tick tock called after a second", ->
        expect(@countobj.ticktock).not.toHaveBeenCalled()
        jasmine.Clock.tick(1001)
        expect(@countobj.ticktock).toHaveBeenCalled()
        expect(@countobj.timerStop).not.toHaveBeenCalled()

      it "Stops timer ", ->
        spyOn(@countobj, 'timeDiff').andCallFake ->
          return 0

        jasmine.Clock.tick(1001)
        expect(@countobj.timerStop.calls.length).toEqual(1)

        
    describe "time change", ->
      beforeEach ->
        @countobj.time = {days:1, hours:1, mins:1, secs:1}

      it "checks secs change over time", ->
        t = @aday + @ahour + @amin
        spyOn(@countobj, 'timeDiff').andReturn(t)

        expect(@countobj.time.secs).toEqual(1)
        jasmine.Clock.tick(1001)
        expect(@countobj.time.secs).toEqual(0)


      it "checks mins change over time", ->
        t = @aday + @ahour + @amin - @asec
        spyOn(@countobj, 'timeDiff').andReturn(t)

        jasmine.Clock.tick(1001)
        expect(@countobj.time.secs).toEqual(59)
        expect(@countobj.time.mins).toEqual(0)

      it "checks hours change over time", ->
        t = @aday + @ahour - @amin
        spyOn(@countobj, 'timeDiff').andReturn(t)

        jasmine.Clock.tick(1001)
        expect(@countobj.time.mins).toEqual(59)
        expect(@countobj.time.hours).toEqual(0)

      it "checks days change over time", ->
        t = @aday - @ahour
        spyOn(@countobj, 'timeDiff').andReturn(t)

        jasmine.Clock.tick(1001)
        expect(@countobj.time.hours).toEqual(23)
        expect(@countobj.time.days).toEqual(0)

    describe "Makes countdown clock clickable", ->

      beforeEach ->
        loadFixtures("countdown")
        @countobj.clck = ".count"
        @clickEvent = spyOnEvent '.count', 'click'
        @countobj.makeClickable()

      it "should set click event", ->
        expect(@clickEvent).not.toHaveBeenTriggered()
        $('.count').click()
        expect(@clickEvent).toHaveBeenTriggered()