peelman · November 4, 2015 17:59 · Apr 15, 2013 · Apr 10, 2013 · Apr 10, 2013
diff --git a/countdown.coffee b/countdown.coffee
@@ -7,11 +7,12 @@ class Dashing.Countdown extends Dashing.Widget
     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
+    if seconds_until_end < 3600
+      $(@node).parent().remove()
+    else if seconds_until_end < 0
       @set('timeleft', "TIME UP!")
       for i in [0..100] by 1
         $(@node).fadeTo('fast', 0).fadeTo('fast', 1.0)
-      return
     else
       d = Math.floor(seconds_until_end/86400)
       h = Math.floor((seconds_until_end-(d*86400))/3600)

diff --git a/README.md b/README.md
@@ -15,4 +15,4 @@ To include the widget in a dashboard, add the following snippet to the dashboard
 
 ##Preview
 
-TODO
+![](http://s13.postimg.org/zc1c0wvbb/countdown.png)
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+## Description
+
+Simple [Dashing](http://shopify.github.com/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
+
+TODO
diff --git a/countdown.coffee b/countdown.coffee
@@ -0,0 +1,30 @@
+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)
+      return
+    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
diff --git a/countdown.html b/countdown.html
@@ -0,0 +1,6 @@
+<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>
diff --git a/countdown.scss b/countdown.scss
@@ -0,0 +1,29 @@
+// ----------------------------------------------------------------------------
+// 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;
+  }
+}
No results found