Countdown. REVISED EDITION!!!!

README.md

Countdown. REVISED EDITION!!!!

This is a fork of ruleb's count down that rended one of the else ifs unreachable in his code. Even though he was notified by menny people he never fixed his code so i took it on to... fix 1 line of code. This Fork may expand if i have the time to re-learn coffie and see if any outher code is broken.

The rest of this readme and the html code and scss is still the orginal by ruleb.

Description

Simple Dashing widget to countdown until a certain moment. Flashes the widget when finished.

##Usage

To use this widget, copy countdown.html, countdown.coffee, and countdown.scss into the /widgets/countdown directory.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-view="Countdown" data-title="GOAL_DISPLAY_NAME" data-end="26-Apr-2013 18:00:00"></div>
</li>

##Preview

countdown.coffee

class Dashing.Countdown extends Dashing.Widget

  ready: ->
    setInterval(@startCountdown, 500)

  startCountdown: =>
    current_timestamp = Math.round(new Date().getTime()/1000)
    end_timestamp = Math.round( Date.parse($(@node).find(".more-info").html())/1000 )
    seconds_until_end = end_timestamp - current_timestamp
    if seconds_until_end < 0
      @set('timeleft', "TIME UP!")
      for i in [0..100] by 1
        $(@node).fadeTo('fast', 0).fadeTo('fast', 1.0)
    else
      d = Math.floor(seconds_until_end/86400)
      h = Math.floor((seconds_until_end-(d*86400))/3600)
      m = Math.floor((seconds_until_end-(d*86400)-(h*3600))/60)
      s = seconds_until_end-(d*86400)-(h*3600)-(m*60)
      if d >0
        dayname = 'day'
        if d > 1
          dayname = 'days'
        @set('timeleft', d + " "+dayname+" " + @formatTime(h) + ":" + @formatTime(m) + ":" + @formatTime(s))
      else
        @set('timeleft', @formatTime(h) + ":" + @formatTime(m) + ":" + @formatTime(s))


  formatTime: (i) ->
    if i < 10 then "0" + i else i

countdown.html

<h2 data-bind="title"></h2>

<h1 data-bind="timeleft" class="countdown-time"></h1>

<p class="before-more-info">ends on:</p>
<p class="more-info" data-bind="end"></p>

countdown.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #dc5945;

// ----------------------------------------------------------------------------
// Widget-clock styles
// ----------------------------------------------------------------------------
.widget-countdown {

  background-color: $background-color;

  h2 { font-size: 2em;}

  h1 { font-size: 2em;}

  .countdown-time {
    margin-top: 10px;
    color: gold;
  }

  .before-more-info {
    font-size: 15px;
    position: absolute;
    bottom: 52px;
    left: 0;
    right: 0;
  }
}